Photoshop är ett bra verktyg för dem som vill ta en visuell inflygning till webbdesign eller som skräms av tanken på att hantera HTML-kod . Den har alla de verktyg du behöver för att integrera bilder , text och grafik i en webbsida layout , och allt som behövs för att optimera dessa element för webben , och Adobe Dreamweaver i synnerhet . Saker du behöver
Computer
Adobe Photoshop ( helst CS3 eller högre ) Arkivbilder och innehåll för en webbsida ( eller dummy innehåll )
Visa fler instruktioner
Initial Setup
1
Starta Photoshop och välj Arkiv > Nytt från programmenyn . Klicka på den förinställda rullgardinsmenyn och välj Webb . Justera storlek rullgardinsmenyn till en standard Web storlek som du vill att din sida ska vara.
2
Välj Arkiv - > Öppna från programmenyn och öppna den bild du vill använda som sidhuvudet . Detta kommer att skapa en ny flik eller fönster för bilden , beroende på dina Photoshop -inställningar .
3
Välj rektangulära markeringsramen från panelen Verktyg till vänster om ditt arbetsfält. Ställ in Style rullgardinsmenyn till fast storlek i Tool Options panelen ovanför propagera och ange bredden lika med bredden på sidan du skapade i steg 1 . Höjden kan vara så lång eller kort som du vill att sidhuvudet bilden för att visas på din webbsida .
4
Välj verktyget Flytta från panelen Verktyg och flytta markeringsramen över den del av bilden du vill ha som din header image . Välj Bild > Beskär från programmenyn .
5
Välj Redigera > Kopiera för att kopiera den beskurna header image . Växla tillbaka till fliken eller fönstret som innehåller din webbsida arbetsfält . Välj Redigera > Klistra in för att klistra sidhuvudet på webbsidan . Med hjälp av verktyget Flytta , flytta header image så att dess övre hörn matcha de övre hörnen av din webbsida .
Designa din sida och skapa skivor
6
Open och lägga till andra element du vill på din webbsida . Du kan klistra in i andra bilder med samma process som används för att klistra huvudet . Inkludera en meny med text genom att använda typ verktyg från verktygspanelen . De flesta webbsidor innehålla en rubrik , en kropp som innehåller din huvudsakliga innehåll och grafik eller bilder som associeras med ditt innehåll eller menyalternativ , och en sidfot , som ofta innehåller kontaktuppgifter eller copyright .
7
Tänk på den grundläggande idén med tabeller i webbdesign då lägga ut din sida i Photoshop .
8
välj View > Snap från programmenyn och välj Slice Tool , kapslade under beskärningsverktyget i panelen Verktyg . Klicka och dra en ruta med verktyget runt helheten av din sida för att börja .
9
Gör skivor runt huvudet , kroppen och sidfoten på din sida för att ytterligare dela upp sidan . Denna process är värpningsperioden sidan i en tabell format för användning i Dreamweaver .
10
Gör skivor runt varje grafiskt element i huvudet , kroppen och sidfot såsom menyknappar logotyper eller bilder . Försök att hålla skivor för dina knappar och inriktade Justera element . Den snäppfunktion kommer att bidra till att underlätta detta . Addera Spara och optimera din design för Dreamweaver
11
Tillgång datorns skrivbord och skapar en ny mapp för din webbsida . Mac-användare kommer att välja Finder > Ny mapp . Windows-användare kommer att högerklicka på skrivbordet och välj Nytt > Mapp . Skapa ytterligare en mapp inuti denna en rätt " bilder . "
12
Återgå till Photoshop och välj Arkiv > Spara för webben ( eller Spara för webben och enheter för CS4 -användare ) . Detta tar upp en dialogruta där du kommer att optimera dina segmenterade bilder för webben och Dreamweaver .
13
filtyp , kvalitet och färg justeringar alla dina skivor i den högra kolumnen i dialog box . Välj en skiva genom att klicka på den i skyltfönstret i dialogrutan . Fotografiska bilder sparas som JPEG-filer i rullgardinsmenyn precis under inställt och enfärgad bilder som logotyper eller menyknapparna kan sparas i GIF -format för optimal webbprestanda . Kvalitet justeringar kan göras i de två drop -downs nedan . De flesta bilder kan ha sin kvalitet minskas samtidigt ser bra ut på din webbsida , så sänka kvaliteten tills du ser en märkbar skillnad . Detta gör din sida laddas snabbare .
14
Klicka på Spara när varje skiva har justerats . Välj HTML och bilder i formatet dropdown i dialogrutan som visas . Ändra målmapp för bilder mappen webbsidan mapp på skrivbordet . Din layout är nu optimerad och klar för användning i Dreamweaver . De delar av din sida kan hittas i filerna paletten i Dreamweaver , till höger om din webbplats fönster . Du kan få en titt på hela din layout skivas och optimerade för webben och underhållas som du designat den i Photoshop genom att öppna . Html -filen skapas i bilder mapp när du slutfört Spara för webben i Photoshop .
Addera
