Che cosa sono le risorse di estrazione
Il nuovo Estrarre risorse La funzione di Photoshop CC 2014 sostituisce un postbruciatore sul flusso di lavoro altrimenti tedioso della creazione dell'immagine per il Responsive Web Design (RWD). Diamo un'occhiata a come il comando Extract Assets può ridurre rapidamente una comp di una pagina web alle risorse pronte per il montaggio in un paio di minuti.
Iniziamo con una domanda ovvia: che cosa sono i beni estratti?
In termini semplici, Extract Assets è una nuova funzionalità di Photoshop che fornisce la funzione Generator di Photoshop con un'interfaccia che consente di automatizzare la creazione di risorse di imaging per la progettazione di pagine Web e di schermi dai file di Photoshop. Il comando Estrai risorse consente di definire il livello o i livelli per cui si desidera creare le risorse, la loro dimensione fisica, il formato file e la posizione salvata su disco. Questa funzione non è pensata per il testo a meno che l'intenzione non sia quella di trasformare il testo in una bitmap, il che non è in realtà una buona idea.
Iniziamo.
02 di 08Apri un file .psd di Photoshop
L'esempio che sto usando contiene un oggetto avanzato di Illustrator, del testo, un'unità di eroi contenente testo, un'immagine e un pulsante e una serie di immagini esterne che rafforzano il tema del sito. La chiave qui è l'organizzazione degli strati in gruppi. Questo è necessario perché il compito è di estrarre tutti questi elementi dal comp in modo che possano essere rapidamente aggiunti a layout Web che si adattano a risoluzioni e dimensioni dello schermo variabili.
Due modi per estrarre beni
A differenza di Genera, che estrae anche oggetti tramite l'aggiunta di un'estensione grafica al nome del livello, Estrarre risorse usa un'interfaccia che può essere raggiunta da tasto destro del mouse un livello o selezionando un livello e scegliendoFile> Estrai risorse.
04 di 08L'interfaccia delle risorse di estrazione
La finestra di dialogo Estrai risorse è piuttosto intuitiva. Ti viene mostrato il livello o la selezione da estrarre. Sopra di esso viene mostrata la dimensione dei file e sotto di essa è il controllo che consente di ingrandire e rimpicciolire l'oggetto. Il lato destro della finestra di dialogo è dove avviene la magia. I quattro pulsanti in alto consentono di selezionare la risoluzione / dimensione dell'oggetto. La striscia successiva mostra il livello selezionato e fa clic sul + il segno ti consente di stampare il livello selezionato anche in un altro formato. Il Cestino Ca n rimuove il livello dalla coda. Nella prossima striscia verso il basso, puoi scegliere il tipo di file e puoi regolare la larghezza e l'altezza dell'immagine di output.
05 di 08Estrazione di un'immagine SVG
Photoshop non gestisce bene le immagini SVG e i browser e i dispositivi non possono visualizzare un'immagine di Illustrator. Ciò ha portato all'aumento dei file svg utilizzati per grafica vettoriale come il logo di Illustrator mostrato qui. Essendo vettori, la loro risoluzione è indipendente dal dispositivo e possono essere scalati senza perdita di dettagli o immagini. Per convertire l'oggetto Smart di Illustrator in svg, selezionare svg dal pop-down e clicca Estratto.
06 di 08Il processo delle risorse di estrazione
Un paio di cose accadranno quando clicchi sul pulsante Estrai. Per prima cosa ti avvertirai che il nome del file potrebbe cambiare. Questo non è un grosso problema. Quindi ti verrà detto che viene creata una nuova cartella per contenere la risorsa. Al termine del processo, la cartella, posizionata nella stessa posizione del file .psd originale, si apre e mostra la nuova risorsa.
07 di 08Il pulsante Impostazioni è il tuo nuovo migliore amico
Cliccando sul impostazioni pulsante apre a Finestra di dialogo Impostazioni è seriamente utile Le impostazioni sulla sinistra sono i fattori di ridimensionamento. Quello che fanno è creare le varie copie dell'immagine che uno sviluppatore utilizzerà nelle query multimediali per indirizzare la risoluzione dello schermo di un dispositivo specifico. Ad esempio, la versione 3x verrebbe indirizzata a un display Retina per iPhone o iPad mentre un fattore 1,25 sarebbe indirizzato a un dispositivo Android. Il suffisso viene aggiunto alla fine del nome del file per consentire allo sviluppatore di identificare facilmente l'immagine da utilizzare in una query multimediale. Al termine, fai clic su ok pulsante e le selezioni si illumineranno nell'area Estrai cespiti nella finestra di dialogo. È inoltre possibile accedere all'impostazione facendo clic sull'icona a forma di ingranaggio nell'area Estrazione cespite sul lato destro dell'interfaccia
08 di 08Finendo
Quando fai clic sul pulsante Estrai, tutte le risorse verranno create e aggiunte alla cartella. A questo punto tutto ciò che devi fare è inviare al tuo sviluppatore una copia della cartella e passare al tuo prossimo progetto.
