8 způsobů, jak rychleji navrhnout stránky ve Photoshopu
Jako webový designér je těžké zůstat organizovaným. Nejenže vyrovnáváte několik projektů najednou, ale pravděpodobně máte také těsné termíny a náročné klienty. Můžete také být skákat od značky k značce, a neustále se učit nové značky pokyny a styly.
Naštěstí existuje mnoho způsobů, jak zvýšit efektivitu vašeho pracovního postupu. Abych vám pomohl, sestavil jsem ti osm tipů, které vám pomohou udržet vaši kariéru ve vašem web designu
1. Udržujte soubory organizované
Jedna z nejjednodušších věcí, které můžete udělat, abyste udrželi zdravý rozum, je, aby vaše soubory byly organizovány. Vytváření a udržování konzistentní struktury složek vám umožní najít vaše soubory. Problémy vznikají při strukturování jedné složky jiným způsobem než jiným, což je výzva k nalezení souboru Final-Final-logo.ai .
Konzistentní konvence pojmenování souborů jsou nezbytné při organizaci souborů. Toto je místo, kde se objevuje verze. Někteří návrháři používají data, jiní používají čísla verzí a někteří používají kola. To bude záviset na vašem oboru a vašich osobních preferencích, ale je to dobrý postup. Díky verzování můžete snadno sledovat, který soubor je nejaktuálnější, zejména pokud máte staré verze uložené jako reference.
Obecně si ponechávám dvě až tři staré verze v případě, že se klient chce vrátit zpět na tuto strategii hrdiny z kola první nebo preferoval mobilní zpracování z druhého kola. Abyste se vyhnuli mentálnímu zablokování, je dobré archivovat nebo mazat starší soubory, aby nedošlo k zablokování pevného disku.
Zde je ukázková struktura, kterou používám v aplikaci Clearlink.
Kombinace konsistentní struktury složek a pojmenování konvencí s verzí také pomůže vyhledávací schopnosti. Pokud například spustíte všechny vaše názvy souborů z jedné značky s názvem značky nebo zkratkou, můžete jednoduše filtrovat položky pro tuto značku. To pomůže odlišit "ATT-logo-final.ai" od toho, co by mohlo být mořem "logo-final.ai".
2. Pochopte svůj rámec
Jedna věc, kterou jsem se do několika let věnovala, je, jak správně využít stávající rámec. Dvě těžké hittery v rámci rámce světa jsou v současné době Bootstrap a Nadace , ale Google Zhmotnit jistě jim v blízké budoucnosti udělí peníze na své peníze. Společnost, pro kterou pracuji, používá Nadaci pro většinu svých značkových stránek.
Nadace je dodávána s vestavěnou citlivou mřížkou, spolu s stylingem pro tlačítka, pole, typografii, navigaci atd., Aby se usnadnil život. Použitím vestavěné mřížky nadace v rámci vašich PSD usnadníte vývojáři realizaci vašich návrhů v perfektnějším způsobu, než kdybyste udělali svou vlastní věc. Photoshop má tento šikovný nástroj pro rozvržení průvodce, který nejen vytváří mříže vítr, ale také jej přikládá k umělecké desce pro snadnou restrukturalizaci a pohyb souborů.
Screenshot z Nadace Cheat Sheet
Rámy také poskytují dobrý výchozí bod pro styly tlačítek, formulářů apod. A pomáhají ukázat možnosti a omezení strategií návrhu, které můžete implementovat. To nejenže vám poskytne skvělý výchozí bod pro váš návrh, ale pomůže to podpořit přátelštější spolupráci s vaším vývojářem.
3. Uspořádejte své vrstvy podle obsahu
Když se zabýváte složitými PSD s webovým designem s tolika adresáři, vrstvami, chytrými objekty atd., Je to snadné, aby se věci dostaly špinavé. Jakmile vrstva 2,455 přichází kolem, začnete si uvědomovat, že ve vaší PSD potřebujete nějakou organizaci. To je důvod, proč doporučuji organizovat váš PSD podle sekcí.
Dole se obecně skládá ze složek, které obsahují Nav, Hero, Intro, Balíčky, Výhody, Zápatí apod. Také barvy kódu tyto složky v duhové módě, takže jsou snadno navigovat. To dělá aktualizace sekcí a přepracování vašeho PSD vítr.
Uspořádám svůj soubor do složky, které jsou duhově barevně kódované pro snadné skenování.
Například, pokud potřebujete zvětšit hrdinu, můžete jednoduše přetáhnout všechny složky pod jednu jednotku (příkaz k přidržení) a pak je po aktualizaci přetáhnout zpět. Tato strategie také pomáhá vývojářům a dalším návrhářům snadno navigovat ve vašem souboru. Použitím srozumitelných jmen, jako je "Hero" a "Nav", může nový návrhář jednoduše přeskočit do složky a provést změny, které potřebují.
Někteří designéři se dokonce dostanou do pojmenování jednotlivých vrstev, což může být také neuvěřitelně přínosné, ale může být trochu časově náročné. Vzhledem k tomu, že vrstva je snadná pomocí nástroje pro automatický výběr, když je nastavena na "vrstvu", je snadné se dostat k jednotlivým vrstvám v těchto dnech, takže je na individuálním návrháři, jak chce uspořádat své vrstvy. Tohle je, že jsi to udělal.
4. Uložte všechny klávesové zkratky, které běžně používáte
Toto je úsměv pro efektivitu. Pokud se ocitnete pomocí pravidelného příkazu klíče, pamatujte si ho. Výkonnost zvýšíte exponenciálně, pokud máte všechny hlavní klávesové zkratky dolů.
Některé důležité jsou ukládání, velikost písma a přední, uspořádání vrstev, uložení pro web a opacitu mezi mnoha dalšími. Photoshop také umožňuje vytvářet vlastní zkratky. Ve své knize je nejdůležitějším příkazem, který si zapamatujete, uložení souboru. Vzhledem k náhodným haváriím společnosti Adobe je dobré chybět na straně spoření často spíše než riskovat ztrátu vašeho pokroku.
Adobe nabízí možnost přizpůsobení klávesových zkratek v části Upravit> Klávesové zkratky
Klávesové zkratky se také vztahují k uspořádání vašich vrstev podle složek obsahu (jak je uvedeno výše). Je snadnější přenést vrstvy na horní a spodní část složky pomocí klávesových zkratek, než byste znovu uspořádali vrstvy v neorganizovaném souboru. To je místo, kde se organizuje váš soubor podle svého návrhu. Uložení často používaných klávesových zkratek a udržení organizovaných vrstev výrazně zlepší vaši efektivitu a pomůže vám ostatním návrhářům pracovat se soubory.
5. Využijte knihovny CC
Jedna z nejlepších věcí, které Adobe přidala od vytvoření CC, jsou knihovny. Pokud jste o nich neslyšeli, musíte to zkontrolovat úžasný tutoriál jak je používat.
Mám pocit, že každý návrhářský tým by měl využívat tuto úžasnou funkci. Knihovny umožňují vytvářet knihovnu značek s aktivy, jako jsou barvy, styly písma, fotografie, ikony a symboly (jako hlavičky a zápatí). Díky knihovnám můžete snadno spolupracovat s kreativami z více organizací, které používají knihovnu s jednou značkou.
Knihovny usnadňují změnu barev a aktualizaci stylů textu kliknutím na tlačítko. Pomáhají také ukládat ikony značky, které lze snadno aktualizovat na jednom místě a aktualizace se rychle promítnou přes PSD. To je neuvěřitelně výhodné pro záhlaví a zápatí pro vaše stránky, kde je pravděpodobné, že v rámci celého projektu budou malé aktualizace.
Také používám knihovny CC pro stylování písma v celém svém designu. Nastavím styly pro kopii hrdiny, nadpisy, podpoložky, kopie těla, odmítnutí odpovědnosti atd. Pro stolní, tabletové a mobilní aplikace. Co se týče přepínače pohledu, zjistil jsem, že používám formát listu mnohem víc než zobrazení dlaždice kvůli jeho snadné schopnosti skenování.
Prvky knihovny zobrazené jako spolupracovníci
Knihovny jsou také skvělé pro týmovou spolupráci. Můžete si vybrat, zda chcete spolupracovat s jinými kreativami, abyste mohli upravovat a přidávat do knihovny, nebo můžete sdílet odkaz na knihovnu pro snadný přístup. Mají také funkci "Vytvořit novou knihovnu z dokumentu", ale dávám přednost samotné knihovně, takže zůstává organizována a má nejdůležitější prostředky.
Bohužel existuje několik nedostatků do knihoven, jedním z nich je nedostatek samostatných znaků a odstavcových stylů pro text. Obeznámím se s tím, že používám svůj styl písma v samostatném poli a potom vkládám různé styly do pole společně, aby se textové schránky lépe spravovaly v souboru. Další nevýhodou je, že v současné době nemůžete globálně aktualizovat styl znaků. V současné době neexistují žádné organizační schopnosti v rámci knihovny, aby se vytvořily podsložky v rámci kategorií (barvy, styly znaků atd.), Ale doufejme, že Adobe na tom také pracuje.
Současným způsobem, jak pracují knihovny CC, je, že nejaktuálnější aktualizované / přidané aktivum se objeví nahoru. Barvy knihovny CC nelze použít v jednotlivých textech v textových polích a lze je snadno aplikovat pouze na tvary a celé textové pole. Jsem si jistý, že Adobe je těžko pracovat na řešení těchto otázek, takže nejsem příliš znepokojen, obzvláště proto, že profesionálové určitě převažují nad nevýhody.
6. Uložte obrázky a vektory do formátu inteligentních objektů
Přestože bude váš soubor větší, zachování snímků a vektorů ve formátu inteligentních objektů usnadní budoucím návrhářům upravovat vaše PSD. Vyfotografujte to: klient se vrátí s úpravami, které zahrnují opětovné oříznutí hrdiny a malá vykreslení ikony vektoru. To je lépe provedeno, pokud PSD obsahuje foto s plným rozlišením než menší, rastrovanou verzi. Vektory lze také snadno vyladit, když jsou inteligentní objekty z aplikace Illustrator, nikoli rasterizovaná grafika.
Další výhodou toho, že máte fotografie ve formátu inteligentních objektů, je, když je uložíte jako PSD a poté je umístíte do souboru jako inteligentní objekt. Použití umísťované fotografie PSD umožňuje snadné přidávání úprav a úprav do samostatného souboru fotografií, a nikoliv přeplňování zdrojového souboru. Použití inteligentních objektů jako grafiky knihovny vám dává ještě víc vítězné kombinace. Nejen, že můžete jednoduše upravovat vektorové objekty, ale grafická knihovna bude aktualizována ve všech aplikacích.
Grafika "Hero Illustration" může být editována v samostatném PSD, aby se zabránilo neporiadku hlavního souboru na minimum.
7. Vytvořte průvodce stylu a držte ho
Mnoho značek bude mít obecný stylový průvodce, který budete sledovat, pokud jde o písma, barvy, fotografie, ikony, ilustrace atd. To je užitečné jako prostředek, ale nebude vás vždy udržovat v souladu s vašimi stránkami specifickými styly . Velkou účinnost jsem vylepšila vytvořením průvodce webovým stylem pro každou konkrétní stránku, na které pracuji.
Někdy značky budou mít více stránek s různými styly, takže se ujistěte, že mám jeden pro každé místo, takže mohu zůstat konzistentní, zatímco jsem design. To také vytváří jednoduchý prostředek pro přetahování, když potřebuji knoflíky, ikony, ilustrace, fotografie apod. Nejen, že vás to udělá efektivnějším jako návrhář, ale pomůže vám to zůstat konzistentní ve svém stylu v celém webu.
Jaké mezery používám mezi sekcemi? Podívejte se na průvodce stylu! Jaká byla primární barva a čalounění znovu? Chyť ho ze stylu průvodce! To také pomůže ostatním návrhářům jednoduše skočit na návrhy stránek s lehkostí a efektivitou. Pokud sloučíte použití knihoven CC se štítkem, jste ještě před zápasem.
Vytvářím průvodce stylu PSD pro všechny různé značky, na kterých pracuji, takže mohu snadno chytit prvky, jako jsou tlačítka a ikony.
Mnoho návrhářů je v pokušení přidávat nové styly pokaždé, když čelí novému problému v rámci návrhu. Pro zajištění konzistence je nejlepší se tomu vyvarovat a vždy dodržovat standardy, které jste vytvořili ve vašem průvodce stylu. Pokud přidáte nové vrstvy a styly, ujistěte se, že jsou použity na celém webu.
Čím více nových stylů bude vytvořeno, tím spíše budou složitější budoucí návrhy, a tím bude těžší, aby noví návrháři skočili na projekty a udržovali koncepty konzistentní. V mnoha případech je konzistence důležitější než neustálé inovace, pokud jde o zkušenosti uživatelů. Přestože vám na začátku projektu může být více času na vytvoření průvodce webovým stylem, zvýší se to efektivnost pro všechny budoucí stránky.
Jedna z nejlepších postupů, které jsem se od Brad Frostu dozvěděla, je to udělat inventář rozhraní buď během procesu návrhu nebo na existujícím webu, na kterém budete pracovat. Inventář rozhraní se skládá ze shromažďování všech různých stylů textu, stylů tlačítek apod. Pomocí snímků obrazovky a jejich sestavování s cílem nalézt nesrovnalosti. Následně můžete své poznatky předložit klientovi, abyste navrhli aktualizace a vylepšení.
Vzhledem k tomu, že se webové stránky dotýkají více návrhářů v případě jejich existence, mohou se v oddělení konzistence dostat docela chlupaté. Jakmile naleznete jednotný styl návrhu prvků na stránce, ujistěte se, že aktualizujete svůj průvodce styly tak, aby byli všichni aktuální.
Interface inventory screenshot z http://bradfrost.com/blog/post/interface-inventory/
8. Podporovat mezirezortní spolupráci
Spousta lidí, kteří vykonávají kariéru v marketingové produkci (návrháři, vývojáři, copywriteri atd.), Mají tendenci být introvertní, takže je těžké vystoupit z komfortní zóny, pokud jde o spolupráci. Je také těžké opustit svoji znalostní bublinu, zvláště když je snadnější se vztahovat k lidem ve svém oboru. Přestože někdy může být nepříjemné nebo nepohodlné, opuštění vaší bubliny a pravidelná spolupráce s lidmi z jiných oddělení může značně zlepšit kvalitu vašich návrhů spolu s vaší efektivitou.
Prvním příkladem toho je, když návrháři a vývojáři spolupracují na redesignu. Měli byste se s vývojářem setkat předem, abyste přešli přes rámec, který používají, vzdělávat se na systému sítě a posoudit možnosti. Po ukončení projektové práce nezapomeňte sdílet knihovnu Photoshopu, takže vývojář bude mít snadný přístup k paletě barev, stylům písma apod. Je také užitečné předem sdílet průvodce styly spolu se všemi komponentami, které jste navržený tak, aby jim umožnil dobrý start.
Spolupráce s dalšími tvůrci tvého týmu, které využívají knihovny, vám pomůže zůstat konzistentní a efektivnější. Poskytnutí uměleckého ředitele nebo odpovědnosti nejvyšších designérů za aktualizaci Knihovny a stylu průvodce eliminuje zmatek a udržuje značku konzistentní. Prostě se ujistěte, že existuje řada komunikace při aktualizaci, takže všichni jsou na stejné stránce.
Zůstaň zdravý
Web design může být někdy ohromující a náročné. Ne vždy to musí být tak. Postupujte podle těchto jednoduchých tipů o efektivitě Photoshopu, abyste mohli zmírnit velké množství stresu. Nejen, že to zlepší vaši pohodu, ale manažeři a režiséři na obchodní i kreativní straně si opravdu ocení vaši tvrdou práci a chválí vás za to. Koneckonců, každý je dobrý s konzistentnějším, efektivnějším, krásně vytvořeným designem.