8 måder at designe websteder hurtigere i Photoshop
Som webdesigner er det svært at holde sig organiseret. Ikke alene balancerer du flere projekter på en gang, men du er sandsynligvis over for stramme deadlines og hårde kunder også. Du kan også hoppe fra brand til brand, og du skal hele tiden lære nye mærke retningslinjer og stilarter.
Heldigvis er der mange måder at gøre din arbejdsgang mere effektiv. For at hjælpe, har jeg samlet disse otte tips for at holde dig sund i din webdesign karriere
1. Hold dine filer organiseret
En af de nemmeste ting, du kan gøre for at holde din skønhed, er at holde dine filer organiseret. Oprettelse og vedligeholdelse af en ensartet mappestruktur gør det muligt at finde dine filer en brise. Problemer opstår, når du strukturerer en mappe anderledes end den anden, hvilket gør det til en udfordring at finde den Final-Final-logo.ai- fil.
Konsekvente filnavnetekonventioner er afgørende, når du organiserer dine filer. Det er her versioning kommer ind. Nogle designere bruger datoer, andre bruger versionsnumre og nogle brugsrunder. Dette afhænger af din branche og dine personlige præferencer, men det er en god praksis. Takket være versionen kan du nemt spore hvilken fil der er den nyeste, især hvis du har gemt gamle versioner gemt som reference.
Jeg holder normalt to til tre gamle versioner, hvis klienten ønsker at vende tilbage til den heltede strategi fra Round One eller foretrukket din mobilbehandling fra runde to. For at undgå pakke rotte mentalitet, er det godt at arkivere eller slette ældre filer for at holde harddisken fra at blive slået ned.
Her er en prøvestruktur, som jeg bruger på Clearlink.
Kombinationen af en ensartet mappestruktur og navngivningskonventioner med versionering vil også hjælpe søgevnen. Hvis du for eksempel starter alle dine filnavne fra et mærke med mærkenavnet eller forkortelsen, kan du filtrere aktiverne for det pågældende mærke lettere. Dette vil hjælpe med at differentiere "ATT-logo-final.ai" fra hvad der potentielt kunne være et hav af "logo-final.ai's".
2. Forstå dine rammer
Én ting jeg ikke lærte til flere år i min designkarriere er, hvordan man korrekt udnytter en eksisterende ramme. De to tunge hittere i rammevirksomheden er i øjeblikket bootstrap og Fundament , men Googles materialisere vil helt sikkert give dem et løb for deres penge i den nærmeste fremtid. Det firma, jeg arbejder for, bruger Foundation for de fleste af deres mærkevarer.
Stiftelsen leveres med et indbygget lydhør, sammen med styling til knapper, felter, typografi, navigation osv. Blandt mange andre ting for at gøre dit liv lettere. Ved at udnytte Foundations indbyggede net i dine PSD'er, gør du det nemmere for udvikleren at implementere dine designs på en mere pixel-perfekt måde, end hvis du gør dine egne ting. Photoshop har dette nifty guide layout værktøj, der ikke kun gør at skabe net en brise, men også føjer dem til kunstbrættet for at lette fil omstrukturering og bevægelse.
Skærmbillede fra Foundation Cheat Sheet
Rammer giver også et godt udgangspunkt for knapper, formularer osv. Og hjælper med at vise mulighederne og begrænsningerne i de designstrategier, du kan implementere. Dette vil ikke kun give dig et godt udgangspunkt for dit design, men det hjælper med at skabe et venligere samarbejde med din udvikler.
3. Organiser dine lag efter indholdsafsnit
Når du beskæftiger dig med komplekse webdesign-PSD'er med så mange mapper, lag, smarte objekter mv., Er det nemt for ting at blive rodet. Når lag 2.455 kommer rundt, begynder du at indse, at du har brug for en slags organisation inden for din PSD. Derfor anbefaler jeg at organisere din PSD efter sektioner.
Mine består generelt af mapper, der omfatter Nav, Helt, Intro, Pakker, Fordele, Footer osv. Jeg farvekoden også disse mapper i regnbue mode, så de er nemme at navigere. Dette gør opdatering af sektioner og omarbejdning af din PSD en brise.
Jeg organiserer min fil i sektionsmapper, der er farvekodet for regnbue for nem scanning.
Hvis du f.eks. Skal gøre heltesektionen større, kan du nemt trække alle nedenstående mapper som en enhed (hold kommandoen) og derefter trække dem tilbage, efter at opdateringen er lavet. Denne strategi hjælper også udviklere og andre designere nemt at navigere i din fil. Ved at bruge forståelige navne som "Hero" og "Nav", kan en ny designer nemt springe ind i mappen og lave de nødvendige ændringer.
Nogle designere vil endda komme ind i navngivning af enkelte lag, hvilket også kan være utroligt gavnligt, men kan blive lidt tidskrævende. Da lag er let at finde via det automatiske valgværktøj, når det er indstillet til "lag", er det nemt at komme til enkelte lag i disse dage, så det er op til den enkelte designer, hvordan de vil organisere deres lag. Pointen er, at du git 'er færdig.
4. Husk alle tastaturgenveje, du normalt bruger
Denne er en biggie for effektivitet. Hvis du finder dig selv ved at bruge en bestemt nøglekommando regelmæssigt, skal du huske den. Du øger din effektivitet eksponentielt, hvis du har alle de vigtigste tastaturgenveje nede.
Nogle vigtige er at gemme, skriftstørrelse og ledende, lagbestilling, gem til web og opacitet blandt mange flere. Photoshop giver dig også mulighed for at oprette brugerdefinerede genveje. I min bog er den vigtigste kommando, der skal gemmes, gemt din fil. På grund af Adobes tilfældige nedbrud er det godt at fejl på siden af at spare ofte i stedet for at miste nogen af dine fremskridt.
Adobe giver dig mulighed for at tilpasse dine tastaturgenveje under Rediger> Tastaturgenveje
Genveje knytter også til at organisere dine lag ved indholdsdelte mapper (som nævnt ovenfor). Det er nemmere at bringe lag øverst og nederst i en mappe ved hjælp af tastaturgenveje end at ombestille lag i en uorganiseret fil. Det er her, hvor du organiserer din fil, når du kommer ind i spil. Hvis du minder om ofte brugte tastaturgenveje og holder dine lag organiseret, vil det forbedre effektiviteten og hjælpe andre designere med at arbejde med dine filer.
5. Udnytte CC-biblioteker
En af de bedste ting, som Adobe har tilføjet siden oprettelse af CC, er biblioteker. Hvis du ikke har hørt om dem, skal du tjekke dette fantastisk tutorial om hvordan man bruger dem.
Jeg føler, at ethvert designteam skal udnytte denne fantastiske funktion. Biblioteker giver dig mulighed for at oprette et varemærkebibliotek med aktiver som farver, skrifttypestile, billeder, ikoner og symboler (f.eks. Overskrifter og fodbold). Takket være biblioteker kan du nemt samarbejde med annoncer fra flere organisationer, der bruger et enkelt mærkebibliotek.
Biblioteker gør det nemt at ændre farver og opdatere tekstformater med et klik på en knap. De hjælper også med at gemme mærkeikoner, der let kan opdateres på et sted, hvor opdateringer afspejles hurtigt på tværs af PSD'er. Dette er utroligt gavnligt for overskrifter og footers til dit websted, hvor du sandsynligvis vil lave små opdateringer i hele projektet.
Jeg bruger også CC-biblioteker til skrifttypestyling i hele mit design. Jeg opretter stilarter til heltkopiering, overskrifter, underoverskrifter, body copy, ansvarsfraskrivelser mv til desktop-, tablet- og mobilapplikationer. Med hensyn til visningen skifter jeg mig selv ved hjælp af listformatet mere-så end flisevisningen på grund af dets nemme scanningsevne.
Bibliotekselementer, der ses som samarbejdspartner
Biblioteker er også gode til teamsamarbejde. Du kan vælge at samarbejde med andre annoncer, så de kan redigere og føje til biblioteket, eller du kan dele bibliotekets link for nem adgang. De har også et "Opret nyt bibliotek fra dokument" -funktion, men jeg foretrækker selv at oprette biblioteket, så det forbliver organiseret og har kun de mest relevante aktiver.
Desværre er der et par ulemper for biblioteker, hvoraf en er manglen på særskilt karakter og stykkeformater til tekst. Jeg arbejder rundt om dette ved at anvende min karakterstil i en separat boks og derefter indsætte forskellige stilarter i en boks sammen for at gøre tekstbokse nemmere at håndtere inden for filen. En anden ulempe er, at du i øjeblikket ikke kan opdatere en tegneserie globalt. I øjeblikket er der ingen organisationsevner inden for biblioteket for at oprette undermapper inden for kategorierne (farve, tegnstile osv.), Men forhåbentlig arbejder Adobe også på dette.
Den nuværende måde CC Biblioteks arbejde er, at det senest opdaterede / tilføjede aktiv vises øverst. CC-biblioteksfarver kan ikke anvendes til individuel tekst i tekstbokse og anvendes kun let på former og hele tekstbokse. Jeg er sikker på, at Adobe er svært på arbejde for at løse disse problemer, så jeg er ikke for bekymret, især fordi profferne helt opvejer ulemperne.
6. Hold billeder og vektorer i smart objektformat
Selvom det vil gøre din fil større, vil det være lettere for fremtidige designere at redigere dine PSD'er at holde dine billeder og vektorer i smart objektformat. Billede dette: klienten kommer tilbage med redigeringer, der omfatter genoptagelse af et heltfoto og lave små tweaks til et vektorikon. Dette gøres mere smidigt, hvis PSD'en indeholder fuldopløsningsfotoet snarere end en mindre rasteriseret version. Vektorer er også nemme at finjustere, når de er klare objekter fra Illustrator snarere end rasteriseret grafik.
En anden fordel ved at have billeder i smart objektformat kommer, når du gemmer dem som PSD'er og derefter placerer dem i din fil som en smart objekt. Ved hjælp af et placeret foto PSD gør det nemt at tilføje justeringslag og redigeringer i en separat, indeholdt fotofil i stedet for at koble din kildefil. Brug af smarte objekter som biblioteksgrafik giver dig endnu mere en vindende kombination. Ikke alene kan du nemt redigere vektorobjekter, men biblioteksgrafik opdateres på tværs af alle applikationer.
Grafikken "Hero Illustration" kan redigeres i en separat PSD for at holde rotten af hovedfilen til et minimum.
7. Opret en stil guide og holde fast ved det
Mange mærker vil have en generel stilguide, som du kan følge med hensyn til skrifttyper, farver, fotos, ikoner, illustrationer osv. Dette er nyttigt som en ressource, men vil ikke altid holde dig ensartet på din hjemmesidespecifikke styling . Jeg har forbedret min effektivitet betydeligt ved at oprette webstedsguider til hvert bestemt websted, som jeg arbejder på.
Nogle gange vil mærker have flere steder med forskellige stilarter, så jeg sørger for, at jeg har et til hvert websted, så jeg kan forblive konsekvent, mens jeg designer. Dette skaber også en nem træk-og-slip-ressource, når jeg har brug for knapper, ikoner, illustrationer, fotos osv. Dette vil ikke kun gøre dig mere effektiv som designer, men det hjælper dig med at holde dig konstant i din styling over hele siden.
Hvilken afstand bruger jeg mellem sektioner? Tjek stil guide! Hvad var den primære knapfarve og polstring igen? Tag det fra stilguiden! Dette vil også hjælpe andre designere med at let springe på site designs med lethed og effektivitet. Hvis du fusionere brugen af CC-biblioteker med stilguiden, er du endnu mere foran spillet.
Jeg opretter en PSD-stil guide til alle de forskellige mærker, jeg arbejder på, så jeg nemt kan få fat i elementer som knapper og ikoner.
Mange designere er fristet til at tilføje nye stilarter hver gang de står over for et nyt problem inden for designet. For konsistens er det bedst at undgå dette og altid holde sig til de standarder, du har etableret i din stilguide. Hvis du tilføjer nye lag og stilarter, skal du sørge for at de anvendes over hele webstedet.
Jo flere nye stilarter der oprettes, desto mere komplekse fremtidige designs vil være, og jo sværere vil det være for nye designere at springe på projekter og holde designs konsekvente. I mange tilfælde er sammenhæng vigtigere end konstant innovation når det kommer til brugeroplevelse. Selvom det kan tage dig mere tid til at oprette webstilguiden i starten af et projekt, vil det øge effektiviteten for alle fremtidige sider.
En bedste praksis, som jeg lærte af Brad Frost, er at lave en grænseflade opgørelse enten under designprocessen eller på et eksisterende websted, som du vil arbejde på. En grænsefladeinventar består af at indsamle alle de forskellige tekststile, knapper, etc. ved hjælp af skærmbilleder og kompilere dem for at finde uoverensstemmelser. Derefter kan du præsentere dine resultater for kunden for at foreslå opdateringer og forbedringer.
Da websteder berører flere designere i tilfælde af deres eksistens, kan tingene blive hårde i konsistensafdelingen. Når du har fundet en samlet designstil for elementerne på siden, skal du sørge for at opdatere din stilguide, så alle er opdaterede.
Interface inventar screenshot fra http://bradfrost.com/blog/post/interface-inventory/
8. Foster interdepartementalt samarbejde
Mange mennesker, der forfølger karriere inden for marketingproduktion (designere, udviklere, tekstforfattere osv.) Har tendens til at være indadvendte, så det er svært at komme ud af din komfortzone når det kommer til samarbejde. Det er også svært at forlade din ekspertboble, især når det er lettere at relatere til personer i dit felt. Selvom det kan være ubehageligt eller ubehageligt nogle gange, kan du forlade din boble og jævnligt samarbejde med folk fra andre afdelinger betydeligt forbedre kvaliteten af dine designs sammen med din effektivitet.
Et glimrende eksempel på dette er, når designere og udviklere samarbejder om et redesign. Du skal i forvejen mødes med bygherren for at gå over, hvilke rammer de bruger, uddanne dig selv på gittersystemet og vurdere mulighederne. Når designarbejdet er færdigt, skal du sørge for at dele dit Photoshop-bibliotek, så udvikleren har let adgang til farvepaletten, skrifttypestile osv. Det er også nyttigt at dele stilguiden på forhånd sammen med eventuelle komponenter, du har designet til at give dem en god start.
Samarbejde med andre designere på dit team ved hjælp af biblioteker vil også hjælpe dig med at forblive konsistente og være mere effektive. At give kunstdirektøren eller de fleste Senior Designer ansvar over bibliotek og stil guide opdateringer vil eliminere forvirring og holde branding konsekvent. Bare sørg for, at der er en kommunikationslinje, når der opdateres, så alle er på samme side.
Bliv sane
Webdesign kan være overvældende og udfordrende nogle gange. Det skal ikke altid være sådan. Ved at følge disse enkle tips om Photoshop-effektivitet kan du lindre et godt stykke af din stress. Ikke alene vil dette forbedre dit velvære, men ledere og direktører på både forretnings- og kreativ side vil virkelig sætte pris på dit hårde arbejde og rose dig til det. Efter alt er alle gode med mere konsistent, effektivt, smukt udformet design.