Share
Dans ce didacticiel, nous allons créer une icône détaillée d’une batterie similaire à celle utilisée pour l’iPhone touch. La couleur "de carburant" de la batterie peut être changée ainsi que le niveau de "carburant", ce qui permet à l'icône d'être utilisée pour créer une batterie ou un compteur de puissance pour des applications, ou simplement en tant que graphique dans tout type de conception.
Nous allons commencer par créer un Nouveau document et en le remplissant avec un fond noir uni. Vous pouvez faire la vôtre quelle que soit votre taille, la mienne est 600 x 400px.
Maintenant que nous avons notre document, nous allons commencer par créer le capuchon en métal à la fin de la batterie. Commencez par dessiner une forme, comme indiqué ci-dessous. Les couleurs du dégradé de gauche à droite sont 90% de gris, blanc et noir. De plus, donnez à l'objet une 1px plume et baisser sa Opacité à 75%.
Copier (Commande + C) cet objet et collez la copie directement devant (Commande + F). Ensuite, déplacez la copie d’un pixel vers la droite à l’aide de la flèche vers la droite. Les couleurs du dégradé de gauche à droite sont 80% gris, noir et 80% gris. En outre, élever le Opacité de cette forme de retour à 100%, et retirez la plume en la faisant glisser de la liste dans le Apparence panneau à la petite icône de la corbeille en dessous.
Pour ajouter des rehauts aux bords, dessinez deux formes comme indiqué ci-dessous avec le Outil stylo (P). Remplissez les deux avec du blanc. Changer la forme du dessus Opacité à 75% et la forme du bas pour 25%. En outre, donner aux deux formes un Plume 2px.
Ce n'est peut-être pas évident pour l'instant, mais nous allons maintenant ajouter les reflets au métal. Dessine une forme avec le Outil stylo (P) et positionnez-le comme indiqué ci-dessous. La couleur de gauche du curseur de dégradé est blanche et la couleur de droite, 90% de gris. Donner la forme a 1px plume ainsi que.
Pour la réflexion du bas, dessinez une autre forme, comme indiqué. Le dégradé va du blanc au noir et la forme a une 1px plume. En outre, baisser sa Opacité à 50%.
Nous allons maintenant commencer par la section transparente de la batterie. Commencez par dessiner la forme montrée ci-dessous avec le Outil stylo (P). Une fois dessiné, remplissez la forme avec du blanc et abaissez son Opacité à 50%.
Un moyen facile de dessiner la forme est d’en dessiner une moitié - en laissant le chemin ouvert, puis, Copie, Coller, et Réfléchir la copie de la forme pour créer l'autre moitié. Enfin, il suffit de connecter les points avec le Outil stylo (P). Cela garantit également que la forme finale sera symétrique.
Maintenant, nous pourrions simplement utiliser un dégradé de noir à gris sur cette forme, mais nous allons plutôt utiliser un masque d'opacité. C'est un peu plus de travail à créer, mais cela nous permettra de changer le fond de notre batterie lorsque nous aurons terminé. Pour créer le masque, copiez et collez la forme devant l'original. Apporter son Opacité Sauvegarder 100%, et remplissez-le avec un dégradé comme indiqué ci-dessous. Le curseur de gauche est gris à 50% et le curseur de droite est noir..
Maintenant, sélectionnez les deux formes, puis dans le menu déroulant du menu Transparence sélection du panneau Faire masque d'opacité. Lorsque vous créez le masque, vous ne remarquerez peut-être pas de changement, mais vous modifierez la couleur de l'arrière-plan du document et vous verrez les avantages du masque d'opacité..
Nous allons maintenant ajouter des reflets et des reflets pour rendre le verre transparent. Commencez par dessiner deux formes comme indiqué ci-dessous. Remplissez-les de blanc et baissez leur Opacités à 75%. Plume le premier par 2px et le bas un par 3.5px.
Nous allons aussi ajouter un Masque d'opacité au sommet mettre en évidence. Collez une copie de la forme supérieure devant elle, apportez sa Opacité Sauvegarder 100%, et enlever ses Plume. Remplissez-le avec un dégradé comme indiqué ci-dessous, en passant de 75% de gris au noir. Enfin, créez un Masque d'opacité comme nous le faisions auparavant.
Nous allons ajouter une autre réflexion sur le verre pour correspondre à celle sur le métal. Dessinez une forme comme indiqué ci-dessous, remplissez-la de blanc, donnez-lui une Plume 2px, et baisser sa Opacité à 50%.
Suivez notre routine pour ajouter le Masque d'opacité. Collez une copie de la forme devant l'original et remplissez-la avec un dégradé allant de 15% de gris à 85% de gris (n'oubliez pas de supprimer la plume sur la forme)..
Encore une fois créer le Masque d'opacité. En outre, une fois que vous avez créé le masque, modifiez la forme Mode de fusion à Écran dans le Transparence panneau.
A présent, vous avez probablement une idée de la manière de créer nos réflexions. Donc, dessinez une autre forme de reflet comme indiqué ci-dessous, puis remplissez-la de blanc. Baisser sa Opacité à 40% et Plume par 2px.
Pour la copie de la forme utilisée pour le masque d'opacité, utilisez un dégradé de 50% de gris à noir, comme indiqué ci-dessous..
Et maintenant? Tu l'as deviné. Créer le Masque d'opacité.
Bon, notre dernière réflexion! Une fois de plus, dessinez la forme ci-dessous, remplissez-la de blanc, baissez le Opacité à 50%, et Plume par 2px.
Copiez et collez la forme pour faire le Masque d'opacité. Utilisez un dégradé de blanc à noir pour la forme.
Et pour la dernière fois, créez le Masque d'opacité.
Nous allons maintenant ajouter l’autre embout métallique à notre batterie, ce qui est assez facile, car ils sont tous les deux identiques. Sélectionnez toutes les formes qui composent le capuchon d'extrémité et allez à Objet> Transformer> Refléter. Dans la fenêtre de dialogue qui apparaît, sélectionnez le Verticale bouton radio pour la Axe et cliquez Copie. Faites glisser les formes copiées et réfléchies à l'autre extrémité de la batterie.
La création du contact positif sur la batterie est rapide et facile. Sélectionnez simplement toutes les formes que vous venez d'utiliser pour l'embout en métal, puis copiez-les et collez-les devant. Avec tous sélectionnés, Alt-clic et faites glisser la poignée centrale supérieure ou inférieure du groupe pour les réduire verticalement. Vous voudrez peut-être aussi les réduire un peu horizontalement.
Une fois que vous avez la bonne taille, envoyez-les à l’arrière (Commande + Maj + [ ), puis avancez-les d'un niveau (Commande +] ). Si cela est fait correctement, le contact doit être directement derrière le capuchon métallique.
La dernière chose que nous devons faire pour finir la batterie elle-même est d’ajouter des lamelles arrondies pour représenter les extrémités intérieures du verre. Dessinez les deux formes, comme indiqué ci-dessous (ou dessinez-en une puis copiez-la et collez-la). Remplissez celui de droite de blanc et baissez son Opacité à 25%, et remplissez celui de gauche de noir et abaissez son Opacité à 50%. De plus, changez le Mode de fusion de celui de gauche à Recouvrir. finalement, Plume les deux formes par 3.5px.
Nous allons maintenant travailler sur le dernier élément de la conception, le "carburant" (énergie de la batterie). Dessine une forme avec le Outil stylo (P) comme celui ci-dessous. Vous pouvez définir le niveau d’énergie à votre guise, ainsi que la couleur de votre choix. J'ai choisi environ les deux tiers et utilisé un dégradé vert.
Une fois que vous avez l’aspect recherché pour le "carburant", envoyez-le à l’arrière. Ensuite, avancez-le deux fois pour qu'il soit directement devant la couche transparente de base, mais derrière les reflets..
Enfin, copiez la forme de ruban noir arrondi sur le bord gauche du verre et faites-le glisser jusqu'au bord du "carburant", puis changez sa couleur de remplissage en blanc.
Pour terminer le design, ajoutez quelques points saillants aux parties métalliques de la batterie en dessinant des ovales et en les remplissant de blanc. Ensuite, ajoutez un Plume à eux et baisser leur Opacités.
De plus, ajoutez un Lueur externe à la forme "carburant" (Effet> Styliser> Outer Glow). Assurez-vous que le Mode de fusion est réglé sur Écran. Vous voudrez que la couleur de surbrillance corresponde à la couleur du carburant. Pour mon "carburant" vert, j'ai utilisé une couleur brillante vert lime (# 19FF00). Faire le Opacité 75% et le Flou 11px.
C'est tout! Vous avez maintenant une icône de batterie qui peut être utilisée pour n'importe quelle conception, et même comme graphique modifiable pour une animation ou une application interactive. J'espère que vous avez acquis quelques techniques et idées utiles grâce à ce tutoriel..
Accentsconagua