Slik eksporterer Photoshop dokumenter til Dreamweaver

Slik eksporterer Photoshop dokumenter til Dreamweaver


Adobe Photoshop gjør det mulig å designe en dynamisk layout, mens Dreamweaver bringer den til liv i HTML-koding. Eksportprosessen er ikke vanskelig, men det kan være litt metodisk, da det krever detaljert forberedelse før eksport. PhotoShop dokumenter, ofte referert til som PSD-filer, må redigeres og settes opp som web-enheter og skiver bilder for overføring til DreamWeaver. Deretter filen må importeres til DreamWeaver for HTML-koding. Samlet prosessen tar ca 10 til 15 minutter å fullføre, avhengig av fortrolighet med Photoshop verktøy, funksjoner og komponenter.

Bruksanvisning

PhotoShop PSD Kutting og Prep

1 Åpne Adobe PhotoShop-programmet ved å klikke på ikonet på skrivebordet.

2 Klikk på "File" -menyen øverst på skjermen og velg "Open" handling for å laste Photoshop PSD-filen inn i programmet.

3 Velg verktøylinjen slicing knappen, som viser et bilde av en kniv. (Dette er stykke verktøy som oppsettet skal skiver for HTML-koding formål.)

4 Trace over deler av oppsett for å skille elementene og skape individuelle deler av oppsettet.

5 Klikk på "File" fanen igjen og velg "Lagre for Web og enheter" handling i rullegardinlisten.

6 Klikk på "Lagre" -knappen i "Web og enheter" vinduet for å lage en oppdatert versjon av PSD dokument som vil bli brukt til HTML-koding i Dreamweaver.

Importere til Dreamweaver

7 Åpne Adobe Dreamweaver programmet fra skrivebordet på datamaskinen skjermen.

8 Klikk på "HTML" under "Lag ny" delen som vises i "Nytt dokument Setup" vinduet.

9 Finn "Files" -kategorien i nedre høyre hjørne av skjermen og klikker på "Desktop Items" mappefane for å vise kollaps meny og undermappen alternativer.

10 Klikk på "Bilder" mappen som vil bli oppført under skrivebordselement, da dette er filen mappen som ble opprettet da du lagret Photoshop PSD-fil med skiver oppdateringer. Denne handlingen vil importere skiver Photoshop dokumentet i Dreamweaver design plattformen.

Hint

  • Ikke eksportere Photoshop-dokument uten å ha klippet. Slicing Photoshop PSD-filen er ekstremt viktig. Den slicing verktøy bryter layout ned slik at det ikke ser ut som bare én store bildet. En layout er som et stort puslespill som allerede er satt sammen, slik at du ønsker å gjøre det motsatte. Du ønsker å bryte det ned slik at det kan være fullt funksjonell og tilgjengelig. Eventuelle design lag og elementer som representerer knapper, koblinger, bokser, bilde seksjoner og andre elementer som bør skilles bør skiver i individuelle stykker. Dette er din web-enheter, som de gjør på nettstedet et nettsted. Uten disse enhetene, vil du bare ha et stillbilde som ser ut som et oppsett, men ingenting vil fungere.