Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

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

Accéder aux jeux de couleurs

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Explorez différentes manières d'accéder aux codes couleur utilisés dans la maquette Photoshop. Vous allez pouvoir les reporter dans votre feuille de styles CSS.

Transcription

Après avoir remis tous les styles css à zéro grace à la feuille de style reset.css, je vais maintenant créer ma propre feuille de style et la lier à ma page html. Donc pour créer ma propre feuille de style, c'est très facile, clic droit sur le dossier css. Je vais créer un nouveau fichier que je vais appeler par exemple blog_DiDaXo.css, comme ceci. Cette nouvelle feuille style s'ouvre et est bien-sûr complètement vide. De retour sur ma page html, je vais écrire ici une troisième balise link dans le head de mon code. Alors, attention, vous devrez écrire cette balise link à la fin et en tout état de cause, après l'appel vers reset.css. Rappelez-vous que vous voulez d'abord tout remettre à zéro. Et bâtir vos propres styles sur base de quelque chose remis à zéro. Donc, appelez bien votre feuille de style après avoir appelé reset.css. Donc, j'ai besoin d'une nouvelle balise link, qui sera de nouveau un lien vers un stylesheet, comme ceci, qui se situe dans le dossier css, et ça s'appelle blog_DiDaXo.css. Voilà, ce lien est fait. Je vais maintenant me rendre dans Photoshop, pour me rendre compte que l'une des composantes essentielles de la recherche graphique réalisée par mon designer, c'est une recherche au niveau du jeu de couleur. Autrement dit, dans ma feuille de style, il sera essentielle de respecter scrupuleusement les codes couleur qui ont été ici intégrés par le designer. Comment aller rechercher des codes couleur dans Photoshop ? Je vais vous montrer deux techniques pour cela. La première technique consiste à utiliser l'outil pipette. L'outil pipette se trouve ici sur le côté, dans le panneau des outils de Photoshop. Et quand vous sélectionnez l'outil pipette, vous allez voir que le pointeur de la souris se transforme en une petite pipette. Et quand vous cliquez dans une couleur, eh bien, en fait, vous allez sélectionner cette couleur. Et vous allez retrouver cette couleur dans le fond du panneau des outils. Vous voyez que j'ai cliqué sur le vert. Et donc, j'ai ce vert là, qui est maintenant sélectionné ici comme couleur dans Photoshop. Alors, je vais faire la même chose ici, avec le foncé. Donc, je vais cliquer ici dans le fond bleu. Vous voyez cette couleur qui est maintenant sélectionnée, je vais double cliquer ici, sur ce carré bleu. Et là, j'obtiens le code couleur héxadécimal exact de cette couleur-ci. Donc, je vais le copier. Retourner dans Brackets, dans ma feuille de style. Alors, je vais mettre un petit commentaire. Palette de couleur. Alors, je commence par le bleu foncé. Et le bleu foncé, je code le code couleur avec le # devant. Donc ça, c'est au niveau du code héxadécimal. Et regardez dans Photoshop, vous pouvez également repérer les codes RVP. Donc ici, ce sera 38-32-135. Donc, de retour dans Brackets, ceci correspond à RGB, red, green, blue, 38-32-135. Pour controler ceci dans Brackets, vous pouvez toujours avec la souris dans Brackets, passer votre souris au dessus du code couleur et vous allez voir que, ça c'est l'un des avantages de Brackets, il vous montre la couleur à laquelle ça correspond. Vous voyez que c'est bien le bon bleu. Et ici, au niveau du RGB, c'est bien le même bleu également. Donc voilà pour le bleu foncé. Alors, je vais retourner dans Photoshop, annuler ceci. Je pourrais faire la même chose avec les autres couleurs. Mais je vais vous montrer une autre technique. Notamment ici pour ce gris foncé. Donc, je vais prendre mon outil de sélection. Je vais cliquer sur cette zone en gris foncé. Ce qui me permet d'aller sélectionner le calque correspondant. Vous voyez, j'ai cliqué sur le fond gris foncé de la barre de navigation. Alors, je prends ce calque ici, qui s'appelle navigation_bkg, et je vais faire un clic droit sur le nom du calque et de nouveau un clic droit sur le nom du calque et pas la petite vignette qui va avec. Et là, vous trouvez quelque chose d'intéressant, regardez. Copier css. Donc, je vais cliquer sur copier css. Retournez dans Brackets. Et donc ici, dans mon commentaire, je vais dire que maintenant, j'ai du gris foncé. Et le gris foncé, je vais aller coller ce que j'ai copié ici, plus bas. Regardez, parmi les différentes propriétés css qui me proviennent ici de Photoshop, je retrouve le code couleur en RGB de ce gris-là. Donc, je vais aller le copier/coller ici, dans mon commentaire. Alors ça, c'est pour le code couleur en RGB. Au niveau de Brackets, quand je passe ma souris sur une couleur, vous voyez que j'ai la couleur qui apparait. C'est bien le bon gris donc. Et surtout, quand je fais un clic droit sur une couleur, j'ai la possibilité d'éditer cette couleur. Vous voyez, édition rapide. Donc, vous avez ici un petit panneau qui va me permettre de modifier cette couleur ou bien d'aller chercher le code couleur dans d'autres formats. Vous voyez, par exemple ici, en héxadécimal. Et bien, voilà mon code couleur en héxadécimal dans Brackets. Je vais organiser ceci convenablement. Et puis le code RGB qui me provient donc du copier/coller de Photoshop. Voilà qui est fait. Alors, c'est un petit peu fastidieux, je vous l'avoue. Mais ça va nous faciliter la vie plus tard. Donc, je vous propose de refaire une démarche similaire pour le vert qui se trouve ici dans le fond, pour le bleu clair, pour l'espèce de rouge qu'on utilise ici pour la police de caractère au niveau des titres de la colonne de droite. Et puis également pour le gris clair, qui est la couleur de fond principale de la page. Prenez le temps de reporter tous ces codes couleur dans le commentaire au niveau de votre feuille de style avant de passer à la vidéo suivante.

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 !