Hvordan lage en enkel Web Layout i Adobe Photoshop CS

Personlige nettsteder er ikke lenger uvanlig i World Wide Web. Folk opprette og administrere sine egne nettsteder for omtrent alt; virksomheten, hobbyer, kunstverk, etc. En flott verktøy som brukes til å utforme tilpassede nettsteder er Adobe Photoshop. Brukerne er i stand til å skape et bilde som kan brukes som bakgrunn layout for deres hjemmeside og enkelt konvertere et bilde av en nettside til en fullt fungerende HTML-side. Photoshop er et verktøy for valg blant webdesignere, og med noen enkle grep kan du lære å utnytte noen kraftige evner til å designe dine egne nettsteder.

Bruksanvisning

1 Åpne opp Adobe Photoshop og lage et tomt dokument med en oppløsning på minst 800 piksler x 600 piksler. Skriv inn 72 piksler / tomme som verdien for resolusjonen.

2 Design din web layout. Bruk fantasien, eller ta inspirasjon fra et nettsted som du beundrer. Begynn med å velge en bakgrunnsfarge og fylling i lerret med maling bøtte verktøyet (hurtigtast G). Sette inn bilder og design for å skreddersy siden din med en tilpasset utseende.

Husk de grunnleggende komponentene i en fungerende nettside. Sørg for å inkludere områder for et navigasjonsfelt, et hoved plass for teksten, samt en slags tittel banner til nettsiden din. Hvis du planlegger å plassere widgets innebygd på sidene dine, sørg for å la det være plass for det også.

3 Skjær opp ditt nettsted layout. Når du er ferdig med å designe din webside, må du bruke Slice verktøy (K) for å dele opp komponentene på siden din. The Slice verktøyet vil dele siden din i rektangulære seksjoner, som vil bli eksportert som separate bilder som stykke sammen for å lage din nettside. Klikk og dra verktøyet og skissere viktige områder og knapper som vil være på sidene dine. For eksempel, vil du ha skiver for hver knapp som vil være på navigasjonsfeltet, så når bildene blir eksportert du kan bruke denne knappen som en link til en annen side på nettstedet ditt.

4 Eksportere utformet side fra Photoshop. Når du er ferdig med å lage skiver å optimalisere websiden din, er du klar til å eksportere bildet fra Photoshop til å arbeide på filen i en HTML-editor. Eksporter web layout ved å velge "File" og deretter "Save for Web & amp; Devices ..." fra menylinjen øverst. En dialogboks vil dukke opp ber om filformatet som du ønsker å eksportere bildet. Enhver filformat vil gjøre, og dette er et spørsmål om personlig preferanse. Velg JPEG eller BMP som format, trykk "OK" og lagre filen. Du har nå eksportert din web layout fra Photoshop som en HTML-fil med bilder, og er klar til å publisere på nettsiden eller fortsette å finpusse det med en HTML-editor.

Hint

• Øvelse gjør mester. Det tar mange forsøk på å skape en ren, effektiv sammenhengende webdesign. Den beste måten å lære på er ved å observere andre godt designet nettsteder, og ta av hvordan de fungerer når det gjelder navigasjon, display og stil.