Så här organiserar du dina Photoshop-lager effektivt
Vi designers tenderar att bli frustrerade med utvecklare när de tar friheter med vårt arbete.
Men vi måste förstå att de inte är helt felaktiga.
Sätt dig själv i sina skor: tänk på hur det är att öppna en Photoshop-fil (PSD), bara för att hitta en ojämn märkning av lager och mappar, plus en massa oskyddade dolda lager och andra halvbakade idéer som inte gjorde det förverkligande.
Följande handledning beskriver hur man skapar organiserade, designer och utvecklarvänliga PSD-filer .
Detta är inte på något sätt den enda lösningen, men förhoppningsvis kommer det att uppmuntra till bättre praxis i webbdesignvärlden.
Samtidigt som jag skrev denna handledning intervjuade jag flera utvecklare som har stor erfarenhet av att arbeta med flera designers.
Deras feedback var extremt insiktsfullt. Jag uppmuntrar dig definitivt också att nå ut till utvecklarna du arbetar med , för att ta reda på om du kan göra något för att förbättra dina PSD-filer.
1. Grundläggande mappstruktur
Till att börja med behåller jag en PSD-fil till hands med namnet "Website-Template.psd" .
Den här filen innehåller grunderna för varje webbsida, inklusive nätverkssystemet, grundläggande mappstruktur och vanliga dimbroeensions (jag använder en arbetsplats på 1000 med 1440 pixlar, med en sidbredd på 960 pixlar).
Denna mall eliminerar behovet av att skapa en ny fil för varje projekt.
Låt oss ta en stund att bekanta oss med den grundläggande organisationen av dessa mappar.
Du kommer märka att min standardmappstruktur innehåller bara tre kärnmappar: "header", "content" och "footer".
Den här enkla uppsättningen innehåller de grundläggande mapparna som de flesta webbplatser använder och får mig igång på rätt fot genom att tillhandahålla en effektiv organisationsplattform.
Du kommer märka att jag har märkt alla mappar så enkelt som möjligt .
Dessa mappar kommer att rymma en rad delmappar. När din design växer, se till att de nya mapparna är märkta lika tydligt.
Genom att expandera mappen "header" ser du organisationen av undermappar.
Observera att undermappen "Navigation" är vanligtvis den mest komplexa: hålla utvecklaren i åtanke när du märker och skapar den här undermappen och dess innehåll är viktigt.
Ett sista steg innan du hoppar in i konstruktionen är att gruppera den här samlingen av mappar i en föräldermapp med namnet "wireframes" .
Det här hjälper till att hålla innehållet organiserat för när vi börjar utforma och färglägga. Det är också ett bra sätt att skilja mellan olika sidor inom samma PSD-fil.
2. Hantera lager för hela webbplatsen
När vi formgivare kommer in i ett spår, kan det vara lätt att gå framåt för kreativitet. Det är då självdisciplin måste sparka in.
Vi måste tvinga oss att ta sig tid att organisera de lager vi skapar .
Nu när den ursprungliga inställningen är klar kommer jag att ge en översikt över hur jag grupperar olika delar av en full design.
Som du vet är designen sällan en linjär väg, så kom ihåg att detta bara är en av kanske otaliga lösningar.
"Om alla designers följde ett standardförfarande för att organisera sina PSD: er [organisera sina mappar genom att följa en standard uppsättning riktlinjer], kan du enkelt slå av en timme utvecklingskostnad, om inte mer. För att inte tala om att du skulle fylla en splittring mellan design och utveckling, skära tillbaka på något som händer från den ursprungliga designen som är gemensam i utvecklingsfasen "
Matt Sears, Ruby on Rails utvecklare
3. Mappstruktur i detalj
Vi börjar med en översikt över huvudkroppen (innehållet) och avslutar med rubriken, eftersom den har ett viktigt element (navigering) som behöver särskild uppmärksamhet.
När du öppnar innehållsmappen märker du att jag har delat undermappar så att den visuella layouten för webbplatsens design återspeglas i mappstrukturen .
Till exempel, eftersom innehållet har en övre och nedre sektion, har jag märkt dem enligt följande: "top" och "bottom" .
Jag har också placerat all bakgrundsgrafik (gradienter och andra bilder som måste skivas för HTML) i sina egna mappar.
Låt oss nu öppna mappen "topp" (en undermapp i mappen "innehåll" ), som innehåller flera vanliga element, till exempel ett utrymme för text, ett utrymme för en bild etc.
Lägg märke till användningen av ännu en understruktur för ytterligare lager och mappar.
Mappar har utsetts för teckensnitt, bilder och bakgrundsgrafik (gradienter, solida färger etc.).
Eftersom teckensnitt kan distrahera utvecklare när de sorterar igenom en PSD, låt oss öppna mappen "teckensnitt" för att se hur jag har organiserat dessa.
Jag baserade min metod på feedback jag fick från en utvecklare som nämnde att det skulle vara bra att kunna klicka på teckensnitt för att skapa skivor utan att texten kom i vägen.
Jag har tagit ett extra steg och faktiskt fått lagret samma namn som teckensnittet .
Detta låter omedelbart utvecklaren veta vilken typsnitt som ska användas vid kodning av HTML.
För mer komplicerade mallar kan du skapa ytterligare mappar för att ange andra teckensnitt och viktiga rubriker.
(Tips: rubriker är typiskt märkta H1, H2 och så vidare i CSS / XHTML-terminologi, så märkning av ditt huvudfonter på samma sätt är bra praxis).
Allt relaterat till teckensnitt ska finnas i mappen "teckensnitt" , så att utvecklaren måste göra bara ett enda klick för att ta bort alla teckensnitt och isolera de grafiska elementen på webbplatsen.
Det kan se ut så här:
Använd alltid din intuition och håll dina etiketter enkla och självklara .
Denna teknik handlar inte om att hålla utvecklaren; Det handlar om att skapa en lättanvänd fil som hjälper alla på lång sikt.
Ju mer du skiljer elementen, lagren och mapparna i din design, ju smidigare saker kommer att ligga i utvecklingsfasen .
Använd den här organisationsmetoden under hela processen, och du kommer bli förvånad över hur snabbt det blir andra naturen.
4. Navigation och Roll-Overs
När du konfigurerar ditt navigationsgränssnitt - oavsett om du använder flikar, vanlig text eller något annat - vill du ange hur utvecklaren ska visa flikarna i specifika stater .
Om till exempel en flik ska ändra färg när användaren rullar över den? Är speciell JavaScript, som för att bleka in, behövs? Möjligheterna är oändliga, så förvänta dig inte att utvecklaren ska kunna läsa dig. Mappar går bara så långt i att visa dessa detaljer.
Jag uppmanar dig att komplettera din PSD med en designkarta som ger specifika anvisningar om de mer komplicerade och detaljerade aspekterna av din design.
Låt oss anta att användargränssnittet (UI) i vår design har en flikstruktur. Utvecklare brukar använda specifika termer när man hänvisar till de olika "tillstånden" i en flik (med "state" menar jag de olika sätten på vilka en flik visas för användaren).
I mina intervjuer med utvecklare hittade jag följande termer för att vara mest konsekvent använda och igenkännliga.
Observera bilden som motsvarar varje beskrivning och märk hur mappstrukturen speglar min tankeprocess.
5. Korrigera etiketten på dina flikar och deras stater
På : "På" -statusen för ett navigeringsobjekt (i det här fallet en flik) indikerar att dess relaterade sida visas för närvarande. Typiskt bör det vara mest märkbara.
Av : Detta tillstånd indikerar att en flik är klickbar men visas inte för närvarande eller svängs över med musen.
Höger : Detta läge visar hur fliken visas när muspekaren sveper eller rullar över en inaktiv flik. Den grafiska behandlingen av det här tillståndet är ofta detsamma som "on" -tillståndet, men det ska fortfarande ges sin egen mapp.
Nyckeln är konsistens: oavsett vad du etiketterar dina flikar, var noga med att hålla dem konsekventa!
6. En slutlig notering om flikar
Öppna en av undermapparna i navigeringen ("av" -mappen på skärmbilden nedan), så ser du att jag en gång till har grupperat all text i en separat mapp.
Detta är valfritt, eftersom text ofta är en del av den grafiska sminken på fliken.
Om texten kommer att återskapas i HTML, rekommenderar jag att du placerar den i en separat mapp så att utvecklaren kan klicka på den för att lättare skära av grafiken.
7. Slutförandet av filerna
Den här strategin kan verka lite obsessiv, och det är inte lätt att uppmärksamma struktur och ordning när man fångas i kastar en bra design.
Ändå ta tid i slutet av ett projekt att organisera och märka dina mappar på lämpligt sätt .
Om du har komplicerade illustrationer i din design, försök att plana dem i ett enda väl märkt lager.
Om det inte går att göra (kanske på grund av sofistikerade blandningsmetoder), försök konvertera lagren till smarta objekt och rasterera dem sedan.
I slutändan är målet att minska skikten och mapparna till det lägsta minimumet och märka dem så tydligt som möjligt.
8. Ett steg i rätt riktning
Utvecklare och designers tycker inte alltid lika.
Medan många designers arbetar i ett tillstånd av kreativt kaos, bygger utvecklarna vanligtvis på ordning, struktur och logik .
När vi designar, går en liten organisation långt för att hålla utvecklarna nöjda.
Det finns verkligen inget sätt att organisera PSD-filer, så nå ut till dina utvecklare och se vad du kan göra för att skapa PSD-filer som håller alla vettiga!
Josh Sears är en författare, illustratör och designer för en rad webbaserade projekt. Han lever som Lead Web Designer, Creative Director och Co-Owner of Littlelines.com . Du kan kolla in hans jobb här eller följ hans uppdateringar på Twitter .
Applicerar du dessa tips när du arbetar med Photoshop? Vilka andra tekniker använder du för att organisera dina Photoshop-lager?