Photoshop kivonat: A mobil grafikai gyártás az Afterburner-en folytatódik

01/08

Mi a kivonat eszköz?

Hozzon létre egy kompot a Photoshopban.

A Photoshop CC 2014 új Extract Assets funkciója utánpótlást készít a Responsive Web Design (RWD) képalkotás egyébként fárasztó munkafolyamatán. Vessünk egy pillantást arra, hogy az Extract Assets paranccsal gyorsan lecsökkenthet egy weblapot összeállításra kész eszközökkel pár perc alatt.

Kezdjük egy nyilvánvaló kérdéssel: Mi a kivonat eszköz?

Egyszerűen fogalmazva, az Extract Assets egy új funkció a Photoshop programban, amely a Photoshop Generator funkcióját biztosítja egy olyan felület segítségével, amely automatizálja a Photoshop fájlok webes és képernyőn megjelenő képalkotó elemeinek létrehozását. A Kivonatelemek paranccsal meghatározhatja, hogy mely rétegeket vagy rétegeket kíván létrehozni, fizikai méretét, fájlformátumát és mentett helyét a lemezen. Ez a szolgáltatás nem csak a szövegre vonatkozik, hacsak nem az a szándék, hogy a szöveget egy bitképké alakítsa, ami valójában nem jó ötlet.

Lássunk neki.

02/08

Nyissa meg a Photoshop .psd fájlt

Elkezdjük a Photoshopban elkészített weblapot.

Az általam használt példa egy Illustrator nevű intelligens objektumot tartalmaz, egy szöveget, egy hős egység, amely szöveget, képet és gombot tartalmaz, valamint egy sor kültéri képet, amely megerősíti a webhely témáját. A legfontosabb itt a rétegek csoportosítása. Erre azért van szükség, mert a feladat az összes elem eltávolítása az összetevőkből, így azok gyorsan hozzáadhatók olyan webes elrendezésekhez, amelyek alkalmazkodnak a különböző felbontásokhoz és méretekhez.

03/08

Két módszer a kitermelésre

Extract Eszközök megtalálhatóak a Fájl menüben vagy jobb egérgombbal a rétegre.

A Generate-től eltérően, amely a réteg nevéhez grafikus kiterjesztésen keresztül hozzáadja az objektumokat, az Extract Assets olyan felületet használ, amelyet egy réteg jobb egérgombbal vagy réteg kiválasztásával érhet el, és választhat a Fájl> Extract Assets elemet .

04/08

Az Extract Assets Interface

Az Extract Assets párbeszédpanel.

A Kivonatelemek párbeszédpanel meglehetősen intuitív. Megjelenik a kivonandó réteg vagy kiválasztás. A felett megjelenik a fájlok mérete, és alatta található az irányítás, amely lehetővé teszi az objektum zoomolását és kicsinyítését. A párbeszédpanel jobb oldalán a varázslat történik. A tetején lévő négy gomb segítségével kiválaszthatja az objektum felbontását / méretét. A következő szalag mutatja a kiválasztott réteget, és a + jelre kattintva a kiválasztott réteget más formátumban is megjelenítheti. A Trash Ca n eltávolítja a réteget a sorból. A következő sávban le tudja választani a fájltípust, és beállíthatja a kimeneti kép szélességét és magasságát.

05/08

Egy SVG kép kibontása

Az SVG kép kibontása.

A Photoshop nem kezeli az SVG-képeket annyira, hogy a böngészők és eszközök nem képesek megjeleníteni az Illustrator képét. Ez a vektorgrafikus grafikákhoz, például az itt bemutatott Illustrator logóhoz használt svg fájlok emelkedéséhez vezetett. Mivel vektorok, felbontásuk eszköz független, azaz méretezhetőek a részletek vagy a kép elvesztése nélkül. Az Illustrator intelligens objektumának svg-be való konvertálásához válassza ki az svg lehetőséget a pop-lefelé, és kattintson az Extract elemre.

06/08

Az Extract Assets folyamat

A képek egy mappába kerülnek, amely ugyanaz, mint a .psd kép.

Néhány dolog fog történni, amikor rákattintasz a Kivonat gombra. Először figyelmeztetni fogják, hogy a fájlnév megváltozhat. Ez nem nagy kérdés. Akkor azt mondják, hogy új mappát hoznak létre az eszköz tartásához. A folyamat befejezése után megnyitja a mappát, amely az eredeti .psd fájlhoz hasonló helyen található, és megmutatja az új eszközt.

07. 08

A Beállítások gomb az új legjobb barátod

A készülék felbontása.

A Beállítások gombra kattintva megnyílik a Beállítások párbeszédpanel , amely komolyan hasznos. A bal oldali beállítások a skálázási tényezők. Mit csinálnak, hogy létrehozza a kép különböző példányait, amelyet egy fejlesztő a média lekérdezésekben használ, hogy egy adott eszköz képernyőfelbontását célozza meg. Például a 3x verzió célzott volna egy iPhone vagy iPad Retina kijelzőre, míg egy 1.25-ös tényezőt mutatna egy Android-eszközön. Az utótag hozzáadódik a fájlnév végéhez, hogy lehetővé tegye a fejlesztő számára, hogy könnyen azonosítsa a média lekérdezésben használt képet. Miután elkészült, kattintson az OK gombra, és a párbeszédpanelen a Kiválasztott elemek területen megjelenik a választás. A beállítást úgy is elérheti, hogy a fogadó ikonra kattint az Extract Assets területen a felület jobb oldalán

08. 08

Befejezés

A különböző formátumú és felbontású képek többsége kivonásra kerül.

Amikor megnyomja a Kivonat gombot, az összes eszköz létrehozásra kerül, és hozzáadódik a mappához. Ezen a ponton mindössze annyit kell tennie, hogy elküldi a fejlesztőnek egy példányt a mappából, és továbblép a következő projektre.