Créer une icône de carnet d'adresses reliure à anneaux de style Mac OSX personnalisée

Aujourd'hui, je vais vous montrer comment créer une icône de remplacement du carnet d'adresses pour Mac OSX. Lorsque vous êtes débutant, il est préférable de commencer par concevoir des icônes de remplacement pour vous entraîner. Commençons par personnaliser les icônes dans nos espaces de travail.

Aperçu de l'image finale

Jetons un coup d'oeil à l'image que nous allons créer. 

introduction

Créer une bonne icône Mac OSX ne concerne pas seulement une idée ou un design sophistiqué, mais également des règles. Lorsque vous commencez à concevoir une icône pour Mac OSX, vous devez connaître de nombreuses choses. Tout d’abord, vous devez lire les directives d’interface humaine d’Apple. Il vous donne une connaissance de base de la philosophie de la conception de l'interface utilisateur Mac OSX. La prochaine chose à considérer est en fait ce que vous voulez créer. Commençons donc par créer notre propre icône personnalisée pour notre application Carnet d'adresses..

Théorie de l'éclairage

Nous commençons par une petite théorie sur l’éclairage des icônes. C'est très simple à comprendre. Il y a deux sources de lumière: la lumière du soleil en tant que source de lumière puissante et la réflexion de l'environnement en tant que source de lumière douce..

Étape 1

Créez un nouveau document de 1024 pixels sur 1024 pixels. Pour définir un rectangle de 512px par 512px (icône standard Leopard), ajoutez quatre guides (Affichage> Nouveau guide)..

Étape 2

Créez un nouveau calque et ajoutez un rectangle arrondi (avec un diamètre de 20px) en tant que calque de forme. Ce sera la forme principale du livre. Je voudrais avoir un livre rouge, donc je vais choisir une couleur rouge comme couleur de remplissage. Appelons cette couche "Couverture de livre".

Étape 3

Les livres ou les papiers d'icônes Mac OSX ont une perspective spécifique, voir l'image ci-dessous.

Étape 4

Prenez l'outil de sélection directe (A) et sélectionnez deux angles (toujours deux). Puis alignez-les sur nos guides (puis cachez les guides). Copiez le calque "Couverture de livre" une fois de plus et renommez-le en "Papier". Nous allons utiliser cette couche plus tard, alors cachez-la pour l'instant.

Étape 5

Double-cliquez sur "Couverture de livre" pour faire apparaître la fenêtre Style de calque et appliquer tous les paramètres ci-dessous. N'oubliez pas de cocher Fusionner les calques découpés en tant que groupe dans les options de fusion..

Étape 6

Pour créer un nouveau calque, appuyez sur Commande + Alt + G pour changer le calque en masque de découpage. Sélectionnez l'outil Crayon (P) et tracez une ligne large bleu foncé à gauche. Appelons-le simplement "Reliure noire" car le bleu foncé ressemble à une couleur noire.

Étape 7

Appliquez ces paramètres sur la "Reliure noire".

Étape 8

Ajoutez deux autres masques de découpage à la forme du livre. Ces masques doivent être sous la couche "Black Binding". Remplissez le premier avec du noir. Ensuite, sélectionnez Filtre> Bruit> Ajouter du bruit (appliquez une quantité de 75% et réglez la distribution sur Uniforme). Changez également le mode de fusion sur Superposition et réglez l'opacité sur 7%. Appliquez le filtre de papier pour notes sur le second masque d'écrêtage (avec une balance des images de 20, un grain de 15 et un relief de 10). Changez le mode de fusion en superposition et réglez l'opacité sur 3%..

Étape 9

Ajoutons quelques motifs à la "Reliure noire". Créez deux autres masques de découpage, cette fois, ils doivent être placés sur le calque "Reliure noire", bien sûr. Nous devons maintenant faire une sélection de la "Reliure noire". Alors maintenez la touche Commande enfoncée et cliquez sur le masque vectoriel de la "Liaison noire". Remplissez la sélection avec une couleur noire et appliquez le filtre Stylo graphique avec les paramètres ci-dessous..

Étape 10

Cliquez sur Extraire (Commande + Alt + X) et extrayez environ la moitié des bandes noires de la couleur blanche..

Étape 11

Changez le mode de fusion de ce calque en superposition et réglez l'opacité sur 10%..

Étape 12

Maintenant, nous allons répéter quelque chose des étapes précédentes. Sélectionnez donc le deuxième masque d’écrêtage créé à l’étape 9. Suivez les mêmes étapes que pour l’étape 9, mais sans appliquer le filtre Plume graphique. Nous allons utiliser le filtre de papier pour les notes comme à l'étape 8, avec les mêmes paramètres (Image Balance - 20, Graininess - 15, Relief - 10). Et encore une fois, changez le mode de fusion en Superposition et laissez cette fois l'opacité à 100%.

Étape 13

La dernière chose que nous devons faire sur la "Reliure noire" (et sur la couverture du livre) est d’ajouter des rayures visibles. Créez un nouveau calque au-dessus de tous les masques de découpage "Couverture de livre". Sélectionnez l'outil Pinceau et un pinceau étoile (vous pouvez le trouver dans des pinceaux assortis)..

Prenez une couleur noire, puis faites une sélection de la "Reliure noire" (Commande + cliquez sur le masque vectoriel), puis cliquez plusieurs fois sur le bord droit de la sélection. À la fin, créez un nouveau groupe, appelez-le "Couverture". Déplacez toutes les couches utilisées pour dessiner la couverture du livre.

Étape 14

Ajoutons donc un retour à notre livre. Copiez le groupe "Couverture", renommez-le en "Couverture" et déplacez-le sous le groupe "Couverture".

Étape 15

La "Couverture arrière" est presque similaire à la "Couverture avant". Nous n'avons besoin de masquer que deux effets de calque. Le premier est une ombre portée de la forme principale du livre et le second est un biseau et un estampage de la forme "Reliure noire"..

Étape 16

Il est maintenant temps d'utiliser le calque "Papier" de l'étape 4. Révélez ce calque et saisissez l'outil Sélection directe. Ce que nous allons faire maintenant, c'est réduire la couche "Papier". Mais comme vous pouvez le constater, nous n’utiliserons pas Transformation, car nous devons conserver les coins arrondis du papier dans le même rayon que les coins de la couverture du livre. Si nous mettons à l'échelle avec Transformation, le rayon des coins est également mis à l'échelle. Toujours, sélectionnez deux points de coin et rapprochez-les du prochain coin. Enfin, changez la couleur de remplissage en blanc.

Étape 17

Appliquer ces paramètres au calque "Papier".

Étape 18

Pour créer cinq papiers, copiez la couche de papier quatre fois. Après cela, placez-les comme indiqué ci-dessous.

Étape 19

Créez un nouveau groupe, appelez-le "Papiers" et déplacez tous les papiers dans ce groupe. Placez ce groupe sous le groupe "Couverture" et sur le groupe "Couverture".

Étape 20

Quelque chose manque toujours? Des bagues, bien sûr. Alors faisons-les. Tout d’abord, créez une ellipse avec l’outil Ellipse (U).

Étape 21

Soustrayez une autre ellipse à l'intérieur de la première ellipse à l'aide de l'outil Ellipse (U) en mode Soustraction (-)..

Étape 22

Soustrayez la partie cachée de la forme de l'anneau à l'aide de l'outil Crayon (P) en mode Soustraire (-). Nommez ce calque "Ring".

Étape 23

Appliquez ces paramètres sur le "Ring".

Étape 24

Pour créer une petite réflexion de la couleur rouge, dupliquez le style "Anneau", les styles de calque clairs et appliquez ces propriétés..

Étape 25

Ajoutez un nouveau calque, nommez-le "Ombre à cercle", puis sélectionnez Calque> Masque vectoriel> Tout révéler. Cliquez sur le masque vectoriel du "Ring" et copiez le chemin dans le calque "Ring Shadow". Sélectionnez ce calque et utilisez un pinceau noir doux de 100 pixels avec une opacité de 20% pour ajouter une couleur noire aux extrémités du "Ring".

Étape 26

Créez un œil en anneau avec l'outil Ellipse (U).

Étape 27

Appliquez ces paramètres de calque sur le "Ring Eye".

Étape 28

Ajouter un nouveau calque sous "l'anneau" et sur "l'anneau". Créez une sélection de la "reliure noire". Prenez un pinceau noir 50px avec une opacité de 30% et peignez une ombre sous le "Ring".

Étape 29

Comme vous pouvez le constater, il est nécessaire de fixer la bordure du "Ring". Créez un nouveau calque sur tous les masques de coupure "en anneau" et fixez-le avec un petit pinceau noir.

Étape 30

Créez un nouveau groupe, nommez-le "couches de sonnerie" et placez-y toutes les couches de "sonnerie". Ensuite, copiez ce groupe et déplacez-le. L'ombre sous le deuxième "anneau" devrait être un peu différente, donc tournez-la de quelques degrés plus près de "l'anneau". Pour obtenir cinq sonneries, répétez cette étape trois fois de plus (sans créer de nouveau groupe)..

Étape 31

Sélectionnez l'outil Crayon (P) et créez une forme de pli, comme dans l'image ci-dessous..

Étape 32

Appliquez les propriétés suivantes sur le "pli".

Étape 33

Dupliquer le "pli" quatre fois.

Étape 34

Ok, ajoutons une ombre au livre. Je ne vais pas transformer ni flouter la forme du livre, mais plutôt utiliser uniquement l'outil Pinceau (B) et l'outil Effacer (E). Je pense que cette façon de faire sera peut-être plus difficile pour vous, mais j'espère que si vous faites de votre mieux, le résultat sera plus réel. Vous pouvez également jouer avec l'opacité de ce calque. Une chose importante est que l'ombre ne doit pas être trop forte et trop sombre (un arrière-plan de couleur brune nous aide à cela)..

Étape 35

Maintenant, nous avons terminé le livre. Vous pouvez l’utiliser comme icône de remplacement pour de nombreuses applications, mais si vous souhaitez l’utiliser comme carnet d’adresses, nous devons ajouter un détail supplémentaire. Cela va être un signe comme dans l'icône d'origine. Alors choisissez votre police préférée (j'adore Myriad Pro), réglez la taille de la police sur 250pt et tapez le caractère "@".

Étape 36

Ensuite, tournez le signe at à environ 10 ° à gauche…

Étape 37

… Et appliquer ces paramètres.

Étape 38

Copiez l'arobase, déplacez-le de quelques pixels vers le haut et de quelques pixels à droite. Effacez le style de calque, changez la couleur en blanc et appliquez les nouveaux paramètres. N'oubliez pas de régler l'opacité à 80%.

Conclusion

J'espère que ce tutoriel vous sera utile en tant que point de départ pour la création d'icônes de style Mac OSX. Sinon, vous pouvez au moins télécharger cette icône pour Mac OSX gratuitement sous licence CC et en prime. J'ai ajouté une autre version en deux couleurs: vert et noir. Pour télécharger cette icône, cliquez sur l'image ci-dessous. Voici un article décrivant comment installer des icônes Mac OSX personnalisées..