Hvordan konvertere Photoshop Prototype til Web HTML

Hvordan konvertere Photoshop Prototype til Web HTML


Photoshop er et godt verktøy for å designe bildeelementer av nettstedet ditt, inkludert roll knapper, drop-down menyer og grafikk som lenker til andre nettsider. Men Photoshop seg selv er ikke en web-side etableringen verktøyet. Heldigvis er det relativt enkelt å eksportere prototypen til en web-vennlig grafikkformat, og bygge en HTML-side som bruker disse elementene. Husk at interaktive komponenter som hypertekstkoblinger, rollover-knapper og rullegardinmenyer krever ekstra arbeid. Flytte utover det grunnleggende er svært avhengig av søknaden din, og kan kreve spesialisert kunnskap om programmering.

Bruksanvisning

Grunnleggende webside

1 Åpne din prototype i Photoshop og eksportere til en web-støttet bildeformat. Velg "Lagre for Web og enheter" fra Fil-menyen. I dialogboksen velger du enten JPEG, GIF eller PNG. Velg en bildekvalitet, husk at høyere kvalitet øker filstørrelsen.

2 "Lagre" filen til disk, noe som gir den et navn som "myPrototype.jpg."

3 Åpne HTML editor og lage en ny nettside. De fleste HTML redaktører vil skape et skjelett nettside for deg.

4 Legg til et bilde element rett under åpningen <body> -taggen. Bildet element vil ta form: <img src = "myPrototype.jpg" />.

5 Lagre nettsiden og last inn alle nettlesere.

utover Basics

6 Forbedre layout ved hjelp av enten tabeller eller Cascading Style Sheets (CSS) for å plassere layout. Den foretrukne metoden er å ta de enkelte lag, eller skiver, som er opprettet i Photoshop og plassere dem ved hjelp av CSS. Utført på riktig måte, skaper dette en "flytende" layout som pinnen oppsettet som leseren er endret.

7 Forbedre hastigheten ved hjelp av repeterende bakgrunnselementer. I Photoshop skape en 5 piksler bred bit av din bakgrunn og lagre den til fil. I HTML kan du gjenta element ved hjelp av bakgrunnen egenskap av <body>, <table> eller CSS stil. Syntax for hvert tilfelle varierer, så sjekk HTML guide. Sørg for å sette bakgrunnstillegger "repeat".

8 Bruk bildekart for å lage enkle linker fra et bilde til en annen nettside. Ifølge webutvikler Gregory Hodges, opprette en <map> element i en <div> tag, deretter definere <område> for bildet. Området vil inneholde koordinatene til bildet ditt til å koble og referere til bildefilen for å laste.

9 Bruk Javascript for å skape roll handlinger og navigasjonsmenyer som drop-downs. Selv om dette kan være en mer utfordrende oppgave, profesjonelle webredaktører som Dreamweaver og GoLive støtte opprettelsen av roll handlinger og navigasjon, så du trenger ikke å skrive Javascript for hånd.

10 Legg interaktive medier elementer som Flash-animasjoner, Java applets og Shockwave-filer for å forbedre brukeropplevelsen. Bruk <object> element for å plassere og posisjonere disse i din webside. Igjen, vil en profesjonell web-verktøy gjør jobben mye enklere.

Hint

  • Plasser elementer som roll knapper og menyer i egne lag (eller skiver). Sørg for å eksportere dem separat som separate filer.
  • Eksport animasjoner som er opprettet i Photoshop til GIF-fil format. Gif er det eneste formatet som støtter bilde animasjon.
  • Bruk en HTML-editor hvis mulig. Disse spesialiserte redaktører gi spesifikk støtte for å lage websider og vil gjøre prosessen enklere. De gjør det også mulig å imlement mer avanserte funksjoner som ellers ville kreve programmering.
  • Velg middels bildekvalitet når du eksporterer grafikk fra Photoshop. Sørg for å balansere bildekvaliteten slik at du ikke degradere bildet.
  • kvalitetsbilder skape større filer, og kan i betydelig grad redusere sluttbrukerens opplevelse.