Tutoriel: Comment mettre en page une page Web avec Adobe Photoshop

MODÈLE-PHOTOSHOP

Il existe une grande variété d'outils pour concevoir des pages Web et travailler de manière totalement simple et fonctionnelle sans entrer ni toucher de code. Ils sont innombrables, proposés par des applications (Adobe Dreamweaver est un exemple) ou directement par des plateformes en ligne comme Wix. Cependant, pour un concepteur Web, la connaissance des procédures manuelles est essentielle. HTML5 et CSS sont les piliers fondamentaux de la mise en page des sites Web et des pages de destination.

Cependant, plus souvent que prévu, vous devrez vous tourner vers des applications comme Indesign ou Adobe Photoshop pour compléter votre travail de mise en page et leur donner une finition parfaite. Aujourd'hui, nous allons voir dans ce didacticiel détaillé, comment nous pouvons mettre en page une page Web à l'aide d'Adobe Photoshop. Dans cette première partie, nous resterons dans le travail à développer à partir de Photoshop, bien que dans les prochaines versions, nous verrons comment nous pouvons appliquer ce travail déjà directement dans le code HTML pour le rendre fonctionnel.

En commençant par la conception de notre wireframe

Pour commencer par la mise en page et la conception d'une page Web, il est extrêmement important que nous commençons par définir quels seront les éléments de base, c'est le squelette. Cette structure servira de support pour contenir tout le contenu (qu'il soit textuel ou multimédia). En définissant chacune des sections qui composent notre page, nous pourrons y travailler avec une précision totale et fournir un design visuel le plus précis possible.

Il est très important que nous prenions en compte les dimensions que notre site Web aura, s'il aura un boîte ou pleine largeur. Une page Web encadrée sera à l'intérieur d'un petit conteneur et donc un espace apparaîtra autour d'elle. Au contraire, un web plein écran occupera tout l'écran de l'appareil qui reproduit la page. Le choix entre une modalité ou une autre répond à des questions purement stylistiques et dépendra également des besoins du projet sur lequel nous travaillons. Nous travaillerons dans cet exemple avec le mode encadré, donc il n'occupera pas tout l'espace fourni par le navigateur.

Filaire-1

Pour créer notre wireframe, la première chose que nous devons faire est d'entrer dans l'application Adobe Photoshop et d'inclure les dimensions que nous voulons que notre page ait. Dans cet exemple, notre page aura une largeur de 1280 pixels. Cependant, le problème de taille peut varier en fonction de la destination finale ou de l'appareil sur lequel nous voulons reproduire notre page. Il ne fait aucun doute que pour qu'une conception Web soit fonctionnelle et efficace, elle doit être sensible et il doit s'adapter à tous les appareils du marché. Cependant, dans ce cas, nous allons travailler pour créer un prototype que nous allons reproduire sur un ordinateur de bureau. Même dans ce cas, la question de la réactivité que nous traiterons plus tard, pour l'instant, voici une hiérarchie de dimensions d'écran sur laquelle travailler dans cet exemple. Gardez à l'esprit que dans ce cas, nous allons créer une mise en page de la page de destination dans Adobe Photoshop, puis la migrer vers HTML5 ET CSS3. L'objectif de cette petite pratique est de convertir un design créé dans Photoshop en un design web utilisable et interactif qui répond aux mouvements de l'utilisateur.

Mesures pour téléphones mobiles

iPhone 4 et 4S: 320 x 480

iPhone 5 et 5S: 320 x 568

iPhone 6 : 375 x 667

iPhone 6+ : 414 x 736

Nexus 4 : 384 x 598

Nexus 5 : 360 x 598

Galaxy S3, S4, S5 : 360 x 640

HTC One : 360 x 640

Mesures des comprimés

iPad tous les modèles ainsi que iPad Mini: 1024 x 768

Galaxy Tab 2 et 3 (7.0 pouces): 600 x 1024

Galaxy Tab 2 et 3 (10.1 pouces): 800 x 1280

Nexus 7 : 603 x 966

Nexus 10 : 800 x 1280

Microsoft Surface W8 RT : 768 x 1366

Microsoft Surface W8 Pro : 720 x 1280

Mesures pour les ordinateurs de bureau

Petits écrans (utilisés par exemple dans les netbooks): 1024 x 600

Écrans moyens: 1280 x 720/1280 x 800

Grands écrans: largeur supérieure à 1400 pixels, exemple 1400 x 900 ou 1600 x 1200.

filaire-guides

Pour commencer à distribuer les éléments et à attribuer des sections dans notre maquette Web, il est très important de prendre en compte les proportions pour assurer une finition lisible et mélodique. Il sera essentiel que vous utilisiez les options de règles et de guides que vous pouvez trouver dans le menu supérieur Affichage. Pour travailler de manière proportionnelle et exacte, il est préférable de travailler à partir de pourcentages. On cliquera sur le menu vue puis sur l'option «Nouveau guide» pour choisir la modalité de la division. Dans ce cas nous ferons quatre divisions verticales à 25% et nous les prendrons comme référence pour placer nos images dans le pied de page et l'image de notre logo dans l'en-tête.

Filaire-1a

Il existe un code pour désigner chacun des domaines qui occuperont notre maquette et la fonction que chacun d'eux aura. Par exemple, pour indiquer la zone qu'occupera une image, nous allons créer des rectangles avec une sorte de croix. Pour indiquer que nous voulons inclure des vidéos dans une certaine zone, nous inclurons le symbole de lecture dans notre conteneur. Dans ce premier exemple, nous ne travaillerons qu'avec des images, dans la capture supérieure, vous pouvez voir la zone dans laquelle le logo sur notre site Web.

Filaire-final

Ce serait le résultat final de notre wireframe. Comme on peut le voir, il est divisé en un en-tête composé de l'image dans laquelle se trouvera le logo et qui servira de lien vers la page d'accueil accompagné de deux onglets, d'un moteur de recherche et de quatre boutons sur le champ de recherche. De plus, déjà dans le corps, nous avons inclus une barre latérale composée d'une barre de séparation et d'une série de catégories qui catégorisent le type de contenu qui sera sur notre site Web. Une autre section avec une numérotation qui comprend les entrées qui existeront sur notre site, et enfin une liste avec les balises meta les plus représentatives de notre site.

Dans la zone de contenu, qui sera définie par une section qui comprendra contenu auto-gérable, nous trouverons le contenu de nos articles. Dans ce cas, des miettes de pain ou des miettes de pain (qui indiquent la structure organique de notre site Web, le titre de l'article, les métadonnées, un paragraphe comme corps de texte, dans lequel une image est incluse.

En pied de page, nous avons inclus quatre images qui serviront de lien vers d'autres zones de notre page. Ici, nous pouvons inclure des logos ou d'autres sections intéressantes. Bien qu'en réalité, cette zone agira plus comme pré-pied de page, puisque le pied de page lui-même ira un peu plus bas avec la politique d'utilisation, les mentions légales et les droits d'auteur.

Une fois que nous avons défini la structure de base ou le squelette de notre page, nous devrons passer au niveau suivant. Cela consistera en une conception appropriée de chacune des zones de notre site Web. En d'autres termes, nous commencerons à «remplir» chacune de ces zones avec le contenu qui sera finalement inséré sur notre site Web. Il est recommandé de ne pas commencer à concevoir ces éléments avant de travailler sur le wireframe car il est très probable que si nous le faisons dans cet ordre, nous devrons plus tard modifier leurs proportions. Nous courons le risque de déformer nos images et devoir refaire la conception de chacun des éléments, ce qui deviendra soit une perte de temps, soit un résultat de moindre qualité.

Dans ce cas, la conception de notre site Web sera extrêmement simple. Nous utiliserons le préceptes de conception matérielle, puisque nous allons utiliser le logo Google pour illustrer cette pratique. Je dois préciser que le but de ce tutoriel est d'illustrer les connaissances techniques, donc le résultat esthétique dans ce cas n'est pas pertinent. Comme vous pouvez le voir, nous avons peu à peu rempli l'espace avec tous les domaines que nous avions précédemment déterminés dans notre schéma. Cependant, nous avons fait une petite modification à la dernière minute. Comme vous l'avez peut-être remarqué, nous avons considérablement réduit la taille de notre logo et nous avons inclus une ligne de séparation dans la zone d'en-tête inférieure qui se connecte parfaitement avec le menu supérieur. Dans ce cas, nous avons utilisé des boutons et des matériaux d'une banque de ressources. En tant que designers, nous pouvons les concevoir nous-mêmes (en particulier cette option est recommandée si nous voulons qu'elle présente un tonique très similaire à celui présenté par l'image de marque ou le logo).

DÉVELOPPEMENT

Il est important de garder à l'esprit que pour présenter cet exemple, nous allons travailler à deux niveaux différents. D'une part, nous travaillerons sur les objets et d'autre part sur l'apparence du site. C'est-à-dire d'une part dans le squelette de notre site Web et d'autre part dans l'ensemble éléments flottants que ce squelette supportera. Vous vous rendrez compte qu'il y a des zones qui ne flotteront pas du tout, comme la zone qu'occupera notre barre latérale, le preefooter ou la barre de séparation qui sépare l'en-tête du corps.

web2

Les structures 1, 2, 3 et 4 feront partie du fond à partir de notre site Web, il ne nous sera donc pas nécessaire d'exporter en tant que tel depuis Adobe Photoshop, bien que nous puissions le faire, ce n'est pas nécessaire. Quand cela vient à Couleurs plates (l'une des caractéristiques essentielles de la conception plate et de la conception matérielle, elles peuvent être appliquées parfaitement via le code à l'aide d'une feuille de style CSS). Cependant, le reste des éléments doit être enregistré pour une insertion ultérieure dans notre code HTML. Dans ce petit diagramme, nous avons également reproduit les zones qui appartiennent à l'arrière-plan de la page afin que nous ayons une idée claire de ce que sera l'apparence finale de notre site.

Comme vous pourrez le réaliser, le sens de la création de ce schéma dans Adobe Photoshop est d'obtenir la dimension réelle de chaque élément et de clarifier la disposition et la structure de chaque élément. Bien entendu, le contenu textuel n'a pas sa place dans cette phase du processus puisqu'il doit être fourni par notre éditeur de code. Nous devons également souligner que dans cette pratique, nous allons travailler avec des boutons et des éléments statiques, bien que généralement ceux-ci soient généralement appliqués à partir de frameworks tels que Bootstrap ou directement à partir de Jquery.

Une fois que nous avons créé chacun des éléments qui composeront notre page Web, il est temps de commencer à les exporter et à les enregistrer dans le dossier images situé dans le dossier du projet HTML. Il est important que vous vous habituiez à l'exportation à partir de votre filaire, car il est très probable que vous deviez modifier certains des éléments d'origine en fonction de la configuration du squelette. (Par exemple, dans ce cas, nous avons modifié la taille des boutons d'origine, le logo et la plupart des éléments qui font partie de la composition, y compris les images dans la zone inférieure).

Il est important que nous apprenions à enregistrer n'importe quel élément indépendamment pour les enregistrer avec les dimensions qu'ils ont et de manière précise. Toute erreur, aussi petite soit-elle, peut influencer tous les éléments qui font partie de votre page Web. Gardez à l'esprit qu'ils seront liés les uns aux autres et doivent avoir des dimensions parfaites pour pouvoir être saisis à partir du HTML dans le site Web final. Dans ce cas, nous devrons couper et enregistrer indépendamment les éléments suivants:

  • Notre logo.
  • Tous les boutons (ceux qui font partie du menu principal et le reste).
  • Toutes les images.

Nous pouvons le faire de plusieurs façons et peut-être trouverez-vous une alternative plus efficace pour vous. Mais si c'est la première fois que vous allez faire ce type de mise en page, je vous recommande de suivre les conseils suivants.

  • Tout d'abord, vous devez aller dans le dossier où se trouve le fichier PSD contenant notre wireframe et le dupliquer autant de fois que les éléments que vous allez exporter. Dans ce cas, nous avons créé 12 copies à partir de l'original et nous les avons sauvegardées dans le même dossier. Ensuite, vous renommerez chacune des copies et attribuerez à chacune d'elles le nom de l'élément qu'elle contient. Nos 12 exemplaires seront renommés: Logo, bouton de menu 1, bouton de menu 2, barre de recherche, bouton supérieur 1, bouton supérieur 2, bouton supérieur 3 et bouton supérieur 4. Les quatre autres seront renommés comme suit: Image 1, Image 2, Image 3 et image 4.
  • Une fois cela fait, nous ouvrirons le fichier avec le nom du logo.
  • Nous allons accéder à notre palette de calques et localiser le calque qui contient notre logo. Ensuite, nous presserons Ctrl / Cmd pendant que nous cliquons sur la vignette dudit calque. De cette manière, le logo aura été sélectionné automatiquement.
  • La prochaine étape sera de dire à Photoshop que nous voulons qu'il découpe ce logo de manière précise. Pour cela, nous n'aurons qu'à faire un appel à l'outil de recadrage à partir de la touche ou de la commande C.
  • Une fois que nous avons fait cela, nous cliquons sur notre bouton Entrée pour confirmer la coupe.
  • Maintenant, nous allons aller dans le menu Fichier supérieur pour cliquer sur Enregistrer comment. Nous sélectionnerons le nom, qui dans ce cas sera «Logo» et nous lui attribuerons un format PNG, pour être le fichier qui offre la meilleure qualité sur le Web.
  • Nous répéterons le processus avec toutes les copies et les éléments. Lorsque vous avez coupé, assurez-vous que le reste des calques de notre palette invisible ou éliminé. De cette façon, nous pouvons enregistrer chaque élément avec un fond transparent.

Bouton1

Dans ce cas, nous sélectionnons notre bouton de menu 2 dans la palette des calques. Vous pouvez voir dans la capture d'écran comment les limites de notre bouton ont été automatiquement sélectionnées.

bouton2

Une fois que nous avons sélectionné l'outil de recadrage à partir de la touche C, notre toile est réduite uniquement aux dimensions de notre bouton.

bouton de sauvegarde

Il est maintenant temps de sauvegarder un par un tous les éléments qui font partie de notre site Web et de les inclure dans le dossier images et que nous utiliserons plus tard. Nous passerons des appels à partir de notre code et nous continuerons notre mise en page mais désormais à partir de notre éditeur de code.

Bien qu'il existe de nombreux outils et alternatives à la mise en page d'une page Web qui rendent le processus totalement intuitif, il est très important que nous apprenions à le faire dans un Manuel. De cette façon, nous apprendrons quels sont les principes fondamentaux de la conception d'une page Web.

Résumé:

  1. Concevoir le structure du site Web en accordant une attention particulière au contenu que vous souhaitez transmettre et aux sections que vous devez créer sur votre site Web.
  2. Travaillez votre squelette ou wireframe d'Adobe Photoshop indiquant dans quelles zones le contenu apparaîtra et leur format.
  3. En vous appuyant sur les mesures et les marques que vous avez développées précédemment, commencez à diseñar la surface de la toile. Comprend tous les éléments (flottants et fixes). N'oubliez pas d'inclure les boutons, le logo et les images correspondants.
  4. Découpez un à un tous les éléments qui font partie du projet. Assurez-vous qu'ils ont les bonnes mesures et qu'ils ne vous causeront pas de problèmes plus tard.
  5. Enregistrer tous les éléments au format PNG dans le dossier images dans le dossier du projet HTML.
  6. Gardez à l'esprit que ce projet aura une sortie dans la fenêtre Web, il est donc très important de prendre en compte le mode couleur et d'appliquer RGB.
  7. Inspirez-vous d'autres pages Web que vous admirez avant de vous rendre au travail et n'oubliez pas d'en discuter avec les membres de votre équipe. Dans le cas où il s'agit d'un projet pour un client, essayez de vous en tenir à briefing le plus loin possible.

2 commentaires, laissez le vôtre

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués avec *

*

*

  1. Responsable des données: Miguel Ángel Gatón
  2. Finalité des données: Contrôle du SPAM, gestion des commentaires.
  3. Légitimation: votre consentement
  4. Communication des données: Les données ne seront pas communiquées à des tiers sauf obligation légale.
  5. Stockage des données: base de données hébergée par Occentus Networks (EU)
  6. Droits: à tout moment, vous pouvez limiter, récupérer et supprimer vos informations.

  1.   Roi pirate piratesking dit

    hahahahahahaha et à la fin de tout ça, vous allez sur le bouton de démarrage, éteignez l'équipement, et vous allez voir un putain de professionnel qui vous fera un site Web qui n'est pas une putain de merde;)

  2.   ronny dit

    Le tutoriel me praece bien, mais peut-être que dans le prochain vous le rendrez plus détaillé, je commence toujours dans cette conception, et quand je vois les images avec le résultat final, il y a des étapes que je ne sais pas faire. Merci.