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

Visualiser la maquette à réaliser

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Prenez le temps de faire le tour de la maquette Photoshop. Il s'agit d'une maquette convertie en une page web.

Transcription

Maintenant que nous avons réussi à ouvrir ce fichier Photoshop, eh bien, nous pouvons partir à la découverte du travail à réaliser. La première chose qui vous saute aux yeux quand vous regardez ce fichier, c'est probablement le fait que nous avons ici un fait à trois variantes différentes, de la même mise en page. Alors, c'est une fonctionnalité assez nouvelle, ça, dans Photoshop, la possibilité d'avoir plusieurs plans de travail dans le même fichier Photoshop. Si votre version de Photoshop est plus ancienne et ne supporte pas cette nouveauté eh bien, je vous propose dans les téléchargements associés à cette formation, trois fichiers Photoshop différents, qui représentent chacun l'un de ces plans de travail. Alors, la deuxième chose qui saute aux yeux, peut-être, ce sont toutes ces lignes verticales et horizontales que vous avez sur l'écran, ce sont des lignes qui ont été placées par le designer, pour essayer d'aider le designer dans la réalisation de son travail. Allons voir ça de plus près vous voyez ici j'ai un outil zoom, une petite loupe J'active, c'est tout petit. Et je vais cliquer ici sur cette première mise en page pour aller la regarder d'un petit peu plus près, voilà qui est fait. Alors, cette première mise en page s'appelle Desktop Wide, comme je le disais en introduction de cette formation, j'utilise toujours des noms en anglais pour ce genre de choses. C'est donc une mise en page qui est destinée aux ordinateurs de bureaux, avec des écrans larges, wide en anglais signifie large. Et vous constatez que les guides, en tous cas les guides verticaux, eh bien dessinent douze colonnes sur cette mise en page. Et que les différents éléments de ce site sont calqués sur ces colonnes. Vous voyez, par exemple, que la grande bannière qui est ici est calquée sur l'ensemble des douzes colonnes, elle prend toute la largeur disponible dans le site. Par contre, si vous allez voir la session des contenus, ici, Eh bien là, vous avez le contenu principal du site qui s'étend sur 2/3 de la largeur, c'est-à-dire huit et douze colonnes définient par les guides. Tandis que les autres éléments qui sont ici occupent 1/3 de l'espace, c'est-à-dire quatre des douzes colonnes, les quatre colonnes restantes. Remarquez aussi le pied de page, ici dans le fond, qui lui également s'étale sur les douze colonnes, Et ce pied page est lui-même subdivisé en trois colonnes différentes, qui prennent chacune 1/3 de l'espace, donc quatre colonnes de grille pour ce premier emplacement ici dans le pied de page, quatre colonnes de grille également pour ce second, et les quatre restantes pour la troisième colonne du pied de page, également. Alors, remarquez que de part et d'autre de cette grille, eh bien j'ai une zone vide, ici à gauche, et ici à droite, j'ai une zone dans laquelle on voit les différentes couleurs de fond, les différentes parties de cette mise en page, par contre, il n'y a absolument aucun contenu. Donc là, nous allons devoir trouver un truc dans notre page HTML, et dans notre fichier CSS, pour que ces couleurs de fond puissent s'élargir sur toute la largeur de l'écran, mais que le contenu du site soit bien contenu dans les douze colonnes de grilles, tel que défini ici par les guides dans ce fichier photoshop. Alors là, on voit que la seconde mise en page, qui est ici juste à côté, alors celle-ci s'appelle Desktop narrow, c'est-à-dire une mise en page qui est destiné aux ordinateurs de bureaux, mais avec des écrans plus étroits. C'est aussi une mise en page qu'on utilisera, pour les tablettes que l'on tient en paysage. Alors vous voyez que c'est la même mise en page, la même histoire que précédemment, sauf que tout est un petit peu plus petit, puisqu'on a moins d'espace en largeur. Mais vous voyez que, par exemple, quand je prends ici mon outil de texte, et que je clique dans un texte, j'ai également une grille qui apparaît, de douze colonnes, et c'est exactement les mêmes proportions que pour la première des mises en page. Alors je vais vous montrer maintenant la troisième mise en page, qui est ici, voilà, je vais sélectionner un élément de cette mise en page, pour aller retrouver les colonnes, retrouver les douze colonnes de grille ici également. Par contre, dans cette troisième mise en page qui s'appelle Tablet portrait, donc destiné aux tablettes que l'on tient en mode portrait, eh bien là, la mise en page a complètement changée, puisque tous les éléments du site occcupent l'ensemble des douze colonnes d'espace, donc toute la largeur disponible. Et les différents élements sont maintenant les uns au dessus des autres, donc vous voyez l'élement à propos partagé catégorique qui se trouvait sur le côté dans les deux autres mises en page, eh bien ici se trouve à la suite du contenu principal du site. Au niveau du pied de page, vous voyez qu'il n'a plus que deux colonnes, ou plutôt que trois colonnes, puisque le contenu qui se trouvait dans la première colonne ici, eh bien vous l'avez sous forme de rangée ici, dans le pied de page de la tablette. Vous remarquez également au niveau de la barre de lien, que la barre de lien, dans la tablette, a été remplacée par un bouton, donc on comprend très bien qu'en appuyant sur ce bouton, on va réveler le menu du site, qui contiendra les mêmes éléments que ce que vous avez ici sur le côté, dans les autres mises en page. Enfin, remarquez que les boutons qui sont présents dans l'entête, sont beaucoup plus gros sur la mise en page pour les tablettes, que pour les autres mises en page, puisqu'on va devoir intéragir ici, ici avec notre doigt plutôt qu'avec la souris. Alors vous remarquez qu'il y a pas de mise en page particulière pour les smartphones puisqu'on va considérer que pour les smartphones, on va développer une toute autre version du site, avec d'autres framework du site comme jQuery, par exemple, Ici, on n'a pas besoin de faire une mise en page particulière pour les smartphones, puisqu'on aura un site mobile dédié à tout ça.

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 !