8 sätt att designa webbplatser snabbare i Photoshop
Som webbdesigner är det svårt att hålla sig organiserad. Inte bara balanserar du flera projekt samtidigt, men du kommer sannolikt att möta snabba tidsfrister och tuffa kunder också. Du kan också studsa från varumärke till varumärke, och du måste ständigt lära dig nya riktlinjer och stilar.
Lyckligtvis finns det många sätt att göra ditt arbetsflöde mer effektivt. För att hjälpa till har jag sammanställt dessa åtta tips för att hålla dig frisk i din webbdesign karriär
1. Håll dina filer organiserade
En av de enklaste sakerna du kan göra för att hålla din sanity är att hålla dina filer organiserade. Att skapa och behålla en konsekvent mappstruktur gör att du kan hitta dina filer en bris. Problem uppstår när du strukturerar en mapp annorlunda än en annan, vilket gör det svårt att hitta filen Final-Final-logo.ai .
Konsekventa filnamnkonventioner är viktiga när du organiserar dina filer. Det är här versioning kommer in. Vissa designers använder datum, andra använder versionsnummer och vissa användningsrundor. Det beror på din bransch och dina personliga preferenser, men det är en bra praxis. Tack vare versionen kan du enkelt spåra vilken fil som är mest aktuell, speciellt om du har gamla versioner sparade som referens.
Jag brukar hålla två till tre gamla versioner om klienten vill återgå till hjältestrategin från Round One eller föredra din mobilbehandling från Round Two. För att undvika packrödsmetalliteten är det bra att arkivera eller ta bort äldre filer för att hålla hårddisken från att bli boggad.
Här är en provstruktur som jag använder på Clearlink.
Kombinationen av en konsekvent mappstruktur och namngivningskonventioner med versionering kommer också att hjälpa sökfunktionen. Om du till exempel startar alla dina filnamn från ett varumärke med varumärke eller förkortning, kan du filtrera tillgångarna för det varumärket enklare. Detta kommer att bidra till att skilja "ATT-logo-final.ai" från vad som potentiellt kan vara ett hav av "logo-final.ai s".
2. Förstå din ram
En sak som jag inte lärde mig till flera år i min designkarriär är hur man korrekt utnyttjar en befintlig ram. De två tunga hitterna i ramvärlden är för närvarande bootstrap och fundament , men Googles Förverkligas kommer säkert ge dem en löpning för sina pengar inom en snar framtid. Företaget som jag jobbar för använder Foundation för majoriteten av deras märkesvaror.
Stiftelsen levereras med ett inbyggt svarsstöd, tillsammans med styling för knappar, fält, typografi, navigering etc. bland många andra saker för att göra ditt liv enklare. Genom att utnyttja Foundations inbyggda rutnät i dina PSD-enheter, kommer du att underlätta för utvecklaren att implementera dina mönster på ett mer pixel-perfekt sätt än om du gör dina egna saker. Photoshop har det här smarta guidelayoutverktyget, som inte bara gör att nätverket är en vind, men också fäster dem på konstkortet för att underlätta omstrukturering och rörelse av filer.
Skärmdump från Foundation Cheat Sheet
Ramverk ger också en bra utgångspunkt för knappstyling, blanketter mm och hjälper till att visa möjligheterna och begränsningarna i de designstrategier du kan implementera. Inte bara kommer detta att ge dig en bra utgångspunkt för din design, men det kommer att bidra till att främja vänligare samarbete med din utvecklare.
3. Ordna dina lager enligt innehållsavsnittet
När du arbetar med komplexa webbdesign-PSD-skivor med så många mappar, lager, smarta objekt etc. är det lätt för saker att bli rörig. När lag 2.455 kommer, börjar du inse att du behöver någon form av organisation inom din PSD. Det är därför jag rekommenderar att du organiserar din PSD enligt avsnitten.
Mine består i allmänhet av mappar som inkluderar Nav, Hero, Intro, Paket, Fördelar, Footer etc. Jag färgar också dessa mappar i regnbågsmodell, så att de är lätta att navigera. Detta gör uppdatering av avsnitt och omarbetar din PSD en bris.
Jag organiserar min fil i sektionsmappar som är regnbåge färgkodade för enkel skanning.
Om du till exempel behöver göra hjältesektionen större kan du enkelt dra alla mappar nedan som en enhet (håller kommandot) och dra sedan tillbaka dem efter att uppdateringen har gjorts. Denna strategi hjälper också utvecklare och andra designers att enkelt navigera i din fil. Genom att använda begripliga namn som "Hero" och "Nav" kan en ny formgivare enkelt hoppa in i mappen och göra de ändringar de behöver.
Vissa designers kommer till och med att komma in på namngivna enskilda lager, vilket också kan vara otroligt fördelaktigt men kan bli lite tidskrävande. Eftersom lag är enkla att hitta via det automatiska väljverktyget när det är inställt på "lager" är det enkelt att komma till enskilda lager dessa dagar, så det är upp till den enskilda designern hur de vill organisera sina lager. Poängen är att du gör det klart.
4. Minns alla kortkommandon du normalt använder
Den här är en biggie för effektivitet. Om du befinner dig med ett specifikt nyckelkommando regelbundet, memorera det. Du ökar effektiviteten exponentiellt om du har alla de viktigaste tangentbordsgenvägarna nere.
Vissa viktiga är att spara, teckensnittstorlek och ledande, lagerbeställning, spara för webben och opacitet bland många fler. Photoshop ger dig också möjlighet att skapa egna genvägar. I min bok är det viktigaste kommandot som har lagrats sparat filen. På grund av Adobes slumpmässiga kraschar är det bra att fel på sidan av att spara ofta istället för att riskera att förlora några av dina framsteg.
Adobe ger dig möjlighet att anpassa dina kortkommandon under Redigera> Tangentbordsgenvägar
Genvägar kopplas också in för att organisera dina lager genom innehållsmappsmappar (som nämnts ovan). Det är lättare att ta med lager till toppen och botten av en mapp med tangentbordsgenvägar än att ombeställa lager i en oorganiserad fil. Det är här som organiserar din fil när du kommer in i spel. Att memorera ofta använda tangentbordsgenvägar och hålla dina lager organiserad kommer att förbättra effektiviteten och hjälpa andra designers att arbeta med dina filer.
5. Använda CC-bibliotek
En av de bästa sakerna som Adobe har lagt till sedan skapandet av CC är bibliotek. Om du inte har hört talas om dem, måste du kolla här fantastiska handledning om hur man använder dem.
Jag känner att varje designteam borde utnyttja denna fantastiska funktion. Bibliotek tillåter dig att skapa ett varumärkesbibliotek med tillgångar som färger, teckensnitt, foton, ikoner och symboler (som rubriker och sidfot). Tack vare bibliotek kan du enkelt samarbeta med reklam från flera organisationer med ett enda varumärkesbibliotek.
Bibliotek gör det enkelt att byta färger och uppdatera textstilar med ett knapptryck. De hjälper också till att lagra märkesikoner som lätt kan uppdateras på ett ställe, med uppdateringar som återspeglas snabbt över PSD. Detta är oerhört fördelaktigt för rubriker och sidfot för din webbplats, där du sannolikt kommer att göra små uppdateringar under hela projektet.
Jag använder också CC-bibliotek för typsnitt genom hela min design. Jag ska ställa in stilar för hjältekopiering, rubriker, underrubriker, kroppskopia, ansvarsfrister, etc. för skrivbord, surfplattor och mobila applikationer. När det gäller vyn växlar jag mig själv med att använda listformatet mer-så än kakelytan på grund av att den är lätt att skanna.
Bibliotekselement som ses som samarbetspartner
Bibliotek är också bra för lagsamarbete. Du kan välja att antingen samarbeta med andra annonser så att de kan redigera och lägga till i biblioteket, eller du kan dela länken till biblioteket för enkel åtkomst. De har också ett "Skapa nytt bibliotek från dokument", men jag föredrar att skapa biblioteket själv, så det håller sig organiserat och har bara de mest relevanta tillgångarna.
Tyvärr finns det några nackdelar med bibliotek, en av dessa är brist på separat karaktär och styckeformat för text. Jag arbetar runt detta genom att använda min karaktärsstil i en separat ruta och sedan klistra in olika format i en ruta för att göra textrutor enklare att hantera inom filen. En annan nackdel är att du för närvarande inte kan uppdatera en karaktärsstil globalt. För närvarande finns det ingen organisationsförmåga inom biblioteket för att skapa undermappar inom kategorierna (färg, karaktärsstilar etc.), men förhoppningsvis arbetar Adobe också med detta.
Det nuvarande sättet för CC-bibliotek är att den senast uppdaterade / tillagda tillgången kommer att visas högst upp. CC-biblioteksfärger kan inte appliceras på enskild text i textrutor och appliceras bara enkelt på former och hela textrutor. Jag är säker på att Adobe är hårt på jobbet för att åtgärda dessa problem, så jag är inte alltför orolig, särskilt eftersom proffsen definitivt uppväger nackdelarna.
6. Håll bilder och vektorer i smart objektformat
Även om det kommer att göra din fil större, kommer det att underlätta för dina framtida designers att redigera dina PSD-filer genom att hålla dina bilder och vektorer i smarta objektformat. Bild här: Klienten kommer tillbaka med ändringar som inkluderar ombildning av ett hjältefoto och att göra små tweaks till en vektorikon. Detta görs mer smidigt om PSD innehåller fullupplösningsfotoet snarare än en mindre rasteriserad version. Vektorer är också lätta att tweak när de är smarta objekt från Illustrator snarare än rasteriserad grafik.
En annan fördel med att ha bilder i smarta objektformat kommer när du sparar dem som PSD och placerar dem sedan i din fil som ett smart objekt. Använda ett placerat foto PSD gör det enkelt att lägga till justeringslager och redigeringar i en separat, inbyggd fotofil istället för att röra upp källfilen. Att använda smarta objekt som biblioteksgrafik ger dig ännu mer av en vinnande kombination. Du kan inte bara redigera vektorobjekten, men biblioteksgrafik uppdateras över alla program.
Grafiken "Hero Illustration" kan redigeras i en separat PSD för att hålla röran i huvudfilen till ett minimum.
7. Skapa en stilguide och hålla fast vid den
Många märken kommer att ha en generell stilguide för dig att följa när det gäller teckensnitt, färger, foton, ikoner, illustrationer etc. Det här är till hjälp som en resurs men håller dig inte alltid konsekvent på din webbplatsspecifika styling . Jag har väsentligt förbättrat min effektivitet genom att skapa webbstödguider för varje specifik webbplats som jag jobbar med.
Ibland kommer varumärken att ha flera webbplatser med olika stilar, så jag ser till att jag har en för varje webbplats, så jag kan hålla mig konsekvent medan jag designar. Detta skapar också en lätt drag-och-släpp-resurs när jag behöver knappar, ikoner, illustrationer, foton etc. Inte bara kommer det att göra dig effektivare som designer, men det hjälper dig att hålla dig konsekvent i din styling över hela webbplatsen.
Vilka avstånd använder jag mellan sektioner? Kolla in stilguiden! Vad var den primära knappfärgen och vadderingen igen? Ta det från stilguiden! Detta kommer också att hjälpa andra designers att enkelt hoppa på webbplatsens mönster med lätthet och effektivitet. Om du sammanfogar användningen av CC-bibliotek med stilguiden, är du ännu mer före spelet.
Jag skapar en PSD-stilguide för alla olika märken som jag jobbar på så jag kan enkelt ta tag i element som knappar och ikoner.
Många designers är frestade att lägga till nya stilar varje gång de möter ett nytt problem inom designen. För konsistens är det bäst att undvika detta och alltid hålla sig till de standarder du har etablerat i din stilguide. Om du lägger till nya lager och stilar, se till att de tillämpas på hela webbplatsen.
Ju fler nya stilar som skapas, desto mer komplexa framtida mönster kommer att vara och desto hårdare blir det för nya designers att hoppa på projekt och hålla konstruktionerna konsekventa. I många fall är konsistens viktigare än konstant innovation när det gäller användarupplevelse. Även om det kan ta dig mer tid att skapa webbstylguiden i början av ett projekt, ökar effektiviteten för alla framtida sidor.
En bästa praxis som jag lärde mig från Brad Frost är att göra en gränssnitt inventering antingen under designprocessen eller på en befintlig webbplats som du kommer att arbeta med. En gränssnittsinventering består av att samla alla olika textstilar, knappstilar etc. via skärmdumpar och sammanställa dem för att hitta inkonsekvenser. Därefter kan du presentera dina resultat för kunden för att föreslå uppdateringar och förbättringar.
Eftersom webbplatser berör flera designers om deras existens kan saker bli ganska håriga i konsistensavdelningen. När du väl har hittat en enhetlig designstil för elementen på sidan, se till att uppdatera din stilguide så att alla är aktuella.
Gränssnittets inventerings skärmdump från http://bradfrost.com/blog/post/interface-inventory/
8. Foster interdepartementalt samarbete
Många människor som bedriver karriär inom marknadsföringsproduktion (designers, utvecklare, copywriters, etc.) tenderar att vara inåtvända, så det är svårt att gå ut ur din komfortzon när det gäller samarbete. Det är också svårt att lämna din expertisbubbla, speciellt när det är lättare att relatera till personer i ditt fält. Även om det kan vara besvärligt eller obekväma ibland, lämnar din bubbla och regelbundet samarbetar med personer från andra avdelningar kan förbättra kvaliteten på dina mönster tillsammans med din effektivitet.
Ett utmärkt exempel på detta är när designers och utvecklare samarbetar om en redesign. Du borde träffas med utvecklaren i förväg för att gå över vilken ram de använder, utbilda sig på nätsystemet och bedöma möjligheterna. När designarbetet är klart, se till att du delar ditt Photoshop-bibliotek så att utvecklaren har enkel åtkomst till färgpalett, typsnittstyp etc. Det är också till hjälp att dela stilguiden i förväg tillsammans med alla komponenter du har utformad för att ge dem en bra start.
Samarbete med andra designers på ditt lag som använder bibliotek kommer också att hjälpa dig att hålla dig konsekvent och effektivare. Att ge konstdirektören eller de flesta Senior Designer ansvaret för bibliotek och stilguide uppdateringar eliminerar förvirring och håller varumärket konsekvent. Se bara till att det finns en kommunikationslinje när uppdateringar görs, så att alla är på samma sida.
Håll dig rolig
Webbdesign kan vara överväldigande och utmanande ibland. Det behöver inte alltid vara så. Genom att följa dessa enkla tips om Photoshop-effektivitet kan du lindra en bra bit av din stress. Detta kommer inte bara att förbättra ditt välbefinnande, men chefer och regissörer på både affärsverksamheten och den kreativa sidan kommer verkligen uppskatta ditt hårda arbete och berömma dig för det. Trots allt är alla bra med mer konsekvent, effektiv, vackert utformad design.