Myslím, že je vhodnějším názvem, že je Photoshop vhodným nástrojem pro návrh typografie na webu? " Ale to postrádá dramatické odvolání výše uvedeného.

Stejně jako mnozí z vás jsem vždy používal Photoshop k vytváření maketových kompozic svých návrhů. Dokud si pamatuji, byla to průmyslová norma a software, který jsem si zvolil pro většinu návrhářů, s nimiž jsem spolupracoval. Strávil jsem týdny, v nichž jsem navrhoval perfektní rozvržení pixelů, seskupil prvky do hierarchických složek a označil všechny mé vrstvy, aby přechod z krásného mock up na kód co možná nejsladší.

Byl bych plný nadšení, energie a vzrušení vysvětlujících moje návrhy vývojáři, přepínání stavů vrstev a vypínání, abych se pokusil ukázat svou vizi prostřednictvím Photoshopu, ale byl by vždy mírně zklamaný, protože můj lesklý, leštěný design byl přeměněn na to, co bych viděl v prohlížeči. Jistě, to by vypadalo jako můj design ... A taky jsem rozpoznal písma, ale postrádal tu ostrost, kterou jsem si vzpomněl ze svých skladeb. Nešlo o to, aby vývojáři to nekódují dobře, víc, že ​​typografie, kterou jsem vytvořila ve Photoshopu, se nepřekládala do kódu.

To, co vidíte, není vždy to, co dostanete

Při výběru fonty existuje několik důležitějších věcí než zda je písmo snadno čitelné nebo ne. Ve Photoshopu to není problém, protože vše vypadá skvěle. Nezáleží na tom, jaké písmo používáte, na jakou velikost nebo váhu (v rozumu), jak to bude vypadat perfektně na obrazovce.

Bohužel se to nevztahuje na prohlížeč. Často při prohlížení návrhu v prohlížeči byly vztahy mezi prvky a typem špatné. Velikost písma a výšky řádků, které jsem přiřadil stylům v mé kompozici photoshopu, by nevypadaly stejně jako v prohlížeči. Pokud jsem ve svých návrzích označil 20 pixelů nad nadpisem, může se tato vzdálenost změnit, protože výška řádku hlavičky by měla vliv na velikost okraje, což by se nestalo ve Photoshopu. Poté budu muset začít dlouhý a zdlouhavý proces obávaných "designových vylepšení".

Všichni nenávidí design vylepšení

Věřte mi, že není jen vývojář, který se vyhýbá myšlence návrháře, který sedí vedle nich a požádá je, aby "zvýšili výšku čáry kopie těla o dva pixely", poté, co vývojář změní CSS a zavede .... Zadejte. "Vlastně 1 pixel menší" ... Vstupte. "Možná bylo lepší, jak to bylo". Tento druh vylepšení CSS kousek po kousek za viděním výsledků v reálném čase prostřednictvím prohlížeče je časově náročný a nepodporuje kreativitu. Vývojáři se rychle potěšují tím, že stráví svůj den opakovaně tím, že změní to, co považují za nejmenší detaily, které nebudou mít žádný vliv, a designéři nejsou schopni experimentovat rychle a snadno měnit písma a styly pro ty, které budou v prohlížeči lépe.

Takže co teď?

Pro designéry, kteří chápou CSS, můžete použít nástroje jako Firebug abyste účinně vytvořili vlastní vylepšení designu v prohlížeči a všimli si všech změn v CSS v jednom dokumentu, které pak můžete předat vývojáři. To je ve skutečnosti to samé jako sedění s vývojářem a provádění změn CSS, ale daleko méně zdlouhavé pro vývojáře a umožní také návrháři dále experimentovat s velikostí a styly předtím, než rozhodne. Přestože je to dobrý nástroj pro kontrolu a změnu částí HTML a CSS, ztratíte změny, které provedete, jakmile se prohlížeč obnoví, což může být velmi nepříjemné, pokud jste změnili mnoho prvků a nezaznamenali jste všechny své úprav.

Můžete použít Firediff plug-in uložit záznam o všech změnách, které vytvoříte v rámci programu Firebug, což je skvělé, protože vám ušetří, že musíte poznamenat každou změnu v samostatné tabulce a později. Největším problémem s touto metodou je, když začnete vkládat webové písma do rovnice, protože všechna zvolená písma musí být nainstalována do vašeho typového kitu nebo se v prohlížeči neobjeví. To dělá věci mnohem obtížnější a méně volně experimentovat snadno s různými fonty, protože nemůžete jen rychle vyzkoušet písma.

Navrhování v prohlížeči

Služby jako Typecast aby bylo designerům mnohem jednodušší pracovat s webovými písmy a do značné míry dělám celou svou typografii pro web. Umožňuje vytvářet typografické fiktivní ups (stejně jako byste ve Photoshopu) pomocí svého vizuálního rozhraní přiřadit písmo, styly, váhy, barvy, výšku čáry, okraje, polstrování a další typografii. Nejlepší věc, kterou používáte při práci s typecast, je to, že vše funguje v prohlížeči, takže rozhodujete o typu přesně tak, jak bude vykreslen pro uživatele. Zdá se, že určité písmo nevypadá příliš horko u 19 pixelů? Vytočte to až na 20 kliknutím na tlačítko, zpět na 19 a nakonec se usadíte ve velikosti 18 pixelů, vše provedeno v několika sekundách, než hodinách, které sedí s vývojářem.

Můžete použít jakékoliv webové písma z jejich sbírek 23 000 písem, včetně písem Google, Typekit a dalších ve svých kompozicích, což umožňuje rychlé a snadné experimentování (nedávno byly zakoupeny společností Monotype, které vlastní fonty Fonts.com a Myfonts, takže očekáváte, že mnoho dalších písem na cestě brzy). Typecast podle mého názoru zavádí pojem hravosti zpět do typografie, neboť vás vyzývá, abyste vyzkoušeli varianty písma, které jste možná nikdy nezjistili, kdyby nebyly tak snadno dostupné a snadno zaměnitelné, jak jsou.

Další velmi užitečnou vlastností typecast je schopnost prohlížet a upravovat CSS svého typu. Můžete přidat barvy a obrázky na pozadí, stavy vznášení kurzoru nebo dokonce přechody jednoduchým editováním panelu CSS. Jakmile jste spokojeni s vaším vytvořením, můžete snadno exportovat a ukládat kód CSS, který pak může být nahrán na vaše stránky nebo odeslán vývojáři a protože vše bylo navrženo v prohlížeči, bude vypadat přesně tak, jak to hodláte.

Ztratil jsi mě v CSS

Photoshop není průmyslovým standardem za nic a někteří z vás tam budou hyperventilovat při myšlence, že ho propadne do designu v prohlížeči, nakonec jsme kreativy, nikoli kodéry. No, položte papírovou tašku, protože stále existuje způsob, jak vytvořit krásnou typografii pomocí webových písem ve Photoshopu. Extensis vytvořili plug-in, který lze nainstalovat do verzí Photoshopu CS5 a vyšších, které vám umožní přístup ke všem webovým píslům WebINK a webovým píslům Google, které se budou používat zdarma přímo ve Photoshopu.

To znamená, že ve svých konstrukčních kompozicích můžete použít libovolné webové písmo WebINK nebo webové písma Google stejně jako libovolná písma, která jsou nainstalována ve vašem systému a zobrazují zhruba stejnou, jak by měla vypadat v prohlížeči. Zásuvný modul vám umožní přístup pouze k webovým píslům WebINK a Google, ale na straně plus automaticky aktualizuje nová písma, která jsou přidána do knihovny písem WebINK a Google.

Photoshop napájení

Dalším cenným pluginem, který usnadňuje přechod mezi kompozicemi Photoshopu a kompatibilním prohlížečem CSS, je bezplatný plug-in založený na cloudu od css3ps.com . Jedním z hlavních důvodů, proč mnoho návrhářů pracuje s aplikací Photoshop, je ovládání, které máte nad vrstvami a prvky tvaru. Být schopen snadno a rychle experimentovat se stínem, záře, barvou, strukturou, zaoblenými rohy a dalšími je téměř většinou druhá příroda a něco, co i zkušení návrháři se snaží replikovat přesně v prohlížeči. Pro ty, tento plug-in je dokonalý, protože umožňuje vytvářet vaše kompozice způsobem, který znáte nejlépe, ale pak vám umožní snadno převést styl vašeho tvaru do prohlížeče kompatibilního s CSS3. Tato metoda je ideální pro navrhování tlačítek, navigace nebo cokoli jiného, ​​pro které jste vytvořili tvar.

Možná stále existuje role pro Photoshop jako nástroj pro návrh webových layoutů, ale pokud jde o návrh typografie pro web, aplikace jako Firebug a Typecast ji předčily. Doba potřebná k aktualizaci statických kompozic se nedá srovnávat s rychlostí a snadností, kterou můžete v prohlížeči provést. Pro ty z vás, kteří prostě nemůžou dokonce bavit myšlenku navrhování v prohlížeči, by výše uvedené pluginy měly přinejmenším dát Photoshopu podporu, kterou potřebuje, aby zůstal relevantní a usnadnil přechod.

Používáte aplikaci Photoshop k tvorbě webových stránek? Je Photoshop jít cestou Flash? Dejte nám vědět v komentářích.

Doporučený snímek / náhled mrtvý obraz přes Shutterstock.