Dans ce tuto Photoshop, Arzhur Caouissin va appliquer ce que nous avons appris plus tôt avec une vraie maquette graphique typique HTML5.
On retrouve sur cette maquette un en-tête avec un menu qui sera dans la balise header. Tout en bas, on retrouve le pied de page qui sera dans le footer. Au centre il y a un bloc principal qui contiendra tous les éléments qui sera la balise main ou un div pour que le site soit adapté à tous les navigateurs. A l'intérieur du bloc, il y a une section qui contiendra plusieurs articles. En bas du main, toujours dans la section, il y a une navigation qui sera dans une balise nav. Et à droite, nous trouverons une balise aside pour avoir un contenu latéral qui a la même thématique mais pas directement lié au contenu de la section.
Nous retrouvons dans le panneau des calques, des calques, majoritairement vectoriels pour les balises et des bitmaps pour le header, le footer et la vague regroupés dans un dossier body. Il commence par copier le style des images du premier niveau uniquement. Il peut à présent copier le style du dossier body car le style des calques masqués ne pourra pas être copié.
Éditeurs Photoshop