• 15 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Ce cours est diplômant et vous permet d'obtenir des crédits universitaires européens (ECTS).

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 17/07/2017

Exportez vos éléments graphiques depuis Photoshop

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Les maquettes sont calées, mais elles ne vont pas se transformer comme par magie toutes seules en site responsive. Avouez que cela aurait été pratique ! :soleil:

Photoshop CC 2014 est rempli de fonctionnalités spéciales à destination des webdesigners.

Parmi elles, on retrouve notamment :

  • la possibilité d'extraire du code CSS directement depuis les calques ;
    Clique droit sur le calque > "Copier CSS"

  • la possibilité de transformer un fichier .psd en html ;
    Dans le menu "Enregistrer pour le web" > choisir HTML et images

  • la possibilité d'exporter et d'optimiser les éléments graphiques pour le web, de différentes manières.

Nous allons justement voir maintenant comment j'ai exporté depuis Photoshop mes éléments graphiques en partant de mes maquettes.

Un petit état des lieux de mes fichiers

Faisons un état des lieux rapide de mes fichiers .psd et jpeg. Car vous le savez maintenant, j'ai créé plusieurs fichiers pour la création de mes maquettes  !

Voici les fichiers que j'ai créé depuis le début du projet :

Les fichiers que j'ai créé pour mes maquettes
Les fichiers que j'ai créés pour mes maquettes

Je trouve évidemment très pratique d'avoir certains de mes fichiers "imbriqués" dans mon travail de mise en page sur Photoshop :

  • avec une photo, vous avez ainsi la possibilité de toujours garder la version haute résolution (au maximum de sa qualité) sous la main, dans un fichier séparé, plus simple à travailler.

  • Si vous avez imbriqué correctement une composition psd dans plusieurs autres fichiers psd, lorsque vous la modifierez, les autres psd contenant cette composition se mettront automatiquement à jour. C'est un peu comme le fonctionnement du lien image en HTML ! :p

Allez, il est maintenant temps d'exporter mes éléments graphiques.

Exporter pour optimiser 

Quand vous exportez des images pour vos sites, il est indispensable de les optimiser. C'est une phase essentielle avant l'intégration des éléments graphiques sur un site.

Mais à quoi sert l’optimisation de mes images ? Est-ce vraiment utile à l’époque de la fibre et de la 4G ?

Et bien, je répondrais OUI ! TOUJOURS !

La problématique de l'optimisation est omniprésente lors de la création d'un site. On parle même parfois de performance d'un site en terme d'utilisation des ressources. Le poids des images est donc un critère très important.

Plus vos images sont lourdes et plus votre site met du temps à se charger. C'est mathématique !

Cela peut également se répercuter sur la consultation de votre site entier, qui sera par conséquent très très difficile à utiliser...

Et même si les débits ont augmenté et nous permettent aujourd'hui de créer des sites avec de plus en plus de belles images ou de belles vidéos (voire même de la 3D), il reste nécessaire de passer par cette étape indispensable qu'est l'optimisation de vos images.

Une image non optimisée devient très lourde à charger
Une image non optimisée devient très lourde à charger

Exporter mes images depuis Photoshop

Pour exporter les éléments graphiques de mes maquettes, je vais vous montrer quelques techniques.

Je vais aussi commencer à lister toutes images présentes dans mon gabarit Bootstrap dans le dossier "images", afin d'avoir une idée des dimensions d'images utilisées dans ce template. En effet, cela va me faciliter grandement la vie, car les images du template sont évidemment déjà adaptées et optimisées pour une utilisation du gabarit !

Voyons cela en exemple.

Je vous propose de commencer par l'image qui nous plonge au coeur des temples d'Angkor en header de mon site. Voyons voir à quelle image pourrait correspondre cette première composition au niveau du template :

Elle correspond à banner2.jpg dans le dossier
Ma composition correspond à banner.jpg dans le dossier "images" de mon template

Je peux voir que cette image se nomme "banner.jpg" et que ses dimensions sont de 1920x1272 pixels !

Enregistrer pour le web

Dans un nouveaux document aux bonnes dimensions de 1920x1272 pixels, je vais commencer par importer ma composition.

Une fois l'image adaptée à ses nouvelles dimensions, je vais optimiser et exporter mon image en passant par le menu très utile : "Enregistrer pour le web". Vous le retrouverez dans le menu général "Fichier" > "Enregistrer pour le web".

La fenêtre
La fenêtre "Enregistrer pour le web"

La fenêtre "Enregistrer pour le web" est très utilisée pour l'optimisation des images à destination du web sur Photoshop. Elle donne accès aux paramètres suivants :

  1. Le choix du format (JPEG, PNG ou GIF) ainsi que la qualité de l'image. Plus vous abaisserez la qualité de l'image, plus celle-ci sera légère et compressée. Pour optimiser le poids d'une image, il faudra tenir compte de plusieurs facteurs comme : ses dimensions, le nombre de couleurs et son format d'exportation. À vous de toujours trouver le juste milieu dans les réglages en fonction de ces critères.
    Ici, je reste sur une qualité autour de 80 en format JPEG, qui est un bon rapport qualité/poids en terme de rendu.

  2. Il est également possible de choisir la taille de sortie de l'image.

  3. Vous pouvez enfin comparer le poids avant/après optimisation. Dans cet exemple nous passons tout de suite de 6,99 Mo à 340,7 Ko ! Autant dire que c'est beaucoup plus raisonnable.

Je sauvegarde mon image dans un dossier de travail sous le même nom que celui utilisé dans le template Bootstrap (ici : "banner.jpg"). Il me suffira ensuite d'écraser la précédente image avec la nouvelle que je viens de créer.

Pour remplir le template en suivant mes maquettes, je vais pouvoir utiliser ce même processus pour exporter les images correspondant à la partie galerie de mon site (qui se basera sur la partie "Portfolio" du template). Dans le dossier image, vous voyez rapidement qu'elles portent toutes le nom de "portfolio-xx.jpg" et font toutes 750x500 pixels... À vous de jouer !

Vous l'aurez compris, on peut procéder ainsi pour remplacer toutes les images utiles du template.

il suffit d'explorer le template pour trouver les images qui correspondent à votre maquette
Il suffit d'explorer le template pour trouver les images qui correspondent à votre maquette

Pour les images de type "photo", vous voyez que ce n'est pas trop compliqué. Une fois déterminée la taille finale de la photo dont vous avez besoin, il ne reste plus qu'à jouer sur la qualité lors de l'export et de vérifier que vos images ne sont pas trop lourdes.

Mais pour mon logo, je vais utiliser une fonction très impressionnante de Photoshop pour vous montrer une dernière astuce !

La génération de fichiers d'image

Depuis la fenêtre des calques, il est aussi possible d'exporter directement des images. Il suffit pour cela de procéder de la manière suivante :

pour exporter vos calques en images indépendante il suffit de bien nommer ses calques !
Pour exporter vos calques en images indépendantes, il suffit de bien nommer ses calques !
  1. Renommez le calque (ou le groupe de calque) avec le nom et l'extension du fichier que vous souhaitez obtenir. Ici j'ai choisi "logo.png32", afin de préserver les propriétés de transparence. Mon élément pourra ainsi être exporté sans fond en choisissant ce format (ce qui n'est pas le cas avec le format JPEG), ce qui est bien pratique pour un logo.

  2. Puis, exportez très simplement l'image depuis le menu "Fichier" > "Générer" > "Fichier d'image". C'est tout !

Avec cette fonctionnalité, Photoshop va créer tout seul un nouveau dossier d'éléments (ou "d'assets" en anglais), au même endroit que votre fichier .psd. Ce dossier contiendra tous les éléments ainsi générés !

Photoshop exporte automatiquement mon logo
Photoshop a exporté automatiquement mon logo !

Avec cette méthode, il est possible d'exporter au format JPEG de plusieurs manières :

  • en nommant le fichier "logo.jpg", comme vous vous en doutez.

  • en précisant la qualité souhaitée directement dans le nom : "logo.jpg80%" correspond ainsi à l'export de l'image au format JPEG, avec une qualité de 80.

De la même façon, nous pouvons préciser le format PNG souhaité. Nous avons 3 possibilités :

  • png8  : ce format est limité à 256 couleurs.

  • png24 : ce format comporte plusieurs millions de couleurs.

  • png32 : ce format comporte plusieurs millions de couleurs et permet de gérer la transparence. C'est le format que nous avons utilisé pour notre logo !

Comme vous pouvez l'imaginer, il est possible avec cette méthode d'exporter des maquettes de site entières, juste en organisant et en nommant bien ses calques. J'espère que ça finira de vous convaincre de faire attention à l'organisation de votre maquette ! ;)

Exemple de certificat de réussite
Exemple de certificat de réussite