Qu'est-ce qu'un extrait?
Le nouveau Extraire les actifs La fonctionnalité de Photoshop CC 2014 intègre un système de postcombustion au flux de production de création d’images par ailleurs fastidieux pour Responsive Web Design (RWD). Voyons comment la commande Extraire les actifs peut rapidement réduire une composition de page Web en actifs prêts à être assemblés en quelques minutes.
Commençons par une question évidente: qu'est-ce que les actifs d'extraction?
En termes simples, Extract Assets est une nouvelle fonctionnalité de Photoshop qui fournit à la fonction Générateur de Photoshop une interface permettant d'automatiser la création d'actifs de création d'image pour la conception Web et la conception d'écran à partir de vos fichiers Photoshop. La commande Extraire les actifs vous permet de définir le ou les calques pour lesquels vous souhaitez créer des actifs, leur taille physique, leur format de fichier et leur emplacement enregistré sur le disque. Cette fonctionnalité n'est pas destinée au texte, sauf si le but est de le transformer en bitmap, ce qui n'est pas une bonne idée.
Commençons.
02 sur 08Ouvrir un fichier Photoshop .psd
L'exemple que j'utilise contient un objet dynamique d'Illustrator, du texte, une unité héros contenant du texte, une image et un bouton, ainsi qu'une série d'images en plein air qui renforcent le thème du site. La clé ici est d'organiser les couches en groupes. Cela est nécessaire car la tâche consiste à extraire tous ces éléments de la composition de manière à pouvoir les ajouter rapidement aux présentations Web qui s’adaptent aux différentes résolutions et tailles d’écran.
Deux façons d'extraire des actifs
Contrairement à Generate, qui extrait également des objets en ajoutant une extension graphique au nom du calque, Extraire les actifs utilise une interface qui peut être atteinte par clic droit un calque ou en sélectionnant un calque et en choisissantFichier> Extraire les actifs.
04 de 08L'interface d'extraction des actifs
La boîte de dialogue Extraire les actifs est plutôt intuitive. On vous montre le calque ou la sélection à extraire. Au-dessus, vous voyez la taille des fichiers et en dessous, le contrôle qui vous permet de zoomer et dé-zoomer sur l'objet. Le côté droit de la boîte de dialogue est l'endroit où la magie opère. Les quatre boutons en haut vous permettent de sélectionner la résolution / taille de l'objet. La bande suivante vous montre la couche sélectionnée et en cliquant sur le + sign vous permet également d’afficher le calque sélectionné dans un autre format. le Poubelle ca n supprime la couche de la file d'attente. Dans la bande suivante, vous pouvez choisir le type de fichier et ajuster la largeur et la hauteur de l'image de sortie.
05 de 08Extraire une image SVG
Photoshop ne gère pas très bien les images svg et les navigateurs et les appareils ne peuvent pas afficher une image Illustrator. Cela a entraîné la hausse du nombre de fichiers svg utilisés pour des illustrations vectorielles telles que le logo Illustrator présenté ici. En tant que vecteurs, leur résolution est indépendante de l'appareil, ce qui signifie qu'ils peuvent être redimensionnés sans perte de détail ni d'image. Pour convertir l'objet intelligent Illustrator en svg, sélectionnez svg de la pop down et cliquez Extrait.
06 de 08Le processus d'extraction des actifs
Un certain nombre de choses vont se passer lorsque vous cliquez sur le bouton Extraire. Vous serez d'abord averti que le nom du fichier peut changer. Ce n'est pas un gros problème. Ensuite, vous serez informé qu'un nouveau dossier est créé pour contenir l'actif. Une fois le processus terminé, le dossier, placé au même emplacement que le fichier .psd d'origine, s'ouvre et affiche le nouvel élément d'actif.
07 de 08Le bouton Paramètres est votre nouveau meilleur ami
En cliquant sur le Réglages bouton ouvre un Boîte de dialogue Paramètres c'est sérieusement utile. Les paramètres à gauche sont les facteurs d'échelle. Ils créent les différentes copies de l'image qu'un développeur utilisera dans les requêtes multimédia pour cibler la résolution d'écran d'un périphérique spécifique. Par exemple, la version 3x serait ciblée sur un écran Retina pour iPhone ou iPad, tandis qu'un facteur 1,25 serait dirigé vers un appareil Android. Le suffixe est ajouté à la fin du nom de fichier pour permettre à votre développeur d'identifier facilement l'image à utiliser dans une requête multimédia. Une fois que vous avez terminé, cliquez sur le bouton D'accord et vos sélections s’allumeront dans la zone Extraire les actifs de la boîte de dialogue. Vous pouvez également accéder au paramètre en cliquant sur l'icône représentant une roue dentée dans la zone Extraire les actifs, à droite de l'interface.
08 de 08Finir
Lorsque vous cliquez sur le bouton Extraire, tous les actifs seront créés et ajoutés au dossier. À ce stade, il vous suffit d'envoyer une copie du dossier à votre développeur et de passer à votre prochain projet.
