Klargjøre en illustrasjon for Web
16 juni 2008 av chriscoyier · 3 Kommentarer 
Tegningen er en fin trend i webdesign. Det passer middels godt. Great ILLUSTRATØRER skjønt, har ofte ikke tenker i forhold til nettet når de gjør sine illustrasjoner. Ta en titt på denne veldig fin himmel / bakke bybildet illustrasjon jeg fant på Shutterstock:
Jeg tror denne illustrasjonen ville lage et flott utgangspunkt for en web-design, men klart det er ikke forberedt på en slik oppgave out-of-the-box. Lar 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. Målet vil være å gjøre denne scenen sitter i øverst i nettleseren, så la oss få det inn i Photoshop på maksimalt med til hovedinnholdet areal på vår nettside. Si, 960px. Lag en ny Photoshop-dokument 960px bredt og høyere enn den må passe.
Åpne illustrasjonen i Adobe Illustrator og Select All. Kopier og Lim inn i Photoshop dokument. Sørg for å lime det inn som et Smart Object. Dette vil la dem beholde den vektor naturen, slik at du kan oppskalere det uten å miste kvalitet. Det kan komme over som for lite. Ingen bekymring der, bare skalere det opp til å passe inn i 960px bredt dokumentet.
Utvide Edges
Nettleservinduer er ikke fast bredde miljøer som Photoshop dokumenter. Vi må forberede våre illustrasjonen for å se fin når nettleseren er bredere enn vår base 960px. La oss gå videre og øke bredden på lerretet dokumentet vår 1280px slik at vi har litt plass å jobbe med.
Målet her er å ha kanten av denne illustrasjonen ende i noe som vil være horisontalt repeterbar. Personen slicing opp dette dokumentet vil trenge noe som dette for å gjøre dette arbeidet design for web. Til syvende og sist denne del vil være bakgrunnen for <body> elementet på websiden, med våre viktigste illustrasjon sitter på toppen.
Jeg tar en liten sliver i høyre kant av denne illustrasjonen og "flyter" det opp på sin egen nye laget (Kommando-J).
Nå kan vi Free Transform dette nye lille skive (Kommando-T) og utvide den horisontalt av begge sider av dokumentet. Fordi gradients ble opprettet fin og vertikalt, fungerer denne utvidelsen pent utenfor høyre side. Høyre om, ser altfor brå, med bakken, busk og veien blir kuttet plutselig.
Skjule de Transition
Heller enn å gjøre alt for fancy, og prøv å slå sammen disse to lagene sammen, la oss obskure at tøffe overgangen ved å plassere en forgrunnen objekt rett over toppen. Denne illustrasjonen kan gjøre med litt ekstra dybde uansett.
Denne vektoren postkassen vil gjøre pent.
Slett alt unntatt postkassen selv og lime den inn i illustrasjonen som et Smart Object akkurat som vi plasserte den opprinnelige illustrasjonen. Litt endre størrelse og plassering, og vi har det perfekte element for å skjule overgangen i bakgrunn.
Hovedinnholdet Område
Vår illustrasjon skal lage for en herlig header og bakgrunn, men for det faktiske innholdet på nettstedet, vi trenger en slags stor blokk av hvit. Lar slippe en hvit avrundet rektangel til høyre på toppen med litt skyggelegging å sette den av.
Fylle ut Bunn
Med horisontale kanten nå pent tilsløret, kan vi fylle ut fargen på resten av bunnen på nettsiden mockup. Eksempel på en farge (med dråpetellerverktøyet verktøyet) fra veien bunnen mest piksel i illustrasjonen og fyll våre nederste tomt lag med ny farge.
Dette hovedinnholdet området nå skal være en lek for enhver anstendig webdesigner å dele opp.
Final Touches
Kast en fin liten velkomstmelding opp på himmelen og vi har selv en hyggelig ser illustrert web mockup. Fordi vi har tankefullt tatt vare på både horisontale og vertikale utvidelsesmulighet utvidelsesmuligheter, er dette illustrasjon nå perfekt for konvertering til ekte web markup.
Følg med på CSS-triks hvor jeg skal konvertere dette til en skikkelig nettside i de neste ukene.
Hvorfor bruke Photoshop for denne oppgaven i det hele tatt?
Hvorfor ikke bruke photoshop? Photoshop er et godt redskap for bilder for web, ikke for vektorer som dette bildet, men bra for oppsett (veiledning idé).
Takk for tips! Photoshop er magi!