Hvordan lage et nettsted i Photoshop CS3

Adobe Photoshop er et ideelt verktøy for å lage et nettsted layout og er bransjens standard verktøy for bilderedigering og bitmap bildeskaping. Opprette en layout i Adobe Photoshop gjør at designeren muligheten til å gjøre raske endringer uten å måtte justere noen kode. Når utseendet og preget på området er ferdig, gjør Adobe Photoshop det svært enkelt å skjære og optimalisere bilder for web bruk.

Bruksanvisning

1 Planlegg området på papiret. Approach datamaskinen med en klar plan og kunnskap om hva området må oppfylle prosjekt forventninger. Finn ideer til farger og stiler å trekke fra. Jo mer planlegging og organisering som oppstår på dette stadiet, vil de mindre vanskelige designvalg være en gang å jobbe i Adobe Photoshop.

2 Åpne Adobe Photoshop CS3 og starte et nytt dokument. Sett dokumentets høyde til 800 piksler og bredden til 600 piksler. Dette er en standard størrelse for web layout design og vil sikre at siden kan bli sett av en rekke skjermoppløsninger.

3 Still inn oppløsningen av dokumentet til 72 piksler per tomme (PPI). Kontroller at fargemodus dokumentets er satt til RGB. Bytt måleenheter som vises på linjalen for å piksler for nøyaktige målinger.

4 Bygg rammen på siden ved hjelp av guider. De vertikale grenser vil skape rammer for nettstedets bredde og horisontale hjelpelinjer vil mellomrom ut nettstedets elementer. Definere områder for en overskrift, navigasjonsfeltet og innholdsområdet. Legg igjen en konsekvent margin, vanligvis rundt 10 piksler, mellom elementene for å legge estetisk plass på kurset.

5 Legg bildene og teksten som skal bestå av stilen på siden. For kompliserte bilder, for eksempel nettstedet header, utforme et bilde først i en annen fil og lime inn på ønsket sted i oppsettet filen. Hold alle layoutelementer på separate lag for å sikre enkel redigering. Navn hvert lag etter tilsvarende element.

6 Lag et bakgrunnsbilde. Et enkelt mønster i en 100 pixel x 100 pixel plassen kan bli flislagt og er raskere å laste enn et større bilde.

7 Skjær dokumentet i biter som skal kodes inn på nettsiden. Bruk "Slice" verktøyet for å definere områder som vil bli lagret som individuelle bildefiler.

8 Plukk et stykke å bli frelst ved hjelp av "Slice Select". Velg Fil> Lagre for Web og enheter for å optimalisere bildet for web. Skiver bilder og stil på siden vil omfatte utseendet på nettsiden.

Hint

• Coding, enten i Adobe Dreamweaver eller en teksteditor, vil det være nødvendig å gjøre området fullt funksjonell når den er lastet opp til en web vert. Gå til Adobe photshop hjelp fil for ekstra ressurser.