Project Parfait: Adobe spustilo generátor CSS z vašich PSD souborů

Experimentální projekt Adobe s názvem Project Parfait si klade za cíl nabídnout online aplikaci schopnou zpracovat nahrané soubory PSD přímo v prohlížeči a pomoci s exportem CSS a jednotlivých vrstev coby obrázků. Na první pohled tento experiment funguje skvěle a vypadá jako užitečná pomůcka pro každého kodéra CSS.
reklama

Photoshop používá spousta designérů pro návrh webových stránek i jiných rozhraní, například mobilních aplikací. Jestli je to vhodné, nebo zda je lepší používat nějaké vyloženě vektorové grafické editory, nechejme stranou. Já osobně mám rád Photoshop.

Jednou z cest, jak zpříjemnit práci při realizaci webu nakresleného ve Photoshopu, zkouší ukázat experimentální online aplikace od Adobe, Project Parfait. Běží přímo ve webovém prohlížeči, vlastně si vyžádá něco s WebKitem (ideálně tedy Chrome) a nechce po vás, abyste měli na počítači instalovaný Photoshop.

Jde o experiment, to znamená, že není zcela jisté, že se ve finále objeví jako běžný komerční produkt. Na druhou stranu ale Project Parfait nevypadá jako zpola odladěná věc, na několika PSD jsem vyzkoušel, že funguje více méně bez problémů a dělá, co slibuje. A nepadá. Pojďme se na něj kouknout blíže.

Pro přihlášení na adrese projectparfait.adobe.com potřebujete Adobe ID, to lze vytvořit zcela zdarma, takže vám nic nebrání v tom, produkt vyzkoušet. Po přihlášení vám Project Parfait nabídne plochu pro nahrání vašich PSD souborů. Ty jsou krátce zpracovávány a následně připraveny k otevření v online aplikaci.

Styly a CSS v Project Parfait

Přestože se v materiálech k projektu dočtete, že nakopírované PSD se nemusí zobrazit úplně stejně jako v desktopovém Photoshopu, musím říci, že jsem na problém nenarazil. Jakmile si zde PSD otevřete, tak myší přejíždíte nad jednotlivými vrstvami, obrázky, texty. Klepnutím některou z položek označíte a Project Parfait vám zobrazí její CSS zápis, který můžete použít ve své aplikaci.

Ten CSS zápis může být různý. Pro rastrovou vrstvu s nějakým obrázkem se vám nabídne zadání jejích rozměrů a stažení jako samostatného souboru. Ihned pod označenou položkou také uvidíte rozměry a pozici spolu s odkazem pro rychlé zkopírování CSS zápisu.

V případě textové vrstvy je už CSS kódu o poznání více. Problém je občas s fonty. Řadu jich Project Parfait rozpozná, u řady řekne, že jde o písmo TitiliumText22L. V případě textů můžete rychle zkopírovat i to, co je v nich napsáno. Přehled všech použitých písem vidíte i v bočním panelu, hned po CSS zápisem pro zvolený prvek.

Project Parfait

Měření vzdáleností

Označte klepnutím jeden prvek v PSD, a poté s držením klávesy Shift klikněte na nějaký sousední. Ihned uvidíte vzdálenost mezi těmito prvky. Pokud se nemýlím, ve Photoshopu nic takového nelze. Já měřím vzdálenost pomocí nástroje Slice Tool. Rychlost a jednoduchost, s jakou lze změření vzdálenosti v Project Parfait provést, se mi velmi líbí.

Project Parfait

Barvy a přechody

Hned po otevření PSD vám Project Parfait zobrazí přehled barev použitých v obrázku. Samozřejmě ne na fotkách, které jsou v něm vloženy, ale u písem a vektorových objektů. U nich bych se ještě zastavil – Parfait vám po výběru takového prvku zobrazí v CSS jeho zápis i pro přechodovou výplň, kterou je možné realizovat přes CSS3. A to včetně vícesměrových a složitějších gradientů.

Vrstvy

Boční panel standardně zobrazuje zápis CSS pro zvolený prvek a pod ním seznam písem a barev. Můžete jej přepnout i do režimu Layers, pak vám zobrazí přehled vrstev v otevřeném PSD. Můžete je zde zobrazovat a ukrývat podobně, jako v desktopovém Photoshopu. Parfait navíc i přímo zde u jednotlivých vrstev nabízí tlačítko pro jejich stažení ve formě obrázku.

Při stahování vrstvy si vybíráte formát, v jakém se má uložit. Tedy PNG8, PNG32, JPG nebo SVG. Obrázky se nestahují hned, jsou dostupné na kartě Assets, odkud je teprve stáhnete. Trochu mi to připomíná Generator ve Photoshopu CC.

Project Parfait

Jak to bude s Project Parfait dále?

Jak Adobe píše v Project Parfait (beta) FAQ, zatím není jisté, zda bude produkt dotažen do konce, natož jaká by byla jeho případná cena za používání. Vše tak určitě rozhodne i zájem uživatelů. Zmíněné FAQ doporučuji přečíst. Najdete tam mimo jiné i přehled limitů týkajících se nahrávaných PSD.

Stejně tak se tu dočtete, podle čeho Parfait usuzuje, zda má při generování CSS použít prefixy pro jednotlivé typy prohlížečů. Používá službu Shouldiprefix.com.

Celkově hodnotím Project Parfait jako povedený nápad a zajímavý produkt. Myslím si, že pokud bude dotažen do konce a za rozumnou cenu, například v rámci předplatného k Photoshopu, určitě si své fanoušky najde.

Tagy
Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal a Symfony. Obojí také školím spolu se základy SEO. Jsem Acquia Certified Developer a Site Builder a napsal jsem několik knih o Drupalu. Ve volných chvílích cestuji a podnikám výlety. Více se dozvíte na mém firemním webu.

reklama

Komentáře k článku

Přidat komentář

Filtered HTML

  • Povolené HTML značky: <a href hreflang> <em> <strong> <cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <p> <br>
  • Řádky a odstavce se zalomí automaticky.
  • Web page addresses and email addresses turn into links automatically.

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
reklama
Nové diskuze
reklama
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

Knihy o Drupalu

Kniha Drupal 8 Kniha Drupal 7 333 tipů a triků pro Drupal
Více na KnihyPolzer.cz

Co píší na Interval.cz
@maxiorel na Twitteru

Maxiorel na Twitteru