Share
Dans le didacticiel suivant, vous apprendrez à créer une illustration semi-réaliste pour ordinateur portable. Vous apprendrez à utiliser les dégradés, le panneau d’apparence et votre propre image à l’écran pour créer cette superbe image parfaite pour les illustrations et les icônes technologiques. Commençons!
Appuyez sur Commande + N pour créer un nouveau document. Entrez 600 dans les zones Largeur et Hauteur, puis cliquez sur le bouton Avancé. Sélectionnez RVB, Écran (72ppi) et assurez-vous que la case "Aligner les nouveaux objets sur la grille de pixels" est décochée avant de cliquer sur OK. Activer la grille (Affichage> Afficher la grille) et Aligner sur la grille (Affichage> Aligner sur la grille). Ensuite, vous avez besoin d’une grille toutes les 5 pixels. Allez dans Edition> Préférences> Guides> Grille, entrez 5 dans le quadrillage chaque case et 1 dans la zone Subdivisions..
Vous pouvez également ouvrir le panneau Info (Fenêtre> Info) pour un aperçu en direct avec la taille et la position de vos formes. N'oubliez pas de remplacer l'unité de mesure en pixels dans Edition> Préférences> Unité> Général. Toutes ces options augmenteront considérablement votre vitesse de travail.
Choisissez l'outil Rectangle (M), créez une forme de 575 x 110 pixels, remplissez-le avec le dégradé linéaire illustré ci-dessous et passez à l'outil Sélection directe (A). Sélectionnez le point d'ancrage inférieur et gauche et déplacez-le de 75 pixels vers la droite, puis sélectionnez le point d'ancrage inférieur et droit et déplacez-le de 75 pixels vers la gauche. En fin de compte votre chemin de vecteur devrait ressembler à un trapézoïde.
Ensuite, vous aurez besoin du script Round Any Corner. Vous pouvez le trouver dans l'article Vectortuts + 20 Scripts Adobe Illustrator gratuits et utiles. Enregistrez-le sur votre disque dur, revenez à Illustrator, saisissez l'outil de sélection directe (A) et concentrez-vous sur le chemin vectoriel défini à l'étape précédente. Sélectionnez les points d'ancrage supérieurs (mis en évidence dans la première image) et sélectionnez Fichier> Scripts> Autre script. Ouvrez le script Round Any Corner, entrez un rayon de 20 px et cliquez sur OK. Continuez avec l'outil de sélection directe (A), sélectionnez les points d'ancrage inférieurs et accédez à nouveau à Fichier> Scripts> Autre script. Ouvrez le script Round Any Corner, entrez un rayon de 5 px et cliquez sur OK. En fin de compte, votre forme devrait ressembler à celle de la troisième image..
Désactivez l'alignement sur la grille (Affichage> Aligner sur la grille), puis sélectionnez Edition> Préférences> Général et assurez-vous que l'incrément de clavier est défini sur 1px. Resélectionnez le chemin vectoriel créé à l'étape précédente et effectuez deux copies (Contrôle + C> Contrôle + F> Contrôle + F). Sélectionnez la copie du haut, remplissez-la de blanc, déplacez-la 3 fois vers le bas à l'aide de la flèche vers le bas depuis votre clavier, puis sélectionnez Objet> Chemin> Chemin décalé. Entrez un décalage -2px et cliquez sur OK.
Conservez la forme obtenue et supprimez la forme blanche d'origine. Sélectionnez la forme blanche restante avec l'autre copie réalisée au début de l'étape et cliquez sur le bouton Moins avant du panneau Pathfinder. Remplissez la forme obtenue avec le dégradé linéaire indiqué ci-dessous. Les nombres blancs de l'image en dégradé représentent le pourcentage d'emplacement.
Resélectionnez la forme sombre avec la forme créée à l'étape précédente et effectuez une copie devant (Contrôle + C> Contrôle + F). Sélectionnez la copie du chemin du vecteur sombre et déplacez-la de 4 pixels vers le bas à l'aide de la flèche vers le bas depuis votre clavier. Resélectionnez les deux copies et cliquez sur le bouton Intersection du panneau Pathfinder. Remplir la forme résultante avec R = 100 G = 100 B = 100.
Resélectionnez la forme sombre avec la forme créée à la quatrième étape et faites une copie devant (Contrôle + C> Contrôle + F). Sélectionnez la copie du tracé du vecteur sombre, placez-la au premier plan (Maj + Contrôle + Support carré droit) et déplacez-la d'un pixel vers le bas. Resélectionnez les deux copies et cliquez sur le bouton Moins avant du panneau Pathfinder. Remplissez la forme obtenue avec du blanc et changez son mode de fusion en Lumière douce.
Resélectionnez le chemin du vecteur sombre et allez à Objet> Chemin> Chemin décalé. Entrez un décalage de -3px et cliquez sur OK. Sélectionnez la forme obtenue, déplacez-la de 3 pixels vers le bas, puis effectuez une copie devant (Contrôle + C> Contrôle + F) et déplacez-la de 1 pixel. Resélectionnez les deux formes et cliquez sur le bouton Moins avant du panneau Pathfinder. Remplissez la forme obtenue avec le dégradé linéaire indiqué ci-dessous et diminuez son opacité à 15%. Les zéros jaunes de l'image en dégradé représentent le pourcentage d'opacité.
Activer l'alignement sur la grille (Affichage> Aligner sur la grille). Choisissez l'outil Rectangle (M), créez une forme de 515 x 85 px, remplissez-le de blanc et passez à l'outil de sélection directe (A). Sélectionnez le point d'ancrage inférieur gauche et déplacez-le de 55 pixels vers la droite, puis sélectionnez le point d'ancrage inférieur droit et déplacez-le de 55 pixels vers la gauche. En fin de compte, votre chemin de vecteur devrait ressembler à un trapèze. Dupliquez-le (Contrôle + C> Contrôle + F). Sélectionnez la copie et concentrez-vous sur le panneau Apparence. Sélectionnez le remplissage, réduisez son opacité à 20% puis remplacez la couleur à plat par le dégradé linéaire indiqué ci-dessous. Ajoutez également un trait de 1 point pour cette forme et définissez sa couleur à R = 25 G = 25 B = 25.
Téléchargez ce fond d'écran Envato (ou n'importe quelle image) et faites-le glisser à l'intérieur de votre fichier Ai. Redimensionnez-le un peu, faites-le glisser sous les formes créées à l'étape précédente et cliquez simplement sur le bouton Intégrer de la barre du haut. Resélectionnez le trapèze blanc avec l'image et sélectionnez Objet> Distorsion d'enveloppe> Créer avec le haut de l'objet. À la fin, votre image devrait ressembler à la troisième image. Sélectionnez toutes les formes créées jusqu'à présent et regroupez-les (Contrôle + G). Accédez au panneau Calques et nommez ce nouveau groupe "Cas"..
Choisissez l'outil Rectangle (M), créez une forme de 425 x 295 px, remplissez-le avec R = 202 G = 203 B = 207 et placez-le comme indiqué dans l'image suivante. Sélectionnez cette nouvelle forme et allez à Effet> Styliser> Coins arrondis. Entrez un rayon de 15 px, cliquez sur OK et sélectionnez Objet> Développer l'apparence..
Désactivez l'alignement sur la grille (Affichage> Aligner sur la grille). Resélectionnez la forme créée à l'étape précédente et effectuez deux copies devant (Contrôle + C> Contrôle + F> Contrôle + F). Sélectionnez la copie supérieure et déplacez-la 1px vers le bas. Re-sélectionnez les deux copies et cliquez sur le bouton Moins avant du panneau Pathfinder. Remplissez la forme obtenue avec du blanc et changez son mode de fusion en Lumière douce.
Resélectionnez le rectangle arrondi créé à la dixième étape et effectuez deux nouvelles copies devant (Contrôle + C> Contrôle + F> Contrôle + F). Sélectionnez la copie supérieure et déplacez-la 1px vers le haut. Re-sélectionnez les deux copies et cliquez sur le bouton Moins avant du panneau Pathfinder. Remplir la forme résultante avec R = 202 G = 203 B = 207.
Resélectionnez le rectangle arrondi créé à la dixième étape et effectuez deux nouvelles copies devant (Contrôle + C> Contrôle + F> Contrôle + F). Sélectionnez la copie supérieure et déplacez-la de 2 pixels vers le haut. Re-sélectionnez les deux copies et cliquez sur le bouton Moins avant du panneau Pathfinder. Remplissez la forme obtenue avec du blanc et changez son mode de fusion en Lumière douce.
Resélectionnez le rectangle arrondi créé à la dixième étape, concentrez-vous sur le panneau Apparence et ajoutez un second remplissage à l'aide du bouton Ajouter un nouveau remplissage. Sélectionnez-le, abaissez son opacité à 90% et ajoutez le dégradé radial indiqué ci-dessous.
Resélectionnez le rectangle arrondi créé à la dixième étape, ajoutez un troisième remplissage et faites-le glisser au bas du panneau Apparence. Sélectionnez-le, définissez sa couleur sur le noir, diminuez l'opacité à 50% et accédez à Effet> Tracé> Tracé du chemin. Entrez un décalage de -8px, cliquez sur OK et sélectionnez Effet> Déformer et transformer> Transformer. Entrez les données indiquées ci-dessous, cliquez sur OK et sélectionnez Effet> Flou> Flou gaussien. Entrez un rayon de 3 px et cliquez sur OK. Groupez ce rectangle arrondi avec toutes les formes créées lors de la dernière étape. Accédez au panneau Calques et nommez ce nouveau groupe "Corps"..
Activer l'alignement sur la grille (Affichage> Aligner sur la grille). Choisissez l'outil Rectangle (M), créez une forme 335 x 15 px, remplissez-le avec le dégradé linéaire présenté ci-dessous et placez-le comme indiqué dans la première image. Désactivez l'option Aligner sur la grille (Affichage> Aligner sur la grille), sélectionnez ce nouveau rectangle et effectuez deux copies devant (Contrôle + C> Contrôle + F> Contrôle + F). Sélectionnez la copie du haut et déplacez-la de 2 pixels vers le bas. Resélectionnez les deux copies et cliquez sur le bouton Moins avant du panneau Pathfinder. Remplir la forme obtenue avec du noir.
Resélectionnez la forme noire créée à l'étape précédente et effectuez deux copies devant (Contrôle + C> Contrôle + F> Contrôle + F). Sélectionnez la copie du bas et déplacez-la 1px vers le bas. Resélectionnez les deux copies et cliquez sur le bouton Moins avant du panneau Pathfinder. Remplir la forme résultante avec R = 40 G = 40 B = 40.
Resélectionnez le premier rectangle créé à la seizième étape et faites deux copies devant (Contrôle + C> Contrôle + F> Contrôle + F). Sélectionnez la copie du haut et déplacez-la de 3 pixels vers le haut. Resélectionnez les deux copies et cliquez sur le bouton Moins avant du panneau Pathfinder. Remplissez la forme résultante avec du noir. Resélectionnez le premier rectangle créé à la seizième étape et accédez à Effet> Styliser> Ombre portée. Entrez les données affichées dans l'image finale et cliquez sur OK. Sélectionnez la forme créée à cette étape avec toutes les formes créées lors de la dernière étape et regroupez-les (Contrôle + G). Accédez au panneau Calques et nommez ce nouveau groupe "Connecteur"..
Activer l'alignement sur la grille (Affichage> Aligner sur la grille). Choisissez l'outil Rectangle (M), créez une forme de 335 x 135 pixels, remplissez-le de R = 218 G = 219 B = 222 et placez-le comme indiqué dans l'image suivante. Sélectionnez-le et allez à Effet> Styliser> Coins arrondis. Entrez un rayon de 5 px, cliquez sur OK et sélectionnez Objet> Développer l'apparence..
Désactivez l'option Aligner sur la grille (Affichage> Aligner sur la grille), sélectionnez la forme créée à l'étape précédente et effectuez deux copies à l'avant (Contrôle + C> Contrôle + F> Contrôle + F). Sélectionnez la copie du haut et déplacez-la 2px vers la gauche. Resélectionnez les deux copies et cliquez sur le bouton Moins avant du panneau Pathfinder. Remplissez la forme obtenue avec le dégradé linéaire indiqué ci-dessous.
Resélectionnez le rectangle arrondi créé à la dix-neuvième étape et effectuez deux copies devant (Contrôle + C> Contrôle + F> Contrôle + F). Sélectionnez la copie du haut et déplacez-la 2px vers la droite. Resélectionnez les deux copies et cliquez sur le bouton Moins avant du panneau Pathfinder. Remplissez la forme obtenue avec le dégradé linéaire indiqué ci-dessous.
Resélectionnez le rectangle arrondi créé à la dix-neuvième étape et effectuez deux copies devant (Contrôle + C> Contrôle + F> Contrôle + F). Sélectionnez la copie supérieure et déplacez-la 1px vers le haut. Resélectionnez les deux copies et cliquez sur le bouton Moins avant du panneau Pathfinder. Remplissez la forme obtenue avec le dégradé linéaire indiqué ci-dessous et abaissez son opacité à 85%.
Resélectionnez le rectangle arrondi créé à la dix-neuvième étape et effectuez deux copies devant (Contrôle + C> Contrôle + F> Contrôle + F). Sélectionnez la copie du haut et déplacez-la 3px vers le bas. Resélectionnez les deux copies et cliquez sur le bouton Moins avant du panneau Pathfinder. Remplissez la forme obtenue avec le dégradé linéaire indiqué ci-dessous et abaissez son opacité à 85%.
Activer l'alignement sur la grille (Affichage> Aligner sur la grille). Choisissez l'outil Rectangle (M), créez une forme de 125 x 90 pixels, remplissez-le de noir et placez-le comme indiqué dans l'image suivante. Sélectionnez-le et allez à Effet> Styliser> Coins arrondis. Entrez un rayon de 5 px, cliquez sur OK et sélectionnez Objet> Développer l'apparence..
Désactivez l'option Aligner sur la grille (Affichage> Aligner sur la grille), sélectionnez la forme créée à l'étape précédente et effectuez deux copies à l'avant (Contrôle + C> Contrôle + F> Contrôle + F). Sélectionnez la copie du bas et déplacez-la 1px vers le bas. Re-sélectionnez les deux copies et cliquez sur le bouton Moins avant du panneau Pathfinder. Remplissez la forme obtenue avec du blanc et changez son mode de fusion en Lumière douce. Resélectionnez le rectangle arrondi créé à l'étape précédente et concentrez-vous sur le panneau Apparence. Tout d'abord, sélectionnez le remplissage, diminuez son opacité à 1% et réglez le mode de fusion sur Multiplier. Ensuite, ajoutez un trait de 1 pt, alignez-le à l'intérieur et réglez la couleur sur R = 210 G = 210 B = 210.
Activer l'alignement sur la grille (Affichage> Aligner sur la grille). Pour le reste des étapes, vous aurez besoin d'une grille toutes les 1px. Alors, allez dans Edition> Préférences> Guides et grille et entrez 1 dans le quadrillage chaque case. Sélectionnez le rectangle arrondi dans le groupe "Corps" et effectuez une copie devant (Contrôle + C> Contrôle + F). Choisissez l'outil Rectangle (M), créez une forme de 59 x 5 pixels, remplissez-le avec R = 200 G = 201 B = 204 et placez-le comme indiqué dans l'image suivante. Sélectionnez-le et allez à Effet> Styliser> Coins arrondis. Entrez un rayon de 5 pixels, cliquez sur OK et sélectionnez Objet> Développer l’apparence. Sélectionnez la forme obtenue avec la copie réalisée au début de l'étape et cliquez sur le bouton Intersection du panneau Pathfinder..
Resélectionnez la forme créée à l'étape précédente et effectuez deux copies devant (Contrôle + C> Contrôle + F> Contrôle + F). Sélectionnez la copie du haut et déplacez-la 1px vers la gauche. Resélectionnez les deux copies et cliquez sur le bouton Moins avant du panneau Pathfinder. Remplir la forme résultante avec R = 167 G = 168 B = 171.
Resélectionnez la forme créée à la vingt-sixième étape et faites deux nouvelles copies devant (Contrôle + C> Contrôle + F> Contrôle + F). Sélectionnez la copie du haut et déplacez-la 1px vers la droite. Resélectionnez les deux copies et cliquez sur le bouton Moins avant du panneau Pathfinder. Remplir la forme résultante avec R = 167 G = 168 B = 171.
Resélectionnez la forme créée à la vingt-sixième étape et faites deux nouvelles copies devant (Contrôle + C> Contrôle + F> Contrôle + F). Sélectionnez la copie supérieure et déplacez-la 1px vers le bas. Resélectionnez les deux copies et cliquez sur le bouton Moins avant du panneau Pathfinder. Remplissez la forme résultante avec R = 183 G = 184 B = 188. Resélectionnez la forme créée à la vingt-sixième étape et accédez à Effet> Styliser> Ombre portée. Entrez les données indiquées ci-dessous et cliquez sur OK. Sélectionnez le chemin vectoriel créé à cette étape ainsi que les formes créées lors des trois dernières étapes et regroupez-les (Contrôle + G)..
Choisissez l'outil Ellipse (L), créez deux cercles de 1 px, remplissez les deux formes avec R = 160 G = 160 B = 160 et placez-les comme indiqué dans l'image suivante..
Resélectionnez les deux cercles créés à l'étape précédente et allez à Effet> Déformer et transformer> Transformer. Entrez les données indiquées ci-dessous, cliquez sur OK et sélectionnez Effet> Styliser> Ombre portée. Entrez les données affichées dans l'image suivante et cliquez sur OK.
Resélectionnez le cercle de droite créé à la trentième étape et allez à Effet> Déformer et transformer> Transformer. Entrez les données affichées dans la première image et cliquez sur OK. Resélectionnez le cercle de gauche créé à la trentième étape et allez à Effet> Déformer et transformer> Transformer. Entrez les données affichées dans la deuxième image et cliquez sur OK.
Choisissez l'outil Rectangle (M), créez une forme de 21 x 12 pixels, remplissez-le avec le dégradé linéaire illustré ci-dessous et placez-le comme indiqué dans l'image suivante. Sélectionnez-le, concentrez-vous sur le panneau Apparence et ajoutez un second remplissage. Sélectionnez-le, définissez sa couleur sur R = 75 G = 75 B = 75 et sélectionnez Effet> Convertir en forme> Rectangle. Entrez les données indiquées ci-dessous, cliquez sur OK, puis sélectionnez Effet> Déformer et transformer> Transformer. Entrez les données ci-dessous et cliquez sur OK.
Retournez dans le panneau Apparence et ajoutez un troisième remplissage à votre rectangle. Sélectionnez-le, définissez sa couleur sur R = 25 G = 25 B = 25 et sélectionnez Effet> Convertir en forme> Rectangle. Entrez les données indiquées ci-dessous, cliquez sur OK, puis sélectionnez Effet> Déformer et transformer> Transformer. Entrez les données indiquées ci-dessous et cliquez sur OK. Retournez dans le panneau Apparence, ajoutez un trait d'un trait, alignez-le à l'intérieur et faites-le noir. Retournez dans le panneau Apparence, assurez-vous qu'aucun fond ou trait n'est sélectionné et allez à Effet> Stylisé> Coins arrondis. Entrez un rayon de 3 pixels, cliquez sur OK et sélectionnez Effet> Styliser> Ombre portée. Entrez les données affichées dans l'image suivante et cliquez sur OK.
Resélectionnez le rectangle créé à l'étape précédente, effectuez une copie devant (Contrôle + C> Contrôle + F) et déplacez-le vers la droite, comme indiqué dans l'image suivante. Sélectionnez les deux rectangles, appuyez sur Maj + Ctrl + B, puis double-cliquez sur l'outil de fusion dans la barre d'outils. Sélectionnez "Pas spécifié" dans le menu déroulant Espacement, entrez 12 dans la case blanche puis cliquez sur OK..
Choisissez l'outil Rectangle (M), créez un carré de 19 pixels et placez-le comme indiqué ci-dessous. Sélectionnez-le, concentrez-vous sur le panneau Apparence et ajoutez les propriétés indiquées dans l'image suivante. En gros, vous devez ajouter les mêmes propriétés que celles utilisées pour la forme créée à l'étape précédente, mais vous devez également ajuster les nombres utilisés pour les effets Rectangle et Transformer. Une fois que votre carré ressemble à l'image suivante, vous pouvez enregistrer toutes les propriétés sous forme de style graphique. Assurez-vous que votre carré est toujours sélectionné, ouvrez le panneau Styles graphiques et cliquez simplement sur le bouton Nouveau style graphique..
Resélectionnez le carré créé à l'étape précédente, effectuez une copie devant (Contrôle + C> Contrôle + F) et déplacez-le vers la droite, comme indiqué dans l'image suivante. Sélectionnez les deux rectangles, appuyez sur Maj + Ctrl + B, puis double-cliquez sur l'outil de fusion dans la barre d'outils. Sélectionnez "Pas spécifié" dans le menu déroulant Espacement, entrez 11 dans la case blanche, puis cliquez sur OK..
Choisissez l'outil Rectangle (M), créez une forme de 31 x 19 pixels et placez-le comme indiqué ci-dessous. Sélectionnez-le et cliquez sur le style graphique enregistré à la trente-cinquième étape. Maintenant, votre forme devrait ressembler à la deuxième image. Tout ce que vous avez à faire est d’ajuster l’effet Rectangle. Allez simplement dans le panneau Apparence, ouvrez les effets Rectangle existants et entrez une largeur de 29 px.
Resélectionnez le mélange créé à la trente-sixième étape, effectuez trois copies, ajustez-les et placez-les comme indiqué dans la première image. Saisissez également le rectangle et ajoutez de nouveaux boutons, comme indiqué dans la deuxième image. Utilisez simplement le style graphique enregistré et ajustez la largeur utilisée pour les effets Rectangle.
Choisissez l'outil Rectangle (M), créez une forme de 20 x 22 pixels et placez-le comme indiqué ci-dessous. Sélectionnez-le et cliquez sur le style graphique enregistré à la trente-cinquième étape. Maintenant, votre forme devrait ressembler à la deuxième image. Accédez au panneau Apparence et réglez les effets Transformation et Rectangle comme indiqué dans l'image suivante. Une fois que votre forme ressemble à celle de la deuxième image, enregistrez les propriétés sous un deuxième style graphique..
Saisissez le rectangle et ajoutez de nouveaux boutons comme indiqué dans la deuxième image. Utiliser le style graphique enregistré à l'étape précédente et ajuster la largeur utilisée pour les effets Rectangle.
Saisissez le rectangle, créez deux formes vectorielles de 19 x 11 pixels et placez-les comme indiqué ci-dessous. Utilisez la deuxième étape du style graphique, ajustez les propriétés utilisées pour les effets Rectangle et Transformer, puis ouvrez l’effet Coins arrondis existant et diminuez le rayon à 2,5px..
Choisissez l'outil Rectangle (M), créez un tracé vectoriel de 20 x 22 pixels, placez-le comme indiqué dans la première image et accédez à Effet> Styliser> Coins arrondis. Entrez un rayon de 2px, cliquez sur OK et accédez à Objet> Développer l’apparence. Saisissez l'outil Plume (P), tracez un chemin horizontal de 24 px et placez-le comme indiqué dans la deuxième image. Sélectionnez-le avec le rectangle blanc arrondi et cliquez sur le bouton Diviser du panneau Pathfinder. Sélectionnez le groupe de formes résultant et dissociez-le (Maj + Ctrl + G).
Sélectionnez la forme supérieure créée à l'étape précédente et ajoutez le second style graphique. Ajustez les propriétés utilisées pour les effets Rectangle et Transformer, supprimez l’effet Coins arrondis puis passez à la forme inférieure. Sélectionnez-le, ajoutez le deuxième style graphique, modifiez les propriétés utilisées pour les effets Rectangle et Transformer, puis supprimez les effets Coins arrondis et Ombre portée..
Enfin, ajoutez le texte. Vous pouvez utiliser la police Myriad Pro avec la couleur définie à R = 235 G = 235 B = 235.
Maintenant, votre travail est terminé. Voici à quoi cela devrait ressembler.
Accentsconagua