Forbereder en Illustrasjon for Web
16 juni 2008 ved chriscoyier · 3 Kommentarer
Illustrasjon er en herlig trend i webdesign. Den passer mediet godt. Flott Illustratører skjønt, trenger ofte ikke tenker i forhold til nettet når de gjør sine illustrasjoner. Ta en titt på denne veldig fin himmel / hill bybildet illustrasjon jeg fant på Shutterstock:
Jeg tror denne illustrasjonen ville gjøre en flott base for en web-design, men klart det ikke er klargjort for en slik oppgave out-of-the-box. La oss gjøre noen manipulasjon og forberede den på nettet.
Få det inn i Photoshop
Det er fantastisk at illustrasjonen er vektor. Det betyr at vi kan gjøre det uansett størrelse må vi uten tap av kvalitet. Vårt mål vil være å gjøre denne scenen sitter i toppen sentrum av nettleseren, så la oss få det inn i Photoshop ved maksimal med av hovedinnholdet delen av vår nettside. Say, 960px. Lag en ny Photoshop-dokument 960px bredt og høyere enn den trenger å være å passe.
Åpne illustrasjon i Adobe Illustrator og Merk alt. Kopier og lim inn i Photoshop-dokument. Sørg for å lime det som et smart objekt. Dette vil la det beholde det vektor naturen, slik at du upscale det uten å miste kvalitet. Det kan komme over så altfor liten. Ingen bekymring der, bare skalere det opp til å passe inn i 960px bred dokumentet.
Utvide Edges
Nettleservinduer er ikke fast bredde miljøer som Photoshop dokumenter. Vi trenger å forberede våre illustrasjon å se hyggelig når nettleservinduet er bredere enn vår base 960px. La oss gå videre og øke lerretet bredden på dokumentet vår 1280px slik at vi har litt plass å jobbe med.
Vårt mål her er å ha den kanten av denne illustrasjonen ende i noe som vil være horisontalt repeterbare. Personen slicing opp dette dokumentet vil trenge noe sånt som dette å gjøre dette designarbeid for web. Til syvende og sist dette slice vil være bakgrunnen for <body> element av websiden, med våre viktigste illustrasjon sitter på toppen.
Jeg tar en liten sliver av den høyre kanten av denne illustrasjonen og "flyter" det opp på sin egen nytt lag (Kommando-J).
Nå kan vi Free Transform denne nye lite stykke (Kommando-T) og utvide den horisontalt ut begge sider av dokumentet. Fordi gradienter ble opprettet fin og vertikal, fungerer denne utvidelsen pent utenfor høyre side. Den høyre side selv, ser altfor brå, med bakken, som bush og vei avskåret plutselig.
Skjule Transition
Snarere enn å gjøre noe for fancy og prøver å slå sammen disse to lagene sammen, la oss obskure at harde overgang ved å plassere en forgrunnsobjektet direkte over toppen. Denne illustrasjonen kan gjøre med litt ekstra dybde uansett.
Denne vektoren postboks vil gjøre pent.
Slett alt unntatt postkassen selv og lime den inn i illustrasjonen som et smart objekt akkurat som vi plasserte den opprinnelige illustrasjonen. En liten endring av størrelse og plassering, og vi har den perfekte element for å skjule overgangen i bakgrunn.
Hovedinnholdet området
Vår illustrasjon kommer til å gjøre for en nydelig header og bakgrunn, men for det faktiske innholdet på nettstedet, trenger vi en slags stor blokk med hvitt. Lar slippe en hvit avrundet rektangel til høyre på toppen med litt av en skygge å sette den av.
Fylle ut Bottom
Med den horisontale kanten nå pent skjult, kan vi fylle ut fargen på resten av bunnen av nettstedet mockup. Eksempel på en farge (med pipetteverktøyet verktøyet) fra måten bunnen mest piksel av illustrasjonen og deretter fylle vår nederste tomt lag med denne nye fargen.
Dette hovedinnhold området er nå kommer til å bli en lek for enhver anstendig webdesigneren å skjære opp.
Endelig Touches
Kast en fin liten velkomstmelding opp på himmelen og vi har oss selv en hyggelig ser illustrert web mockup. Fordi vi har nøye tatt vare på både horisontale utvidelsesmuligheter og vertikale utvidelsesmuligheter, er denne illustrasjonen nå perfekt for konvertering til ekte web markup.
Følg med på CSS-triks hvor jeg skal konvertere dette til en ekte nettside i de neste ukene.
Hvorfor bruke Photoshop for denne oppgaven i det hele tatt?
Hvorfor ikke bruke photoshop? Photoshop er et godt verktøy for bilder for web, ikke for vektorer som dette bildet, men god en for oppsett (tutorial idé).
Takk for tipset! Photoshop er magi!