Sådan organiserer du dine Photoshop-lag effektivt
Vi designere har tendens til at blive frustreret over udviklere, når de tager friheder med vores arbejde.
Men vi må forstå, at de ikke er helt skyldige.
Sæt dig selv i deres sko: forestil dig, hvordan det er at åbne en Photoshop-fil (PSD), kun for at finde et stykke af dårligt mærket lag og mapper, plus en masse ukontrollerede skjulte lag og andre halvbagte ideer, der ikke gjorde det til bære frugt.
Følgende vejledning beskriver, hvordan man opretter organiserede, designer og udviklervenlige PSD-filer .
Det er på ingen måde den eneste løsning, men forhåbentlig vil det tilskynde til bedre praksis i webdesign verden.
Mens jeg skrev denne tutorial, interviewede jeg flere udviklere, der har stor erfaring med at arbejde med flere designere.
Deres feedback var yderst indsigt. Jeg opfordrer dig bestemt til også at nå ud til de udviklere, du arbejder med , for at finde ud af, om du kan gøre noget for at forbedre dine PSD-filer.
1. Grundlæggende mappestruktur
Til at begynde med beholder jeg en PSD-fil ved hånden med navnet "Website-Template.psd" .
Denne fil indeholder de grundlæggende sider for hver hjemmeside, herunder gittersystemet, den grundlæggende mappestruktur og de almindelige dimbroeensions (jeg bruger et arbejdsområde på 1000 til 1440 pixel med en sidebredde på 960 pixels).
Denne skabelon eliminerer behovet for at oprette en ny fil til hvert projekt.
Lad os tage et øjeblik at gøre os bekendt med den grundlæggende organisation af disse mapper.
Du vil bemærke, at min standard mappestruktur kun indeholder tre kernemapper: "header", "indhold" og "footer".
Dette enkle sæt indeholder de grundlæggende mapper, som de fleste websteder bruger, og får mig til at starte på højre fod ved at levere en effektiv organisationsplatform.
Du vil bemærke, at jeg har mærket alle mapperne så enkelt som muligt .
Disse mapper vil rumme en masse submapper. Når dit design vokser, skal du være sikker på, at de nye mapper er mærket lige så tydeligt.
Udvidelsen af "header" -mappen, vil du se organisationen af undermapper.
Bemærk, at undermappen "Navigation" normalt er den mest komplekse: Hold udvikleren i tankerne, når du mærker og opretter denne undermappe, og dens indhold er vigtig.
Et sidste skridt inden du hopper ind i designet er at gruppere denne samling af mapper i en forældremappe med navnet "wireframes" .
Dette vil hjælpe med at holde indholdet organiseret til, når vi begynder at designe og farve. Det er også en god måde at skelne mellem forskellige sider inden for samme PSD-fil.
2. Administrere lag for et hele websted
Når vi designere kommer ind i en rille, kan det være nemt at afstå struktur for kreativitet. Dette er når selvdisciplin skal sparke ind.
Vi må tvinge os til at tage sig tid til at organisere de lag, vi skaber .
Nu, da den oprindelige opsætning er færdig, giver jeg et overblik over, hvordan jeg grupperer forskellige elementer i et fuldt design.
Som du ved, følger designen sjældent en lineær vej, så husk at dette kun er en af måske utallige løsninger.
"Hvis alle designere fulgte en standardprocedure med at organisere deres PSD'er [organisere deres mapper ved at følge et standard sæt retningslinjer], kan du nemt slå off en times udviklingsomkostninger, hvis ikke mere. For ikke at nævne, at du ville udfylde et skifte mellem design og udvikling, skære tilbage på noget som helst fra det oprindelige design, der er almindeligt i udviklingsfasen "
Matt Sears, Ruby on Rails udvikler
3. Mappestruktur i detaljer
Vi starter med et overblik over hovedkroppen (indholdet) og slutter med overskriften, fordi det har et vigtigt element (navigation), der kræver særlig opmærksomhed.
Når du åbner indholdsmappen, vil du bemærke, at jeg har opdelt undermapper, så det visuelle layout af webstedets design afspejles i mappestrukturen .
For eksempel, fordi indholdet har en øverste og nederste sektion, har jeg mærket dem i overensstemmelse hermed: "top" og "bottom" .
Jeg har også placeret alle baggrundsgrafik (gradienter og andre billeder, der skal skives til HTML) i deres egne mapper.
Lad os nu åbne mappen "øverste" (en undermappe i mappen "indhold" ), som indeholder flere fælles elementer, som f.eks. Et mellemrum for tekst, et mellemrum for et billede osv.
Bemærk brugen af endnu en understruktur for yderligere lag og mapper.
Mapper er blevet udpeget til skrifttyper, billeder og baggrundsgrafik (gradienter, solide farver osv.).
Fordi skrifttyper kan distrahere udviklere, da de sorterer gennem en PSD, lad os åbne "skrifttyper" -mappen for at se, hvordan jeg har organiseret disse.
Jeg baserede min metode på feedback, jeg modtog fra en udvikler, der nævnte, at det ville være dejligt at kunne klikke på skrifttyperne for at oprette skiver uden at teksten kommer i vejen.
Jeg har taget et ekstra skridt og faktisk givet laget samme navn som skrifttypen .
Dette giver straks udvikleren mulighed for at vide, hvilken skrifttype der skal bruges, når man koder HTML'en.
For mere komplicerede skabeloner kan du oprette yderligere mapper til at angive andre skrifttyper og vigtige header skrifttyper.
(Hint: overskrifter er typisk mærket H1, H2 og så videre i CSS / XHTML terminologi, så etikettering af dine header skrifttyper på samme måde er god praksis).
Alt relateret til skrifttyper skal være indeholdt i "skrifttyper" mappen, så udvikleren skal kun lave et enkelt klik for at fjerne alle skrifttyper og isolere de grafiske elementer på webstedet.
Det kunne se sådan ud:
Brug altid din intuition og hold etiketterne enkle og indlysende .
Denne teknik handler ikke om at holde udvikleren; det handler om at skabe en brugervenlig fil, der hjælper alle i det lange løb.
Jo mere du skelner mellem elementer, lag og mapper i dit design, jo mere glatte ting vil være i udviklingsfasen .
Brug denne organisationsmetode gennem hele processen, og du vil blive overrasket over, hvor hurtigt det bliver anden natur.
4. Navigation og Roll-Overs
Når du opretter din navigationsinterface - uanset om du bruger faner, almindelig tekst eller noget andet - vil du gerne indikere for din udvikler, hvordan fanerne skal se i bestemte stater .
Hvis en fane f.eks. Ændrer farve, når brugeren ruller over det? Er der specielt JavaScript, f.eks. Til at falme i, brug for? Mulighederne er uendelige, så forvent ikke udvikleren at kunne læse dit sind. Mapper går kun så langt i at vise disse detaljer.
Jeg opfordrer dig til at supplere din PSD med et designkort, der giver specifikke anvisninger til de mere komplicerede og detaljerede aspekter af dit design.
Lad os antage, at brugergrænsefladen (UI) i vores design har en fanestruktur. Udviklere har en tendens til at bruge bestemte udtryk, når de henviser til de forskellige "stater" i en fane (ved "state" menes de forskellige måder, hvor en fane vises til brugeren).
I mine interviews med udviklere fandt jeg følgende udtryk som mest anvendte og genkendelige.
Bemærk det billede, der svarer til hver beskrivelse, og læg mærke til, hvordan mappestrukturen afspejler min tankeproces.
5. Ret etiketten dine faner og deres stater
På : Tilstanden for et navigationselement (i dette tilfælde en fane) angiver, at dens relaterede side i øjeblikket ses. Det bør typisk være det mest mærkbare.
Fra : Denne tilstand angiver, at en fane er klikbar, men den vises ikke for øjeblikket eller svæver med musen.
Hover : Denne tilstand viser, hvordan fanen vises, når musemarkøren svæver eller ruller over en inaktiv fane. Den grafiske behandling af denne tilstand er ofte den samme som "on" -staten, men den skal stadig have sin egen mappe.
Nøglen er konsistens: uanset hvad du mærker dine faner, skal du sørge for at holde dem konsekvente!
6. En endelig notat om faner
Åbning af en af undermapperne i navigationen ("off" -mappen i skærmbilledet nedenfor), vil du se, at jeg endnu engang har grupperet hele teksten i en separat mappe.
Dette er valgfrit, fordi tekst ofte er en del af den grafiske sammensætning af fanen.
Hvis teksten genskabes i HTML, anbefaler jeg at placere den i en separat mappe, så udvikleren kan klikke på den for lettere at skære grafikken.
7. Afslutning af filerne
Denne strategi kan virke lidt obsessiv, og det er ikke let at være opmærksom på struktur og orden, når man er fanget i kastene på et godt design.
Ikke desto mindre tager tiden i slutningen af et projekt at organisere og mærke dine mapper korrekt .
Hvis du har komplicerede illustrationer i dit design, skal du prøve at flette dem ind i et enkelt mærket lag.
Hvis det ikke kan gøres (måske på grund af sofistikerede blandingsmetoder), skal du prøve at konvertere lagene til smarte objekter og derefter rasterisere dem.
I sidste ende er målet at reducere lagene og mapperne til det minimale minimum, og mærk dem så klart som muligt.
8. Et trin i den rigtige retning
Udviklere og designere tænker ikke altid ens.
Mens mange designere arbejder i en tilstand af kreativt kaos, afhænger udviklere typisk af orden, struktur og logik .
Når vi designer, går en lille organisation langt hen imod at holde udviklere glade.
Der er bestemt ingen rigtig måde at organisere PSD-filer på, så nå ud til dine udviklere og se, hvad du kan gøre for at oprette PSD-filer, der holder alle sane!
Josh Sears er en forfatter, illustratør og designer for et væld af web-baserede projekter. Han lever som Lead Web Designer, Creative Director og Co-Owner of Littlelines.com . Du kan tjek hans arbejde her eller Følg hans opdateringer på Twitter .
Anvendes disse tips, når du arbejder med Photoshop? Hvilke andre teknikker bruger du til at organisere dine Photoshop-lag?