Výpis Photoshopu: Produkce mobilní grafiky se zapne po spálení

01 z 08

Co je výtěžek aktiv

Vytvořte složku ve Photoshopu.

Nová funkce Extract Assets aplikace Photoshop CC 2014 přetahuje přídavné spalování na jiný únavný pracovní postup vytváření snímků pro funkci Responsive Web Design (RWD). Podívejme se na to, jak může příkaz Extract Assets za pár minut rychle zredukovat webovou stránku comp na aktiva připravená pro montáž.

Začněme zřejmou otázkou: Co je to výtěžek aktiv?

Jednoduše řečeno, Extract Assets je nová funkce ve Photoshopu, která poskytuje funkci Generátoru Photoshopu s rozhraním, které pomáhá automatizovat vytváření zobrazovacích prvků pro návrh webových a obrazovek z vašich souborů Photoshopu. Příkaz Extract Assets umožňuje definovat, která vrstva nebo vrstvy chcete vytvořit, jejich fyzickou velikost, formát souboru a uloženou polohu na disku. Tato funkce není určena pro text, pokud není záměrem obrátit text na bitmapu, což opravdu není dobrý nápad.

Začněme.

02 z 08

Otevřete soubor Photoshop .psd

Začínáme s kompilací webových stránek připravenou ve Photoshopu.

Příklad, který používám, obsahuje inteligentní objekt z Illustratoru, nějaký text, hrdinu obsahující text, obrázek a tlačítko a řadu obrázků venku, které posilují téma webu. Klíčem je uspořádání vrstev do skupin. To je nutné, protože úkolem je vytáhnout všechny tyto položky z komprese, takže je lze rychle přidat do webových rozvržení, které se přizpůsobí různým rozlišením a velikostem obrazovky.

03 ze dne 08

Dva způsoby, jak vydělat majetek

Extrakční majetek lze nalézt v nabídce Soubor nebo kliknutím pravým tlačítkem myši na vrstvu.

Na rozdíl od Generate, který také extrahuje objekty přidáním grafického rozšíření k názvu vrstvy, Extract Assets využívá rozhraní, které lze dosáhnout kliknutím pravým tlačítkem na vrstvu nebo výběrem vrstvy a výběrem položky Soubor> Extrahovat majetek .

04 ze dne 08

Rozhraní Extract Assets

Dialogové okno Výpis aktiv.

Dialogové okno Extract Assets je spíše intuitivní. Zobrazí se vrstva nebo výběr, který chcete extrahovat. Nad ním se zobrazí velikost souborů a pod ním je ovládací prvek, který vám umožňuje přiblížení a oddálení objektu. Na pravé straně dialogového okna se nachází kouzlo. Čtyři tlačítka v horní části umožňují vybrat rozlišení / velikost objektu. Následující prvek zobrazuje vybranou vrstvu a klepnutím na znaménko + můžete vybrat vybranou vrstvu také v jiném formátu. Trash Ca n odstraní vrstvu z fronty. V dalším pásu dolů můžete zvolit typ souboru a můžete upravit šířku a výšku výstupního obrazu.

05 z 08

Extrahování obrázku SVG

Extrahování obrázku.

Aplikace Photoshop nerobí dobře obrázky a obrázky a zařízení nemohou zobrazit obraz Illustratoru. Výsledkem je vzestup SVG souborů používaných pro vektorové kresby, jako je logo Illustrator zde zobrazené. Vektory jsou jejich rozlišení nezávislé na zařízení, což znamená, že mohou být zmenšeny bez ztráty detailů nebo obrazu. Chcete-li objekt Smart Illustrator převést na svg, vyberte příkaz svg z pop-upu a klepněte na příkaz Výpis .

06 z 08

Proces extrahování aktiv

Obrázky jsou umístěny ve složce ve stejném místě jako obrázek .psd.

Několik věcí se stane, když kliknete na tlačítko Výpis. Budete poprvé upozorněni, že název souboru se může změnit. To není velký problém. Poté budete informováni, že je vytvořen nový adresář, který uchová aktivum. Po dokončení procesu se složka, umístěná ve stejném umístění jako původní soubor .psd, otevře a zobrazí nové aktivum.

07 z 08

Tlačítko Nastavení je váš nový nejlepší přítel

Rozlišení zařízení.

Klepnutím na tlačítko Nastavení otevřete dialogové okno Nastavení, které je velmi užitečné. Nastavení vlevo jsou měřítka. To, co dělají, je vytvoření různých kopií obrazu, který vývojář použije v mediálních dotazech, aby cíloval rozlišení konkrétního zařízení. Například verze 3x bude zaměřena na displej iPhone nebo iPad Retina, zatímco na zařízení Android bude ukazován faktor 1,25. Přípona se přidá na konec názvu souboru, aby mohl vývojář snadno identifikovat obraz, který má být použit v mediálním dotazu. Po dokončení klikněte na tlačítko OK a vaše volby se rozsvítí v oblasti Výtěžnost v dialogovém okně. Nastavení můžete také přistupovat klepnutím na ikonu ozubeného kola v oblasti Výpis aktiv v pravé části rozhraní

08 z 08

Dokončení nahoru

Zobrazí se více obrazů s různými formáty a rozlišeními.

Po klepnutí na tlačítko Výpis budou všechny položky vytvořeny a přidány do složky. V tomto okamžiku stačí poslat vývojáři kopii složky a přejít k dalšímu projektu.