Slik konverterer Photoshop mockup til HTML Web

March 22

Photoshop er et utmerket verktøy for å lage prototyper på nettsteder. Når det er på tide å distribuere mockup, ville det være fint å bare klikke på en knapp og ta prototype levende. Imidlertid er Photoshop strengt tatt et grafikk program uten HTML evner. Heldigvis eksportere mockup til en Web-vennlig grafikk format som JPEG eller GIF, og bygge en webside som bruker disse elementene er grei. Husk at du må gjøre mer arbeid på HTML-side for å lage interaktive komponenter som linker, menyer og pop-ups. Mulighetene for interaktivitet er uendelige, så penselen på HTML og CSS.

Bruksanvisning

Grunnleggende

1 Åpne mockup i Photoshop og eksporterer det til et web-vennlig bildeformat. Velg "Lagre for Web og enheter" fra "Fil" -menyen. I dialogboksen velger du et filformat som JPEG, GIF eller PNG og velge en bildekvalitet.

2 Klikk "Lagre" og navngi filen (for eksempel myMockup.jpg)

3 Åpne HTML editor og opprette en ny HTML-fil. HTML redaktører som Dreamweaver vil skape skjelettet websiden for deg.

4 Legg til et bilde tag inne i <body> element av websiden. Bildet koden vil se omtrent slik ut: <img src = "myMockup.jpg" />

5 Lagre HTML-fil, og deretter laste det inn hvilken som helst nettleser.

Hint

Hvis du mottok Photoshop som en del av Adobe Creative Suite (CS2 eller senere), er Dreamweaver inkludert for å lage HTML-sider.
Plasser grensesnittelementer som knapper i sine egne lag og eksportere dem separat.
Du kan lage animasjoner i Photoshop ved hjelp av animasjonspanelet. Sørg for å eksportere dem som animerte GIF-filer.
Store grafikkfiler kan bremse lasting av websiden. For å forbedre hastigheten som websiden din laster, velge laveste bildekvalitet du kan uten å redusere bilde.