Photoshop Extract: Ang Mobile Graphics Production ay Pupunta Sa Afterburner

01 ng 08

Ano ang Mga I-extract ang Mga Ari-arian

Lumikha ng comp sa Photoshop.

Nagtatampok ang bagong tampok na Extract Asset ng Photoshop CC 2014 ng isang afterburner sa kung hindi man ay nakakapagod na workflow ng paglikha ng imahe para sa Responsive Web Design (RWD). Tingnan natin kung paano maaaring mabilis na mabawasan ng utos ng Extract Assets ang isang kompyuter ng web page sa mga asset na handa sa pagpupulong sa loob ng ilang minuto.

Magsimula tayo sa isang malinaw na tanong: Ano ba ang mga Asset ng I-extract?

Sa simpleng mga termino, ang Extract Assets ay isang bagong tampok sa Photoshop na nagbibigay ng tampok na Generator ng Photoshop gamit ang isang interface upang makatulong na i-automate ang paglikha ng mga asset ng imaging para sa web at screen na disenyo mula sa iyong mga file sa Photoshop. Ang utos ng Extract Assets ay nagpapahintulot sa iyo na tukuyin kung aling mga patong o mga layer na gusto mong lumikha ng mga asset para sa, ang kanilang pisikal na sukat, format ng file at naka-save na lokasyon sa disk. Ang tampok na ito ay hindi sinadya para sa teksto maliban kung ang intensyon ay upang i-on ang teksto sa isang bitmap, na talagang hindi isang magandang ideya.

Magsimula na tayo.

02 ng 08

Buksan ang Isang Photoshop .psd File

Nagsisimula kami sa isang paghahanda ng web page sa Photoshop.

Ang halimbawa na ginagamit ko ay naglalaman ng Smart Object mula sa Illustrator, ilang teksto, isang yunit ng yunit na naglalaman ng teksto, isang imahe at isang pindutan at isang serye ng mga larawan sa labas na nagpapatibay sa tema ng site. Ang susi dito ay pag-aayos ng Mga Layer sa mga grupo. Ito ay kinakailangan dahil ang gawain ay upang hilahin ang lahat ng mga item sa labas ng comp upang maaari silang mabilis na idinagdag sa mga layout ng web na umangkop sa iba't ibang mga resolution ng screen at laki.

03 ng 08

Dalawang Mga Paraan Upang I-extract ang Mga Ari-arian

Extract Asset ay matatagpuan sa menu ng File o sa pamamagitan ng pag-right-click ng isang layer.

Hindi tulad ng Gumawa, na kumukuha din ng mga bagay sa pamamagitan ng pagdaragdag ng isang extension ng graphic sa pangalan ng layer, Gumagamit ng Extract Asset ang isang interface na maaaring maabot sa pamamagitan ng pag -click ng isang layer o pagpili ng layer at pagpili ng File> Extract Asset .

04 ng 08

Ang Extract Asset Interface

Ang dialog box ng Extract Assets.

Ang dialog box ng Extract Assets ay sa halip madaling maunawaan. Ikaw ay ipinapakita ang layer o pagpili na nakuha. Sa itaas ito ay ipinapakita ang laki ng mga file at sa ibaba ito ay kontrol na nagbibigay-daan sa iyo upang mag-zoom in at out sa bagay. Ang kanang bahagi ng dialog box ay kung saan ang magic ang mangyayari. Ang apat na mga pindutan sa itaas ay nagpapahintulot sa iyo na piliin ang resolution / laki ng bagay. Ang susunod na strip ay nagpapakita sa iyo ng piniling layer at ang pag-click sa + sign ay nagbibigay-daan sa iyong output ang napiling layer sa ibang format pati na rin. Ang Trash Ca n ay nag-aalis ng layer mula sa queue. Sa susunod na strip down, maaari mong piliin ang uri ng file at maaari mong ayusin ang lapad at taas ng imahe ng output.

05 ng 08

Pagkuha ng Isang SVG Image

Pagkuha ng imahe ng svg.

Ang Photoshop ay hindi nagtataglay ng mga imahe ng svg na ang lahat ng mabuti at mga browser at mga aparato ay hindi maaaring magpakita ng isang imahe ng Illustrator. Nagresulta ito sa pagtaas ng mga file ng svg na ginagamit para sa likhang sining ng vector gaya ng logo ng Illustrator na ipinapakita dito. Ang pagiging vectors ng kanilang resolution ay aparato malayang kahulugan na maaaring sila ay pinaliit na walang pagkawala ng detalye o imahe. Upang i-convert ang Illustrator Smart Object sa svg, piliin ang svg mula sa pop down at i-click ang I- extract .

06 ng 08

Ang Proseso ng Pagkuha ng Mga Ari-arian

Ang mga imahe ay inilagay sa isang folder sa parehong lugar tulad ng .psd na imahe.

Ang isang pares ng mga bagay na mangyayari kapag nag-click ka sa pindutan ng I-extract. Babaguhin ka munang mabago ang pangalan ng file. Ito ay hindi malaking isyu. Pagkatapos ay sasabihin sa iyo na nililikha ang isang bagong folder upang i-hold ang asset. Sa sandaling matapos ang proseso, ang folder, na inilagay sa parehong lokasyon bilang orihinal na .psd file, ay bubukas at ipinapakita sa iyo ang bagong asset.

07 ng 08

Ang Pindutan ng Mga Setting Ay Ang Iyong Bagong Pinakamahusay na Kaibigan

Matupad ang resolution ng aparato.

Ang pag-click sa pindutan ng Mga Setting ay nagbukas ng isang dialog box na Mga Setting na seryoso kapaki-pakinabang. Ang mga setting sa kaliwa ay ang mga scaling factor. Ang ginagawa nila ay gumawa ng iba't ibang mga kopya ng imahe na gagamitin ng developer sa mga query sa media upang i-target ang resolution ng screen ng isang partikular na aparato. Halimbawa, ang 3x na bersyon ay mai-target sa isang iPhone o iPad Retina display samantalang ang isang 1.25 na kadahilanan ay itinuturo sa isang Android device. Ang suffix ay idinagdag sa dulo ng pangalan ng file upang payagan ang iyong developer na madaling makilala ang imahe na gagamitin sa isang query sa media. Sa sandaling tapos ka na, i-click ang pindutan ng OK at ang iyong mga pagpipilian ay sindihan sa Ekstrang Asset na lugar sa dialog box. Maaari mo ring ma-access ang setting sa pamamagitan ng pag-click sa icon ng gear sa ekstrang Asset area sa sa kanang bahagi ng interface

08 ng 08

Tinatapos ko na

Maramihang mga imahe na may iba't ibang mga format at resolution ay nahango.

Kapag na-click mo ang pindutan ng I-extract ang lahat ng mga asset ay malilikha at idaragdag sa folder. Sa puntong ito ang kailangan mo lamang gawin ay upang ipadala ang iyong developer ng kopya ng folder at magpatuloy sa iyong susunod na proyekto.