Comment créer un site internet professionnel propre avec Photoshop
Ce modèle est axé sur une agence de design proposant une gamme de services Web. L’objectif principal de la page que nous concevons est donc de promouvoir ce que fait l’entreprise et comment créer un site internet avec Photoshop.
Ceci est la première partie d'un tutoriel sur la création d'un site Web d'entreprise propre. Cette première partie sera consacrée à la création du dessin dans Photoshop et, dans la seconde partie, à la conversion du résultat PSD en un modèle XHTML fonctionnel.
Série "Site Web pour les entreprises"
Partie 1: Comment concevoir un site Web professionnel propre avec Photoshop
Partie 2: Conversion PSD / HTML: Coder une conception de site Web propre
Résultat final
Voici une capture d'écran du design que nous allons créer.
Vue d'ensemble sur la création de site internet avec Photoshop
Dans ce tutoriel, je vais supposer que vous avez une compréhension de base de Photoshop et que vous savez effectuer des tâches de base telles que l’ajout de texte, la création de formes et le redimensionnement / rotation d’objets.
Mon objectif dans cette procédure pas à pas est de montrer que vous n’avez pas toujours besoin de beaucoup d’effets spéciaux dans un design pour créer une belle mise en page. Avec quelques polices et des effets subtils, il est toujours possible de créer un design d'aspect professionnel qui impressionnera vos visiteurs.
La conception que nous allons construire comporte un en-tête contenant le nom de la société et la zone de navigation. Ci-dessous se trouve un domaine qui met en évidence ce que l'entreprise fait avec quelques détails supplémentaires.
Ensuite, une section décrit plus en détail les services spécifiques. La section ci-dessous contient des témoignages de clients et un aperçu du projet.
Nous voulons également essayer de renforcer la crédibilité et la confiance en utilisant des témoignages de clients et un exemple de "projet en vedette".
Enfin, nous avons un pied de page simple en bas qui contient un texte de copyright assez standard.
Comment créer le document avec photoshop
1 Créez un nouveau document d'une taille de 1100x1100px. Ajoutez ensuite des guides verticaux à 70px et 1030px - cela nous donne une largeur de 960px, qui devrait facilement tenir sur la plupart des écrans.
Créer le document
Comment faire l'en-tête
2 Pour créer l'en-tête, nous devons d'abord ajouter l'arrière-plan. Sélectionnez l'outil Rectangle (U), définissez la couleur de premier plan sur une couleur gris très foncé (# 333333), puis tracez une zone de 130px de hauteur à gauche du document.
Faire l'en-tête
Ajouter le nom du site / logo
3 Pour ajouter le nom de la société, définissez la police sur Myriad Pro. Définissez la taille de la police sur 60px, la couleur gris clair (#EEEEEE) et l'espacement des lettres sur -40px. Vous pouvez définir toutes ces options dans le panneau Caractère (Fenêtre> Caractère). À l’aide de l’outil de type horizontal (T), tapez le nom et positionnez-le contre le guide de gauche.
Ajouter le nom du site / logo
Construire la navigation du site internet avec photoshop
4 Pour ajouter la zone de navigation, définissez la police sur Arial. La taille de la police est 16px et la couleur est #EEE. Tapez des noms de page (par exemple, Accueil, À propos, etc.) séparés par deux caractères (-):
Faire la navigation
Créer la section de contenu en vedette
5 Pour créer la section de contenu en vedette, nous devons commencer par ajouter le titre du contenu en vedette. Définissez la police sur Myriad Pro, l’épaisseur de la police sur gras, la taille de la police 60px, l’espacement des lettres sur -40px et la couleur sur # 333333. Tapez le titre avec l'outil de type horizontal (T).
Créer une section de contenu en vedette
6 Pour que le titre se démarque un peu plus, nous allons changer la couleur de l'esperluette (&) en un joli bleu (# 00BFF3).
7 En dessous de cela, nous devons ajouter le sous-titre. Définissez la police sur Myriad Pro, le poids de la police sur Normal, la taille sur 50 px et la couleur sur # BB. Tapez un sous-titre et positionnez-le juste sous le titre.
8 Nous souhaitons maintenant ajouter un bref aperçu de ce que fait la société. Choisissez l'outil Texte horizontal, définissez la taille de la police sur 30px, la couleur sur #CCCCCC, puis tapez une série de points (.) Dans le guide de gauche à droite.
9 Créez une copie (choisissez le calque de texte dans le panneau Calques puis appuyez sur Ctrl / Cmd + J) de cette ligne horizontale en pointillés, puis placez-la à environ 40 pixels sous la première ligne.
10 Nous devons maintenant ajouter le texte entre ces lignes. Définissez la police sur Myriad Pro, la taille de la police sur 34px, la couleur sur # 555555, l’espacement des lignes sur 42px, l’espacement des lettres sur -40px, puis tapez quelques lignes de texte. Vous pouvez utiliser un générateur lorem ipsum juste pour obtenir rapidement du contenu textuel factice.
11 Vous pouvez également choisir des mots clés et mettre leur police en gras pour les mettre davantage en valeur. J'ai sélectionné les mots "première classe" et "grand impact".
Ajouter les détails des services
12 Nous souhaitons maintenant ajouter des détails plus spécifiques sur nos services. Sélectionnez l'outil Rectangle dans le panneau Outils, définissez votre couleur de premier plan sur # 00AEEF et tracez un rectangle d'environ 280 x 350 pixels, positionné contre votre guide de gauche.
Ajouter les détails des services
13 Pour que cette zone se démarque un peu plus, nous allons ajouter un style de calque d’ombre portée (double-cliquez sur la vignette du calque dans le panneau Calques pour accéder à la fenêtre de dialogue Styles de calque); définissez la couleur de l’ombre portée où la couleur est définie sur une couleur grise (#AAAAAA).
Votre boîte devrait maintenant avoir un peu plus d'emphase.
14 Nous devons maintenant ajouter un titre à notre service. Sélectionnez l'outil Texte horizontal et définissez la police sur Myriad Pro, l'épaisseur de la police sur Normal, la taille de la police sur 40 px et la couleur du texte sur blanc (#FFFFFF). Dessinez une zone de texte à partir du bord gauche de la zone et définissez l'alignement sur le texte Centre. Ensuite, tapez un titre.
15 Définissez maintenant la taille de la police sur 18 px et tapez une série de périodes qui deviendront une ligne en pointillé.
16 Ensuite, définissez la taille de la police sur 15px et tracez une zone de texte à partir du côté gauche de la zone, à droite de celle-ci. Entrez du texte décrivant les services.
17 Enfin, nous devons ajouter un bouton au bas de cette case. Sélectionnez l'outil Rectangle, définissez la couleur sur une couleur bleue (# 0076A3) et tracez une zone d'une taille d'environ 230 x 40 pixels.
18 Ajoutez un effet Inner Glow au bouton dont la couleur est définie sur une nuance de bleu plus foncé - j’ai utilisé la référence 235162.
19 Ajoutez maintenant une étiquette au bouton. Définissez votre taille de police sur 18 px et tapez en majuscule "OBTENIR PLUS DE DÉTAILS >>".
C’est la première boîte créée.
20 Créez deux copies de cette boîte en dupliquant la première boîte et tout ce qu’elle contient. Utilisez l'outil Déplacement (V) pour les espacer uniformément. Modifiez également les détails dans chacune des cases.
Ajouter les détails des services
21 Pour terminer cette section de la mise en page, prenez une copie de la grande ligne en pointillé que nous avons créée à une étape précédente et ajoutez-la au bas de la section.
Ajouter les témoignages de clients
22 Pour la section des témoignages de clients, nous devons d’abord créer un titre. Définissez la police sur Myriad Pro, la taille sur 24px, la couleur sur un gris foncé (# 555555), puis tapez "Témoignages de clients" avec l'outil Texte horizontal (T).
Ajouter les témoignages de clients
23 Maintenant, pour la première photo de l'auteur témoin, choisissez l'outil Rectangle, définissez la couleur sur une couleur gris clair (#CCCCCC) et tracez un cadre d'environ 84x84px.
24 Ajoutez à présent une photo de votre taille légèrement plus petite. Ajoutez la photo dans un calque au-dessus du calque d'arrière-plan.
25 Ensuite, nous devons ajouter du texte à côté de la photo. Définissez la police sur Arial, la taille de la police sur 14px, la couleur sur le gris foncé utilisé pour le titre de la section Témoignages de clients (n ° 555555), puis tapez du texte factice (là encore, vous pouvez utiliser lorem ipsum). .
26 Maintenant, définissez l’épaisseur de la police sur Gras et tapez le nom de l’auteur. Sur la ligne suivante, tapez l’affiliation de l’auteur (c’est-à-dire le nom de son organisation / entreprise) et définissez la couleur sur bleu vif (# 00AEEF).
27 Prenez tous les éléments utilisés pour créer le premier témoignage et créez deux copies. Placez-les l'un en dessous de l'autre avec un espacement constant et modifiez le contenu et les images.
28 Nous devons maintenant ajouter un séparateur vertical à la droite de la section des témoignages. Créez une copie de la ligne en pointillé créée précédemment et supprimez environ la moitié des périodes. Faites pivoter la ligne d'environ 90 ° (Édition> Transformer> Rotation de 90 °) et placez-la à droite de la section des témoignages de clients.
Créer la section de projet en vedette
29 Pour créer notre zone de projet sélectionnée, nous devons d’abord ajouter un titre. Définissez la police sur Myriad Pro, la taille sur 24px, la couleur sur un gris foncé (# 555555), puis tapez "Projet présenté".
Créer la section de projet en vedette
30 Ajoutez maintenant un titre pour le projet présenté. Définissez la taille de la police sur 20 pixels, la couleur sur une couleur grise (# 888888) et tapez un titre.
En-dessous de ce titre, nous avons besoin d’une capture d’écran du projet, d’une taille d’environ 430x200px.
31 Ajoutez ensuite un texte qui donne un bref aperçu du projet. Définissez la police sur Arial, la taille de la police sur 14 px, la couleur du texte sur un gris foncé (# 555555) et tapez quelques lignes de contenu.
32 Incluez également un texte en bas qui dit quelque chose comme «Cliquez ici pour plus de détails». Changez la couleur de ce texte en bleu clair (# 00AEEF).
33 Enfin, ajoutez une autre copie de la ligne horizontale en pointillés au bas de cette section.
Faire le pied de page
34 Le pied de page est très simple à compléter. Définissez la police sur Arial, la taille de la police sur 16 px, la couleur sur # 888888 et tapez du contenu de pied de page.
Créer la section de projet en vedette
Tout fini, Nous avons vu comment créer un site internet propre avec Photoshop
C'est tout fait ! Nous vous avons montré comment créer un site internet avec Photoshop.
Metadosi pour créer un site internet avec Photoshop
Dans ce tutoriel, j’espérais illustrer le fait que vous n’avez pas toujours besoin d’effets spéciaux pour créer un joli design. Parfois, quelques polices et couleurs associées à des effets subtils peuvent très bien faire l'affaire.
Faites-moi savoir si vous avez des questions ou si quelque chose n’est pas clair et je ferai de mon mieux pour y répondre dans les commentaires. Dans la suite de ce tutoriel, je vais vous montrer comment créer un modèle XHTML à partir de cette conception. Si vous vous avez besoin de créer un site internet sur la base de la charte graphique Photoshop de votre entreprise Nous pouvons vous aider. Notre service de création graphique, intégrera votre design Photoshop dans votre site internet. Contactez-nous en ligne ou par téléphone au 06 80 60 77 77.
Série "Site Web pour les entreprises"
Partie 1: Comment concevoir un site Web professionnel propre avec Photoshop
Partie 2: Conversion PSD / HTML: Coder une conception de site Web propre
