Share
Dans ce didacticiel, nous allons créer une mise en page de site texturée en superposant plusieurs images. La création de mises en page de conception Web très texturées est plus facile que vous ne le pensez. Vous pouvez apprendre à créer rapidement des conceptions à forte image. Pour les concepteurs intermédiaires de Photoshop, la création de cette conception prend moins d’une heure et vous apprendrez quelques astuces professionnelles tout au long du processus. Commençons!
Vous pouvez voir l'aperçu final de l'image ci-dessous.
Jetez un oeil à la conception du site que nous allons créer ci-dessous.
Notre éditeur vidéo Gavin Steele a créé ce didacticiel vidéo pour compléter ce didacticiel texte + image..
Dans ce didacticiel, nous utiliserons des images de stock pour créer une mise en page Web très texturée. Commençons par créer un nouveau document avec la taille suivante: 1000 pixels sur 1000 pixels.
Maintenant, allez-y et téléchargez la texture du bois sans soudure de Grafplus.com. Ici vous pouvez trouver le lien de téléchargement: Télécharger la texture transparente en bois. Ouvrez le fichier "texture-small.jpg" dans Photoshop, puis sélectionnez Edition> Définir le motif. Choisissez un nom pour votre modèle et cliquez sur OK. Vous pouvez maintenant fermer l'image avec la texture du bois.
Sélectionnez le calque "fond" et appuyez sur Commande + J. Ce raccourci dupliquera le calque "fond". Sélectionnez ce nouveau calque et dans le menu supérieur, sélectionnez Calque> Style de calque> Superposition de motifs… Utilisez le motif créé il y a quelques secondes..
Utilisez l’outil Rectangle pour créer des barres verticales de couleurs différentes /
Sélectionnez toutes ces formes dans la palette des calques en maintenant la touche Commande enfoncée et en cliquant avec chaque souris sur chaque calque). De cette façon, vous sélectionnerez toutes les formes.
Lorsque toutes les formes sont sélectionnées, appuyez sur Commande + E (ce raccourci fusionnera tous les calques en un seul). Changez le mode de fusion en Color Dodge et la valeur d'opacité entre 40% et 50%..
Il est maintenant temps d'ajouter une autre excellente image de stock. Visitez grafplus une fois de plus et téléchargez l'image suivante: texture grunge. Placez cette image dans votre document en haut. Allez dans Fichier> Place, et sélectionnez cette belle texture grunge.
Assurez-vous que cette couche est sélectionnée, puis appliquez une simple ombre portée. Calque> Styles de calque> Ombre portée.
Utilisez l'outil Rectangle de sélection pour effectuer une sélection comme indiqué..
Assurez-vous que le calque avec la texture grunge est sélectionné, puis appuyez sur Commande + J (ce raccourci créera un nouveau calque via la découpe). Sélectionnez le nouveau calque et faites-le pivoter de 180 degrés (Édition> Transformation> Rotation de 180. Placez ce nouveau calque au-dessus de la présentation à l'aide de l'outil Déplacer. Allez-y, ajoutez également votre logo. Pour ce tutoriel, j'utilise l'outil text: "PSDtuts +."
Changez le mode de fusion du logo de texte en Color Burn..
Utilisez la même technique pour couper des boutons et un pied de page. Ici vous pouvez voir le résultat.
Si vous voulez créer un bouton distinct avec une autre couleur, vous devez sélectionner le calque avec le bouton pour le rendre unique, puis appuyer sur Commande + U pour faire apparaître les paramètres Teinte / Saturation. Cochez la case Coloriser et déplacez les curseurs vers la droite ou vers la gauche jusqu'à ce que vous soyez satisfait du résultat..
Sur le côté droit, créez une forme blanche avec l'outil Rectangle.
Utilisez l'outil Ligne pour créer des lignes fines et placez-les sur la forme blanche. La couleur utilisée pour les lignes est # d3d1d2.
Sélectionnez la forme blanche et les lignes dans la palette des calques, puis appuyez sur Commande + E pour fusionner tous les calques. Sélectionnez l'outil Gomme et, avec un petit pinceau rond, supprimez certaines parties du calque jusqu'à obtenir un morceau de papier réaliste..
Ajoutez maintenant les styles de calque suivants.
Utilisez l'outil Texte horizontal pour ajouter du texte. J'ai utilisé la police Myriad Pro (vous la trouverez dans Windows 7 et Vista).
Ajoutez maintenant une autre image au milieu de la mise en page, puis deux flèches à droite de l’image. Les flèches que vous trouverez sous l’outil Forme personnalisée.
Avec le fichier PSD, vous trouverez deux images de stock dans les fichiers source Psd Plus de ce didacticiel. Bien sûr, si vous n'êtes pas membre Plus, vous pouvez rechercher des images équivalentes sur le Web. Le premier est une feuille et le second est une fleur rouge. Ouvrez les deux images dans Photoshop et supprimez l’arrière-plan. Les deux photos sont de très haute qualité (environ 4000 pixels) et vous pouvez supprimer l’arrière-plan avec l’outil Magic Eraser ou utiliser la méthode de votre choix..
Placez l'image avec la feuille du côté droit de la mise en page sous le morceau de papier blanc.
Dupliquez plusieurs fois le calque avec la feuille et placez ces feuilles multiples dans des positions différentes, comme indiqué.
La dernière étape consiste à placer la fleur rouge sur les feuilles vertes.
Voici le résultat final. Amusez-vous à créer vos propres mises en page hautement texturées de sites Photoshop.
Accentsconagua