Share
Les images d'arrière-plan flou sont une tendance en vogue dans la conception Web et peuvent ajouter de la profondeur et de l'intérêt à la conception de tout site Web. Dans ce tutoriel, je vais vous expliquer toutes les étapes pour créer une unité de visual hero saisissante (lire: votre message marketing clé), idéale pour un diaporama ou une zone de bannière de votre prochain site Web..
Dans ce didacticiel, nous allons nous concentrer sur l’utilisation de techniques de photoshop non destructives, modifiables et évolutives chaque fois que nous pourrons inclure des filtres intelligents, des masques et des formes vectorielles. Bien que cela puisse demander un peu plus de travail, prendre le temps de veiller à ce que votre produit final puisse être entièrement modifié pour répondre aux modifications futures en vaut la peine..
Prêt à intervenir? Lancez Photoshop et commençons.
Nous utiliserons un certain nombre de ressources qui ne sont pas incluses dans les fichiers source..
Remarque: Photoshop CS6 a été utilisé pour créer ce didacticiel; toutefois, il n'est pas nécessaire d'obtenir le résultat final. Vous pouvez utiliser les versions précédentes sans problème..
Je suis aussi sous Windows, je vais donc rester avec Ctrl et Alt pour décrire les touches de raccourci. Sur un Mac, Ctrl → Commande et Alt → Option.
Commençons par créer un nouveau document et définissons notre éclairage global pour tous les effets de calque..
Réglez Global Light sur un angle de 90 ° et une altitude de 45 ° (Calque → Style de calque → Global Light)..
Remarque: Dans la conception de l’interface utilisateur, vous constaterez que le Global Light est souvent réglé à 90 °. Il est donc utile de modifier les paramètres globaux avant de commencer avec un nouveau projet d’interface utilisateur.!
Créez un nouveau document avec des dimensions de 960px x 568px (un rapport 16: 9) et le contenu de l'arrière-plan de transparent.
Ensuite, nous allons importer notre image d'arrière-plan et la redimensionner pour l'adapter au nouveau document..
Ouvrez l’image de l’hôtel de ville de Toronto dans un nouveau document et changez la taille de l’image à 960px x 720px (Image → Taille de l'image).
Sélectionnez l'image entière (Ctrl + A), et le copier dans le presse-papier (Ctrl + C). Retournez dans notre nouveau document et collez l'image dans un nouveau calque. (Ctrl + V).
Utiliser l'outil de déplacement (V), faites glisser l'image vers le haut pour aligner le bord inférieur de l'image sur le bas du document.
Nommez cette couche 'mairie'
Dupliquez le calque "mairie" en cliquant avec le bouton droit de la souris dans le panneau des calques et en sélectionnant 'Duplicate Layer'. Renommez ce nouveau calque 'City Hall Blur'
Ensuite, nous allons ajouter un filtre intelligent à la couche. Pour ce faire, nous devons convertir la couche «City Hall Blur» en un objet intelligent..
Cliquez avec le bouton droit sur le calque «City Hall Blur» et sélectionnez 'Convertir en objet intelligent' du menu.
Ajoutons un flou gaussien à notre image d'arrière-plan pour lui donner l'aspect "à travers la fenêtre du café": (Filtre → Flou → Flou gaussien). Donnez-lui un rayon de 14,0 pixels.
Remarque: C'est la première de nos techniques non destructives que nous utiliserons aujourd'hui. Vous remarquerez à partir de l'image ci-dessus que le flou gaussien a été ajouté en tant que "filtre intelligent" et qu'il n'est pas appliqué à l'image elle-même. Cela signifie que nous pouvons modifier les paramètres, ajouter des filtres intelligents supplémentaires ou supprimer complètement l'effet, le tout sans endommager l'image d'origine..
Une autre chose à noter est que si vous basculez la visibilité du calque «City Hall», vous remarquerez une certaine transparence au bord de l'image en raison de l'effet de flou sur le calque «City Hall Blur». Le fait de laisser visible la couche "hôtel de ville" lisse les bords.
En l'état, l'image est un peu sombre. Allumons les choses et donnons-lui une sensation luminescente en ajoutant un nouveau calque de réglage Curves (Couche → Nouveau calque de réglage → Courbes) et en faisant glisser la poignée centrale vers le haut et légèrement vers la gauche, comme indiqué ci-dessus.
Excellent travail - c'est le fond tout fini. Prenons un moment pour déplacer ces couches dans un nouveau groupe (Ctrl + G) appelé "Background" pour garder le document Photoshop agréable et soigné.
Créez un nouveau calque appelé "panneau de verre inférieur" et utilisez l'outil de sélection (M) créer une sélection rectangulaire de 960 pixels de large et de 120 pixels de haut. Remplir la sélection avec du blanc (#ffffff) (Ctrl + Bkspace).
Double-cliquez sur le calque pour ouvrir les effets de calque et appliquer les paramètres suivants:
Dans Options de fusion, définissez Opacité sur 27% et Opacité de remplissage sur 0%.
Définir un trait intérieur 1px, couleur #cecece.
Définissez une ombre interne blanche (#ffffff) avec un mode de fusion défini sur Dodge linéaire (ajout) et une opacité de 15%. Définissez la distance sur 1 px et la taille sur 6 px.
Définissez une superposition de gradient linéaire à 90 ° allant de # 787878 à 0% à #ebebeb à 100%. Changez le mode de fusion en Luminosité et réglez l'opacité à 55%..
Le panneau de verre a l'air beau, mais nous devons en enlever une partie pour laisser de la place à notre bouton d'appel à l'action. Pour ce faire, nous allons utiliser un masque vectoriel - une autre technique photoshop non destructive et éditable.
Ouvrir la fenêtre des chemins (Fenêtre → Chemins) et cliquez sur le 'Créer un nouveau chemin' icône en bas du panneau.
Renommez le nouveau chemin 'masque de panneau'.
Utiliser l'outil de forme (U) définir le chemin d'accès, créer un rectangle de 960px x 120px au bas du document, couvrant notre couche de 'panneau de verre inférieur'.
Maintenant, définissez l'outil de forme sur 'Soustraire la forme avant' et dessinez un rectangle arrondi 420px x 100px avec un rayon de 50px.
Une fois que vous avez les deux chemins, sélectionnez-les tous les deux avec l'outil de sélection directe (UNE) et maintenez la touche Maj enfoncée lorsque vous cliquez sur chaque chemin. Utilisez l'outil d'alignement pour aligner les centres horizontaux et déplacez le rectangle arrondi de façon à ce que ses points centraux verticaux rejoignent le bord supérieur du rectangle, comme indiqué ci-dessus..
Assurez-vous que le calque "Panneau de verre inférieur" est sélectionné dans le panneau Calques et que le chemin "Masque de panneau" est sélectionné dans le panneau Tracés..
Au bas du panneau des chemins, cliquez sur le bouton 'Créer un nouveau masque' Cliquez une fois sur l'icône pour créer un masque de calque, puis cliquez à nouveau dessus pour créer un masque vectoriel qui prend une mesure de notre panneau de verre inférieur. Votre panneau de calques devrait ressembler à l'image ci-dessus.
Remarque: Parce que nous avons pris le temps d'utiliser des chemins de vecteurs pour créer notre masque au lieu d'utiliser une image raster, nous nous sommes donné la possibilité de changer, éditer, ajouter, supprimer et redimensionner notre masque à tout moment sans perte de qualité..
Si tout se passe comme prévu, votre travail en cours devrait ressembler à l'image ci-dessus..
Ensuite, nous allons créer un fond pour notre bouton.
Créer un nouveau calque (Ctrl + Maj + N) et nommez-le 'fond du bouton'. À l'aide de l'outil de forme défini sur "Forme", créez un rectangle arrondi de 410 pixels x 90 pixels avec un rayon de 45px. Définissez le remplissage sur #ffffff.
Centrer la forme au milieu de la "pelle" - en laissant 6 px entre le bas de la forme et le bord supérieur du "panneau de verre inférieur".
Ouvrez le panneau des effets de calque pour le calque «Arrière-plan des boutons» et définissez les styles de calque suivants:
Dans Options de fusion, définissez l’opacité sur 20%, le mode de fusion sur Normal et l’opacité de remplissage sur 30%..
Définissez l'ombre interne sur un mode de fusion Gravure linéaire (# 000000) avec une opacité de 9%. Définissez la distance sur 1px et la taille sur 0px.
Définissez une ombre portée avec un mode de fusion Dodge linéaire (Ajouter), (#ffffff) et une opacité de 34%. Réglez la distance sur 1 px et la taille sur 0 px.
Ensuite, nous allons commencer à travailler sur le bouton lui-même.
Créez un nouveau calque appelé "bouton principal". Dessinez un rectangle arrondi à l'aide de l'outil de forme défini sur «Forme», 390px de large par 70px de haut et un rayon de 35px. Définissez le remplissage sur # 007dba.
Aligner les centres vertical et horizontal des calques «bouton principal» et «arrière-plan du bouton».
Ouvrez le panneau des effets de calque et appliquez les paramètres suivants:
Définissez un trait intérieur de 1 px avec un mode de fusion et un dégradé linéaire de 90 ° allant de # 000000 à 0% à #ffffff à 100%
Définissez une ombre intérieure (#ffffff) avec un mode de fusion d'esquive linéaire (Ajouter) et une opacité de 7%. Réglez la distance à 2px et la taille à 1px.
Ajouter une couleur de surimpression #ffffff à un mode de fusion Dodge linéaire (ajouter) et baisser l'opacité jusqu'à 13%.
Définissez la superposition de dégradé avec un mode de fusion linéaire, une opacité de 24% et un dégradé linéaire de 90 ° avec # 000000 à 0% et #ffffff à 100%.
Définissez l’ombre portée avec le mode de fusion Multiplier, une opacité de 30%, # 000000 et définissez la distance sur 2 px et la taille sur 4 px.
Remarque: Vous avez peut-être remarqué que nous n’avons pas défini le dégradé de bleu foncé à bleu clair (ce qui aurait eu un effet similaire). La raison d'utiliser une forme et le dégradé de gravure linéaire du noir au blanc est que nous pouvons maintenant changer la couleur du bouton très facilement en modifiant son remplissage. Essayez-le maintenant et essayez de changer le remplissage avec une autre couleur.
Pour ajouter de la texture au bouton, nous allons ajouter une couche de bruit.
Créez un nouveau calque et nommez-le "bruit".
Sélectionnez le document entier (Ctrl + A) et remplissez le fond avec #ffffff (Ctrl + Bkspace).
S'assurer que votre avant-plan est défini sur noir et que votre avant-plan est défini sur blanc (RÉ), ajouter 200% de bruit uniforme, en veillant à ce que la case "Monochromatique" soit cochée (Filtre → Bruit → Ajouter du bruit…).
Sélectionnez le calque "Bruit" et définissez-le comme masque d'écrêtage. (Calque → Créer un masque de découpage), qui limite le bruit à la forme du bouton.
Réglez le mode de fusion du masque de découpage sur Multiplier et l’opacité sur 5%..
La prochaine étape consiste à ajouter une petite surbrillance en haut du bouton (ce sont les petites choses qui comptent).
Dupliquez le calque «bouton principal» et faites-le glisser au-dessus du masque anti-bruit. Définir le remplissage à 0%.
Cliquez avec le bouton droit sur le nouveau calque 'mettre en surbrillance' et effacez les styles de calque en sélectionnant 'Effacer le style de calque'.
Ouvrez le panneau des effets de calque et appliquez les paramètres suivants:
Dans l'écran Options de fusion, cochez la case "Effets de masque de calque"..
Définir un trait intérieur de 2px à 0% d'opacité.
Remarque: Ceci "insère" efficacement le style de calque suivant loin du bord du bouton.
Définir une ombre interne avec un mode de fusion d'esquive linéaire (ajouter), définir une opacité de 18% et utiliser #ffffff.
Réglez la distance sur 4 px et la taille sur 4 px.
Sélectionnez le calque 'mettre en surbrillance' et ajoutez un nouveau masque (Calque → Masque de calque → Tout révéler).
A l'aide de l'outil Dégradé, tracez un dégradé linéaire sur le bouton, comme indiqué ci-dessus. Définissez le dégradé à l'aide de trois arrêts # 000000, avec l'arrêt à 50% défini sur l'opacité 0%.
Si vous avez suivi de près, votre bouton devrait maintenant ressembler à ceci:
Sans une source de lumière, notre point culminant semble un peu hors de propos. Nous ajouterons un bel effet de lueur pour relever le bouton et l'arrière-plan.
Créez un nouveau calque et nommez-le 'lueur'.
Utiliser l'outil dégradé (G) défini sur radial et blanc sur transparent, tracez un large dégradé de blanc sur le bouton, comme indiqué dans l'image ci-dessus.
Faites une sélection en sélectionnant Ctrl + clic sur la vignette "Arrière-plan du bouton" dans le panneau Calques..
Créer un masque de calque (Calque → Masque de calque; → Tout masquer).
Enfin, modifiez le mode de fusion du calque "luminescent" sur Dodge linéaire et une opacité de 50%..
Maintenant que la forme du bouton a été créée, ajoutons du texte appelant à l'action.
En utilisant les poignées de la forme du bouton comme points de référence, faites glisser trois guides comme indiqué pour vous aider à positionner les formes de texte et d'icônes du bouton..
Utiliser l'outil Texte (T), entrez votre texte dans la police League Gothic avec un crénage de 60, une taille de police de 14 pt et une couleur de # dce2e5
Placez le texte dans le guide de gauche et alignez-le sur le centre vertical du bouton..
Ouvrez la fenêtre des effets de calque et appliquez les effets suivants:
Définissez une ombre intérieure blanche (#ffffff) avec un mode de fusion «Éclaircir» et une opacité de 100%. Réglez la distance sur 1 px et la taille sur 0 px.
Réglez l'ombre portée sur le mode de fusion Couleur, de couleur # 00022a et d'opacité de 24%..
Réglez la distance à 2px et la taille à 1px.
Pour terminer le bouton, nous devons ajouter l'icône et une ligne de séparation. Commençons par l'icône.
Sélectionnez l'outil de forme personnalisée (U), cliquez sur le bouton des paramètres et sélectionnez "Charger les formes".
Accédez au fichier 'retro_hand.csh' fourni dans les ressources et chargez-le dans votre liste de formes actuelle..
Créez un nouveau calque et nommez-le 'icône de la main'.
Avec la forme de la main sélectionnée et en veillant à appliquer le paramètre «Proportions définies», tracez une forme haute de 19 pixels et large de 34 pixels..
Remplissez la forme avec la couleur # dce2e5.
Ouvrez le panneau des effets de calque et appliquez les effets suivants:
Définissez une ombre interne avec un mode de fusion Lighten (#ffffff) avec une opacité de 100%. Réglez la distance sur 1 px et la taille sur 0 px.
Définissez l’ombre portée avec une gravure sur mode de fusion des couleurs en utilisant une couleur de # 00022a et une opacité de 24%. Réglez la distance sur 2px et la taille sur 1px.
L'étape suivante consiste à ajouter une ligne séparant l'icône du texte..
Tracez une ligne noire de 1 px x 70 px à l'aide de l'outil Forme (U) et placez-le au centre de l'espace entre le texte et l'icône de la main (utilisez le panneau d'information pour vous aider ici).
Appliquez les styles de calque suivants:
Définissez l'opacité de remplissage de la forme sur 0% et cochez la case "Masque de masque masque les effets" case à cocher.
Définissez la superposition de couleur sur une couleur # 044b71, un mode de fusion de superposition et une opacité de 73%.
Définissez la superposition de dégradé sur un dégradé linéaire à 90 ° avec # 000000 à 0% et #ffffff à 100%. Réglez le mode de fusion sur Gravure linéaire et réduisez l'opacité à 9%.,
Définissez la lueur externe sur #ffffff, le mode de fusion sur écran, l'opacité sur 26% et la taille sur 1px.
Ensuite, nous avons besoin d’un masque de calque pour estomper les arêtes de la ligne..
Ajoutez un masque de calque au calque "séparateur de lignes" en cliquant sur l'icône "Masque de calque" au bas du panneau des calques..
En utilisant un pinceau noir doux (taille ~ 55px et 0% de dureté), peignez les deux extrémités de la ligne. Vous chercherez à créer un effet de fondu subtil. Les zones en rouge dans l'image ci-dessus peuvent être utilisées comme référence.
Génial! Nous avons maintenant terminé notre bouton. Jetons un coup d'œil à ce que nous avons créé jusqu'à présent:
Avant de passer aux dernières étapes du projet, prenons un moment pour nous assurer que toutes nos couches sont bien nommées et regroupées..
Votre panneau de calque devrait ressembler à ceci:
Conseil rapide: Vous voulez un moyen facile de réduire tous les effets de calque pour chaque calque? Regrouper les calques et sur le calque supérieur, Alt + Cliquez sur la flèche en regard de l'icône d'effet. Tous les effets de calque situés en dessous s’effondrent également - un excellent moyen de garder votre panneau de calques gérable.!
Passons maintenant à la composante typographie du projet..
Utiliser l'outil Texte (T), entrez le texte sous forme de deux calques séparés avec les paramètres indiqués ci-dessus.
Dessinez deux guides, l’un à 130 pixels du haut du document et le second à 258 pixels. Positionnez le bord supérieur des calques de texte sur les guides.
Sélectionnez les deux calques dans le panneau Calques. (Ctrl + Clic), faire une sélection de l'ensemble du document (Ctrl + A) et aligner les centres horizontaux (Calque → Aligner les calques sur la sélection → Centres horizontaux).
Maintenant, ouvrez le panneau fx pour la couche 'Professional Services' et ajoutez les effets suivants:
Définissez l’ombre intérieure avec un mode de fusion, une couleur de # 585858 et une opacité de 54%.
Définissez l'angle à 135 ° (assurez-vous que l'option Global Light est décochée), puis définissez la distance sur 1 pixel, l'étranglement sur 100% et la taille sur 0 pixel..
Définissez une lueur intérieure avec un mode de fusion de l’écran, une opacité de 59% et une couleur de #ffffff. Réglez le starter sur 100% et la taille sur 1 px.
Définissez la superposition de dégradé avec un mode de fusion linéaire, une opacité de 18% et un angle de 90 °. Le dégradé lui-même est noir → noir transparent.
Définissez une ombre portée avec un mode de fusion incorporé, une couleur de # 000000 et une opacité de 24%. Réglez la distance sur 2px, la propagation sur 8% et la taille sur 3px.
Dans le panneau des couches, survolez l'icône fx de la couche 'services professionnels', maintenez Alt + Clic et faites glisser l'icône sur le calque "prix exceptionnels" pour copier le style de calque.
Nous sommes sur le tronçon à la maison maintenant! Complétons l'élément typographique du projet.
Créez un nouveau calque et ajoutez le mot "À" avec l'outil Texte. Dans le panneau Caractère, définissez la police sur Wisdom Script AI, la taille de la police sur 12 pt et la couleur sur blanc..
Sélectionnez les trois calques de texte dans le panneau des calques. (Ctrl + Clic), passer à l'outil de déplacement (V), et utilisez les options d'alignement dans la barre de propriétés pour centrer les calques (Aligner les couches horizontales) puis ajoutez une quantité égale d'espace entre les trois lignes de texte (Distribuer les centres verticaux).
Ouvrez le panneau des effets de calque et appliquez les effets suivants:
Modifiez l'opacité de remplissage dans le panneau Options de fusion sur 42%.
Ajoutez une ombre intérieure blanche (#ffffff) avec un mode de fusion défini sur Écran et une opacité de 22%. Définissez la distance sur 1px et la taille sur 0px.
Ajoutez une superposition de dégradé linéaire à 90 ° (#ffffff → #dedede) avec un mode de fusion défini sur Dodge linéaire (ajouter). Réduisez l'opacité à 16%.
Ajoutez une ombre portée noire pour définir la gravure linéaire et une opacité de 8%. Définissez la distance sur 1px et la taille sur 0px.
Ajoutons maintenant quelques formes décoratives à la section de texte du projet pour relier tous les éléments.
Faites glisser quatre nouveaux guides de la règle (si vous ne pouvez pas voir la règle, sélectionnez Affichage → Règles) et les aligner sur les bords du texte, comme indiqué ci-dessus.
Cela nous aidera à aligner nos barres dans les étapes suivantes.
Créer un nouveau calque appelé 'barres de gauche'.
Alignés par le centre de la barre transversale du "A" dans le calque de texte "At", tracez un rectangle arrondi de 275 pixels de large par 4 pixels de haut avec un rayon de coin de 4 pixels. Définissez le remplissage en blanc (#ffffff).
S'assurer que le paramètre des composants de forme est défini sur 'Combiner les formes', dessinez deux autres formes identiques et définissez-en une au dessus et une en dessous du premier rectangle arrondi, comme indiqué ci-dessus.
Déplacez les formes en position à l'aide de la flèche pour mettre un espace de 2 pixels entre chacune des formes. Utiliser l'outil zoom (Z) et la grille de pixels (Affichage → Afficher → Grille de pixels) pour vous aider ici.
Assurez-vous que le groupe de formes est positionné à 10 px à gauche du guide, à gauche du calque "At", comme indiqué ci-dessus..
Zoom avant près du bord gauche de notre groupe de forme (Z). Utilisation de l'outil Sélection directe (UNE), sélectionnez les trois poignées d'extrémité du rectangle du milieu et maintenez la touche Maj enfoncée tout en appuyant deux fois sur la flèche vers la gauche pour réduire la largeur de la forme de 20 pixels (Maj + Flèche la touche déplace n'importe quel élément par incréments de 10 px).
Répétez cette procédure pour le rectangle inférieur en réduisant cette fois la largeur de la forme de 30 pixels..
Pointe: Le moyen le plus simple de sélectionner les poignées consiste à faire glisser un cadre autour de l'extrémité de la forme à l'aide de l'outil de sélection directe, comme indiqué dans l'image ci-dessus..
Ouvrez le panneau des effets de calque pour la forme "Barres de gauche" et appliquez les paramètres suivants:
Dans le panneau Options de fusion, définissez l'opacité de remplissage sur 20%..
Définissez une ombre intérieure avec une couleur blanche (#ffffff), un mode de fusion de l’écran et une opacité de 22%. Définissez la distance sur 1px et la taille sur 0px.
Ajoutez un dégradé linéaire de 0 ° à Dodge linéaire (Ajouter) et une opacité de 16%. Définissez le dégradé avec les valeurs #ffffff à 0% et #dedede à 100%.
Ajoutez une ombre portée avec une distance de 1 px, une couleur de # 000000 et un mode de fusion linéaire. Définir l'opacité à 9%.
Dupliquer le calque 'barres de gauche' (Clic droit → Dupliquer le calque…) et nommez la nouvelle couche 'barres droites'.
Retourner le calque horizontalement (Édition → Transformer → Retourner horizontalement) et positionnez le calque sur le côté droit du calque "At" comme indiqué ci-dessus.
Félicitations pour avoir suivi tout ce didacticiel! Éteignez vos guides (Ctrl + H), redimensionner le zoom à 100% (Ctrl + 1) et admirez votre travail:
Prenons un moment pour passer en revue certaines des techniques clés décrites dans ce didacticiel:
Merci de rester avec moi jusqu’à la fin et j’espère que vous avez appris quelques astuces dans Photoshop et des astuces relatives au flux de travail qui vous aideront dans votre prochain projet. Si l’une des étapes vous laisse à vous gratter la tête, veuillez laisser un commentaire ci-dessous - je ne manquerai pas de répondre à vos questions..
Accentsconagua