Share
Dans ce tutoriel, nous allons créer une mise en page de blog créative en utilisant principalement des formes simples, quelques techniques de pinceau, des images et une dose d'ingéniosité Photoshop. La création de dispositions de conception Web est plus facile que vous ne le pensez. Vous pouvez apprendre à créer rapidement des designs attrayants. La création de cette conception prendra moins de deux heures et vous apprendrez quelques conseils professionnels tout au long du processus. Commençons!
Regardez l'image que nous allons créer. La dernière image est ci-dessous ou vous pouvez voir une image en taille réelle ici.
Pour compléter ce didacticiel, vous devez télécharger le système de grille 960. Maintenant commençons.
Ouvrez le modèle "960_grid_12_col.psd" dans Photoshop. Cela ressemblera à l'image ci-dessous. Le système de grille est utile car il vous permet d'aligner rapidement la mise en page.
Sélectionnez le calque d'arrière-plan et appuyez sur Commande + J. Il s'agit du raccourci pour dupliquer un calque. L'utilisation de raccourcis accélérera votre processus de conception. Pour ce nouveau calque, nous allons ajouter une belle couleur dégradée. Maintenant, allez à Calque> Style de calque> Superposition de dégradé et utilisez les paramètres suivants.
Maintenant cachez la grille car pour mieux voir le design. Gardez votre grille visible car vous pouvez mieux aligner la forme. Sélectionnez l'outil Rectangle arrondi et créez une forme en haut de la présentation..
Pour cette barre de navigation, ajoutez les styles de calque suivants.
En utilisant le même outil (Outil Rectangle arrondi), créez une autre forme et remplissez-la de la couleur: # 001424.
Ajoutez le style de calque suivant pour cette forme.
Créez une autre forme avec l'outil Rectangle arrondi en utilisant du blanc pour la couleur.
De plus, pour cette forme, ajoutez quelques styles de calque simples et modifiez la valeur de remplissage à 10%..
Ci-dessous le résultat jusqu'à présent.
Sur cette dernière forme, placez une image. J'ai utilisé des images de certains tutoriels que j'ai réalisés pour Grafpedia, qui servent d'excellents exemples d'images pour cette conception. Vous devez bien sûr utiliser vos propres images.
Maintenant, vous devez charger la sélection pour cette image. Pour charger la sélection, sélectionnez le calque dans votre palette, puis sélectionnez Sélection> Charger la sélection. Vous verrez une sélection autour de l'image comme dans l'image suivante.
Créez un nouveau calque au-dessus de tous les calques en utilisant ce raccourci: Commande + Maj + Alt + N. Sélectionnez l'outil pinceau, puis choisissez un pinceau lisse et rond. Sur le nouveau calque, tracez une ligne horizontale. Maintenez la touche Maj enfoncée lorsque vous effectuez le dessin. De cette façon, le dessin sera parfait horizontalement.
Appuyez sur Commande + D pour désélectionner. Maintenant, utilisez l’outil Rectangle arrondi pour créer une autre forme avec la couleur # 4b6e82.
Pour les deux formes, ajoutez les styles de calque suivants.
Prenez l'outil Ellipse et créez une forme juste sous la forme de la barre latérale.
Allez dans Filtre> Flou> Flou gaussien et utilisez les paramètres suivants. Photoshop vous demandera si vous souhaitez pixelliser la forme, continuez et appuyez sur OK.
Comme vous pouvez le constater à l'étape précédente, nous avons créé une ombre à cet endroit. Maintenant accentuons cette ombre en ajoutant des lumières. Sélectionnez l'outil Ligne, définissez l'épaisseur de la ligne sur 1 pixel, puis créez une ligne verticale, comme indiqué..
Cliquez avec le bouton droit sur le calque et choisissez Rasteriser le calque..
Sélectionnez l'outil Gomme, puis choisissez un pinceau lisse et rond d'environ 100 pixels. Utilisez-le pour supprimer la partie supérieure et la partie inférieure de la ligne.
Avec la même technique, créez une autre ligne au-dessus de la barre latérale..
Juste en dessous de cette ligne blanche, créez-en une autre noire.
Au milieu de la mise en page, créez une autre forme à l'aide de l'outil Rectangle arrondi..
Créez des formes avec l'outil Rectangle. Sur ces formes, nous ajouterons quelques images plus tard.
Ajoutez les mêmes styles de calque pour ces trois formes.
Il est maintenant temps d'ajouter les images sur ces formes blanches. Ajoutez également du texte avec l'outil Texte horizontal à droite..
Créer une ligne en pointillé entre les publications avec l'outil de typage horizontal.
Créez trois autres formes et placez-les sous le texte Post Metadata.
Au-dessus de la barre latérale, créez un champ de recherche à l'aide de l'outil Rectangle arrondi. Dans le même temps, vous pouvez voir que j'ai également placé du texte sur la barre de navigation..
Veuillez ajouter les styles de calque suivants pour cette zone de recherche.
Utilisez maintenant l’outil Rectangle arrondi pour créer une autre forme. Placez cette forme sur la forme précédente. Ajoutez également une icône sur le côté droit.
Juste au-dessus du diaporama, créez une autre forme blanche.
Ajoutez les styles de calque suivants pour cette forme.
Maintenez la touche de commande enfoncée et, avec l'outil Crayon sélectionné, appuyez deux fois sur le bord de la forme. Le point d'ancrage deviendra actif et nous pourrons modifier l'aspect de la forme..
Avec la touche de commande toujours enfoncée, sélectionnez le point d'ancrage suivant.
Maintenez la touche Maj enfoncée et appuyez une fois sur la flèche vers le bas de votre clavier. Le point d'ancrage descendra et vous obtiendrez le résultat suivant.
Utilisez l'outil Ellipse pour créer un cercle.
Cliquez avec le bouton droit sur le calque et choisissez Rasteriser le calque. Avec l'outil Rectangle de sélection, effectuez une sélection comme celle illustrée ci-dessous..
Assurez-vous que le calque avec ce petit cercle est sélectionné, puis appuyez sur la touche Suppr. Faites glisser ce calque au-dessus du calque d'arrière-plan dans votre palette. C'est mon résultat jusqu'à présent.
Nous allons maintenant ajouter deux boutons pour permettre aux utilisateurs des sites de modifier l’image du diaporama. Vous devrez utiliser l’outil Rectangle arrondi pour créer la forme, puis utiliser l’outil Forme personnalisée pour ajouter les flèches..
Sur la barre latérale, créez des formes blanches, comme indiqué ci-dessous..
Pour toutes ces formes blanches, veuillez ajouter les mêmes styles de calque.
Ajoutez des bannières dans la barre latérale. Ajoutez également des icônes de partage de signets sociales au-dessus de la conception du site. De nombreuses icônes gratuites sont disponibles sur le Web..
Ajoutez maintenant du texte à l’aide de l’outil Texte horizontal au bas de la barre latérale. Ajoutez également des signes moins entre le texte à l'aide de l'outil Texte horizontal pour créer des règles horizontales en pointillés..
Ajoutons d'autres détails dans la barre de navigation. Utilisez l'outil Ligne pour créer deux petites lignes. Zoomez sur cette image pour mieux voir ce que vous faites..
Sélectionnez les deux calques dans votre palette. Pour sélectionner les deux calques, vous devez maintenir la touche Commande enfoncée lors de la sélection des deux calques. Une fois les lignes sélectionnées, appuyez sur Commande + E pour fusionner les calques en un seul. Sélectionnez l'outil Gomme et utilisez-le pour supprimer la partie supérieure et la partie inférieure des lignes. Veuillez noter que vous avez besoin d'un pinceau doux et rond de 20 pixels..
Changez le mode de fusion de ce calque en Lumière douce. Dupliquez-le plusieurs fois et placez la ligne entre les autres boutons de texte.
Créez maintenant le texte du logo de cette mise en page Wordpress dans une taille qui vous convient.
Ajoutez les styles de calque suivants pour ce logo de texte.
Juste au-dessus du calque "arrière-plan", créez un nouveau calque (Commande + Maj + Alt + N). Avec l’outil Pinceau, faites une marque de surbrillance avec un pinceau doux et rond, comme indiqué..
Changez le mode de fusion de ce calque en Lumière douce..
La conception est terminée! J'espère que vous avez aimé créer! La dernière image est ci-dessous ou vous pouvez voir une image en taille réelle ici.
Accentsconagua