Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Ouvrir le fichier Photoshop

Testez gratuitement nos 1343 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Pour la première fois, ouvrez le fichier Photoshop envoyé par le designer. Vous allez installer les polices de caractère requises pour lire ce fichier correctement.

Transcription

La première chose que nous allons faire, c'est essayer d'ouvrir le fichier Photoshop qui nous a été envoyé par le designer. Et là, nous rencontrons un premier problème. Vous voyez ici, dans cette boîte, non concordance des profils incorporés. Alors ça veut dire quoi tout cela ? Eh bien, il s'agit de la gestion des couleurs dans photoshop. Et dans notre cas, nous n'en avons pas vraiment besoin. Pourquoi ? Eh bien, parce que nous allons créer un site internet. Et ce site internet, il sera visionné par les internautes, mais en utilisant chacun leur propre écran. Et il y a fort à parier que les écrans de nos internautes ne seront pas calibrés, donc nous n'avons pas besoin d'une gestion stricte des couleurs, comme celle qui prévaut, par exemple. dans l'industrie de l'impression où là, toutes les imprimantes sont bien calibrées de manière très précise. Rien de tout cela dans le web, donc nous pouvons, sans arrière pensée, supprimer le profil incorporé, je clique sur OK. Et là, j'ai un second problème qui se présente à moi, qui est beaucoup plus embêtant, celui-ci. Il s'agit d'un problème concernant les polices de caractère. En effet, le designer a utilisé des polices de caractère, qui ne sont pas disponibles sur mon système. Alors dans ce cas-là, Adobe nous propose le service Typekit pour résoudre ces problèmes. C'est quoi Typekit ? Eh bien, c'est une bibliothèque de caractères disponible en ligne. Seulement vous voyez que dans ce cas-ci, eh bien, Typekit ne peut pas résoudre l'ensemble des problèmes. Alors, de quoi s'agit-il exactement ? Eh bien, il y a une police de caractère qui s'appelle Raleway, que j'utilise dans trois variantes différentes, Raleway regular, Raleway bold, et Raleway italic. Eh bien, cette police de caractère n'est pas installée ici sur ce système. Même chose pour la police Oxygen dans sa variante bold et regular, et puis pour une troisième police, qui s'appelle Font Awesome. Alors fort heureusement, le designer nous informe que Oxygen et Raleway sont des Google Fonts. C'est-à-dire des polices de caractère disponibles gratuitement sur la bibliothèque de polices de Google. Et puis, Font Awesome est également disponible gratuitement sur internet. Je vais donc annuler ceci, fermer mon fichier, je vais même fermer complètement photoshop. et me rendre sur internet, sur le site de Google Fonts, malheureusement, ce site n'est disponible qu'en anglais. pour partir à la recherche de mes polices de caractère. Vous voyez que dans le champ de rechercher, j'ai déjà tapé ici RALE, et j'ai trouvé la police Raleway, c'est l'une des polices qu'il me manque, donc je vais cliquer sous le petit + pour ajouter cette police à ma sélection. Je vais partir à la recherche de la seconde police de caractère, c'est Oxygen, et la voici. Je vais également cliquer sous le petit +, et donc j'ai deux familles de polices qui sont ici sélectionnées. Je vais cliquer sur cette mention, parce que c'est là que je vais trouver la petite flèche vers le bas, qui me permet de télécharger cette sélection de polices de caratère, Et voilà, donc un fichier fonts.zip qui est téléchargé sur mon système. Au niveau de Font Awesome qui est la police de caractère suivante, que j'ai envie de télécharger. Alors là, de nouveau, le site n'existe qu'en anglais. Font Awesome c'est une police de caractère qui va me permettre de gérer les icones, Nous reparlerons de cette police de caractère plus tard dans le cours, pour le moment, nous allons nous contenter de la télécharger. Bien que ce soit en anglais, c'est quand même très facile. Vous voyez download ici, au milieu. Et puis dans cette petite boîte, je vais faire à Font Awesome, non merci, just download Font Awesome, contente toi de télécharger les fichiers, voilà. Donc, j'ai FontAwesome.zip qui apparaît également ici, et qui est téléchargé sur mon système. Alors je vais me rendre à l'endroit où ces téléchargements ont été stockés, donc ici sur Mac c'est dans le dossier téléchargements, sur Windows vous avez un dossier similaire dans votre profil, et je vais déziper ces deux fichiers, voilà, en cliquant ici sur makintosh. Donc dans le dossier des Google Fonts, eh bien je retrouve mes deux polices Oxygen et Raleway. Donc au niveau d'Oxygen, vous voyez, j'ai téléchargé ici trois fichiers TTF, je vais les installer sur mon système. Pour ça, ici sur Mac, je vais devoir les ouvrir avec le livre de polices. Le livre des polices, c'est l'application sur Makintosh, qui gère l'installation des polices de caractère. Sur Wondows, vous retrouverez une application similaire, dans votre panneau de configuration. Donc je vais ouvrir mon livre de polices, voici la police Oxygen, je vais l'installer. Voilà donc la police Oxygen installée sur mon système, ça varie entre light, regular et bold, vous le voyez ici. Je vais faire la même chose avec Raleway, il y a plein de variantes qui ont été téléchargées, je vais les sélectionner, et les ouvrir avec mon livre de polices, voilà. Installer mes polices de caractère sur mon système. Voilà les différentes variantes de la police Raleway qui ont été installées. Et puis pour Fonts Awesome, je vais faire exactement la même chose, alors là, j'ai tout petit peu plus de fichiers dans téléchargements, Ce que je recherche se trouve dans le dossier Fonts, qui est ici, et là je trouve les fichiers TTF à installer donc je vais cliquer dessus, l'ouvrir avec mon livre de polices, vous voyez toutes les icônes qui sont dans cette police de caractères, installer cette police également ici. Et voici la police FontAwesome qui est installée sur ma machine. Je vais donc pouvoir réouvrir photoshop. Et venir dans mes fichiers récemment ouverts, réouvrir le fichier que le designer m'a envoyé. Donc pour ce qui est du profil de couleur on peut le supprimer, on en a déjà parlé. Et vous voyez maintenant qu'on peut ouvrir ce fichier sans problème, parce que nous n'avons plus cette alerte de police concernant les caractères. Vous voyez ici, certains calques de texte doivent être mis à jour, avant de pouvoir être utilisés pour une sortie vectorielle. Voulez-vous les mettre à jour maintenant, je vais mettre non. Je vais garder le fichier original. Et donc pour bien garder, également, ce fichier original, qui nous a été envoyé par le designer, et ne pas lui donner de modifications, je vais m'empresser, également, d'enregistrer une copie de ce fichier, que je vais appeler ici DDX_Blog_copie, par exemple, et je vais travailler, évidemment, avec la copie toute la durée de ce cours. Comme ça si un jour il y a quelque chose qui se passe avec la copie, eh bien j'ai toujours un backup du fichier original que le designer m'a envoyé.

Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Passez d’une maquette au format Photoshop vers une page web interactive en HTML5 et CSS. Découvrez des outils et des techniques indispensables dans votre travail d’intégrateur.

3h16 (43 vidéos)
Aucun commentaire n´est disponible actuellement
 

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !