Bygga en webbplats layout är en utmanande uppgift som tar grafik designers år att bemästra . För både erfarna och oerfarna , ger Adobe Photoshop ett antal verktyg som stöd i processen för att skapa en webbplats layout . Innan du börjar , bör du ha en god uppfattning om hur du vill att din hemsida ska se ut . Skissa några prover på papper innan du börjar så att du redan har en stabil utgångspunkt . Börjar med en logotyp som redan utformat kommer också snabba upp din layout skapande . Instruktioner
1
Skapa en ny fil i Photoshop genom att klicka på " Arkiv " -menyn och välja " Nytt . " Storleken på din bild kommer att avgöra den slutliga storleken på din webbplats , så välj en bredd som är lämplig för de flesta skärmar . En bredd på 750 pixlar kommer att säkerställa att din webbplats är synlig för alla som använder en skärmupplösning som är lika med eller större än 800 x 600 . Ange ett värde för höjden på ungefär 500 pixlar . Detta kan justeras senare . Tryck på " OK . "
2
Design webbplatsens sidhuvud , som är det område som visas på toppen av din webbsida . Detta område bör begränsas till högst 200 pixlar på höjden . Inkludera din webbplats namn och logotyp på detta område , liksom vissa grafik eller fotografier som belyser syftet med din webbplats . Till exempel kan en ideell bolagets hemsida layout omfatta fotografier av individer som de har hjälpt .
3
Skapa en navigeringsfältet under din header som är ca 50 pixlar hög . Välj " Text Type " i verktygsfältet till vänster , och klicka på bilden för att skriva . Ange namnen på de olika nationella sidor på din webbplats ( t.ex. " Home , " " Om oss , " " Kontakt , " " Produkter , " etc. ) .
4
Gör en låda under din navigeringsfältet för att representera det område som text på din webbplats kommer att gå . Du kan lämna detta område tomt för nu , men du måste ha det område som reserverats så att du inte lägger mönster till den. Området kan vara så bred som din header och navigation bar , eller vara smalare för att rymma sidofält till vänster , höger eller båda .
5 sidofält
Design om du lämnade utrymme för dem . Dessa sidofält startar under din header och kommer att gå ner längs hela sidan tills din sidfot . Sidomenyn kan antingen inkludera grafik eller fotografier , eller kan vara ett annat område för text . Om du reservera områden för text , kan du lämna dem tomma . Annars börjar designa den grafik som ska visas i dina sidofält .
6
Skapa en sidfot längst ned i bilden . Den sidfoten ska vara lika bred som huvudet , men kan vara så lång eller kort som du önskar . Du behöver inte oroa dig för att lämna tillräckligt utrymme mellan sidhuvud och sidfot för texten som din design kommer automatiskt att växa och krympa för att rymma mer eller mindre text . Inkludera information om copyright i din sidfot samt eventuella juridiska ansvarsfriskrivningar du vill lägga till .
7
Fortsätta att arbeta med alla aspekter av webbplatsen layout tills du är nöjd med sitt utseende . Spara filen genom att klicka på " Arkiv " -menyn och välja " Spara . " Spara bilden i Adobe Photoshop -format ( * . Psd ) så att du kan senare återvända till det och göra ytterligare redigeringar utan någon förlust i kvalitet .
8
Välj " Slice " verktyget i verktygsfältet på vänster , och dra markeringar runt de olika områdena i din bild . Om du använder bara en rubrik , text område och sidfot , göra tre val kring dessa tre områden . Om du ingår sidofält , skapa ytterligare skivor runt dessa områden . Dra en ruta runt ett område med valda slice verktyget är allt som behövs för att skapa en skiva .
9
Klicka på " File " och välj " Spara för webben . " Photoshop kommer att begära filnamn för varje segment som du skapat , och kommer att generera en separat bild för varje segment . Skivorna kan sedan kopplas till din webbplats layout med hjälp av ett program webbdesign som FrontPage eller Dreamweaver , eller för hand med HTML-kod .
