Share
Dans ce didacticiel Photoshop, nous allons apprendre à créer une mise en page Web 2.0. Au fil de ce didacticiel, nous aborderons de nombreuses techniques Photoshop. Semble un peu long? c'est parce que c'est très détaillé. Je vous assure que vous trouverez facile à suivre et à faire, il suffit d'essayer!
Pour que tout reste aligné, nous allons utiliser le système de grille 960 (une fois téléchargé), ouvrez le fichier "960_grid_24_col.psd"..
Nous allons commencer par créer un calque à partir de l’arrière-plan, faire un clic droit sur le calque "Arrière-plan", puis choisir "Calque à partir de l’arrière-plan". et l'appeler "bg".
Comme nous allons beaucoup utiliser les guides, nous devons voir nos règles. Pour ce faire, sélectionnez Affichage> Règles..
Nous devons définir des bordures inférieures pour la zone d'en-tête. Par conséquent, nous allons faire glisser un nouveau guide horizontal après 100 pixels. allez dans Affichage> Nouveau guide, position: 100.
Créons notre en-tête. nous allons commencer par créer une sélection de 1020x100px. puis cliquez sur Maj + Retour arrière pour le remplir (avec n'importe quelle couleur juste pour l'instant).
Donnez-lui une superposition de dégradé selon l'image suivante:
Appelez maintenant cette couche: "header_bg".
Ecrivez le titre de votre site Web avec ces paramètres:
Ajoutez maintenant une superposition de dégradé à votre texte avec les paramètres suivants:
Pour aligner le titre de votre site Web avec l'arrière-plan de l'en-tête; Sélectionnez votre calque de titre et votre calque "header_bg" puis cliquez sur Aligner les centres verticaux.
Rédigez votre texte de navigation avec ces paramètres:
Créez un rectangle arrondi qui représentera un lien survolé. il devrait être environ 65x35px taille - 5px rayon, (remplissez-le avec n'importe quelle couleur pour l'instant).
Donnez-lui une superposition de traits et de dégradés selon l'image suivante:
Avant de passer à l'étape suivante, assurez-vous de bien organiser vos couches. Voici à quoi ressemble le mien.!
Il est temps de créer la zone des dessins en vedette. nous commencerons par définir nos limites inférieures en ajoutant un nouveau guide horizontal après 430 pixels.
Créez une sélection de 1020x430px en tant qu'arrière-plan de la zone de modèles en vedette. et le remplir avec n'importe quelle couleur.
Puis appliquez-lui un dégradé avec les paramètres suivants:
Créons maintenant l'effet glaçure! créez une sélection de 1020x120px, remplissez-la de n'importe quelle couleur.
Et puis ajoutez une superposition de dégradé. utiliser l'image ci-dessous pour référence.
Maintenant, réduis l'opacité de ce calque à 40%
Ajoutons quelques touches! avec l'outil Rectangle de sélection d'une rangée, créez une sélection de 1 px et alignez-la comme suit:
Définissez votre couleur de premier plan sur # acd86e, puis cliquez sur Shift + Backspace pour la remplir. veillez à utiliser la couleur de premier plan comme option de remplissage.
Je vous garantis que vous aurez des pixels parfaits
Nous avons fini de créer les éléments d'arrière-plan. alors assurez-vous de leur donner des noms idéaux, les organiser et les regrouper.
Soyons plus précis! faites glisser deux nouveaux guides en fonction de l'image suivante
Écrivez des mots de bienvenue avec ces paramètres:
J'ai personnellement écrit: "Voici notre tout nouveau travail. Oups, bienvenue!" ;) mais nous devons insister sur le mot "Bienvenue!" en quelque sorte. Donc, fondamentalement, nous allons lui donner une superposition de dégradé. suivi avec l'image
Maintenant, faites glisser deux nouveaux guides horizontaux selon l'image suivante
Avant de dire au revoir à cette étape, assurez-vous d'organiser vos calques de texte.
Commencez par créer une sélection de 250x150px (remplissez-la de n'importe quelle couleur), ce sera notre porte-image.
Appelez cette couche "pic_holder" et essayez de l'aligner comme sur l'image ci-dessus..
Et lui donner un coup
Ajoutons une image d'un dessin présenté. Pour ce faire, sélectionnez Fichier> Importer et sélectionnez une image. appelez son calque "pic" et assurez-vous de le placer juste au-dessus du calque "pic_holder".
Cliquez avec le bouton droit sur le calque "pic" et choisissez Créer un masque d'écrêtage..
Pour créer notre ombre, commençons par dupliquer les deux couches "pic" et "pic_holder".
Tout en ayant sélectionné les deux calques dupliqués, allez dans Edition> Transformation libre et ajustez la hauteur à: -100.0%
Pendant que nous sélectionnons toujours les deux calques dupliqués, cliquez dessus avec le bouton droit de la souris et choisissez Convertir en objet intelligent. appelez cette couche "ombre". et assurez-vous de le placer en bas.
Sélectionnez "calque", puis cliquez sur Ajouter un masque de calque (au bas du panneau des calques).
Choisissez l'outil Dégradé (G) et avec un dégradé linéaire noir et blanc, faites glisser de bas en haut..
Vous devriez avoir quelque chose comme ça!
Nous devons ajouter une description à notre image. nous allons donc créer une sélection de 240x25px et la remplir avec cette valeur de couleur: # 1a1919, cela fonctionnera comme arrière-plan de description.
Ecrire une description avec ces paramètres de caractère:
Assurez-vous de garder votre document bien rangé!
Faites une autre copie de l'image de conception sélectionnée et alignez-la à droite..
Nous allons agrandir un peu l’image centrale, alors faites une sélection de 340x200px, alignez-la comme ci-dessous et remplissez-la avec n’importe quelle couleur.
Nous allons également lui donner un coup. utiliser l'image suivante pour référence
Et voici ce que nous avons!
Assurez-vous d'organiser vos calques et de les regrouper. J'ai personnellement créé trois groupes distincts. voici à quoi ils ressemblent
Créons notre bouton coulissant! nous allons commencer par créer une ellipse de 50 x 50 pixels à l'aide de l'outil de sélection de elliptique (M), puis de la remplir avec n'importe quelle couleur.
Maintenant, donnez-lui des styles de calque en fonction de l'image suivante
Avec l’outil Forme personnalisée (U), créez une flèche et attribuez-lui les styles de calque suivants
Vous devriez avoir quelque chose comme ça
N'oubliez pas d'aligner votre bouton en fonction de l'image suivante
Faites une autre copie de la flèche et alignez-la à droite
Travaillons sur la zone de contenu. commencez par créer une sélection de 1020x815px
Cliquez sur Shift + Backspace pour remplir votre sélection avec cette couleur: # e8e8e8
À l'aide de l'outil Rectangle de sélection à une ligne (M), créez une sélection de 1 px, placez-la comme l'image suivante et remplissez-la de blanc (#ffffff).
Maintenant, vous avez des détails de pixels parfaits!
Nous devons définir des limites supérieures pour notre zone de contenu. par conséquent, nous allons faire glisser un nouveau guide horizontal après 50px.
Téléchargez cet ensemble d'icônes: Ensemble de base - Mélangeur de pixels et placez-les comme suit.
Faites glisser un nouveau guide horizontal au bas de l'icône, laissez 20 pixels, puis faites-en glisser un nouveau..
Maintenant, écrivez quelques titres avec ces paramètres:
Faites glisser deux autres guides en fonction de l'image suivante
Écrivez du texte avec ces paramètres:
Faites glisser plus de trois guides en fonction de l'image suivante
Il est temps de créer notre bouton "lire plus". Avec l'outil Rectangle arrondi (U), créez un rectangle de rayon 100x30px et 5px. et remplissez-le avec n'importe quelle couleur pour l'instant.
Donnez à ce rectangle des styles de calque. utiliser l'image ci-dessous pour référence.
Avec l'outil Ellipse (U), créez une ellipse de 15x15 pixels et remplissez-la avec la valeur de couleur suivante: # 4d4d4d.
Pour l'aligner correctement, sélectionnez son calque et le calque du rectangle, puis cliquez sur Aligner les centres verticaux tout en sélectionnant les deux calques..
Tapez "+", remplissez-le de blanc (#ffffff) et placez-le comme ceci
Écrivez le mot "en savoir plus" avec les paramètres de caractère suivants:
Donnez-lui une ombre portée. utiliser l'image ci-dessous pour référence
Pour créer une ligne de séparation verticale, avec l'outil Ligne (U), créez deux lignes verticales à côté de chacune d'elles. et remplissez-les avec ces valeurs: #ffffff - # b3b3b3.
Alignez votre ligne comme sur l'image suivante
N'oubliez pas d'organiser vos calques. regarde le mien!
Faites trois copies de ce que nous avons créé lors des deux étapes précédentes. et avoir quelque chose comme ça!
Créons notre séparateur.
Faites glisser un nouveau guide horizontal après 50 px
Avec l’outil elliptique de sélection (M), créez une sélection comme celle ci-dessous..
Définissez la couleur d’avant-plan sur noir (# 000000), puis cliquez sur Maj + Retour arrière pour remplir votre sélection. appelez cette couche "separator_bg".
Pour le rendre flou, allez dans Filtre> Flou> Flou gaussien - rayon: 3px.
Tout en sélectionnant le calque "separator_bg" sélectionné, créez une sélection comme celle ci-dessous, puis cliquez sur Supprimer..
Cliquez sur l'icône Ajouter un masque de calque. et réglez votre éditeur de dégradé sur noir, blanc, noir.
Avec l'outil Dégradé (G), faites glisser avec un dégradé linéaire en fonction de l'image suivante..
Réduit le calque Opacité à 50%
Avec l'outil Ligne (U), créez deux lignes horizontales superposées et placez-les juste au-dessus du séparateur..
Remplissez-les avec # b3b3b3 - #ffffff et ajoutez-leur le même masque de calque.
Nous allons commencer à travailler sur notre zone de contenu inférieure en faisant glisser un nouveau guide après 50px.
Ajoutez un titre avec ces paramètres de personnage:
Faites glisser deux nouveaux guides horizontaux en fonction de l'image suivante.
Écrivez du texte avec ces paramètres de caractères:
Faites glisser un nouveau guide après 160 px comme bordure inférieure pour la zone de contenu.
Écrivez un autre titre et un texte en utilisant les mêmes paramètres de caractères que ceux que nous avons utilisés à l'étape précédente..
Tapez un guillemet sur votre clavier, avec ces paramètres de caractère:
Et réduire l'opacité de son calque à 50%
Ecrivez un mot de sage ou une citation de votre choix avec ces paramètres de caractères:
Pour créer une ligne de séparation verticale, créez deux lignes verticales côte à côte et remplissez-les avec les valeurs suivantes: #ffffff - # b3b3b3.
Assurez-vous de garder votre couche organisée, voici comment je les ai organisées.
Ecrivez encore un autre titre comme ceux de gauche (essayez d'écrire quelque chose qui représente l'équipe, par exemple j'ai écrit "Notre équipe").
En utilisant l’outil Rectangle (U), créez un rectangle de 90x90px et remplissez-le avec n’importe quelle couleur. appelez cette couche "photo1_holder"
Cela fonctionnera en tant que titulaire pour une photo d'un membre de l'équipe. Maintenant, donnez-lui un AVC. Utilisez l'image ci-dessous pour référence.
Placez une photo d'un membre et appelez son calque "photo1". Assurez-vous que le calque "photo1" se trouve juste au-dessus du calque "photo1_holder". Cliquez ensuite avec le bouton droit sur le calque "photo1" et choisissez "Créer un masque d'écrêtage". Vous devriez trouver quelque chose comme ci-dessous!
Ecrivez du texte sur le membre en utilisant les paramètres de caractère suivants:
Nous allons créer les icônes de médias sociaux nous-mêmes! Commençons par Twitter, tapez la lettre "t" avec ces paramètres de caractère:
Puis donnez-lui un AVC selon l'image suivante.
Créons le LinkedIn! Tapez "in" mot avec ces paramètres de caractère:
Facebook!? Tapez "f" lettre avec ces paramètres de caractère:
Créez une autre copie de la photo du membre. tout en sélectionnant le calque photo, accédez à Couche> Nouveau calque de réglage> Noir et blanc.
Assurez-vous de cocher "Utiliser le calque précédent pour créer un masque de découpage"
Tapez le même texte, les lettres des médias sociaux que nous avons écrites avant d'utiliser les mêmes paramètres de caractère, mais donnez-leur toute cette valeur de couleur: # 505150.
Alors, évidemment, le député aura l'air gris quand il ne sera pas survolé!
Faites deux copies et alignez-les de cette façon
Pour vous assurer qu'ils sont bien alignés, créez quatre groupes distincts, chacun d'eux contenant le contenu d'un membre, puis cliquez sur Distribuer les bords gauches dans la barre de contrôle tout en sélectionnant les quatre groupes..
J'ai organisé mes couches, toi?
Avant de commencer à travailler sur la zone de liens de médias sociaux, nous devons définir des limites. C'est pourquoi nous allons faire glisser deux nouveaux guides en fonction de l'image suivante.!
Créez une sélection d'environ 940x70px et alignez-la comme sur l'image ci-dessous.
Remplissez-le avec n'importe quelle couleur, puis appliquez-lui un dégradé. utiliser l'image ci-dessous pour référence.
Créez un rectangle de 70x45px. utilisez l'image ci-dessous pour l'aligner et lui donner des styles de calque. appelez cette couche "tw_bg"
Masquer le calque "tw_bg" pour travailler librement.
Créez un autre rectangle de 10x43px, puis sélectionnez Edition> Chemin de transformation> Incliner. ajustez ces options dans la barre de contrôle:
Appelez ce calque "effet" et rendez à nouveau visible le calque "tw_bg".
Copier le style du calque "tw_bg" et le coller dans le calque "effet".
Ecrire "t" lettre avec ces paramètres de caractères:
Donnez-lui aussi des styles de calque selon l'image suivante.
Répétez l'étape 20 pour créer un autre séparateur ou même pour le copier. puis placez-le de cette façon:
Nous devons couper la partie droite du rectangle, hein !? pour ce faire, sélectionnez le calque "tw_bg" et cliquez sur Ajouter un masque de calque.
Faites une sélection sur la partie droite (que vous devez couper) du rectangle, définissez votre couleur d’avant-plan sur noir (# 000000), puis cliquez sur Maj + Retour arrière pour le remplir..
Écrivez du texte - qui devrait en fait être un Tweet - avec les paramètres de caractère suivants:
Pour aligner correctement le texte tout en sélectionnant le calque de texte et le calque de la barre verte, cliquez sur Aligner les centres verticaux..
Répétez l'étape 27 pour créer quelque chose comme dans l'image ci-dessous. Créez également un rectangle, remplissez-le avec le numéro 334814 et réduisez son opacité à 40%.
Donnez au grand rectangle des styles de calque en fonction de l'image suivante
Maintenant, remplissez le rectangle asymétrique avec une couleur plus foncée de cette valeur: # 2a6788
Ecrire "t" lettre avec ces paramètres de caractères:
Et lui donner un coup. utiliser l'image ci-dessous pour référence
Assurez-vous d'organiser vos couches et de les regrouper.
Créez une autre copie de l'icône Twitter, remplacez la superposition de couleurs (pour le grand rectangle) par: # 0080ab et remplissez le rectangle incliné avec la valeur de couleur suivante: # 00526d.
Écrivez le mot "in" avec ces paramètres de caractères:
Créez une troisième copie de l'icône Twitter ou LinkedIn, remplacez la superposition de couleurs (pour le grand rectangle) par: # 395796 et remplissez le rectangle incliné avec cette valeur de couleur: # 263e6f.
Écrivez la lettre "f" avec les paramètres de caractères suivants:
Effectuez une dernière copie, remplacez la superposition de couleurs (pour le grand rectangle) par: # e8e8e8 et remplissez le rectangle incliné avec la valeur de couleur suivante: #cdcdcd.
Écrivez le mot "fr" avec ces paramètres de caractères:
Placez chacune des icônes dans un groupe séparé et, tout en sélectionnant les quatre, cliquez sur Distribuer les bords gauche. .
Continuez comme ça! seul le pied de page est parti. Créez une sélection de 1020x460px et remplissez-la avec n'importe quelle couleur pour l'instant.
Appliquez-lui un calque dégradé. utiliser l'image ci-dessous pour référence.
Vous devriez avoir une belle ombre!
avec l'outil Marquee de rangée simple (M), créez une sélection de 1px et remplissez-la de blanc (#ffffff).
Faites glisser deux nouveaux guides horizontaux en fonction de l'image suivante.
Ecrivez un titre avec ces paramètres de caractères:
Ecrivez un sous-titre avec ces paramètres de caractères:
À l'aide de l'outil Ligne (U), créez deux lignes horizontales superposées et remplissez-les avec les valeurs de couleur suivantes: # 151515 - # 2f2f2f.
Alignez-le de cette façon.
Faites glisser deux nouveaux guides horizontaux en fonction de l'image suivante.
Avec l'outil Rectangle arrondi (U)
Accentsconagua