Photoshop Extract: Ang Produksyon sa Pagdumala sa Mobile Gibuhat sa Afterburner

01 sa 08

Unsa ang mga Asset nga Extract

Paghimo og comp sa Photoshop.

Ang bag-ong feature sa Extract Assets sa Photoshop CC 2014 nag-obserba sa usa ka afterburner sa dili maayo nga workflow sa paghimo sa imahen alang sa Responsive Web Design (RWD). Atong tan-awon kon sa unsa nga paagi ang komentaryo sa Extract Asset dali nga makapakunhod sa usa ka web page comp ngadto sa assembly-ready assets sulod sa pipila ka minutos.

Magsugod kita sa usa ka dayag nga pangutana: Unsa ang mga Asset nga Extract?

Sa yano nga mga termino, ang Extract Assets usa ka bag-o nga bahin sa Photoshop nga naghatag sa feature sa Photoshop nga Generator uban ang usa ka interface aron sa pagtabang sa pag-automate sa pagmugna sa imaging assets alang sa web ug screen design gikan sa imong mga file sa Photoshop. Ang command nga Extract Assets nagtugot kanimo sa paghubad kung unsang layer o mga layer nga imong gusto nga maghimo og mga butang alang sa, sa ilang pisikal nga gidak-on, format sa file ug gitipigan nga lokasyon sa disk. Kini nga bahin dili alang sa teksto gawas kung ang tuyo mao ang paghimo sa usa ka bitmap, nga dili gayud maayo nga ideya.

Magsugod na ta.

02 sa 08

Magbukas sa usa ka Photoshop. Psd File

Nagsugod kami sa usa ka web page comp nga giandam sa Photoshop.

Ang panig-ingnan nga akong gigamit naglangkob sa usa ka Smart Object gikan sa Illustrator, pipila ka teksto, usa ka yunit sa bayani nga adunay sulod nga teksto, usa ka imahe ug usa ka button ug usa ka serye sa mga imahen sa gawas nga nagpalig-on sa tema sa site. Ang yawe dinhi mao ang pag-organisar sa mga Layer ngadto sa mga grupo. Gikinahanglan kini tungod kay ang tahas mao ang pagbitad sa tanan niining mga butang gikan sa comp aron sila mahimong dali nga madugang sa web layouts nga mopahiangay sa nagkalain-laing mga resolusyon ug gidak-on sa screen.

03 sa 08

Duha ka mga Paagi Sa Kinuha ang mga Ari-arian

Ang Extract Assets mahimong makita diha sa menu sa File o pinaagi sa pag-klik sa usa ka layer.

Dili sama sa Generate, nga nagpagawas usab sa mga butang pinaagi sa pagdugang sa usa ka graphic extension sa ngalan sa layer, ang Extract Assets naggamit og usa ka interface nga mahimong maabot pinaagi sa pag-klik sa usa ka layer o pagpili sa usa ka layer ug pagpili sa File> Extract Assets .

04 sa 08

Ang Extract Assets Interface

Ang Extract Assets dialog box.

Ang kahon sa dialogo sa Extract Assets hinuon nga intuitive. Gipakita kanimo ang layer o pagpili nga makuha. Sa ibabaw niini ikaw gipakita ang mga file nga gidak-on ug sa ubos kini kontrol nga nagtugot kanimo sa pag-zoom sulod ug sa gawas sa butang. Ang tuo nga bahin sa kahon sa dialogo mao ang kung diin mahitabo ang salamangka. Ang upat ka mga butang nga anaa sa ibabaw makapahimo kanimo sa pagpili sa resolusyon / gidak-on sa butang. Ang sunod nga hubara nagpakita kanimo sa gipili nga layer ug ang pag-klik sa + nga sign nagpadala nimo sa gipili nga layer sa laing format ingon man. Ang Trash Ca n nagwagtang sa layer gikan sa queue. Sa sunod nga hugpong sa ubos, mahimo nimong pilion ang tipo sa file ug mahimo ka mag-adjust sa gilapdon ug gitas-on sa output image.

05 sa 08

Pagkuha sa Usa ka SVG Image

Pagkuha sa usa ka svg nga larawan.

Ang mga Photoshop wala magdumala sa svg nga mga imahen sa tanan nga maayo ug ang mga browser ug mga gamit dili makapakita sa usa ka larawan sa Illustrator. Kini miresulta sa pagsaka sa mga file sa svg nga gigamit alang sa artwork sa vector sama sa logo sa Illustrator nga gipakita dinhi. Ang mga vectors sa ilang mga resolusyon mao ang device nga independente nga kahulogan sila mahimo nga mausab nga walay pagkawala sa detalye o larawan. Aron ma-convert ang Illustrator Smart Object sa svg, pilia ang svg gikan sa pop ug i-klik ang Extract .

06 sa 08

Ang Proseso sa Kinuha nga mga Asset

Ang mga imahe gibutang sa usa ka folder sa samang lugar sama sa .psd nga imahe.

Ang usa ka magtiayon nga mga butang mahitabo kon imong i-klik ang Extract button. Ikaw una nga gipasidan-an nga ang file nga ngalan mahimong mausab. Dili kini dako nga isyu. Dayon sultihan ka sa usa ka bag-ong folder nga gimugna aron paghupot sa asset. Sa diha nga ang proseso mahuman, ang folder, nga gibutang sa samang lokasyon sama sa orihinal nga. Pdd file, gibuksan ug gipakita kanimo ang bag-ong kabtangan.

07 sa 08

Ang Butang sa Pagpangandam Mao Ang Imong Bag-ong Pinakamaayo nga Higala

Ang pagtan-aw sa resolusyon sa aparato.

Ang pag-klik sa button sa Settings magbukas sa kahon sa dialogo sa Settings nga seryoso nga mapuslanon. Ang mga setting sa wala mao ang scaling factors. Ang ilang gibuhat mao ang paghimo sa nagkalainlaing mga kopya sa imahe nga gamiton sa usa ka developer sa mga pangutana sa media aron sa pag-target sa resolusyon sa screen sa piho nga device. Pananglitan, ang 3x nga bersyon mahimong target sa usa ka iPhone o iPad Retina display samtang ang usa ka 1.25 nga butang nga gitudlo sa Android device. Ang suffix idugang sa katapusan sa ngalan sa file aron ang imong developer dali nga makaila sa imahe nga gamiton sa usa ka pangutana sa media. Sa higayon nga mahuman ka, i-klik ang OK button ug ang imong mga gipili mopagaan sa Extract Assets area sa dialog box. Mahimo mo usab nga ma-access ang setting pinaagi sa pagklik sa gear icon sa Extract Assets area sa ibabaw sa tuo nga bahin sa interface

08 sa 08

Kataposan

Daghang mga hulagway nga adunay lainlaing mga format ug mga resolusyon ang makuha.

Sa diha nga imong i-klik ang Extract button ang tanan nga mga kabtangan pagahimoon ug idugang sa folder. Niini nga punto ang kinahanglan nimo nga buhaton mao ang pagpadala sa imong developer og usa ka kopya sa folder ug padayon sa imong sunod nga proyekto.