Hvordan lage en webside ved hjelp av Adobe Photoshop

Hvordan lage en webside ved hjelp av Adobe Photoshop


Adobe Photoshop gjør det enkelt å skape et unikt design for en webside. Photoshop kraftige grafiske verktøy og effekter gi brukerne omfattende kontroll over layout, farger og bilder. I stedet for å bli forvekslet med komplekse koding og andre scripts, kan du planlegge og lage din komplett web-design i Photoshop og deretter enkelt eksportere dem opp til Internett via et HTML-program.

Bruksanvisning

1 Bruk Photoshop til å åpne logo eller bilde som du ønsker å bruke som hoved grafisk på websiden.

2 Bestem deg for et fargevalg for din webside, bruker bildet som en guide. På verktøypanelet, velg pipetteverktøyet. Ta pipetten over en farge på bildet. Klikk og verktøyet vil ta en prøve av den fargen du valgte. Du vil være i stand til å se spesifikk informasjon, som for eksempel RGB nummer, av fargen på "Color" panel. Legg merke til den spesifikke RGB antall av hver farge som du smake. Fortsett å bruke pipetteverktøyet til å prøve de ulike fargene på bildet. Etter at du har samplet flere farger, velge minst tre farger som du ønsker å bruke som fargevalget for websiden. Fargene bør kontrast til hverandre og være lys, medium og mørk.

3 Gå til "File" i Photoshop hovednavigasjonsmenyen. Velg "Ny ..." og opprette et nytt dokument med en bredde på 600 piksler og en høyde på 300 piksler. Dette vil være den viktigste banner og navigasjons header for websiden.

4 Bestem deg skriften for siden din. Tenk på ideen om du ønsker å formidle. Gå til verktøypanelet og velger "Tekst" -knappen. Dra musen til å lage et rektangel på det nye dokumentet. Skriv inn teksten til nett spissen. Marker teksten du nettopp skrev og deretter gå til tekstalternativer på toppen av Photoshop. Prøv ut forskjellige skrifttyper og størrelser, og eksperimentere med tekst farge og justering til du er fornøyd. Bruk "Move" -verktøyet i verktøypanelet for å flytte toppteksten til der du vil ha den på dokumentet.

5 Lag en bakgrunn for ny banner ved å bruke en av fargene fra forhåndsbestemte fargevalg. Gå til Layers-vinduet, og velg "Fill eller Adjustment Layer" -knappen på bunnen. Klikk på «farge» og skriv inn RGB informasjonen du tok ned om den fargen du vil bruke. Laget vil nå dekke teksten du skrev i forrige trinn. I Lag-panelet, dra "Solid Color" laget du nettopp opprettet, slik at det er under "Tekst" lag. Fargen skal nå være i bakgrunnen.

6 Pass på at "Text" fil er valgt i lagpanelet. Deretter velger din logo eller grafisk fil, slik at det kommer til teten. På verktøypanelet, klikker du på flytteverktøyet, som bør være på toppen. Dra logo image på ny webside dokument. Et nytt lag bør umiddelbart opprettes på dokumentet med din logo. Med din logo laget valgt, klikker du på "fx" -knappen på Lag-panelet. Klikk på "Blending Options ..." og prøve ut Photoshop rekke blande verktøy for å hjelpe din logo sømløst matche bakgrunnsfarge.

7 Gå til "Layer" øverst i navigasjonsmenyen og velg "New Layer." Gå til verktøyet panelet og velger tekst verktøyet. Dra musen over området der du ønsker å lage navigasjonskoblinger for din webside. Legg inn teksten til navigasjon ved hjelp av en mindre størrelse på skriften du brukte tidligere for å lage spissen.

8 Gå til "File" og klikk "Save for Web". På toppen rullegardinmenyen velger du hvilket format du vil lagre filen (JPG, PNG eller GIF). Photoshop vil spare og optimalisere banner for web.

9 Åpne HTML editor og lage en ny HTML-dokument som har et bord med fem rader og én kolonne. Sett inn banner i den første raden. Lag et bildekart for hver av dine navigasjons ord og legge til koblingen destinasjonen. De resterende fire rader kan bli fylt med websiden tekst.

Hint

  • Ta deg tid til å virkelig utforske alle de grafiske funksjonene i Photoshop. Bruk masker, børster, filtre, fargenivåer og mange andre verktøy for å skape en unik og personlig design.