skip to Main Content

Comment créer des images « Retina » pour votre blog WordPress

Divi : le thème WordPress le plus facile à utiliser

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Vous avez investi beaucoup de temps dans la mise en place du design de votre blog, mais pourquoi les images ne s’affichent pas correctement sur Smartphone ? Vous vous êtes assuré d’utiliser des images de haute qualité, mais le mauvais état des images ne corrige pas l’affichage.

Plusieurs personnes ne réalisent pas que les nouveaux dispositifs (spécialement ceux d’Apple) utilisent une technologie avancée d’affichage qui affecte la façon avec laquelle les images sont affichées, afin de s’assurer qu’elles s’affichent à la fois correctement sur ordinateurs, mais aussi sur Smartphone.

Dans ce tutoriel, nous allons essayer d’introduire un peu la notion de « retina ready » et vous montrer comment créer une image retina ready.

Explications sur les images Retina Ready

Les écrans des périphériques ont continué à l’amélioration de la qualité au cours des dernières années, et ceux d’Apple en particulier ont fait le plus gros travail afin d’être extrêmement clairs et visibles. La technologie «Retina Display» est un nom de marque d’Apple utilisé pour décrire un certain type d’écran avec des aptitudes particulières.

Les écrans Retina visent à afficher du texte et des images aussi clairement que possible, sans pixels visibles à l’œil nu. Le défi pour les concepteurs est que l’affichage varie en fonction de la taille de l’écran de l’appareil, et de la proximité d’un utilisateur vis-à-vis de l’écran.

En divisant la largeur physique de l’écran par le nombre de pixels affichés horizontalement, nous avons les pixels par pouce (ppi, également appelé ppp pour points par pouce). « High DPI » est utilisé pour faire référence à tout dispositif qui compte plus de 200 pixels par pouce. Cela comprend tous les dispositifs d’affichage « retina » (d’Apple), et certains appareils d’autres fabricants.

Comment créer des images « Retina Ready » avec Photoshop

Travailler avec des images à double ou quadruple la résolution signifie que vous devrez être en mesure de faire un zoom avant pour voir tous les petits détails, cependant des fichiers extrêmement lourds causent un problème de performance et un défis de stockage de fichiers.

La solution pour la plupart des concepteurs a été soit créer plusieurs couches et de les grouper, en les activant au besoin en utilisant la fonction « comps » de Photoshop ou de travailler à la résolution originale et exporter les formats dont ils ont besoin (en utilisant une action comme « retinize »).

Le défi avec ces deux méthodes est que vous ne pouvez pas voir plusieurs images en même temps. Si vous avez besoin de voir les différences dans les images aux tailles nécessaires, vous devez basculer entre elles ou les exporter.

Heureusement pour nous, amateurs de Photoshop, Adobe a ajouté une fonctionnalité qui permet de créer de multiples images plus facilement. Maintenant, vous pouvez créer plusieurs toiles côte à côte à l’aide du plan de travail caractéristique, et créer plusieurs tailles d’image en utilisant le générateur. Voyons voir comment cela marche.

1 – Créez votre premier Artboard

Le nouvel outil Artboard, introduit dans Photoshop CC 2015, se trouve caché derrière l’outil mouvement. Vous pouvez cliquer sur l’outil dans le menu, ou utilisez Maj + V pour basculer entre « Déplacement » et « Artboard »:

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Artboard-Tool1-photoshop-tutoriel-wordpress-créer-des-images retina readyPour créer un plan de travail, cliquez et faites glisser une zone. Le nouveau plan de travail sera affiché dans le panneau de calques avec comme  nom par défaut « Artboard 1 ».

2 – Configurez votre Artboard

Vous pouvez ajouter des couches dont vous avez besoin à votre plan de travail, et elles seront imbriquées comme les calques le sont (vous permettant de créer une structure de couche appropriée). Nous suggérons d’ajouter vos différents fichiers, tels que des formes, de sorte qu’ils soient positionnés comme vous le souhaitez avant de passer à l’étape suivante.

3 – Dupliquer Votre Artboard

Une fois que votre premier plan de travail est mis en place pour répondre à vos besoins, vous pouvez le dupliquer en utilisant le menu contextuel. Faites un clic droit sur « Artboard 1 » dans la zone des calques et sélectionnez « Duplicate Artboard ». Cela crée un autre « Artboard » similaire, contenant la même structure avec toutes ses composantes:

duplication artboard photoshop

4 – Placez vos plans de travail (Artboard)

Le grand avantage de l’utilisation des plans de travail est d’être en mesure de voir toutes vos images en même temps. Pour ce faire, il suffit de positionner vos plans de travail selon vos besoins. Il y a plusieurs façons d’y arriver:

Utilisez le panneau de qui s’affiche quand un plan de travail est sélectionné pour entrer les coordonnées X et Y sur le coin supérieur gauche du plan de travail.

Faites glisser le plan de travail sélectionné vers une position quelconque dans Photoshop. Le plan de travail activé de façon intelligente, de sorte que vous pouvez aligner automatiquement plusieurs plans de travail afin que leurs positions se verrouillent sur l’espacement précédent.

Utilisez les touches directionnelles du clavier pour déplacer un plan de travail sélectionné.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [GRATUIT]

5 – Redimensionnez vos plans de travail (lorsque c’est nécessaire)

Si vous avez besoin d’ajuster la taille de vos plans de travail, vous avez à nouveau plusieurs options:

  • Redimensionner à l’aide des poignées qui apparaissent lorsque vous sélectionnez un plan de travail.
  • Utilisez le panneau d’options juste en dessous du menu « fichier » pour choisir les tailles prédéfinies, des largeurs ou des hauteurs fixes, ou basculer entre portrait et paysage.
  • Utilisez le panneau « Propriétés » qui s’affiche lorsqu’un plan de travail est sélectionné pour modifier la taille et accéder aux tailles prédéfinies.

Propriété de la zone de travail photohop

6 – Créez votre Art

Vous pouvez maintenant travailler avec vos plans de travail, remplacer les composantes et de faire des changements au besoin. En supposant que votre configuration d’origine est inchangée, vous aurez maintenant des pixels d’images parfaites avec tous les composantes au bon endroit.

7 – Mettre en place l’outil « Générer » (Generate)

« Generate » vous permet d’exporter des plans de travail, des couches ou des groupes en utilisant une syntaxe de nommage spéciale. Il agit comme un raccourci pour enregistrer pour le web. Pour s’assurer que « Generate » est activé pour votre PSD, accédez à « Fichier> Générer> Actifs de l’image » (File > Generate > Image Assets):

outil generer photoshopoutil generer photoshop

8 – Renommez vos plans de travail

Générez des « Art » pour sauvegarder des composantes de l’image sur laquelle vous travaillez en fonction des options définies dans le groupe de calques ou dans votre plan de travail. Il y a quelques options que vous pouvez définir:

  • Le format du fichier.  Ajouter une extension (.jpg , .gif ou .png ) pour enregistrer le fichier concerné par exemple : header-main.png  Les composantes d’image seront enregistrées dans le même dossier que le fichier PSD, mais avec « -assets » comme suffixe.
  • La compression de fichiers.  Après l’extension, vous pouvez ajouter un chiffre indiquant le niveau de compression utilisé. Pour « opt.jpg » vous pouvez utiliser des pourcentages, et pour les  png utilisez les bits respectifs : 8, 24 ou 32.
  • Échelle de sortie.  Vous pouvez définir l’échelle de sortie en ajoutant soit le pourcentage ou les pixels (la largeur sur la hauteur) avant le nom de l’image (par exemple  100% header-main.png8 ).
  • Plusieurs images.  Vous pouvez exporter plusieurs images du même plan de travail (Artboard) en utilisant une virgule ou un signe plus pour séparer les noms d’images. Chaque image peut ainsi avoir ses propres options tant que chaque nom de l’image est unique.

La combinaison de ces options vous permet de créer constamment des composantes d’images complexes pour vos plans de travail:

gestion des composantes d'images

Si les images standards sont nécessaires pour tous vos plans de travail, l’outil « Generate » vous permet de créer un paramètre à appliquer à chacun par défaut. Pour créer ce paramètre, ajoutez une couche vide en haut de votre document avec les options suivantes:

Créez Facilement votre blog avec SiteGround

SiteGround vous permet de créer votre blog WordPress en quelques clics seulements. Nom de domaine gratuit, hébergement sécurisé, SSL, transfert et bien plus encore... [ Recommandé ]

  • Mot-clé par défaut: Le nom doit commencer par cela pour laisser à l’outil « Generate » la liberté de l’utiliser comme valeur par défaut.
  • Échelle de sortie: Vous permet de définir l’échelle de sortie avec un pourcentage ou des pixels (la largeur sur la hauteur).
  • Dossier/suffixe: Définir le nom du dossier dans lequel les images doivent être enregistrées, et un suffixe à ajouter aux noms des fichiers.

Conclusion

C’est tout vous y êtes arrivé, essayez de faire des zooms sur l’image pour voir comme ce dernier se comporte. Au besoin, vous pouvez tester l’image sur votre blog WordPress en l’envoyant dans votre médiathèque.

N’hésitez pas à nous poser des questions au besoin.

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Thèmes WordPress cool que j'ai trouvé sur
Et il y a plus de 50 000 thèmes et modèles parmi lesquels choisir!

Back To Top
11 Partages
Partagez10
Tweetez1
Enregistrer
WhatsApp