Comment dessiner l'icône Apple iCloud - Tutoriel Photoshop

iCloud, le nouveau service de stockage en nuage introduit par l'Apple a un logo assez simple mais beau. L'icône est faite de matériaux métalliques et a une icône de nuage extrudé sur le dessus. Vous ne le savez peut-être pas, mais la création de ce type d'icône est vraiment très facile, et voici l'icone iCloud que nous vous apprendrons à dessiner dans ce post, en utilisant Photoshop!

Ça a l'air un peu compliqué, mais en fait, tout ce dont nous avons besoin, ce sont des styles de calques, des formes vectorielles de base et un peu de dessin manuel. Entrons-y!

Étape 1

Commencez par créer un nouveau fichier avec la taille 512 x 512 px. Activer l'outil Rectangle arrondi. Dans la barre d'options, définissez son rayon sur 75 px. Cliquez et faites glisser pour dessiner un rectangle arrondi. Définissez sa couleur sur # 5d5d5d.

Double-cliquez sur le calque pour ouvrir la boîte de dialogue Style de calque. Ajoutez une superposition de dégradés avec un dégradé par défaut, du noir au blanc, et réduisez son opacité à 76%.

Étape 2

Appuyez sur Ctrl + J pour dupliquer la forme du calque. Cliquez sur Edition> Transformation libre ou appuyez sur Ctrl + T pour effectuer la transformation. Dans la barre d'options, définissez sa taille sur 98%.

Dans le panneau Calques, supprimez le style de calque en faisant glisser l'icône fx sur l'icône de la corbeille, en bas à droite du panneau Calques. Ensuite, double-cliquez sur la vignette des calques pour faire apparaître la boîte de dialogue Style de calque. Ajouter une ombre intérieure et une superposition de dégradés.

Dans le paramètre Incrustation du dégradé, définissez le style du dégradé sur l'angle. Cliquez sur la zone d'aperçu du dégradé pour ouvrir l'éditeur de dégradés et utilisez la combinaison de couleurs # 8e8e8e, # a5a4a4 et # d8d8d8. N'hésitez pas à jouer avec chaque position du marqueur, assurez-vous de définir la même couleur dans le premier et le dernier marqueur.

C'est le résultat après l'ajout de styles de calque.

Étape 3

Créer un nouveau calque Remplissez-le avec le dégradé radial du blanc au noir.

Maintenez Alt et faites glisser le masque vectoriel du calque précédent vers le calque courant. Le dégradé est maintenant ajusté à l'intérieur de l'icône.

Ouvrez le style de calque et changez son mode de fusion en écran.

Étape 4

Dessinez un rectangle arrondi à l'intérieur de l'icône. Définissez son rayon à 75px avec la couleur # 2a2a2a.

Ajouter 2 autres formes de cercle (Choisissez l'outil Ellipse, maintenez la touche Maj enfoncée et faites-la glisser). Dans la barre d'options, définissez le mode de chemin sur Ajouter à la zone de forme.

Double-cliquez sur le calque du nuage, puis ajoutez Ombre interne, Biseau et estampage et Trait.

Étape 5

Dupliquer le calque du nuage en appuyant sur Ctrl + J. Supprimer son style de calque en faisant glisser l'icône fx de sa vignette de calque sur l'icône de la corbeille. Redimensionnez-le (Ctrl + T) à 89%.

Changez la couleur de la forme en # 5d5d5d. Réorganiser la position de chaque forme jusqu'à ce que la petite taille des nuages ​​soit proportionnelle au plus grand nuage.

Double-cliquez sur le calque du nuage et ajoutez les styles de calque suivants.

Pour l'incrustation en dégradé, veillez à utiliser le paramètre exact de l'incrustation en dégradé à l'étape 2.

Voici ce que nous avons après avoir ajouté des styles de calque au petit nuage.

Étape 6: Ajouter une texture de métal

La conception actuelle est très plate et trop propre. Ajoutons une texture métallique subtile sur la surface. Créer un nouveau calque Cliquez sur Edition> Remplir et sélectionnez Utiliser: Noir pour remplir le nouveau calque avec du noir.

Cliquez sur Filtre> Bruit> Ajouter un bruit.

Cliquez sur Filtre> Flou> Flou radial. Sélectionnez Flou Méthode: Essorage et Qualité: Meilleur.

Ce filtre fera tourner le bruit et créera une onde circulaire.

Étape 7

Cliquez sur Image> Réglages> Niveau ou appuyez sur Ctrl + L. Dans la boîte de dialogue, faites glisser le curseur noir dans les niveaux de sortie vers le centre pour éclaircir l'onde circulaire.

Maintenez Alt et faites glisser le masque vectoriel du calque de base de l'icône vers le calque courant. L'onde circulaire est maintenant à l'intérieur de l'icône.

Activer l'outil de sélection de chemin et sélectionnez le chemin de nuage que nous avons créé à l'étape 4. Appuyez sur Ctrl + C pour l'enregistrer dans le presse-papiers. Appuyez sur Ctrl + V pour le coller sur le masque vectoriel de l'onde circulaire. Définissez son mode de chemin sur Subtract.

Enfin, copiez et collez le plus petit chemin de nuage que nous avons créé à l'étape 5. Définissez son mode de chemin sur Ajouter à la forme.

Voici le résultat. L'onde circulaire est à l'intérieur de la surface de l'icône.

Changez le mode de fusion du calque à l'écran.

Étape 8: Ombre

Créez un nouveau calque et placez-le derrière tous les calques. Créez une sélection elliptique (en utilisant l'outil ellipse) sous l'icône. Remplissez la sélection avec du noir.

Adoucir l'ombre à l'aide du filtre, Flou gaussien. Cliquez sur Filtre> Flou> Flou gaussien.

Dupliquer l'ombre en appuyant sur Ctrl + J. Ajouter un autre flou gaussien, pour cette fois utiliser un plus grand rayon pour obtenir une ombre plus douce. Si l'ombre est encore trop dure, vous pouvez baisser l'opacité de la couche.

Résultat final

C'est le résultat de notre tutoriel. Comme vous pouvez le voir, le processus de création de cette icône est très facile. Nous avons juste besoin d'utiliser des formes vectorielles de base et des styles de calques. J'espère que vous apprécierez ce tutoriel. Si vous avez des questions, n'hésitez pas à demander!

Télécharger PSD

Impossible d'atteindre certaines étapes? Voici le fichier PSD du résultat pour tester et jouer avec.

• Tutoriel Icon iCloud Fichier PSD

Nouvelles ressources pour les développeurs Web - Mars 2017

Avec CLI (Command Line Interface), nous sommes en mesure de rationaliser et d'automatiser les flux de travail de développement Web . Et c'est pourquoi, dans cet épisode, nous avons inclus un certain nombre de CLI impressionnantes que vous pouvez installer sur votre ordinateur local ou exécuter des tâches sur le serveur. En

(Conseils techniques et de conception)

Micro est l'éditeur de texte basé sur le terminal que vous allez adorer

Le développement Web a beaucoup changé au fil des ans. Il y a une dizaine d'années, le terminal n'était plus nécessaire pour créer des sites Web. De nos jours, il s'agit pratiquement d'un incontournable avec Gulp / Grunt, npm, et le contrôle de version comme Git tout en cours d'exécution via la ligne de commande.Si vous

(Conseils techniques et de conception)