Impressionnant 3D Médias sociaux Facebook Icône Tutorial Photoshop

Qui a dit que vous avez besoin de Cinema 4D, 3DSMax ou même Illustrator pour créer une simple icône 3D? Dans ce tutoriel, vous allez apprendre à le faire dans Photoshop à l'aide de masques de calque.

Le point principal de ce tutoriel est de montrer comment nous sommes en mesure d'appliquer semi-réaliste éclairage et les ombres dans Photoshop [omettre la nécessité d'outils de manipulation 3D]. Notez que nous avons utilisé le terme «semi-réaliste», nous avons voulu donner l'illusion d'un objet 3D, en même temps, en gardant l'effet illustration.

En outre, la variété de perspective, nous sommes capables de réaliser uniquement dans Photoshop est de meer cours. Faire profiter de la fonction Extrusion et biseautage dans Adobe Illustrator. Néanmoins, mis à part être en mesure de donner un éclairage raisonnable de l'icône de Photoshop, nous avons également pu terminer l'impression d'un objet 3D faux - seulement avec l'utilisation de Photoshop.

Avant-première

1. Créez un nouveau document Photoshop.

Créer un 512 nouveaux pixels par 512 pixels de documents Photoshop, la taille maximale standard pour les icônes d'application.

2. Contour Logo Facebook

Afin de faciliter le processus de création de savoir, de sorte que vous n'auriez pas à dessiner votre propre logo Facebook, téléchargez le Schéma Facebook Logo Vector au format AI ici:. Http://j.mp/facebookLogoVectorOutline

Copiez le vecteur dans votre presse-papiers, CTRL ou CMD + C

3. Collez le Schéma Facebook Logo Vector dans Photoshop en tant qu'objet dynamique.

Collez le vecteur dans le document nouvellement rendu Photoshop, CTRL ou CMD + V.

Sélectionnez qu'objet dynamique dans la boîte de dialogue, appuyez sur OK puis appuyez sur Entrée [pour se débarrasser de l'outil de redimensionnement].

4. Mettre en place le Gradient Overlay - gradient d'abord.

La principale différence entre cette capture d'écran à partir des captures d'écran est l'arrière-plan qui a été collé po Ne vous inquiétez pas, ce n'est pas une partie de ce tutoriel, il est là juste pour rendre les choses meilleures.

Faites un clic droit sur le calque avec le contour logo et sélectionnez Options de fusion.

Sur le côté gauche du panneau, cochez la case Gradient Overlay.

Réglez le curseur de dégradé d'abord à la couleur # 00225b.

4. Mettre en place le Gradient Overlay - Deuxième gradient.

Placez le curseur de second gradient de la couleur # 006ed5.

5. Mettre en place la couleur du trait.

Cochez la case ci-dessous Course Gradient Overlay.

Taille:. 1px 
extérieur: Position. 
Mode de fusion:. normal 
Opacité: 100%. 
Couleur: # 00103e.

6. Mettre en place la Lueur interne.

Cochez la case Inner Glow.

Mode de fusion:. Superposition 
Opacité:. 100% 
Bruit:. 0 
Couleur: # ffffff. 
Technique: Plus doux. 
Source: Edge. 
Choke: 0. 
Taille: 2px.

7. Mettre en place l'Ombre interne.

Cochez la case Ombre interne.

Mode de fusion:. Overlay 
Couleur: # ffffff. 
Opacité: 100%. 
Angle: 120 degrés. 
Décochez la case Utiliser l'éclairage global. 
Distance: 1px. 
Choke: 0%. 
Taille: 0px.

8. Créer des perspectives.

Pour créer le biseau de l'icône, dupliquez le calque avec le contour logo [qui a maintenant les styles affichés ci-dessus mis en œuvre].

(1) Déplacez ce calque nouvellement dupliqué vers la droite pour créer l'illusion 3D.

(2) Déplacer ce calque nouvellement dupliqués en dessous du calque d'origine.

(3) Sur le calque dupliqué, cliquez sur les icônes oeil sur Ombre interne, Lueur interne et maladies à les décocher. Nous voulons seulement l'incrustation en dégradé montrant sur le calque dupliqué.

Appelons cette couche de la «couche biseau".

9. Peindre les ombres - 1.

(1) Dupliquer le "biseau couche" nous avons fait à l'étape 8.

Appelons cette nouvelle couche double emploi avec la "couche d'ombres".

(2) Cette fois, décochez la case Gradient Overlay dessus en cliquant sur l'icône d'oeil à côté de lui.

Ou nous pouvons simplement un clic droit sur la "couche ombres" et choisissez Effacer le style de calque (nous allons perdre le style de calque). C'est préférence personnelle.

(3) La couleur de l'icône de la "couche ombres" doit être noir.

(4) Assurez-vous que cette couche sélectionnée et cliquez sur l'icône Masque Vector Set ci-dessous, son icône est un rectangle avec un cercle à l'intérieur.

(5) Ensuite, assurez-vous que vous disposez du masque de calque de la «couche ombres" est sélectionné, pas la couche elle-même.

10. Peindre les ombres - 2.

Encore une fois, assurez-vous d'avoir sélectionné le masque de calque de la «couche ombres" est sélectionné.

Choisissez l'outil Pinceau.

Faites votre couleur de premier plan # 000000.

Avec l'outil Pinceau [ou l'outil Couleur de remplissage], de la peinture partout dans la «couche ombres" pour cacher tout le noir, de sorte que tout ce qui est révélé est le gradient bleu de la «couche biseau". Vous saurez pourquoi nous faisons cela en une seconde.

11. Peindre les ombres - 3.

Sélectionnez l'outil Pinceau.

Faites votre plan # ffffff.

Assurez-vous de sélectionner le masque de calque sur la "couche d'ombres" créé à l'étape 9.

Avec l'outil Pinceau, peindre les coins de l'icône de la "couche ombres" avec # ffffff de révéler les ombres.

La raison pour laquelle nous avons franchi toutes les couleurs noir à l'étape 10 était de sorte que nous avons une approche plus naturelle des ombres peinture.

Nous pourrions facilement utiliser l'outil Pinceau chargé avec la couleur # 000000 pour cacher les ombres et commencer par là, mais il semblerait plutôt comme si nous étions faits saillants pas peindre les ombres.

Si nous faisons cela de cette façon l'inverse, il semble comme si nous étions peindre les ombres [c'est ce que nous visons], à la place.

Pour obtenir les meilleurs résultats, il est préférable d'étudier la façon dont vous l'éclairage et les ombres tombent sur vos objets domestiques.

12. Peindre les ombres - 4.

13. Peindre les Ombres - 5.

14. Peindre les Faits saillants - 1.

Avec la même technique utilisée ci-dessus en ce qui concerne les masques de calque de l'étape 9 à l'étape 13, nous allons peindre quelques points saillants sur le front de l'icône.

Le processus est similaire à celui utilisé à l'étape 10.

Dupliquer la première couche, nous avons fait à l'étape 3. Cette nouvelle couche dupliquée fournir les faits saillants sur le [devant] le visage de l'icône. Appelons cela la «couche avant highlights".

Faites un clic droit sur cette "couche avant highlights" et choisissez Effacer le style de calque. La couleur ne serait # 000000 ou noir.

Faites un clic droit sur elle à nouveau et choisissez Options de fusion.

Cochez la case Incrustation couleur et choisissez la couleur # ffffff ou blanc.

La couleur de l'icône devrait maintenant être de couleur blanche.

Avec la «couche faits saillants avant" est sélectionné, cliquez sur l'icône Vector Set masque ci-dessous pour définir un masque de calque sur cette couche, son icône est un rectangle avec un cercle à l'intérieur.

15. Peindre les Faits saillants - 2.

Assurez-vous que le masque de calque sélectionné de la «couche faits saillants avant" est sélectionné.

Choisissez l'outil Pinceau.

Faites votre couleur de premier plan # 000000.

Avec l'outil Pinceau [ou la couleur de remplissage Outil], peindre toute la "couche avant highlights" de cacher tout le blanc de sorte que tout ce qui est révélé est le gradient bleu de la face avant.

Sélectionnez l'outil Pinceau.

Faites votre plan # ffffff.

Assurez-vous de sélectionner le masque de calque sur la "couche avant highlights".

Avec l'outil Pinceau, peindre la face avant de l'icône de la "couche faits saillants front» avec # ffffff de révéler forts.

Produit final

Et c'est tout ce qu'il ya à faire.

J'espère que ça vous plaira, et si vous avez des questions s'il vous plaît laissez un commentaire ci-dessous.