Extracte Photoshop: Producția grafică mobilă pornește după pornire

01 din 08

Ce este extrasul de active

Creați un comp în Photoshop.

Noua caracteristică Extras Assets din Photoshop CC 2014 curește un postcombusitor pe fluxul de lucru incomod al creării de imagini pentru Responsive Web Design (RWD). Să aruncăm o privire asupra modului în care comanda Extras Assets poate reduce rapid o compunere a unei pagini web la activele gata de montaj în câteva minute.

Să începem cu o întrebare evidentă: Ce este extrasul de active?

În termeni simpli, Extras Assets este o nouă caracteristică în Photoshop care oferă caracteristica Photoshop's Generator cu o interfață care ajută la automatizarea creării de elemente imagistice pentru designul de web și ecran din fișierele Photoshop. Comanda "Extras Assets" vă permite să definiți stratul sau straturile pentru care doriți să creați active, mărimea lor fizică, formatul fișierului și locația salvată pe disc. Această caracteristică nu este destinată textului decât dacă intenția este de a transforma textul într-un bitmap, ceea ce într-adevăr nu este o idee bună.

Să începem.

02 din 08

Deschideți un fișier .psd Photoshop

Începem cu o compilație de pagini web pregătită în Photoshop.

Exemplul pe care îl folosesc conține un obiect inteligent din Illustrator, un text, un element de erou care conține text, o imagine și un buton și o serie de imagini în aer liber care consolidează tema site-ului. Cheia aici este organizarea straturilor în grupuri. Acest lucru este necesar deoarece sarcina este de a trage toate aceste elemente din comp, astfel încât acestea să poată fi adăugate rapid în layout-urile web care se adaptează diferitelor rezoluții și dimensiuni ale ecranului.

03 din 08

Două moduri de a extrage active

Extrasul de active poate fi găsit în meniul Fișier sau făcând clic dreapta pe un strat.

Spre deosebire de Generate, care extrage și obiecte prin adăugarea unei extensii grafice la numele stratului, Extract Assets utilizează o interfață care poate fi atinsă prin clic dreapta pe un strat sau selectând un strat și selectând File> Extract Assets .

04 din 08

Interfața cu activele de extragere

Caseta de dialog Extras Assets.

Caseta de dialog Extras Assets este mai degrabă intuitivă. Vi se arată stratul sau selecția care urmează a fi extrasă. Deasupra acestuia vă sunt afișate dimensiunile fișierelor și sub el este un control care vă permite să măriți și micșorați pe obiect. Partea dreaptă a casetei de dialog este locul în care se întâmplă magia. Cele patru butoane din partea de sus vă permit să selectați rezoluția / dimensiunea obiectului. Următoarea bandă vă arată stratul selectat și făcând clic pe semnul + vă permite să ieșiți stratul selectat și într-un alt format. Coșul de gunoi Ca n elimină stratul din coadă. În următoarea bandă în jos, puteți alege tipul fișierului și puteți regla lățimea și înălțimea imaginii de ieșire.

05 din 08

Extragerea unei imagini SVG

Extragerea unei imagini.

Photoshop nu se ocupă de imaginile SVG tot atât de bine și browserele și dispozitivele nu pot afișa o imagine Illustrator. Acest lucru a dus la creșterea numărului de fișiere SVG utilizate pentru ilustrații vectoriale, cum ar fi sigla Illustrator prezentată aici. Fiind vectori, rezoluția lor este independentă de dispozitiv, ceea ce înseamnă că acestea pot fi scalate fără pierderi de detalii sau imagini. Pentru a converti obiectul Illustrator Smart în svg, selectați svg din pop-down și faceți clic pe Extract .

06 din 08

Procesul de extragere a activelor

Imaginile sunt plasate într-un dosar în același loc ca și imaginea .psd.

Câteva lucruri se vor întâmpla când faceți clic pe butonul Extract. Mai întâi veți fi avertizat că numele fișierului se poate schimba. Aceasta nu este o problemă mare. Apoi vi se va spune că un nou dosar este creat pentru a păstra activul. După finalizarea procesului, dosarul, plasat în aceeași locație ca și fișierul .psd original, se deschide și vă arată noul element.

07 din 08

Butonul de setări este cel mai bun prieten al tău

Rezolvarea dispozitivelor în uz.

Dacă faceți clic pe butonul Setări, se deschide o casetă de dialog Setări care este foarte utilă. Setările din stânga sunt factorii de scalare. Ce fac ei este să creeze copiile diferite ale imaginii pe care un dezvoltator o va folosi în interogările media pentru a viza o rezoluție a unui ecran specific unui dispozitiv. De exemplu, versiunea de 3x ar fi direcționată către un afișaj iPhone sau iPad, în timp ce un factor de 1,25 ar fi indicat la un dispozitiv Android. Sufixul este adăugat la sfârșitul numelui fișierului pentru a permite dezvoltatorului dvs. să identifice cu ușurință imaginea care va fi utilizată într-o interogare media. După ce ați terminat, faceți clic pe butonul OK, iar selecțiile dvs. se vor aprinde în zona Extras de active din caseta de dialog. De asemenea, puteți accesa setarea făcând clic pe pictograma roată din zona Extras active peste partea dreaptă a interfeței

08 din 08

Terminand

Sunt extrase imagini multiple cu diferite formate și rezoluții.

Când faceți clic pe butonul Extract, toate materialele vor fi create și adăugate în dosar. În acest moment tot ce trebuie să faceți este să trimiteți dezvoltatorului o copie a dosarului și să treceți la următorul proiect.