Hvordan lage en web-mal i Photoshop

En Web mal er en grunnleggende webside layout --- eller container --- kan du bruke til å lage flere sider. Malen gir grunnleggende struktur for nettstedet ditt, slik at du kan opprettholde et gjennomgående tema og layout i hele området uten å måtte gjenskape hver side. Mens Photoshop er ikke teknisk sett en Web-side design program, kan du bruke den til å lage Web-maler med "slicing" PSD bilde inn i ulike seksjoner og deretter eksportere PSD til HTML-webside. Du kan deretter åpne HTML-mal fil i Dreamweaver eller et annet webdesign programmet og bruke den til å lage sidene for ditt nettsted.

Bruksanvisning

1 Starte et nytt dokument i Photoshop. Gi det dimensjonene du vil bruke for dine websider, som dette: Klikk "Fil" på menylinjen og velg "New" for å åpne dialogboksen Ny. Skriv inn bredde (i piksler) i "Bredde" Field og høyden (i piksler) i "Høyde" -feltet. Klikk på "OK".

2 Lag banneret for websiden. Banneret, selvfølgelig, er den grafiske eller bilde som viser øverst på siden. Den består vanligvis av en firmalogo og noen andre grafikk knyttet til et produkt eller en tjeneste. Du kan enten sette inn et eksisterende bilde eller bruke Photoshop maling og tekst verktøy for å lage banneret.

3 Opprett knapper for websiden. Disse blir linker, eller "hot spots", som tar nettstedet brukerne til ulike sider på nettstedet. Enten sette eksisterende knapp bilder og plassere dem der du vil ha dem i malen eller bruke Photoshop maling og tekst verktøy for å lage knappene.

4 Velg "Slice Tool" (femte knappen fra toppen i verktøykassa). Hvis du ikke har brukt Slice Tool før, er denne knappen trolig satt til et annet verktøy. Klikk og hold knappen, og velg deretter "Slice Tool" fra fly-out.

5 Dra Slice Tool rundt den første knappen eller område i malen der du vil opprette en kobling. Dette skaper en "Slice" boks rundt objektet. Photoshop plasserer denne boksen i en tabellcelle som vil bli en egen HTML-tabell når du eksporterer dokumentet til HTML.

6 Høyreklikk på den nye skive og velg "Edit Slice Options" fra fly-out menyen. Dette åpner for stykke dialogboksen Alternativer.

7 Skriv inn URL-en du ønsker på denne knappen for å koble til i "URL" -feltet. Du kan også angi andre opplysninger for knapp, for eksempel lese siden målet, og alternative koder. Hvis du ønsker å redigere størrelse og plassering av stykket, gjør det med alternativene i "Mål" i dialogboksen. Klikk på "OK".

8 Gjenta de forrige trinnene for å lage skiver og redigering stykkealternativer for hver knapp i malen.

9 Klikk "Fil" på menylinjen og velg "Lagre for Web og enheter." Dette åpner Lagre for Web og enheter dialogboksen. Herfra kan du endre flere aspekter av malen, for eksempel bakgrunnsfarge, bildekomprimering og kvalitet, dokumentstørrelse og så videre. Disse alternativene er godt merket og taler for seg. (Du kan forhåndsvise HTML-koden for denne malen ved å klikke på "Forhåndsvisning" -knappen.)

10 Klikk på "Lagre" -knappen. Navn og lagre HTML-fil. Du har opprettet nett mal. Nå kan du åpne den i en webside redaktør og legge til innhold.

Hint

• Photoshop oppretter et nytt bilde for hver skive du oppretter og lagrer dem i en underkatalog som heter "Bilder". Når du laster opp sider til en webserver, sørg for å inkludere Bilder-mappen.
• Hvis du har en god forståelse av hvordan å layout websider i tabeller, kan du bruke denne metoden for å utvikle noen ganske avanserte maler, inkludert tekstbokser. For å opprette en tekstboks (eller tabell), rett og slett sette "Slice Type" drop-down in Slice alternativer til «No Image." Dette skaper en tom tabell.