Share
Aujourd'hui, nous allons passer en revue la création de vos propres icônes vectorielles Buddy avec un bonus intéressant: un ensemble gratuit d'icônes Envato ™ Marketplace à utiliser sur votre propre site Web.!
A propos de l'auteur: Orman Clark est un concepteur Web basé au Royaume-Uni spécialisé dans les jolis pixels et le développement frontal. Il passe la plupart de son temps à concevoir des thèmes WordPress et d’autres ressources gratuites pour les concepteurs de PremiumPixels.com. Restez à jour avec Orman et PremiumPixels sur Twitter, Dribbble et Forrst.
Ouvrez Adobe Illustrator et créez un nouveau document avec les paramètres suivants: 800 x 600 pixels, 72 dpi, couleur RVB, unités en pixels et fond blanc.
Avec votre nouveau document créé, ouvrez votre palette Calques en allant dans Fenêtre> Calques si elle n’est pas déjà visible et créez 4 nouveaux calques. Appelez-les "base", "icône", "lumière" et "superposition"
En travaillant sur le calque "de base" que vous venez de créer, sélectionnez l'outil Rectangle arrondi, choisissez une couleur gris clair et cliquez n'importe où sur votre toile. Dans la boîte de dialogue qui apparaît, sélectionnez les options suivantes: Largeur "42px", Hauteur "42px", Rayon d’angle "10px" et cliquez sur OK..
Assurez-vous que vous êtes sur le calque "clair", sélectionnez à nouveau l'outil Rectangle arrondi, sélectionnez un gris plus foncé et cliquez sur la toile. Cette fois, choisissez: Largeur "38px", Hauteur "38px", Rayon d’angle "8px" et cliquez sur OK..
Toujours sur le calque "clair", sélectionnez une dernière fois l’outil Rectangle arrondi, sélectionnez un gris encore plus foncé et cliquez sur la toile. Cette fois, choisissez: Largeur "34px", Hauteur "34px", Rayon d’angle "6px" et cliquez sur OK..
Maintenez la touche Maj enfoncée et cliquez sur les deux rectangles les plus à l'intérieur pour les sélectionner tous les deux. Avec les deux sélectionnés, ouvrez votre palette Pathfinder en allant dans Fenêtre> Pathfinder si elle n’est pas déjà visible et en cliquant sur l’icône "Moins avant". Cela vous laissera avec un rectangle creux.
Lorsque le rectangle creux est sélectionné, allez dans la palette Dégradé (Fenêtre> Dégradé) et sélectionnez un dégradé linéaire allant du blanc au blanc, défini à 90 degrés, avec l'ancre de dégradé gauche définie sur 0% d'opacité, celle de droite Opacité de 80% et localisation du dégradé à 80%
Ouvrez la palette Transparence (Fenêtre> Transparence) et définissez le Mode de fusion sur "Lumière douce"..
Passez au calque "superposition", choisissez n’importe quelle couleur et créez un autre rectangle arrondi à l’aide des éléments suivants: Largeur "38px", Hauteur "38px", Rayon d’angle "8px". A l'aide de l'outil Elipse, créez un elipse et positionnez-le sur le rectangle, comme indiqué..
Maintenez la touche Maj enfoncée et cliquez sur l'elipse et le rectangle pour les sélectionner tous les deux. En utilisant la palette Pathfinder comme précédemment, cliquez sur l’icône "Moins avant". Cela vous laissera avec la forme de la superposition.
Avec la forme de surimpression sélectionnée, accédez à la palette Dégradé et sélectionnez un dégradé linéaire, allant du blanc au blanc, défini à 0 degré. L'ancre de dégradé gauche est définie sur une opacité de 25%, celle de droite, définie sur 0% et la emplacement du gradient à 50%. Réglez le mode de fusion sur "Lumière douce".
Croyez-le ou non, nous en avons maintenant terminé avec la configuration de base et nous sommes maintenant libres de jouer avec les couleurs.!
Maintenant que la configuration de base est terminée, nous pouvons commencer à créer des icônes individuelles. À titre d'exemple, je vais passer en revue la création d'une icône Vimeo. Le but ici est de vous montrer à quel point il est facile de créer votre propre icône une fois que vous avez configuré un modèle de base.!
Créez deux nouveaux nuanciers en cliquant sur l'icône "Nouveau nuancier" dans la palette Nuancier (Fenêtre> Nuancier). Définissez les nuances comme suit:
Pour revenir au calque "de base", sélectionnez le rectangle de base et appliquez un dégradé à l'aide des nouveaux échantillons de dégradé que nous venons de créer..
Heureusement, le logo Vimeo est basé sur la police Black Rose. Téléchargez la police et tapez la lettre "v" pour vous assurer que vous travaillez dans le calque "icône". J'ai tapé mon texte à 55 pt avec une couleur gris très clair. Convertir le texte en contours (Type> Créer des contours) et positionner le v dans le centre du rectangle.
Sélectionnez la forme du logo et appuyez sur CTRL / CMD + C pour faire une copie. Appuyez sur CTRL / CMD + B pour coller la copie derrière l'original. La forme copiée étant toujours sélectionnée, appuyez sur Entrée pour ajuster le positionnement. Changez le positionnement horizontal à 0.5px et le positionnement vertical à -0.5px et cliquez sur OK.
Modifiez la couleur de la forme copiée en noir, définissez le Mode de fusion sur "Lumière douce" et réglez l'opacité sur 50%.
Une étape facultative peut être de créer une ombre pour l’icône entière. En travaillant dans le calque "base", créez une petite ellipse au bas de l'icône. Remplissez cette icône avec un dégradé radial allant du noir au noir, défini à 0 degré, l’ancre de dégradé gauche étant définie sur 60% d’opacité, l’ancre de dégradé de droite définie sur 0%, le rapport de format défini sur 8% et l’emplacement du dégradé. à 60%.
C'est tout ce qu'on peut en dire! En suivant les instructions de base décrites dans ce didacticiel, vous pouvez facilement créer vos propres icônes évolutives pour presque toutes les applications ou tous les sites. Il suffit d'ouvrir votre modèle d'icône et de déposer votre propre logo!
Ce tutoriel étant destiné à Envato ™, je pensais prendre le temps de créer un ensemble de BuddyIcons pour les marchés Envato ™. Le pack comprend des icônes pour ThemeForest, GraphicRiver, AudioJungle, ActiveDen, VideoHive, 3DOcean et CodeCanyon. Brandon (l'éditeur du site ici) a même pris quelques minutes pour suivre le tutoriel et créer sa propre contribution: 2 Webdesigntuts flashy + icônes.
Le pack contient les icônes au format .png transparent en trois tailles; 32x32px, 64x64px, 128x128px avec l'illustration d'origine (.ai)
L'avantage de disposer de votre propre ensemble de BuddyIcons est qu'ils fonctionnent si bien quand vient le temps d'intégrer les médias sociaux et d'autres liens dans vos propres conceptions. Chaque icône est de taille uniforme et vous pouvez les utiliser dans diverses situations. Vous trouverez ci-dessous quelques idées rapides:
Lorsque vous considérez le concept d’une icône d’un point de vue théorique, l’utilisation d’un ensemble uniforme présente de nombreux avantages, au lieu d’utiliser des éléments de toutes parts. Les icônes attirent l'attention des téléspectateurs, encouragent les clics et constituent un excellent moyen d'apporter une touche de couleur et de style à vos créations. Un ensemble d'icônes uniformes peut aller encore plus loin en créant un élément cohérent, équilibré et artistique dans un dessin. L'utilisation de plusieurs icônes à un endroit donné peut même aider à donner à un site Web l'aspect d'un site actif et engagé dans la communauté… raison supplémentaire pour que les conceptions incluent un peu d'amour de BuddyIcon quelque part sur le site..
C'est tout pour le moment; Nous espérons que vous avez apprécié le tutoriel et le billet de faveur! Vous pouvez consulter l'ensemble complet de BuddyIcon sans les icônes exclusives Envato ™ sur PremiumPixels. Assurez-vous de revenir ici (ou de vous abonner) à Webdesigntuts + pour plus de cadeaux gratuits comme celui-ci à l'avenir!
Accentsconagua