Photoshop är ett utmärkt verktyg för att skapa hemsida prototyper . När det är dags att distribuera din mockup , skulle det vara trevligt att bara klicka på en knapp och ta din prototyp leva . Dock är Photoshop strikt ett grafikprogram utan HTML- kapacitet . Lyckligtvis , exportera din mockup till en Web - vänlig grafik format som JPEG eller GIF , och bygga en webbsida som använder dessa inslag är okomplicerad . Tänk på att du måste göra extra arbete på HTML- sidan för att skapa interaktiva komponenter som länkar, menyer och popup-fönster . Möjligheterna till interaktivitet är oändliga , så borsta på din HTML och CSS . Saker du behöver
Photoshop ( alla versioner ) katalog HTML Redaktör webbläsare
Visa fler instruktioner
Grunderna
1
Öppna din mockup i Photoshop och exporterar den till en webb - vänlig bildformat . Välj " Spara för webb och enheter " från " Arkiv " -menyn . I dialogrutan väljer du ett filformat som JPEG , GIF eller PNG och välj en bildkvalitet .
2
Klicka " Spara " och namnge din fil ( t.ex. myMockup.jpg ) katalog
3
Öppna din HTML- editor och skapa en ny HTML-fil . HTML-redigerare som Dreamweaver kommer att skapa sidan skelett webben för dig .
4
Lägg till en bild tagg inuti
del av din webbsida . Bilden taggen ser ut ungefär så här:
5
Spara din HTML-fil och sedan läsa in den i valfri webbläsare
Addera
