Proč dát sbohem Photoshopu?

Na posledním setkání Frontendistů jsem velice hlasitě propagoval Sketch namísto Photoshopu při návrhu UI. Sám jsem na Photoshop ještě donedávna nedal dopustit, používal ho již od jeho čtvrté verze (a tím nemyslím CS4) a Creative Cloud předplatné jsem si pořídil bezprostředně po jeho uvedení. V poslední době jsem byl velice nadšený z vlastností, které přinášejí aktuální verze, a Photoshop byl pro tvorbu webů zkrátka nejlepším nástrojem. To už ovšem dle mého názoru neplatí a rád bych vysvětlil proč.


Všestrannost vs. specializace

Zásadní rozdíl mezi Photoshopem a Sketchem tkví v tom, že Sketch je nástroj určený pro návrh UI, zatímco Photoshop je všestranným nástrojem, který takřka nezná hranic použití (UI, animace, fotografie, vektorová grafika, 3D…). Ale právě to je zároveň i zkázou Photoshopu — robustnost produktu se odráží především na nepřizpůsobeném UI a výkonu.

Uživatelské rozhraní Photoshopu disponuje neuvěřitelně širokou paletou nástrojů, díky kterým dokážete vše, co si jen usmyslíte. To ovšem nemusí být vždy výhoda — u juniornějších UI designerů se tak stává, že používají prvky, které buď nelze implementovat, nebo je to velice komplikované (například Masky a Volby prolnutí). Ano, zobrazení palet lze měnit, ale jejich možné využití v různých kontextech (návrh UI, úprava fotografií…) znamená kompromisy při jejich samotném návrhu.

Sketch oproti tomu nabízí pouze nástroje pro tvorbu UI. Žádné vzrušující filtry pro rastrovou grafiku a rozličné možnosti vrstev. A právě to mě od Sketche zezačátku dokonce odrazovalo — působí příliš jednoduše, škaredě a na první pohled vlastně nic neumí. Jak jsem se brzy přesvědčil, opak je pravdou — ve Sketchi nyní používám prakticky veškeré funkce, žádné nepostrádám, a tvořím tak UI efektivnější než kdykoli dříve.

Jediná funkce, která mi po přechodu z Photoshopu ve Sketchi trošku chybí, je kompozice vrstev, která přinášela kodérovi snadný přehled možných stavů vrstev (hover, focus, sticky lišty a podobně). Jsem si ale jistý, že velice brzy narazím na příslušný plugin — do té doby velice dobře poslouží symboly, o kterých se zmíním za malou chvilku.

Výkon Photoshopu je to, co mě od něj odrazuje zcela nejvíce — i na high-end MacBoocích je rozhraní trhané již v případě malých dokumentů. Výsledné soubory mají mnohdy stovky megabajtů a pro kodéry je paradoxně na škodu, když designér používá Návrhové plochy (jedna z mých nejoblíbenějších funkcí v PS), díky kterým může v rámci jednoho dokumentu zachytit veškeré obrazovky aplikace.

Sketch je zcela jiný příběh — využívá vektorové grafiky, což nese výhodu velice snadného exportu HiDPI podkladů. Prostředí je neuvěřitelně plynulé i při desítkách návrhových ploch a jediné, co výkon zpomalí (alespoň v aktuální verzi) je Background blur, který simuluje rozmazání pod vrstvou (zkuste to mimochodem udělat ve Photoshopu pouze pomocí jedné vrstvy — pokud to dokážete, poprosím vás o komentář s návodem).


Knihovna vs. Symboly

Mou druhou nejoblíbenější funkcí Photoshopu je tzv. Knihovna, která umožňuje komponentový návrh grafického rozhraní. Je to posunutí chytrých objektů na zcela novou úroveň — komponenty lze snadno sdílet napříč dokumenty i uživateli skrze Creative Cloud a manipulace i následná aktualizace obrazovek je velice jednoduchá. Co ovšem naprosto nechápu, je způsob kategorizace těchto komponent — absence třídění do složek činí jinak skvělou Knihovnu v případě větších dokumentů naprosto nepoužitelnou.

Sketch pro tentýž účel využívá tzv. Symbolů, což je prakticky to samé jako komponenty v rámci Knihovny ve Photoshopu. Ovšem se dvěma obrovskými rozdíly:

  • Dají se třídit do složek (to se nemusí zdát jako důležitý rozdíl, ale věřte mi — je).
  • Dají se přetěžovat. A to pro mě byl moment, kdy jsem se do Sketche beznadějně zamiloval — stejně jako v kódu je možné používat stále stejnou komponentu a pouze měnit její vlastnosti (titulek, obrázek, text…), to samé umí Sketch. Jakmile kliknete vložíte Symbol do návrhové plochy, můžete tyto atributy pro každou instanci měnit — například titulek tlačítka nebo obrázek produktu. Zachováte tak třídu komponenty, ale instance jsou unikátní.

Nelze přetížit veškeré vlastnosti, narazil jsem však na jednu věc, která mi velice schází, a sice změnu velikosti komponenty. Dostanete tak do situací, kdy potřebujeme zmenšit ikonu uloženou v podobě Symbolu, ale zkrátka nemůžete. Věřím, že to v brzké budoucnosti bude možné, ale je jasné, že se nedá snadno technicky vyřešit (co by se mělo dít s obsahem symbolu?).

Přetěžování (overrides) symbolů (všimněte si panelu vpravo).

Cena

Vzhledem k tomu, že Sketch stojí pouhých 99 dolarů (kolem 2 500 Kč), mohlo by se zdá, že bude právě cenová politika posledním hřebíčkem do rakve Photoshopu. Ale tím si nejsem tak jistý, a to z následujících důvodů:

  • Přestože se částka tváří jako jednorázová, tvůrci Sketche, Bohemian Coding, nedávno uvedli, že aktualizace budou zdarma pouze po určitou dobu — konkrétně ujišťují o nejméně půlročních updatech zdarma v případě stávajících uživatelů a ročních u uživatelů, kteří si Sketch pořídili čerstvě. Po uplynutí této doby si ve výsledku uživatelé budou platit roční předplatné, což znamená 8,25 dolarů (200 Kč) za měsíc. To je stále výrazně méně než Photoshop, ale…
  • …sám si platím celý Creative Cloud, protože mnohdy používám i další aplikace (především Illustrator a InDesign) a možnosti (TypeKit je pro mě jedním z hlavních benefitů Creative Cloud), tedy částku 60,49 eur (1 650 Kč) měsíčně. Pokud si částku rozpočítám na jednotlivé schopnosti Creative Cloudu (zmíněné aplikace, TypeKit, 20 GB prostor, sdílení Knihoven a souborů…) ve výsledku nejsem od Sketche tak daleko. Navíc Photoshop a Lightroom se dají pořídit v balíčku za 12,09 eur (330 Kč).

Tím ale nechci říci, že by měl být Sketch doživotně zdarma. Naopak — je nezbytné za nové verze platit, aby měli vývojáři z čeho žít a mohli nám přinášet novou funkcionalitu, která nám zvýší efektivitu (a tím vydělá více peněz). Nalijme si čistého vína a zamysleme se nad tím, kolik nám nástroje jako Sketch nebo Photoshop vydělají peněz — opravdu je nefér, pokud po nás vývojáři chtějí příspěvek na nové funkce?

Jednu věc bych ovšem Sketchi v tomto ohledu vytknul, a sice nižší transparentnost ceníku — když jsem si ho pořizoval, bylo to s očekáváním doživotních updatů. Přestože s placením updatů souhlasím, informování ex post mě nepotěšilo.


Sketch vs. Avocode

Parta ze Source si mě nástrojem Avocode velice získala a neskutečně jim fandím, protože jejich nástroj je skvěle zpracovaný. Když jsem používal Avocode společně s Photoshopem, byl jsem nadšený z toho, kolik práce mi při řezání usnadní. Navíc umožňoval sdílení, komentování a revize s uživateli (typicky klienty), kteří Photoshop nevlastní, takže nenutí do zbytečného exportování výstupů, jejich verzování a distribuci.

Jakmile jsem začal používat Sketch, nabyl jsem dojmu, že je řezání v něm natolik svižné, že by mě sdílení v Avocodu spíše zdržovalo — ve verzi, kterou jsem používal, bylo velice nepřehledné, obsahoval-li design více návrhových ploch a stránek, takže pro mě bylo výhodnější zůstat ve Sketchi. Komunikace napříč týmem následovala v InVisionu.

Aktuálně jsem tedy Avocode ze svého procesu vypustil, ale Source na svém produktu intenzivně pracuje a věřím, že se k němu v brzké době díky lepší podpoře Sketch zase vrátím.


Shrnutí

Photoshop je bezpochyby báječný nástroj pro tvorbu rastrové grafiky a jeho pozice se zdát být neochvejná i díky tomu, že Adobe přidává stále pokročilejší funkcionalitu a je standardem na poli designu. Ovšem Sketch nabízí levnější, a přesto výrazně efektivnější variantu pro tvorbu UI. V článku byly zmíněny pouze některé z mnoha bodů, ve kterých Sketch vede na plné čáře, a věřím, že po vyzkoušení trial verze si je zamilujete stejně jako já.


Protože jsem na Frontendistech Sketch opěvoval až příliš, u mnohých diváků jsem vzbudil dojem, že jsem podomní prodejce Sketche. Budu se snažit své nadšení příště trošku tlumit, aby nevzbuzoval zbytečnou nedůvěru. Na otázku, zda prodávám Sketch ovšem odpovídám ne, neprodávám, pouze mi záleží na tom, abychom byli ve své práci maximálně efektivní a dělali ji co nejraději.


One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.