TransOnline-bloggen: Språk, skriving og e-publisering

Lag skisser til websider i Photoshop

with one comment

Er du blant dem som går rett løs på CSS- og HTML-kodingen når du skal lage en webside, eller lager du en elektronisk skisse først?

Hvis det er en privatside du lager, har du kanskje tid til endeløs prøving og feiling og omskriving av koder. Får du derimot i oppgave å lage websider for en kunde, er tid penger, og du har en tidsfrist å forholde deg til. Kunden ber gjerne om å få et første utkast ganske raskt. En rask og enkel løsning er å lage en skisse i Photoshop før du skriver så mye som en kode:

1. Start med å ta en skjermdump av en tom side i nettleseren. Det gjør du ved å skrive «about:blank» på adresselinjen for å åpne en ny, tom side. Deretter trykker du på Print Screen-tasten.

2. Velg Fil > Ny i Photoshop. Du ser at de faktiske sidemålene allerede er lagt inn i Bredde- og Høyde-boksen. La gjerne bakgrunnsinnholdet være hvitt, og trykk på OK.

3. Velg Rediger > Lim inn. Du har nå et arbeidsunderlag:

Skisse til webside

4. Sett inn logo, skriv inn tekst, lag fargede ruter, alt på hvert sitt lag, slik at du kan bearbeide hvert element på siden uavhengig av de andre. Bruk lagpaletten i Photoshop til å legge til nye lag (ikonet ved siden av papirkurven nederst til høyre på paletten), vise og skjule lag (øyeikonet). Flytt designelementene rundt om på skjermen for å finne ut hvor de passer best. Lagre som en Photoshop-fil (PSD), så har du skissen for hånden.

Lagpaletten og tilhørende bilde:

Lagpaletten i Photoshop

Skisse til webside

Arbeidet med de faktiske sidene går utrolig mye raskere når du har gode skisser som underlag. I eksemplene ovenfor har jeg brukt Internet Explorer. Lag skisser både i Explorer, Opera og Firefox mens du er i gang.

Written by Solveig Hansen

17.12.2006 kl. 19:55

Publisert i Webdesign

Én kommentar

Subscribe to comments with RSS.

  1. Jeg vett artikkelen er gammel, men bør oppdateres. Når jeg selv lager deisgner nettsider lager jeg alt i photoshop uten noen browser, så tar jeg og koder det over til (x)HTML og CSS noe jeg personligt mener er mye mer praktisk.

    Christian

    29.4.2008 at 19:43


Hva mener du?

Fyll inn i feltene under, eller klikk på et ikon for å logge inn:

WordPress.com-logo

Du kommenterer med bruk av din WordPress.com konto. Logg ut / Endre )

Twitter picture

Du kommenterer med bruk av din Twitter konto. Logg ut / Endre )

Facebookbilde

Du kommenterer med bruk av din Facebook konto. Logg ut / Endre )

Google+ photo

Du kommenterer med bruk av din Google+ konto. Logg ut / Endre )

Kobler til %s

%d bloggers like this: