Share
Avec ce tutoriel, nous allons créer un bouton de style haute technologie pouvant être utilisé dans des pages de garde, des applications ou des présentations PowerPoint. Nous allons utiliser Illustrator pour créer des vecteurs complexes et Photoshop pour développer des effets réalistes..
En utilisant Illustrator, nous créons un rectangle de la taille indiquée. Avec l'outil Rectangle, nous cliquons sur la zone de travail et une fenêtre apparaîtra qui nous permettra de déterminer les tailles exactes de l'objet. Je recommande de définir les préférences Illustrator en utilisant les pixels comme unité de mesure..
Nous plaçons un guide comme référence pour l'alignement horizontal. En utilisant l'outil Plume Plus (pour ajouter des points d'ancrage à un vecteur existant), nous ajoutons un point d'ancrage supplémentaire dans la partie supérieure du rectangle..
Maintenant, nous sélectionnons ce nouveau point d'ancrage et le prenons plus haut que la ligne et nous séparons le point d'ancrage inférieur les uns des autres pour obtenir un objet ayant cette forme approximative..
Avec les poignées du point d'ancrage, nous utilisons le point supérieur comme axe pour une courbe douce.
Nous devons maintenant obtenir deux autres objets qui intégreront un objet à trois points. Nous faisons pivoter ce vecteur en utilisant sa partie inférieure centrale comme axe de rotation. Pour commencer, sélectionnez l'outil Rotation et cliquez sur la partie inférieure. Ensuite, nous verrons le curseur se transformer en une petite flèche noire.
En appuyant sur la touche Alt (utilisée pour la duplication - vous verrez la flèche noire avec une flèche blanche), nous faisons glisser l'objet. Nous utilisons la fenêtre Information pour faire pivoter l’objet dupliqué d’un certain degré. Considérant qu'il s'agit d'un objet à trois points, nous devons diviser 360 ° pour ce nombre (3), de sorte que notre vecteur dupliqué doit pivoter de 120 °. Faites-le glisser jusqu'à ce que ce nombre approximatif apparaisse dans la fenêtre Info..
En appuyant sur Ctrl + D (Windows), nous dupliquons automatiquement ce que nous avons fait. Donc, ce vecteur sera à nouveau dupliqué à 120 °.
Nous unissons ces objets en un. Dans la fenêtre Pathfinder, nous unissons les vecteurs: cliquez sur l’option Unir, puis sur le bouton Développer pour convertir le groupe en un seul objet solide..
Maintenant, nous arrondissons les coins de cet objet. Allez à Effet> Styliser> Coins ronds.
Définissez un rayon de 10 pixels et prévisualisez le résultat en cochant la case d'aperçu. Le rayon dépend de l'amplitude des courbes que vous avez tracée dans l'objet principal. Avec l'option de prévisualisation, vous réaliserez que si le rayon adoucit correctement les coins: si la quantité de pixels est excessive, l'objet sera déformé et non arrondi..
Séparons maintenant l’aspect (l’effet créé) du vecteur d’origine. Allez à Objet> Développer l'apparence et obtenez le dernier vecteur.
Ceci est le résultat de notre travail avec les vecteurs dans Illustrator. C'est un objet complexe à réaliser manuellement et c'est pourquoi nous utilisons certaines techniques pour obtenir un vecteur symétrique et ergonomique..
Comme notre bouton aura une insertion interne - un certain type d’objet assemblé dans la partie frontale - nous allons répéter les étapes précédentes, mais cette fois avec un objet beaucoup plus petit et plus court.
En suivant exactement les mêmes étapes, de l’étape 1 à l’étape 12, nous créons ce nouvel objet. Le reste des vecteurs peut être créé manuellement ou automatiquement sans trop de complexité.
Nous créons juste la moitié d'un nouvel objet, puis nous le réfléchissons pour le rendre symétrique. Veuillez suivre attentivement les étapes que vous voyez sur ce graphique..
En utilisant l'outil Reflect, nous dupliquons l'objet en maintenant les touches Maj + Alt enfoncées.
Maintenant, nous unissons les deux moitiés à l'aide de l'outil Pathfinder. Vous pouvez effacer les points d'ancrage restants de cette union à l'aide de l'outil Minus Pen..
Nous utilisons la même méthode de duplication que celle décrite précédemment, en faisant tourner l’objet à 120 ° pour obtenir également 3 objets identiques et uniformément répartis..
Enfin, nous créons un cercle simple, un vecteur qui servira de DEL pour éclairer le bouton dans son état de survol. Nous allons finaliser l'édition dans Photoshop pour ajouter des techniques de masquage de couches en forme.
Maintenant, nous sélectionnons tous les vecteurs et en appuyant sur Ctrl + C (Windows), nous les copions dans le presse-papiers du système..
Nous fermons Illustrator et ouvrons Photoshop. Nous créons un .PSD de 1024x768 pixels et cette configuration initiale.
Nous peignons la couche initiale en noir. Ensuite, nous appliquons un style de calque pour créer un dégradé d'arrière-plan..
En utilisant des couleurs gris foncé et noir, nous créons un dégradé radial et l’évaluons à l’échelle maximale (130-150%). N'oubliez pas que dans cette fenêtre de style de calque, vous pouvez faire glisser le dégradé pour le centrer à l'emplacement de l'écran souhaité..
Maintenant, nous collons les vecteurs en tant que couches de forme. Ctrl + V ou Edition> Coller.
Nous avons les vecteurs dans une couche de forme et nous devons les séparer en différentes couches. Reproduisons autant de calques que de parties que nous avons obtenues -4 dans ce cas-ci et éliminons les objets inutiles sur chacun d'eux en laissant la forme qui nous intéresse.
L'ordre des calques est celui que vous voyez sur l'image et n'oubliez pas de nommer chaque calque pour mieux organiser votre travail. Quelques couches seront ajoutées à celles qui seront entièrement créées dans Photoshop. Nous allons ajouter des styles de calques à notre bouton principal.
En double-cliquant sur le calque dans la fenêtre du bouton principal, nous ouvrons la fenêtre Éditer de ces styles de calque. Sur “Options de fusion: Par défaut”, nous prenons l'opacité de ce calque à zéro afin de ne voir que nos effets de calque. Nous commençons par ajouter un dégradé circulaire en utilisant les mêmes couleurs d’arrière-plan # 333333 (gris foncé) et # 000000 (noir). Assurez-vous que ce dégradé est doux du centre au bord, augmentant ainsi sa taille jusqu'à 120%.
Avec une ombre interne et en décochant l'option Utiliser une lumière globale (que nous utiliserons TOUJOURS à 90 °), nous inversons cette ombre en faisant glisser l'éditeur d'angle de l'ombre vers -90 °. Cela nous aidera à renforcer les ombres de la zone inférieure…
Nous avons terminé la première partie du processus d’édition des boutons. Nous avons maintenant prêt la partie frontale de celle-ci qui a une surface opaque que nous ajouterons plus tard des extrusions brillantes et pseudo 3D.
Maintenant, nous créons un trait chromé autour du bouton. Nous ajoutons un trait de 3 pixels avec remplissage de type dégradé. Nous ajoutons quelques détails supplémentaires à ce dégradé à l'intérieur du trait. Nous reproduisons une surface réfléchissante en métal chromé où nous utilisons la ressource pour réfléchir l’horizon et le ciel d’une scène extérieure..
Nous appliquons le style Reflected au dégradé pour augmenter la quantité de reflets chromés. En tournant l'angle du gradient, nous plaçons les zones les plus claires où nous le souhaitons. Dans ce cas, la luminosité maximale doit être vue dans la zone supérieure du trait..
Nous rendons maintenant la surface chromée plus complexe en ajoutant plus de détails de lumière et d’ombres au métal. Avec Bevel & Emboss et le contour de brillant que vous voyez sur cette image, nous ajoutons plus de petits détails à la surface..
Avec Inner Glow, nous ajoutons un bord biseauté intérieur au bouton, comme s'il s'agissait de 3D, en essayant de rendre la fusion plus nette avec l'arrière-plan de l'objet..
Nous avons maintenant besoin d’une sélection pour peindre certains détails manuellement sur le bouton. La première étape consiste à utiliser le calque de forme du bouton et à obtenir une sélection qui servira de masque pour le peindre. Accédez à la fenêtre Chemins et sélectionnez le calque de boutons pour créer une sélection ayant la même forme..
Nous réduisons maintenant la taille de cette sélection en sélectionnant Sélection> Modifier> Contrat. Nous réduisons la sélection de 10 pixels de sa taille originale.
Maintenant, nous adoucissons la sélection. Accédez à Sélection> Modifier> Diffusion ou Alt + Ctrl + D (Windows). Nous appliquons une plume de 1 pixel et appuyez sur OK.
Nous masquons la sélection en utilisant Ctrl + H pour mieux visualiser ce que nous allons faire. Avec l'outil Pinceau, à l'aide d'un pinceau de 35 pixels et d'un flux de 10%, nous peignons dans un nouveau calque des reflets de lumière sur le bouton, en utilisant la couleur blanche. Comme la lumière de notre scène vient d'en haut, nous appliquerons plus de luminosité à la partie supérieure du bouton et nous mettrons en valeur, avec de petits points clairs, certaines zones sombres dans la partie inférieure de l'objet..
En maintenant notre sélection (qui redeviendra visible avec Ctrl + H), nous réduisons quelques pixels pour effacer un peu du travail effectué avec le pinceau et obtenir un effet plus sophistiqué. Cette fois nous contractons 3 pixels de la sélection.
Nous masquons à nouveau cette sélection en utilisant Ctrl + H et en appuyant sur la touche Suppr, nous effaçons certaines parties de nos traces de pinceau précédentes. Cela nous a permis de peindre manuellement, puis de peaufiner notre travail en créant une zone de bord en biseau qui renforce l’aspect 3D du bouton et en donnant une texture plastique à sa surface..
Nous avons terminé la structure du bouton. Nous devons maintenant créer une insertion en son centre. La première étape consiste à ramener l'opacité du calque de forme à zéro (0%)..
Créons une nouvelle ombre intérieure à l’angle inversé, comme nous l’avions fait auparavant pour le bouton principal. Assurez-vous d'ajouter les valeurs que vous voyez dans cette image.
Maintenant, un petit trait représentera un biseau entre les deux objets.
L'étape suivante est une ombre portée utilisée comme surface éclairée par l'écran en mode Fusion et la couleur blanche. La taille de cette lumière doit être de 2 pixels pour la rendre très nette, comme s'il s'agissait d'un bord biseauté recevant un peu de lumière d'en haut..
Enfin, avec une lueur intérieure, nous recréons le bord biseauté du bouton intérieur. L'observateur interprète cet objet comme un panneau légèrement biseauté et maillé à l'intérieur du bouton principal..
Nous avons terminé avec le bouton principal. En réalité, il ne s’agit pas d’un bouton placé sur un arrière-plan: grâce à quelques effets supplémentaires, il apparaît comme un incrustation de la surface de l’arrière-plan, qui comporte un trait métallique et qui contient un bouton à l'intérieur qui peut être enfoncé.
Maintenant, nous créons l'icône Power du bouton. Téléchargez cette police gratuite: http://www.dafont.com/guifx-v2-transports.font. Vous pourrez créer cet objet en utilisant la touche "q" et cette police en 48 points.
Dans cette image, vous voyez comment nous pouvons ajouter un bord biseauté externe à l’icône, en utilisant un trait de 3 pixels de la même couleur que la surface du bouton, puis en appliquant l’effet de trait estampé avec ces valeurs..
L’effet Stroke Emboss en tant qu’option permettant de créer un bord biseauté nous permettra de créer l’effet biseauté de l’icône sur l’arrière-plan..
Enfin, nous ajoutons une texture métallique à l’icône en utilisant un dégradé comme vous pouvez le voir sur cette image..
Maintenant, nous créons 3 leds qui allumeront le bouton lorsque nous placerons la souris dessus. La première étape consiste à donner au calque de forme la couleur # 06B9FB, en double-cliquant dessus pour éditer sa couleur..
À l'aide du calque de forme du bouton principal, nous créons une sélection.
Nous élargissons la taille de cette sélection en sélectionnant Sélection> Modifier> Développer.
Nous définissons une extension de 8 pixels et nous appuyons sur OK.
Nous inversons cette sélection en sélectionnant> Inverser..
Avec cette sélection inversée, nous créons un masque pour obtenir la forme et la taille finales des leds autour du bouton..
Avec un trait avec la même couleur de surface de bouton (utilisez le sélecteur de couleur pour l'obtenir), nous créons un petit biseau autour de ces lumières. Cela nous permettra de donner l’idée d’un objet inséré sur la surface du fond.
Avec Bevel et Emboss, nous donnons une ombre supérieure et une lumière inférieure à notre trait (comme si la lumière d'en haut avait un impact sur ces bords biseautés)..
Avec une ombre intérieure et une multiplication inversées, nous créons un reflet acrylique sur la partie supérieure de ces leds..
Nous finalisons l’édition de ces objets avec une ombre portée qui nous permet de donner l’idée que ces détails dans la conception des boutons changent la surface d’arrière-plan, en appuyant dessus et en créant des zones ombrées autour d’eux..
Voici à quoi ressemble notre bouton, mais il manque encore certains effets.
Nous allons dupliquer la couche des LED précédentes et peindre cette nouvelle couche de forme en blanc. Nous commençons à créer l’effet led light up avec Outer Glow et ces valeurs.
Nous ajoutons l'éclairage de la zone près des voyants à l'aide du mode Ombre portée en mode Fusion sur écran..
L'état Rollover du bouton c'est fait. Maintenant, en utilisant une sélection avec Feather de 20 pixels à l'intérieur du nouveau calque, l'arrière-plan donne une apparence convexe derrière le bouton, comme si l'arrière-plan sortait de son centre, créant ainsi une boule 3D douce qui réagira à la lumière ci-dessus..
Nous peignons cette sélection en blanc, préalablement adouci avec une plume de 20 pixels. Vous pouvez utiliser l'outil Peinture ou le raccourci clavier Alt + Retour arrière pour dessiner le calque avec la couleur que vous utilisez en tant que premier plan..
Nous définissons l'opacité de cette sphère sur zéro (0%) dans la fenêtre d'édition des styles de calque..
Maintenant, avec un dégradé à 50% de transparence et une superposition de mélange (en utilisant les couleurs blanches et noires définies par défaut dans l'éditeur de dégradés), nous atteignons cette sensation sphérique sur l'arrière-plan du bouton..
Nous en avons terminé avec le bouton et tous ses détails. Il suffit de créer des bords biseautés sur l’arrière-plan à l’aide des vecteurs symétriques créés dans Illustrator..
Comme toujours, nous prenons l'opacité à zéro.
Avec un trait et ces valeurs, nous créons le bas-relief de ces biseaux en arrière-plan..
Avec l’ombre portée blanche et l’écran de fusion, nous créons la zone éclairée de ces bords biseautés..
Enfin, nous masquons une partie de ces bords biseautés avec un masque adouci de 20 pixels. L'idée est que ceux-ci se confondent doucement avec le fond et disparaissent vers les coins.
C'était un long trajet mais les résultats en valaient la peine. La touche finale est une petite lumière parasite sur la zone brillante supérieure du bord chromé. Enregistrez toujours un fichier .PSD avec ces ressources qui fournissent un effet photographique et réaliste aux objets réfléchissants. Vous pouvez voir l'image finale ci-dessous ou voir une version plus grande ici.
Accentsconagua