Générer des actifs d'image réactifs avec Photoshop CC 2014

Utilisez efficacement Photoshop CC 2014 pour créer des ressources d'image réactives

Cet article est parrainé par Adobe. Merci pour votre soutien pour SitePoint!

Image: Andy Schofield - CC

Points clés

• Photoshop CC 2014 fournit un ensemble d'outils pour générer des ressources d'image réactives, y compris l'utilisation d'objets intelligents, le maréchalage de calque et la fonction "d'extraire ressource". Ces outils permettent des images de redimensionnement, de transformation et d'exportation efficaces sans perdre de qualité.
• Utilisez SVG (Scalable Vector Graphics) dans la mesure du possible, car il fournit de petits fichiers qui peuvent être redimensionnés instantanément sans perdre la qualité d'image. Cela est particulièrement utile dans les conceptions réactives, car cela signifie qu'un seul fichier doit être géré pour toutes les résolutions.
• Le nouveau service en ligne d'Adobe, Creative Cloud Assets, permet un partage facile et un traitement collaboratif des travaux PSD. Cela comprend la possibilité de partager des PSD avec des clients pour l'audit, la distribution de PSD à des entrepreneurs externes et l'accès à des collègues à extraire, le tout sans les obliger à installer Photoshop eux-mêmes.

Fournir les bonnes ressources pour le bon équipement

Il y a cinq ans, Internet était un endroit plus prévisible, n'est-ce pas? En tant que développeurs Web, nous pouvons raisonnablement nous attendre à ce que le navigateur Web soit pas moins de 640 pixels de largeur et pas plus de 1240 pixels - comme si notre "autoroute Internet" ne passe que Serials . Notre réalité actuelle est très différente. Aujourd'hui, les utilisateurs mobiles représentent généralement plus de la moitié de notre trafic. La vérité est qu'en 2014, il y avait autant de motos Motorcycles sur "notre autoroute" comme voitures et camions. Alors pourquoi chargeons-nous toujours la même image "Taille de la maison" sur tous ces appareils très différents?

Mais est-ce vraiment important?

Le mois dernier, Tammy Everts a publié certaines données d'alerte sur l'impact des performances du site Web sur le comportement des utilisateurs. Ceux-ci incluent:

1. Les pages Web lents peuvent entraîner plus de 3 milliards de dollars de pertes de vente par an
2. 44% des acheteurs interprètent les performances lents comme "L'erreur s'est produite"
3. 2 secondes de retard pendant la transaction = 87% Taux d'abandon de CART

Les données de Tammy nous indiquent que l'envoi d'images lentes et de la taille d'une maison à de petits appareils n'est pas seulement impolie - cela coûte en fait des clients et de l'argent américains. En ajustant l'image aux limites de chaque appareil, nous pouvons livrer la page plus rapidement tout en économisant des coûts de bande passante - un gagnant-gagnant pour tout le monde.

livrer l'image correcte

Il existe déjà des moyens matures de fournir du contenu d'image adaptatif à l'appareil. Le meilleur choix en ce moment est:

Squeezr.it

• Adaptive-images.com: La solution de Matt Wilcox est la solution préférée pour de nombreux développeurs. Il est indépendant de l'appareil et d'abord mobile, bien qu'il nécessite généralement une certaine connaissance de la configuration Apache et PHP.
• Squeezr.it: Squeezr s'inspire des images adaptatives dans une large mesure, mais préfère utiliser les politiques client pour déterminer et répondre aux points d'arrêt.

Ne vous inquiétez pas: ce sont d'excellentes solutions, mais nous ne leur prêterons pas attention aujourd'hui. Au lieu de cela, je veux regarder une autre partie du problème: les ressources d'image. Comment générer toutes ces différentes ressources d'image? Adobe a beaucoup réfléchi à ce problème, ce qui se reflète dans Photoshop CC 2014. Il fournit un ensemble d'outils - certains nouveaux, certains anciens - pour aider.

Voici quelques conseils pour commencer avec des images réactives:

Astuce 1: intégrer toutes les images en tant qu'objets intelligents

Les objets intelligents ne sont pas nouveaux - ils sont dans Photoshop depuis 2005 - mais ils sont devenus l'outil de base de la conception réactive. Même après avoir appliqué des transformations destructrices, les objets intelligents conservent toujours des liens de référence vers leur état d'image Original . Par exemple, dans la plupart des cas, le rediffusion de l'image plusieurs fois dégradera la qualité de l'image à chaque itération. Cependant, l'objet intelligent applique chaque nouvelle transformation à l'état d'image d'origine sans perdre la qualité d'image. Cela rend la conversion de toutes vos ressources d'image haute résolution (avatars, arrière-plans, photos, etc.) en objets intelligents presque un choix inévitable, vous permettant de redimensionner, de les pivoter, de les transformer et de les repositionner sans s'en soucier. La conversion de n'importe quelle couche en un objet intelligent est aussi simple que de cliquer avec le bouton droit sur elle et de sélectionner " Convertir en un objet intelligent ".

Astuce 2: Utilisez des couches pour regrouper

à l'ère de la conception réactive, "

Layout " est devenu " Layout ". Nous avons besoin d'un moyen de gérer la position de l'élément de la même page en deux, trois positions ou plus ou plus.

C'est le but du "regroupement de calques". Considérez chaque nouveau groupe de couche comme un "instantané" du panneau de couche à un moment précis. Vous pouvez ensuite cliquer sur un seul bouton dans le panneau de groupement de calques pour revenir à cet état d'instantané à tout moment.

Dans la pratique, cela signifie généralement la construction d'une disposition mobile (mobile-premier), puis la capturer en tant que nouveau marécage de couche. Vous pouvez ensuite commencer à repenser la disposition de votre tablette et à la capturer à nouveau dans un autre groupe de calques.

Application pratique du regroupement de couche

Le panneau de groupement de calques vous permet de basculer immédiatement entre l'un de ces états en cliquant. Le regroupement de couche réduit la duplication dans le panneau de couche et simplifie l'ensemble du fichier de projet.

Astuce 3: oublié "Storage comme Web ..." - Utilisez "Extraction Resources"

Je dois admettre que j'ai toujours aimé le panneau d'exportation d'image de Fireworks. Photoshop prend l'image prête comme une application distincte, et sa propre fonctionnalité "Storage comme Web" intégrée, mais pour moi, ni l'un ni l'autre n'est aussi simple, puissant ou rapide que des feux d'artifice.

Lancez le panneau d'extrait de ressources à l'intérieur du panneau de couche.

Photoshop CC 2014 adopte une nouvelle méthode d'exportation d'image améliorée - une nouvelle fonctionnalité "Extrait Ressources". Regardons de plus près.

Le panneau d'extrait de ressources localisera toute couche que vous avez sélectionnée dans le panneau Calques. En théorie, cela peut être une seule couche, toutes les couches ou toute combinaison entre les deux. Vous pouvez lancer ce nouveau panneau à partir de deux endroits:

1. en cliquant avec le bouton droit sur n'importe quel calque / calque et sélectionnez "Extraire la ressource"
2. ou sélectionnez "Extraire les ressources" dans le menu du fichier

Jetons un coup d'œil au nouveau panneau "Extraction Ressources".

Les couches peuvent être exportées comme l'un des six formats d'image:

1. png8
2. png24
3. png32
4. jpg
5. gif
6. svg (oui, plus à ce sujet plus tard)

Vous avez également la possibilité de générer jusqu'à huit résolutions différentes simultanément, passant de 25% à 400%. Photoshop facilite également le préfixe automatiquement chaque nom de fichier et l'exportation vers un nom de dossier raisonnable. Vous pouvez même le définir pour régénérer automatiquement l'ensemble de fichiers entier lorsque vous mettez à jour le document d'origine. Il n'est pas difficile de voir combien de temps cela peut économiser. Notez que si vous êtes satisfait de votre flux de travail actuel, vous pouvez toujours utiliser l'option classique "Enregistrer sous le Web". Cependant, je soupçonne que la plupart des gens verront le pouvoir et la flexibilité des nouvelles fonctionnalités.

Astuce 4: Utilisez SVG chaque fois que possible

SVG a été l'une des tendances chaudes de la conception Web en 2014, il est donc passionnant de voir le support SVG entrer Photoshop. Les vecteurs conviennent particulièrement aux conceptions réactives car elles fournissent de petits fichiers qui peuvent être redimensionnés instantanément sans perdre la qualité d'image. D'un point de vue purement pratique, l'utilisation de SVG (en réalité) signifie que vous n'avez qu'à gérer un seul fichier pour toutes les résolutions (à l'exclusion des replies pour les clients plus âgés).

outil d'exportation SVG dans Photoshop

Alors que Photoshop vous permet d'exporter n'importe quelle couche / calque sous forme de SVG, il est peu probable que les éléments d'image basés sur les pixels fournissent de bons résultats. Tous les graphiques basés sur le chemin, y compris les logos, les icônes, les masques et autres formes, peuvent être un candidat idéal pour les exportations SVG.

Astuce 5: N'oubliez pas les actifs de cloud créatifs

L'un des nouveaux avantages supplémentaires de l'utilisation de PSD est le nouveau service en ligne d'Adobe. La synchronisation de vos créations PSD vers Creative Cloud débloque une gamme de conseils pratiques. J'ai couvert cela plus en détail dans le post précédent, mais les points clés sont:

Facile à partager votre PSD avec les clients

Extraire les ressources via le navigateur.

J'ai oublié d'envoyer des travaux de JPEG pour une revue des clients. Creative Cloud leur permet de visualiser et de commenter votre travail PSD en temps réel dans le navigateur. C'est vrai - ils n'ont plus besoin de Photoshop pour revoir les PSD.

Distribuez PSD aux entrepreneurs externes

Les entrepreneurs externes peuvent utiliser directement la dernière version des ressources et des ressources d'exportation directement à l'aide du navigateur.

Fournir des collègues accéder à l'extraction de ressources

Vous avez maintenant un moyen facile de partager le PSD géré par des versions avec votre équipe. Ils peuvent même extraire CSS, images et autres ressources de votre PSD sans installer leur propre Photoshop. Ce service est disponible pour toute personne disposant d'un compte Adobe gratuit.

Résumé

La biodiversité est une bonne chose! Notre écosystème de navigateur - téléphones, tablettes, ordinateurs portables, ordinateurs de bureau et même téléviseurs - est riche et varié et ne sera plus diversifié que dans les années à venir. Cela rend notre travail plus dur et plus amusant. La conception Web réactive nous enseigne que les «pages» sont devenues « Série de pages » - pages parents, pages mère et certaines pages enfants. Pour la même raison, " Image " est également devenu " série d'images ". Photoshop CC 2014 fournit désormais un flux de travail relativement facile et rapide pour générer ces "séries d'images". Essayez-le.

FAQ pour les ressources d'image réactives dans Photoshop et CSS

(La partie FAQ est omise ici car l'article est trop long et ne correspond pas à l'objectif pseudo-original. La partie FAQ peut être éventuellement conservée ou réécrite au besoin.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!