Hvordan Cut og kart grafikk for Web Design

Web-design er en fin måte å utvide din profil og øke inntekten som grafisk designer. Men hvis du er en grafisk designer å bryte inn i web-design, må du klippe og kartlegge grafikk som passer weblayouter. Mens designe for web ligner på print og annen digital design, er det noen spesifikke aspekter å huske på å sørge for at nettstedet layout er klar for utbygging.

Bruksanvisning

1 Opprett et nytt lerret i Photoshop ved å klikke på "File" og "New". Skriv inn en tittel for malen, en bredde på 1200 piksler, en høyde på 600 piksler og en oppløsning på 180 DPI. Modusen bør være "RGB farge", og innholdet kan merkes som "hvit." Klikk "OK."

2 Lag guider på lerretet for å gi retningslinjer for layout. Klikk på "Vis" i menylinjen øverst, etterfulgt av "New Guide." Sørg for at "Vertical" er avmerket og skriv "120px" inn i "Position" boksen. Gjenta dette trinnet, unntatt type "1080px" inn i "Position" boksen.

3 Du bør ha to guider på lerretet. Guidene opprette en 960-pixel boksen, som er en populær bredde for web design. Alt utenom disse guidene bør vurderes bakgrunnsbilder bare. Lag din design.

4 Lag guider rundt dine hoveddeler, som header, navigasjon og bunntekst, ved å holde nede venstre museknapp på linjalen og dra. Plasser guider rundt hver grafikk separat, rundt hver grafikk med en boks.

Hvis du ikke ser for retten, sørge for at "linjaler" er sjekket under "Vis".

5 Flat ut biletet ved å gå til "Layer" og "Flat ut biletet." Ikke ta aspekter av design som vil bli laget med HTML eller CSS, for eksempel menyelementer eller brødtekst. Men hvis du vil at disse elementene være grafikken i JPG-format, inkludere dem i den flate bildet.

6 Velg beskjæringsverktøyet. Beskjære hvert enkelt punkt ved å holde nede venstre museknapp og dra boksen for å passe til de guidene du har opprettet. For eksempel, hvis du opprettet en overskrift, beskjære alt utenom overskriften bruker beskjæringsverktøyet.

7 Klikk "Fil" og "Lagre for Web." Velg JPG-format og klikk på "Lagre".

Du kan justere kvaliteten på JPG før du lagrer for å redusere størrelsen på bildet, som ytterligere reduserer nettsiden lastetiden.

8 Klikk på "Edit" og "skritt bakover" for å gå tilbake til det opprinnelige bildet, i full størrelse. Gjenta trinn 6 og 7 for hver enkelt grafisk.

9 Du har nå ditt nettsted grafikk klar for koding. Gi webutvikler med den opprinnelige flate JPG, sammen med hver av websidene-klar grafikk. Den opprinnelige flatet bildet vil tillate webutvikler for å se den generelle designen, men reduserer tiden kutte bildene og kartlegge design.

Hint

• Navn hver grafikk i henhold til sin bruk i design. For eksempel kan navigasjonselementene bli kalt "nav1.jpg", "nav2.jpg" og "nav3.jpg." Bunnteksten grafikken kan kalles "footer.jpg." Dette vil bidra til at utbygger får grafikken som trengs for kodingen.
• Sammen med hvert kutt grafisk, gi dimensjonene. Det vil hjelpe utbygger i kodingen prosessen. For eksempel kan du skrive "footer.jpg = 960 x 120 piksler." Ikke ta det i filnavnet; bare si det i en e-post eller et dokument.