Share
Sel et poivre, stylo et papier, biscuits et lait, bien qu'ils soient tous bons en eux-mêmes, ces éléments fonctionnent ensemble pour faire ressortir le meilleur l'un de l'autre. Adobe Illustrator et Adobe Photoshop ne font pas exception. Aujourd'hui, je vais vous montrer comment utiliser Illustrator pour concevoir un bouton de lecture et comment améliorer vos vecteurs avec Photoshop. Cette technique est particulièrement utile pour les personnes qui souhaitent créer des icônes et des conceptions d'interface utilisateur. Commençons!
Commencez par créer un nouveau document dans illustrator (je l’ai fait 800 x 800 px). Sélectionnez l'outil "Rectangle arrondi" (avec un rayon de 100px) et créez une forme qui ressemble à un bouton arrondi. Puis sélectionnez l'outil "Rectangle", créez un rectangle et centrez-le sur le rectangle arrondi. Ce sera pour le bouton de lecture.
Travaillez sur le second rectangle (le rectangle "play"). Allez à Effet> Distorsion et transformation> Pucker & Bloat pour que le rectangle soit courbé. Remplissez la boîte dans la fenêtre (j'ai utilisé 6%) et appuyez sur OK, après cela, allez à Objet> Développer l'apparence.
Pour créer l’icône "play", sélectionnez "Star Tool", ouvrez la boîte de dialogue Star Tool et entrez les paramètres suivants.
Créez maintenant les icônes "suivant" et "précédent". Commencez par dupliquer l’icône de lecture en appuyant sur Option + Cliquez + Glisser (n’importe où), puis faites de même, mais faites-la glisser vers la droite (vous pouvez maintenir la touche Maj enfoncée pour que l’objet reste en ligne droite). Sélectionnez les deux triangles, cliquez sur le bouton "Ajouter à la zone de forme" puis cliquez sur "Développer", redimensionner et repositionner.
Créez l'icône "Précédent" en allant dans Objet> Transformer> Refléter> Vertical et cliquez sur "Copier". Déplacez-le et vous venez de créer vous-même des boutons de joueur.
Ajoutez les couleurs aux boutons. Le bouton "Play" contient les caractères # 506670 et # 2C515E. Les boutons "Suivant" et "Précédent" ont un remplissage de # 85D4D6 et un trait de # 27A0A0.
Pour créer l'ombre du bas, vous devez dupliquer le bouton puis, avec "l'outil Rectangle arrondi" (en utilisant les mêmes paramètres), créez la même forme mais un peu plus grande. Sélectionnez ce rectangle et celui que vous avez dupliqué, puis cliquez sur "Soustraire de la surface de la forme" et "Développer". Faites-le noir et donnez-lui une opacité de 20% et définissez le mode de fusion sur Superposition.
Utilisez l'ombre du bas pour créer la brillance supérieure. Sélectionnez l'ombre du bas, allez à Transformer> Refléter. Après avoir défini les paramètres, cliquez sur "Copier". Déplacez-le en place, réorganisez les points d'ancrage de manière à ce qu'il devienne plus mince et blanchissez-le (laissez les modes d'opacité et de fondu tels quels)..
Utilisez la même technique sur le bouton de lecture.
Une fois la forme du lecteur terminée, exportez-le au format .PSD pour ajouter des détails dans Photoshop..
Créez un nouveau fichier dans Photoshop (j'ai utilisé 800 x 800 px) et importez le fichier que vous avez exporté d'Illustrator (mini-lecteur). Sélectionnez le calque "gros bouton", ouvrez la fenêtre "Styles de calque" en double-cliquant sur le côté droit du calque et commencez à ajouter les styles suivants, comme je l'ai fait. (vous pouvez suivre les images).
Cachez tous les calques sauf le calque "gros bouton", le calque "ombre inférieure" et le calque "éclat supérieur". Sélectionnez le calque "Ombre inférieure", accédez à Filtre> Flou> Flou gaussien, attribuez-lui un rayon de 4 px, puis cliquez sur OK. Faites de même pour la couche "top shine".
Ensuite, créez un nouveau calque, Commande + Cliquez sur le "gros bouton" du calque, pour faire une sélection de cette forme, puis, avec "l'outil Lasso polygonal", coupez la moitié supérieure de la sélection. Remplissez-le avec une couleur (peu importe la couleur car nous lui donnerons un remplissage à 0%) et ajoutez un style de calque Gradient Overlay.
Rendez le "bouton de lecture" visible (y compris l’ombre et la brillance du haut). Sélectionnez le calque "Play Button" et ajoutez les deux styles de calque (dégradé et superposition interne). Sélectionnez le calque "Ombre inférieure" et sélectionnez Filtre> Flou> Flou gaussien, attribuez-lui un rayon de 5 px et cliquez sur OK. Répétez cette action sur la couche "top shine".
Créez un nouveau calque, faites une sélection rectangulaire et, avec "l'outil Dégradé" (G), créez un dégradé. Ctrl + D pour désélectionner. Réglez le mode de fusion sur "Superposition" et 20% sur l'opacité.
Créez un nouveau calque sous le calque du bouton de lecture et faites une sélection pour l'ombre du bouton. Remplissez-le de noir et allez dans Filtre> Flou> Flou gaussien et attribuez-lui un rayon de 1,5 px. Réglez le mode de fusion sur "Color Burn" et 40% sur l'opacité.
Sélectionnez l'outil "Gomme" (E), réglez le diamètre sur 125 px et la dureté sur 25%, puis balayez horizontalement au milieu du calque d'ombre..
Sélectionnez le calque "suivant et précédent" et remplissez-le avec cette couleur; # 0096A4. Après cela, ouvrez la fenêtre "Styles de calque" et commencez à ajouter les mêmes styles que moi.
Faites la même chose avec le calque "play icon". Mais cette fois, utilisez cette couleur comme couleur de fond: # FFDB94
Utilisez l'outil "Ligne" pour créer un excellent effet de brillance. Positionnez la ligne sous le calque "Play Button" et créez une ligne horizontale (1 px) en bas du calque "Gros bouton". Remplir la forme à 0% et ajouter une "superposition de dégradé".
Créez un nouveau calque derrière le calque "Play Button". Ctrl + Clic sur le "gros bouton" du calque pour sélectionner cette forme, puis faites un simple dégradé noir à gauche. Définissez "Superposition" comme mode de fusion et une opacité de 60%. dupliquez le calque, retournez-le horizontalement et déplacez-le vers la droite.
Utilisez l'outil "Ellipse" pour créer un ovale à gauche du "gros bouton". Réorganisez-le afin qu'il ressemble à l'image ci-dessous (doit être placé en haut à gauche du "gros bouton"). Faites le remplissage à 0% et ajoutez un style "Incrustation de dégradé".
Dupliquez le calque et placez-le sur le côté inférieur droit du "gros bouton" en ajoutant le deuxième style "Incrustation en dégradé".
Créez un nouveau calque au-dessus du calque "Bouton de lecture". Ctrl + Clic sur le pouce du calque "Bouton de lecture" pour sélectionner cette forme, puis sélectionnez Sélection> Modifier> Contracter et contractez la sélection de 3 px. Après tout cela, prenez l’outil «Dégradé» et faites un petit dégradé en diagonale dans le coin supérieur gauche. Réglez le mode de fusion des calques sur "Superposition" et l'opacité sur 40%.
Créez un nouveau calque au-dessus de celui que vous venez de créer. Faites une sélection sur le côté gauche du "bouton Lecture" (comme sur l'image). Remplissez-le avec la couleur de votre choix, nous définirons le remplissage à 0%. Ajoutez le style "Gradient Overlay" et l’effet de brillance est terminé. Dupliquez ce calque, retournez-le horizontalement et déplacez-le vers le côté droit.
Sélectionnez la moitié du "bouton Lecture" et sur un nouveau calque, à l'aide de "l'outil Dégradé" (G), créez un dégradé (en utilisant le noir comme couleur). Après cela, définissez le mode de fusion sur "Color Burn" et l'opacité sur 10%. Appliquez la même technique à "l'icône de lecture" (la seule chose qui change est le placement des calques - au-dessus du calque "icône de lecture" - et l'opacité du calque - 20%)..
La création de la texture "Play Button" est très simple. Après avoir créé un nouveau calque au-dessus du calque "Bouton de lecture", sélectionnez (contrôle sur Mac) + cliquez sur le calque du bouton de lecture, remplissez-le de noir, sélectionnez Filtre> Bruit> Ajouter du bruit, définissez les paramètres spécifiés et appuyez sur "D'accord".
La sélection étant toujours active, sélectionnez Filtre> Flou> Flou de mouvement et utilisez les paramètres indiqués. Désélectionnez et définissez le mode de fusion sur "Superposition" et l'opacité sur 45%..
Ajoutez quelques petits détails à "l'icône de lecture". Sur un nouveau calque, vous créerez, avec "l'outil de sélection de elliptique" (M), des cercles de taille aléatoire dans "l'icône de lecture". Rendez-les noirs, désélectionnez-les et allez dans Filtre> Flou> Flou gaussien. Après avoir ajouté vos paramètres, il vous suffit de régler le mode de fusion sur "Color Burn" et l'opacité sur 15%. Vous avez terminé..
Créez une autre couche et faites exactement la même chose. La seule chose à changer est la couleur des cercles aléatoires (j'ai fait les cercles blancs).
Commencez à créer l'arrière-plan. Sélectionnez le calque d'arrière-plan et remplissez-le avec # 363D41 et ajoutez un style "Incrustation en dégradé". À l’aide de "l’outil elliptique" (M), créez un ovale sur un nouveau calque et remplissez-le de blanc. Après cela, allez à Filtre> Flou> Flou gaussien, entrez vos paramètres et appuyez sur ok. Changez le mode de fusion en "Superposition" et donnez-lui une opacité de 65%.
Commencez à créer l'ombre pour le mini-lecteur. Créez un nouveau calque en utilisant l’outil "Elliptical Marquee Tool" (M), créez un ovale sous le lecteur et remplissez-le de noir. Allez dans Filtre> Flou> Flou gaussien et effectuez les réglages nécessaires. Sélectionnez l'outil "Gomme" (E) et définissez les paramètres suivants: Diamètre - 150px; Dureté - 0%; Opacité - 10%, puis utilisez-le pour effacer une petite partie des côtés de l'ombre. Réglez le mode de fusion sur "Color Burn" et réglez l'opacité sur 60%.
Faites une sélection de boutons complète. Faites-le par Commande + Cliquez sur le calque "Gros bouton" puis appuyez sur Commande + Maj + Clic sur le bouton "Lecture". Avec la sélection active, créez un nouveau calque et remplissez-le de noir. Déplacez-le et allez dans Filtre> Flou> Flou gaussien et effectuez les réglages comme sur l'image. Utilisez la "Transformation libre" (Contrôle + T) pour déformer l’ombre arrière. Utilisez l'outil "Gomme" (E) avec les paramètres suivants: Diameter - 150px; Dureté - 0%; Opacité - 10%, pour effacer l'ombre sur les côtés. Ajuster l'opacité à 50%.
L'icône Mini Player est maintenant prête. Beaucoup de ces techniques peuvent être recréées à 100% vectorielles, ce n'est qu'une autre façon de faire des choses qui utilisent les capacités de Photoshop. Encore une fois, il s'agit d'un didacticiel particulièrement utile pour les personnes qui souhaitent créer des éléments à utiliser dans des conceptions Web et d'interface utilisateur, car elles utilisent souvent déjà Photoshop..
J'espère que vous avez apprécié ce tutoriel et qu'il a été utile.
Accentsconagua