-
- hur man utformar en webbsida i Photoshop för Dreamweaver
- Postad av:Magnus Ekblad
- 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. Det har alla 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 särskilt
Du behöver:. .
Dator
Adobe Photoshop (helst CS3 eller högre).
Bilder och innehåll för en webbsida (eller dummy innehåll).
Grundinställning
1.
Starta Photoshop och välj Arkiv> Nytt från programmenyn. Klicka på förinställda rullgardinsmenyn och välj Webb. Justera storleken nedrullningsbara till en standard Web storlek som du vill att din sida ska.
2.
Välj Arkiv-> Öppna från programmenyn och öppna den bild du vill vill använda som sidhuvud. Detta kommer att skapa en ny flik eller fönster för bilden, beroende på dina Photoshop inställningar.
3.
Välj den 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 din canvass och ställ in 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 ska visas på webbsidan.
4.
Välj verktyget Flytta från panelen Verktyg och flytta markeringsramen över del av bilden du vill använda som 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 med din webbsida arbetsfält. Välj Redigera> Klistra in för att klistra in rubriken på webbsidan. Använda verktyget Flytta, flytta header image så att dess övre hörn matcha de övre hörnen på din webbsida.
Designa din sida och Skapa Skivor
1.
Öppna och lägga till andra element som du vill på din webbsida. Du kan klistra in i andra bilder med samma process som används för att klistra in rubriken. Inkludera en meny med text med typ Verktyg från panelen Verktyg. De flesta webbsidor innehålla en rubrik, en kropp som innehåller ditt huvudsakliga innehåll och grafik eller bilder som associeras med ditt innehåll eller menyalternativ och en sidfot, som ofta inkluderar kontaktinformation eller copyright.
2.
Tänk grundtanken i tabellerna i webbdesign när lägga ut din sida i Photoshop.
3.
Välj View> Snap från programmenyn och välj Slice Tool, kapslade under beskärningsverktyget på panelen Verktyg. Klicka och dra en ruta med verktyget runt hela på sidan för att börja.
4.
Gör skivor runt huvudet, kroppen och sidfoten på sidan för att dela ytterligare sidan. Denna process är början på om sidan i en tabell format för användning i Dreamweaver.
5.
Gör skivor runt varje grafiskt element i huvudet, kroppen och sidfot som menyknappar , logotyper eller bilder. Försök att hålla skivor för dina knappar och anpassa anpassats element. Den snäppfunktion kommer att bidra till att göra detta lättare.
Spara och optimera din design för Dreamweaver
1.
tillgång till datorns skrivbord och skapa 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 inne i den här titeln en "bilder".
2.
Tillbaka till Photoshop och väljer Arkiv> Spara för webben (eller Spara för webben och enheter för CS4 användare). Detta öppnar en dialogruta där du kommer att optimera din skivad bilder för webben och Dreamweaver.
3.
Gör filtyp, kvalitet och färgjusteringar till alla dina skivor i rätt- hand kolumnen i dialogrutan. Välj en skiva genom att klicka på den i skyltfönstret i dialogrutan. Fotografiska bilder ska sparas som JPEG-filer i den nedrullningsbara strax under Förinställd och enfärgad bilder som logotyper och knappar meny kan sparas i GIF-format för optimal prestanda webben. Kvalitet justeringar kan göras i de två drop-downs nedan. De flesta bilder kan ha sin kvalitet minskat samtidigt tittar böter på din webbsida, så lägre kvalitet tills du ser en märkbar skillnad. Detta gör din sida laddas snabbare.
4.
Klicka på Spara en gång varje skiva har justerats. Välj HTML och bilder i formatet dropdown i dialogrutan som visas. Ändra målmapp till bilderna mappen webbsidan mapp på skrivbordet. Din layout är nu optimerat och klart 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å din hela layout skivad och optimerade för webben och bibehålls som du designat den i Photoshop genom att öppna. html fil som skapas i dina bilder mapp när du fyllt i Spara för webben i Photoshop.
tips och varningar
- Se till att skapa nya lager för varje nytt element till till din design. Detta gör det enkelt att göra ändringar senare och håller din isolerade beståndsdelar så att ett fel i en betyder inte att dekonstruera hela din design.
- Användare som arbetar på en version av Photoshop innan CS3 inte har Spara för Web alternativ, men kan utföra samma funktion i Adobe ImageReady, som ingår med tidigare versioner och kan startas direkt från Photoshop.
Relaterade artiklar
Adobe Photoshop: radera ett lyte eller ärr
Hur konvertera till hög upplösning i Photoshop
hur man sätter ett ansikte på joker kroppen i Photoshop
hur man gör photoshop christmas bollar
hur man skyddar en bild med Adobe Photoshop
hur man hittar en photoshop serienummer
hur färgen monokroma bilder i photoshop
hur du skannar 35 mm diabilder i Adobe Photoshop
hur du skickar bilder med photoshop
hur man skär en bild med Adobe Photoshop