Slik organiserer du dine Photoshop-lag effektivt
Vi designere pleier å bli frustrert med utviklere når de tar friheter med vårt arbeid.
Men vi må forstå at de ikke er helt skyldige.
Sett deg i skoene sine: forestill deg hvordan det er å åpne en Photoshop-fil (PSD), bare for å finne en knall av dårlig merkede lag og mapper, pluss en haug med ukontrollerte skjulte lag og andre halvbakte ideer som ikke gjorde det til realiseres.
Følgende opplæring beskriver hvordan du oppretter organisert, designer og utvikler vennlig PSD-filer .
Dette er på ingen måte den eneste løsningen, men forhåpentligvis vil den oppmuntre til bedre praksis i webdesign verden.
Mens jeg skrev denne opplæringen intervjuet jeg flere utviklere som har mye erfaring med flere designere.
Deres tilbakemelding var ekstremt innsiktende. Jeg oppfordrer deg definitivt til å nå ut til utviklerne du jobber med , for å finne ut om du kan gjøre noe for å forbedre PSD-filene dine.
1. Grunnleggende mappestruktur
For det første beholder jeg en PSD-fil for hånden kalt "Website-Template.psd" .
Denne filen inneholder grunnleggende for hvert nettsted, inkludert rutenettet, grunnleggende mappestruktur og vanlige dimbroeensions (jeg bruker et arbeidsområde på 1440 piksler med en bredde på 960 piksler).
Denne malen eliminerer behovet for å sette opp en ny fil for hvert prosjekt.
La oss ta et øyeblikk for å gjøre oss kjent med den grunnleggende organisasjonen av disse mappene.
Du vil merke at standardmappestrukturen inneholder bare tre kjernemapper: "header", "innhold" og "footer".
Dette enkle settet inneholder de grunnleggende mappene som de fleste nettsteder bruker og får meg til å starte på høyre fot ved å gi en effektiv organisasjonsplattform.
Du vil legge merke til at jeg har merket alle mappene så enkelt som mulig .
Disse mappene vil inneholde en rekke delmapper. Når designen vokser, må du være sikker på at de nye mappene er merket like tydelig.
Utvidelse av «header» -mappen, vil du se organisasjonen av undermapper.
Legg merke til at undernavigasjonen "Navigasjon" vanligvis er den mest komplekse: Hold utvikleren i tankene når du merker og lager denne undermappen, og innholdet er viktig.
Et siste skritt før du hopper inn i designet, er å gruppere denne samlingen av mapper i en overordnet mappe kalt "wireframes" .
Dette vil bidra til å holde innholdet organisert for når vi begynner å designe og fargelegge. Det er også en god måte å skille mellom ulike sider i samme PSD-fil.
2. Administrere lag for et hele nettsted
Når vi designere kommer inn i et spor, kan det være enkelt å forandre strukturen for kreativitet. Dette er når selvdisiplin må sparke inn.
Vi må tvinge oss til å ta seg tid til å organisere lagene vi lager .
Nå som det første oppsettet er fullført, gir jeg en oversikt over hvordan jeg grupperer ulike elementer i en full design.
Som du er klar over, følger designen sjelden en lineær bane, så vær oppmerksom på at dette bare er en av kanskje utallige løsninger.
"Hvis alle designere fulgte en standard prosedyre for å organisere sine PSDer [organisere sine mapper ved å følge et standard sett med retningslinjer], kan du enkelt slå av en times utviklingskostnad, om ikke mer. For ikke å nevne at du ville fylle en splittelse mellom design og utvikling, kutte tilbake på noe vekk fra det opprinnelige design som er vanlig i utviklingsfasen "
Matt Sears, Ruby on Rails utvikler
3. Mappestruktur i detalj
Vi starter med en oversikt over hoveddelen (innholdet) og avsluttes med overskriften, fordi det har et viktig element (navigasjon) som trenger spesiell oppmerksomhet.
Når du åpner innholdsmappen, vil du legge merke til at jeg har delt undermappene slik at den visuelle utformingen av nettstedets design reflekteres i mappestrukturen .
For eksempel, fordi innholdet har en topp- og bunnseksjon, har jeg merket dem tilsvarende: "topp" og "bunn" .
Jeg har også plassert all bakgrunnsgrafikk (gradienter og andre bilder som må skives for HTML) i egne mapper.
La oss nå åpne «topp» -mappen (en undermappe av «innhold» -mappen), som inneholder flere vanlige elementer, for eksempel et mellomrom for tekst, et mellomrom for et bilde osv.
Legg merke til bruken av enda en understruktur for flere lag og mapper.
Mapper har blitt utpekt for skrifter, bilder og bakgrunnsgrafik (gradienter, solide farger, etc.).
Fordi skrifter kan forstyrre utviklere når de sorterer gjennom en PSD, la oss åpne "skrifter" -mappen for å se hvordan jeg har organisert disse.
Jeg baserte min metode på tilbakemelding jeg mottok fra en utvikler som nevnte at det ville være flott å kunne klikke av skriftene for å lage skiver uten at teksten kom i veien.
Jeg har tatt et ekstra skritt og faktisk gitt laget samme navn som skriften .
Dette lar umiddelbart utvikleren vite hvilken skrifttype som skal brukes når man koder HTML.
For mer kompliserte maler kan du opprette flere mapper for å spesifisere andre fonter og viktige headerfonter.
(Hint: overskrifter er vanligvis merket H1, H2 og så videre i CSS / XHTML-terminologi, så merking av headerfonter på samme måte er god praksis).
Alt relatert til skrifter bør finnes i "skrifter" -mappen, slik at utvikleren bare må gjøre et enkelt klikk for å fjerne alle skrifter og isolere de grafiske elementene på nettstedet.
Det kan se slik ut:
Bruk alltid din intuisjon og hold etikettene enkle og åpenbare .
Denne teknikken handler ikke om å holde utvikleren; Det handler om å skape en brukervennlig fil som hjelper alle i det lange løp.
Jo mer du skiller elementene, lagene og mappene i designet, jo jevnere ting vil være i utviklingsfasen .
Bruk denne organisasjonsmetoden gjennom hele prosessen, og du vil bli overrasket over hvor raskt det blir den andre naturen.
4. Navigasjon og Roll-Overs
Når du konfigurerer navigasjonsgrensesnittet ditt - enten du bruker faner, vanlig tekst eller noe annet - vil du vise til utvikleren hvordan fanene skal se i bestemte stater .
For eksempel, bør en fane endre farge når brukeren ruller over den? Er spesiell JavaScript, for eksempel for fading i, nødvendig? Mulighetene er uendelige, så forvent ikke at utvikleren skal kunne lese tankene dine. Mapper går bare så langt i å vise disse detaljene.
Jeg oppfordrer deg til å supplere din PSD med et designkort som gir spesifikke veibeskrivelser på de mer kompliserte og detaljerte aspektene av designet.
La oss anta at brukergrensesnittet (UI) i vårt design har en tabulatorstruktur. Utviklere har en tendens til å bruke spesifikke termer når de refererer til de forskjellige "statene" i en kategori (ved "state" mener jeg de forskjellige måtene som en kategori vises på til brukeren).
I mine intervjuer med utviklere fant jeg følgende ord for å være mest konsekvent brukt og gjenkjennelig.
Vær oppmerksom på bildet som tilsvarer hver beskrivelse, og legg merke til hvordan mappestrukturen gjenspeiler tankeprosessen.
5. Riktig merke dine faner og deres stater
På : "På" -statusen til et navigasjonselement (i dette tilfellet en faneblad) indikerer at den tilhørende siden for øyeblikket blir vist. Vanligvis bør det være mest merkbare.
Av : Denne tilstanden indikerer at en fane er klikkbar, men vises for øyeblikket ikke eller svever over med musen.
Hover : Denne tilstanden viser hvordan fanen vises når musemarkøren svever eller ruller over en inaktiv kategori. Den grafiske behandlingen av denne tilstanden er ofte den samme som "på" -staten, men den skal fortsatt få sin egen mappe.
Nøkkelen er konsistens: uansett hva du merker dine faner, sørg for å holde dem konsekvente!
6. En endelig notat om faner
Å åpne en av undermappene i navigasjonen ("av" -mappen i skjermbildet nedenfor), vil se at jeg igjen har gruppert all tekst i en egen mappe.
Dette er valgfritt, fordi tekst ofte er en del av den grafiske sminningen av fanen.
Hvis teksten vil bli gjenskapt i HTML, anbefaler jeg at du plasserer den i en egen mappe, slik at utvikleren kan klikke den av for å gjøre det enklere å skli grafikken.
7. Fullføre filene
Denne strategien kan virke litt obsessiv, og det er ikke lett å være oppmerksom på struktur og rekkefølge når man blir tatt i kast med en flott design.
Ikke desto mindre, ta deg tid på slutten av et prosjekt for å organisere og merke dine mapper på riktig måte .
Hvis du har kompliserte illustrasjoner i ditt design, kan du prøve å flette dem inn i et enkelt godt merket lag.
Hvis det ikke kan gjøres (kanskje på grunn av sofistikerte blandingsmetoder), kan du prøve å konvertere lagene til smarte objekter og deretter rasterisere dem.
Til slutt er målet å redusere lagene og mappene til det minste minimum, og merk dem så klart som mulig.
8. Et skritt i riktig retning
Utviklere og designere tror ikke alltid likt.
Mens mange designere jobber i en tilstand av kreativt kaos, bygger utviklere vanligvis på orden, struktur og logikk .
Når vi designer, går en liten organisasjon langt i retning av å holde utviklere fornøyde.
Det er absolutt ingen riktig måte å organisere PSD-filer på, så nå ut til utviklerne dine og se hva du kan gjøre for å lage PSD-filer som holder alle søte!
Josh Sears er en forfatter, illustratør og designer for en rekke nettbaserte prosjekter. Han lever som Lead Web Designer, kreativ direktør og medeier av Littlelines.com . Du kan sjekk ut hans arbeid her eller følg hans oppdateringer på Twitter .
Bruker du disse tipsene når du arbeider med Photoshop? Hvilke andre teknikker bruker du til å organisere Photoshop-lagene dine?