Extracte de Photoshop: la producció de gràfics mòbils es posa després de l'embotellament

01 de 08

Què és l'extracció d'actius

Crea una comparació a Photoshop.

La nova característica Extract Assets de Photoshop CC 2014 corregeix un postcombustió en el flux de treball d'altra manera tediós per a la creació d'imatges per a Disseny Web Responsive (RWD). Vegem com la comanda Extract Assets pot reduir ràpidament un comp de la pàgina web als actius preparats per al muntatge en un parell de minuts.

Comencem amb una pregunta òbvia: Què és Extracte d'Actius?

En termes senzills, Extract Assets és una característica nova del Photoshop que proporciona la funció Generador de Photoshop amb una interfície per ajudar a automatitzar la creació d'actius d'imatges per al disseny web i la pantalla dels seus arxius de Photoshop. La comanda Extract Assets us permet definir quina capa o capes voleu crear els actius, la mida físic, el format del fitxer i la ubicació desada al disc. Aquesta característica no està pensada per a text, tret que la intenció és convertir el text en un mapa de bits, que en realitat no és una bona idea.

Comencem.

02 de 08

Obre un fitxer .psd de Photoshop

Comencem amb una pàgina web comp preparada en Photoshop.

L'exemple que utilitzo conté un objecte intel·ligent Illustrator, un text, una unitat heroïna que conté text, una imatge i un botó i una sèrie d'imatges a l'aire lliure que reforcen el tema del lloc. La clau aquí és organitzar les capes en grups. Això és necessari perquè la tasca consisteix a treure tots aquests elements fora de la compilació per tal que es puguin afegir ràpidament als dissenys web que s'adapten a diferents resolucions i mides de la pantalla.

03 de 08

Dues maneres d'extreure els actius

Els recursos d'extracció es poden trobar al menú Fitxer o fent clic amb el botó secundari en una capa.

A diferència de Generar, que també extreu objectes mitjançant l'addició d'una extensió gràfica al nom de la capa, Extract Assets utilitza una interfície que es pot accedir fent clic amb el botó secundari en una capa o seleccionant una capa i seleccionant Fitxer> Extract Assets .

04 de 08

La interfície d'extracció d'actius

El quadre de diàleg Extract Assets.

El quadre de diàleg Extract Assets és bastant intuïtiu. Us mostrem la capa o la selecció que voleu extreure. A sobre, es mostra la mida dels fitxers i, a sota, hi ha un control que us permet ampliar i allunyar l'objecte. El costat dret del quadre de diàleg és on passa la màgia. Els quatre botons de la part superior us permeten seleccionar la resolució / mida de l'objecte. La propera franja que mostra la capa seleccionada i fent clic al signe + us permet mostrar la capa seleccionada en un altre format. La Paperera Ca n elimina la capa de la cua. A la propera tira cap avall, podeu triar el tipus de fitxer i podeu ajustar l'amplada i l'alçada de la imatge de sortida.

05 de 08

Extracció d'una imatge SVG

S'extreu una imatge SVG.

Photoshop no controla les imatges SVG tot i els navegadors i els dispositius no poden mostrar una imatge d'Illustrator. Això ha donat lloc a l'augment dels fitxers svg que s'utilitzen per a obres d'art vectorial com el logotip d'Illustrator que es mostra aquí. Sent vectors la seva resolució és independent del dispositiu i es pot escalar amb cap pèrdua de detalls o d'imatge. Per convertir l'Illustrator Smart Object a svg, seleccioneu svg desplegable i feu clic a Extreu .

06 de 08

El procés d'extracció d'actius

Les imatges es col·loquen en una carpeta al mateix lloc que la imatge .psd.

Hi haurà un parell de coses quan feu clic al botó Extracció. En primer lloc, se us avisarà que el nom del fitxer pot canviar. Això no és gran problema. A continuació, se us informarà que s'està creant una nova carpeta per mantenir l'actiu. Un cop finalitzat el procés, la carpeta, situada a la mateixa ubicació que el fitxer original .psd, s'obre i mostra el nou actiu.

07 de 08

El botó Configuració és el vostre nou millor amic

Resolució del dispositiu d'allotjament.

Si feu clic al botó Configuració, s'obre un quadre de diàleg Configuració que és molt útil. Els paràmetres de l'esquerra són els factors d'escala. El que fan és crear les diverses còpies de la imatge que un desenvolupador utilitzarà a les consultes de mitjans per orientar-se a la resolució de la pantalla d'un dispositiu específic. Per exemple, la versió 3x s'orientaria a una pantalla de Retina iPhone o iPad, mentre que un factor de 1,25 seria apuntat a un dispositiu Android. El sufix s'afegeix al final del nom del fitxer per permetre al desenvolupador identificar fàcilment la imatge que s'utilitzarà en una consulta multimèdia. Un cop hagueu acabat, feu clic al botó D' acord i les vostres seleccions s'il·luminaran a l'àrea Extreure els recursos del quadre de diàleg. També podeu accedir a la configuració fent clic a la icona d'engranatge de l'àrea Extreure els actius a la part dreta de la interfície

08 de 08

Acabant

S'extreu diverses imatges amb diferents formats i resolucions.

Quan feu clic al botó Extracció, tots els elements es crearan i s'afegiran a la carpeta. En aquest moment, tot el que heu de fer és enviar al vostre desenvolupador una còpia de la carpeta i passar al vostre pròxim projecte.