Hvordan markerings Din PSD for utviklere

Hvordan markerings Din PSD for utviklere


Som designer, kan du ikke har en god forståelse av hvordan en design skapt i Photoshop blir en fullt fungerende nettside. Det er viktig å ha en grunnleggende forståelse av HTML og CSS når du arbeider med en utvikler for å forberede en PSD eller lagdelt Photoshop-fil riktig. Designere gjøre vanlig feil å lagre filer i feil format, flatere bilder eller glemme å gi lag semantiske navn. Disse feilene fører til frustrasjon og forvirring for utbygger, eller en nettside som ikke fungerer som forutsatt. Ved å ta noen skritt for å forberede PSD med utbygger i tankene, vil du beholde partnerskapet og være i en bedre posisjon til å møte forventningene.

Bruksanvisning

1 Klikk på "Image" og "Mode" og bekrefte din design er satt til RGB. Denne innstillingen setter opp din design for bedre Web-kompatibilitet. CMYK brukes kun for trykksakproduksjon og bør unngås når du utformer for skjermen.

2 Opprett lag grupper som tilsvarer det fysiske laget av nettstedet. Det er viktig å ha en klar visjon om hvilke elementer lå under eller over andre og å ordne laggrupper tilsvarende. For eksempel plassere hvert lag i PSD som omfatter din bakgrunn i en "Bakgrunn" lag gruppe på bunnen, lagene som utgjør navigasjonsmenyen i en "Meny" gruppe og alle de eksempel teksten i en "Eksempel tekst" gruppe.

3 Åpne lagsammensetninger vinduet ved å klikke på "Window" og "lagsammensetninger" i Photoshop-menyen. Lag en lagsammensetning ved å skjule alle lag grupper eller lag til ett bestemt element er synlig, slik som den komplette logo uten bakgrunn viser.

4 Klikk den lille laget ikonet nederst til høyre i Layer Comp vinduet for å legge til en ny lagsammensetning. Gi den et beskrivende navn og klikk "OK." Gjenta denne prosessen for å forberede hvert grafisk element av design.

5 Konverter tekst lag som inneholder spesielle skrifttyper ved å høyreklikke på laget og velge "Konverter til figur." Tekst- og tekstbaserte elementer vises nå som forutsatt dersom utbygger ikke har skriften du brukte. Denne metoden hjelper deg å unngå muligens brudd på distribusjonslisenser ved å måtte pakke skrifter med PSD.

6 Klikk på "View" og "linjaler" i Photoshop-menyen for å aktivere linjaler. Sett guider ved å venstreklikke på toppen eller venstre linjal og dra retningslinje til ønsket posisjon. Bruk guider for å indikere grenser, padding og marginer. Guides hjelpe utvikleren fastslå en nøyaktig verdi for disse attributtene ved bygging av layout stilark og hjelpe utvikleren bestemme om de skal spleise et bilde eller reprodusere den ved hjelp av CSS.

7 Lag et spesielt lag gruppe som inneholder fargeprøver som svarer til bestemte CSS attributter, for eksempel kobling farger eller element bakgrunn. For å lage hver swatch lag, klikk på "Layer", "New Fill Layer" og "Solid Color." Indikerer CSS velgeren i lagnavnet, for eksempel "en. Link" Hvis du ikke har mye erfaring med CSS, være så beskrivende som mulig når som indikerer hva hver farge angår.

8 Klikk på "Edit", "Innstillinger" og "Filkompatibilitet." Velg "Always" fra "Maksimer PSD og PSB filkompatibilitet" drop-down menyen. Aktivering av denne innstillingen sikrer PSD-lag og effektene vil vise og oppføre seg ordentlig hvis åpnes i en tidligere versjon av Photoshop.

Hint

  • Inkluder markering notater i lag titler, for eksempel "artikkel" eller "DIV" hvor du er komfortabel med HTML og ønsker å indikere hvor visse elementer kan reproduseres uten bruk av bilder.
  • Et eksempel på hvordan man skal arrangere lag grupper vil være:
  • header
  • logo
  • Undertittel
  • Nav Meny
  • undermeny
  • header Bakgrunn
  • Innhold
  • Stolpe
  • eksempel tekst
  • Sidebar
  • eksempel tekst
  • widgets
  • bunn~~POS=TRUNC
  • eksempel tekst
  • widgets
  • opphavsrett
  • bunn~~POS=TRUNC Bakgrunn
  • Bakgrunn