Comment créer un effet de texte inspiré de Lego dans Adobe Photoshop

Ce que vous allez créer

Dans ce didacticiel, nous allons apprendre à créer un effet de texte 3D réaliste sans utiliser de logiciel 3D. J'utiliserai spécifiquement Adobe Photoshop, mais vous devriez pouvoir le faire avec votre logiciel 3D préféré. Nous allons commencer par créer un seul bloc et, grâce à une série de techniques, commencer à créer un mot. Nous finirons le mot en ajoutant des éclairages et des ombres personnalisés. Commençons! 

1. Construire le bloc

Étape 1

Créer un Nouveau document avec les dimensions de la toile 1000px par 1000px.

Étape 2

Aller à Voir> Afficher> Grille. Cela aidera à aligner nos formes plus tard.

Étape 3

Sélectionnez le Outil Rectangle et, en utilisant les éléments du menu supérieur, changez le Remplir au gris. Maintenant, tracez un rectangle sur la toile. Nommez ce calque "Avant".

Étape 4

Utilisez le Outil de sélection directe pour sélectionner les deux extrémités les plus à gauche et faites-les glisser vers le bas pour créer une forme de parallélogramme. Une invite peut apparaître vous demandant si vous souhaitez convertir cela en un chemin normal. Cliquez sur Oui.

Étape 5

La forme apparaît un peu large. En option, continuez d’utiliser le Outil de sélection directe ajuster la forme.

Étape 6

Créez une copie du calque "Front" et utilisez le Outil de sélection directe pour sélectionner les deux points les plus à droite. Faites glisser les points à gauche pour créer le côté de notre bloc. Nommez ce calque "Côté".

Étape 7

Avec le calque "Front" sélectionné, Control-Drag une copie de cette couche vers l'arrière de notre bloc.

Étape 8

Faites la même chose avec le calque "Côté". Nous devrions maintenant avoir quatre côtés à notre bloc.

Étape 9

Pour nettoyer nos couches, sélectionnez les deux copies de couches qui composent le dos de notre bloc et Fusionner ensemble (Contrôle-E). Renommez ce calque "Top" et placez-le au bas de notre pile de calques.

Étape 10

Sélectionnez le calque "Front" et ajoutez un Incrustation en dégradé Style de calque

Étape 11

Ajouter un Style de calque de superposition de couleurs à la couche "côté". Utilisez la couleur indiquée ci-dessous.

Étape 12

Enfin, ajoutez un Incrustation en dégradé à la couche "Top". Utilisez les couleurs comme indiqué.

2. Créer une cheville

Étape 1

Sur un nouveau calque, utilisez le Outil Ellipse créer une ellipse avec un remplissage gris clair

Étape 2

presse Contrôle-t autoriser Transformer mode et utiliser le Flèche vers le bas touche pour pousser la position de l'ellipse vers le bas 2px. presse Revenir commettre la transformation.

Étape 3

Pressage Contrôle-Alt-Shift-T va maintenant dupliquer le calque et répéter la transformation. Continuez à appuyer jusqu'à ce que la cheville ait la bonne profondeur.

Étape 4

dans le Couches panneau, sélectionnez toutes les couches que nous venons de créer, sauf celle du haut. Fusionner (Contrôle-E) eux autres ensemble.

Étape 5

Ensuite, déplacez les calques fusionnés sous l’ellipse supérieure. Ajouter un Style de calque superposé en dégradé imiter l'éclairage venant du côté droit de notre scène.

Étape 6

À l'heure actuelle, la cheville semble avoir des bords durs. Pour que les bords apparaissent arrondis, sélectionnez le calque d’ellipse supérieur et Transformer (Contrôle-T) légèrement pour réduire la taille.

Étape 7

Ensuite, utilisez le Outil de floutage brouiller les deux bords qui composent la cheville.

3. terminer les chevilles

Étape 1

L'étape suivante consiste à créer l'illusion d'une réflexion subtile à partir de la cheville. Commencez par sélectionner les deux couches qui constituent la cheville et en appuyant sur Contrôle-G à Groupe.

Étape 2

Faites une copie du groupe et appuyez sur Contrôle-e à Fusionner le groupe en une seule couche.

Étape 3

Déplacez la copie de la cheville de sorte qu’elle soit visible sous la cheville originale et ajustez la Niveaux (Contrôle-L) pour le rendre plus sombre.

Étape 4

Ensuite, allez à Filtre> Flou> Flou directionnel. Met le Rayon à 90 degrés et le Distance à 38px.

Étape 5

Met le Mode de fusion à Lumière forte. A titre facultatif, ajoutez un Flou gaussien (Filtre> Flou> Flou gaussien) avec un Rayon de 4.6px pour adoucir davantage la réflexion.

Étape 6

Ensuite, ajoutez un Style de calque d'ombre interne auGroupe "Peg".

Étape 7

Enfin, regroupez toutes les couches composant la cheville. Placez quatre copies de la cheville autour du sommet du bloc. Redimensionner (Contrôle-T) si nécessaire.

4. Terminer le bloc

Étape 1

Nous allons maintenant travailler sur l'adoucissement des bords. Sélectionnez toutes les couches qui composent le bloc et Fusionner (Contrôle-E) eux autres ensemble. Clic-droit la couche et choisissez Pixelliser.

Étape 2

La couche de blocs étant toujours sélectionnée, cliquez sur le bouton Verrouiller les pixels transparents icône.

Étape 3

En utilisant le Outil de floutage, met le Force à 100% et brouiller les trois bords intérieurs de notre bloc.

Étape 4

Le bord semble plus doux, mais nécessite encore un peu de travail. Créez un nouveau calque et faites-en un calque de découpage en calque "Bloc". Utilisez le Pinceau (B) de couleur gris clair et tracez une ligne sur les trois bords intérieurs.

Étape 5

Appliquer le Flou gaussien filtrer avec Rayon de 7.0px. Cela ajoutera une petite quantité de surbrillance sur les bords.

Étape 6

Ensuite, sélectionnez le calque "Bloquer" et décochez la case Verrouiller les pixels transparents icône. Utilisez le Outil Gomme (E) effacer les cinq coins visibles du bloc pour donner l’apparence de coins arrondis.

Étape 7

Enfin, sélectionnez toutes les couches qui composent le bloc et les chevilles. Clic-droit et sélectionnez Convertir en objet intelligent.

5. Construire une pile de blocs

Étape 1

À ce stade, nous devons décider quel mot nous voulons construire. Une fois qu'un mot a été sélectionné, il est utile de créer une maquette 2D. L'image ci-dessous montre une maquette du mot "créer" dessiné avec uniquement des pixels. Chaque pixel représente un bloc.

Étape 2

Pour commencer à construire le mot, créez un Nouveau document aux dimensions de 3300px par 2550px

Étape 3

Revenez à notre document d'origine et faites glisser l'objet intelligent dans le nouveau document et redimensionnez-le à l'aide de Transformer (Contrôle-T).

Étape 4

Nous allons maintenant faire des copies du bloc. Tout d'abord, assurez-vous que le Outil de déplacement (V) est sélectionné. Zoomez sur le bloc, puis Alt-Clic-Glisser faire une copie. 

Placez la copie à côté du bloc d'origine.

Étape 5

Reportez-vous à notre maquette 2D et comptez le nombre de pixels sur les lettres. Dans cet exemple, il y a neuf pixels. Continuez à faire glisser des copies du bloc jusqu'à ce que nous ayons neuf blocs d'affilée.

Étape 6

Sélectionnez tous les calques et Alt-Clic-Glisser une copie de la ligne entière. Placez cette nouvelle rangée de blocs directement au-dessus de la rangée d'origine.

Étape 7

Reportez-vous à la maquette 2D pour voir combien de pixels ont la hauteur de nos lettres (dans ce cas, sa hauteur est de 13 pixels). Continuez à construire les rangées de blocs jusqu'à obtenir 13 rangées. 

Remarque: En portant Décalage contraindra le mouvement des blocs à l'axe des Y (ligne verticale).

Étape 8

Déplacez toute cette pile du côté droit de la toile pour nous laisser de la place pour travailler vers la gauche.

6. Copier les piles

Étape 1

Tenir Contrôle, dessinez une sélection autour de la pile de blocs. Tous les calques de la sélection sont maintenant sélectionnés.

Étape 2

Alt-Clic-Glisser sortir une copie de la pile. Positionnez-le à gauche de la pile d'origine.

Étape 3

Continuez à créer suffisamment d'exemplaires pour chaque lettre de notre mot. Puisque le mot "créer" a six lettres, je ferais normalement six copies des piles. Cependant, comme la lettre "e" apparaît deux fois, je ne créerai que cinq piles et je ferai une copie de la lettre "e" le moment venu..

7. façonner les lettres

Étape 1

La prochaine étape consiste à commencer à façonner les lettres. En vous référant à la maquette 2D si nécessaire, commencez à supprimer les blocs inutiles. Cela peut être fait par Clic de contrôle un bloc pour le sélectionner et en appuyant sur Effacer.

Étape 2

Pour sélectionner plusieurs blocs à la fois, Clic de contrôle le premier bloc, puis maintenez Maj-contrôle en cliquant sur des blocs supplémentaires. 

Étape 3

Répétez cette étape pour chaque lettre. Remarque: En arrivant à la lettre "t", vous remarquerez peut-être que le nombre de blocs est insuffisant. Ne t'inquiète pas; nous réparerons le "t" plus tard.

8. Terminer les lettres

Étape 1

Pour faire une copie de la lettre "e", maintenez Contrôle et dessinez une sélection autour de la lettre.

Étape 2

Alt-Clic-Glisser sortir une copie de la lettre et la positionner comme indiqué. En option, appuyez sur Control-Shift- [. Cela déplacera les calques sélectionnés au bas de la pile de calques de manière à ce qu'ils soient derrière les autres calques..

Étape 3

Pour terminer la lettre "t", maintenez Contrôle et dessinez une sélection autour du haut du "t" et de sa barre transversale.

Étape 4

Déplacer les calques sélectionnés vers le haut et à l'écart.

Étape 5

Suivant, Clic de contrôle les trois premiers blocs du "t" restant en tenant Décalage pour les sélectionner

Étape 6

Alt-Clic-Glisser sortir une copie des trois blocs. Placez-les sur les blocs existants

Étape 7

Sélectionnez les blocs qui constituent la partie supérieure du "t" et replacez-les sur la partie inférieure.

Étape 8

Pour terminer les lettres, sélectionnez chaque lettre une par une et espacez-les pour préparer les prochaines étapes. Il peut être utile de tracer une ligne temporaire pour aligner les lettres..

9. Ajouter plus de profondeur

Étape 1

Nous allons construire notre texte pour qu'il soit composé de trois couches. Cependant, avant de copier des calques, nous devons trouver un moyen de nous aider à identifier chaque ligne de texte. Nous pouvons le faire en assignant des couleurs à chaque ligne. 

Pour commencer, maintenez Contrôle et dessinez une sélection autour de tout le texte. dans le Couches panneau, Clic-droit sur n'importe quel calque et lui attribuer une couleur. La couleur sera maintenant assignée à tous les calques sélectionnés.

Étape 2

Alt-Clic-Glisser sortir une copie du texte. Positionnez cette nouvelle ligne de texte comme indiqué. Ne désélectionnez pas ces couches.

Étape 3

Avec les couches toujours sélectionnées, allez à la Couches panneau et attribuer une couleur différente pour représenter la deuxième ligne.

Étape 4

Répétez cette procédure pour la troisième ligne de texte. Assurez-vous de sélectionner une couleur différente pour les calques.

Étape 5

Une fois que vous avez trois rangées de blocs, passez et positionnez chaque lettre pour resserrer l’espacement..

10. Supprimer les blocs inutiles (facultatif)

Étape 1

Comme nous travaillons avec beaucoup de calques, Photoshop peut ralentir un peu (cela dépend aussi de votre ordinateur). En option, parcourez les deux premières lignes pour supprimer tous les blocs masqués à 100%.. 

Afin de déterminer quels blocs sont 100% masqués, nous devrons sélectionner toutes les couches constituant la première ligne. Une méthode rapide consiste à utiliser la fonctionnalité de filtrage dans Couches panneau. Allez-y et filtrez par Couleur et sélectionnez la même couleur que les calques de la rangée avant.

Étape 2

Maintenant que toutes les couches avant sont isolées, nous pouvons utiliser le Couches panneau pour sélectionner tous les calques et appuyer sur (Contrôle-G) grouper.

Étape 3

Désactivez le filtre en appuyant sur la touche Interrupteur rouge dans le Couches panneau. Nous pouvons maintenant voir le groupe que nous venons de créer.

Étape 4

Donner au groupe un Remplir de 0% et ajoutez le trait par défaut en utilisant les styles de calque. Clique le Icône de verrouillage verrouiller le groupe

Étape 5

Utiliser le trait comme guide, Clic de contrôle les blocs de la deuxième ligne qui sont complètement à l'intérieur du trait et appuyez sur Effacer retirer.

Étape 6

Faites ceci pour le reste de cette rangée.

Étape 7

Répétez cette étape pour la rangée arrière. Une fois terminé, Dissocier toutes les couches.

11. Colorez les blocs

Étape 1

Maintenant, il est temps d'ajouter de la couleur aux blocs. Commencez par utiliser le filtre dans le Couches panneau pour isoler la première rangée.

Étape 2

Clic de contrôle un bloc dans la rangée avant et ajoutez ce qui suit Style de calque.

Étape 3

dans le Couches panneau, localisez le style de calque et Clic-droit. Sélectionner Copier le style de calque.

Étape 4

Utilisez le Couches panneau pour sélectionner tous les calques visibles (qui doivent se composer de la rangée avant entière). Clic-droit n'importe quelle couche et Coller le style de calque. Cela devrait appliquer le style de calque à la première rangée de blocs. Comme vous pouvez le voir dans l'image ci-dessous, toutes les couches jaunes ont maintenant la Icône FX (indiquant qu'un style de calque est appliqué).

Étape 5

Assurez-vous que toutes les couches sont désélectionnées (vous pouvez le faire en Clic de contrôle une zone vide de la toile). À présent, Clic de contrôle un des blocs au centre de la première lettre et ajoutez ce qui suit Style de calque.

Étape 6

Clic-droit l'effet et Copier le style de calque. À présent, Clic de contrôle les autres blocs au centre de la lettre pour les sélectionner et coller le style de calque sur les blocs. 

Il convient de noter que la tenue Décalage permettra à plusieurs blocs d'être sélectionnés.

Étape 7

Continuez à sélectionner des blocs et à coller le Style de calque pour le reste des lettres

12. Ajustez la scène

Étape 1

Sélectionnez le Outil de recadrage et ajustez les poignées pour recadrer la scène.

Étape 2

Avant de passer aux ombres, nous pouvons ajouter de la couleur à la dernière rangée de blocs. Utiliser le filtre dans le Couches panneau, isolez la rangée arrière en affichant uniquement les calques de couleur rouge. Sélectionner tous les calques.

Étape 3

Décochez le filtre pour afficher toutes les couches. Avec seulement les couches de couleur rouge sélectionnées, appuyez sur Contrôle-G les regrouper.

Étape 4

Ajouter le style de calque suivant au groupe.

13. Ajouter des ombres de base

Étape 1

Créez un nouveau calque et placez-le au bas de la pile de calques. En utilisant le Outil gradient, clique sur le Éditeur de dégradé dans la barre de menu supérieure. Réglez la première couleur sur gris clair et changez le Préréglé à Premier plan à transparent.

Étape 2

Ajoutez quelques dégradés en haut et en bas de la scène.

Étape 3

Ensuite, utilisez le Outil Lasso Polygonal et sélectionnez manuellement la base de chaque lettre. En portant Décalage vous permettra de faire plusieurs sélections

Étape 4

Créer un nouveau calque et Remplir les sélections avec du noir.

Étape 5

Donner à la base des ombres un petit Flou gaussien (Filtre> Flou> Flou gaussien).

Étape 6

Faire une copie de cette couche (Control-J) et ajouter un Flou de mouvement (Filtre> Flou> Flou de mouvement). Assurez-vous que l'angle correspond à la direction des lettres.

Étape 7

L'étape précédente a rendu les ombres un peu sévères aux coins. Appliquer le Flou gaussien filtrer une fois de plus pour adoucir ces ombres.

Étape 8

Faites une copie de ce calque et ajoutez un Flou gaussien filtrer avec un rayon beaucoup plus élevé. Cela crée une ombre ambiante dans la scène.

14. Ajouter des ombres directes

Étape 1

L'étape suivante consiste à créer une ombre sur le sol qui est projetée par notre texte. Pour ce faire, utilisez le Outil Lasso Polygonal sélectionner la face avant de notre texte.

Étape 2

Sur un nouveau calque, Remplir la sélection avec du noir.

Étape 3

En utilisant Transformer (Contrôle-T), inclinez le texte jusqu'à ce qu'il soit debout. Cela réinitialise essentiellement la position pour que nous puissions avoir un meilleur contrôle sur elle lorsque nous la transformons en ombre portée..

Étape 4

Convertissez ce calque en objet intelligent. presse Contrôle-t et transformer la forme pour qu’elle apparaisse comme une ombre portée de l’objet texte.

Étape 5

Étant donné que notre ombre était une image 2D et que notre texte était en 3D, nous devrons faire un travail supplémentaire pour la rendre plus épaisse. Commencez par faire une copie de l'objet intelligent et appuyez sur Contrôle-t transformer à nouveau la forme. 

Comme nous utilisons un objet intelligent, les poignées de transformation seront faciles à ajuster. Allez-y et faites un petit ajustement à la deuxième ombre.

Étape 6

Remplissez les zones de l'ombre qui ont été décalées pour les faire apparaître comme si elles sont d'un seul objet.

Étape 7

Fusionner les deux ombres ensemble (Contrôle-E).

Étape 8

Ajouter un Flou de mouvement filtrer avec et Angle de -12 degrés et un Distance de 17 pixels.

Étape 9

Ajouter un Flou gaussien filtrer avec Rayon de 1.2px.

Étape 10

Ajouter un Masque de calque et, en utilisant une plus grande brosse douce avec le Opacité mis à 30%, peindre sur le haut de l'ombre pour le faire disparaître un peu.

Étape 11

Diminuer Opacité à 46% et mettre le Mode de fusion à Multiplier.

15. Terminer les ombres directes

Étape 1

L'étape suivante consiste à ajouter des ombres aux lettres elles-mêmes. En regardant notre scène, il devrait être évident que la source de lumière est en haut et à droite de notre scène. En utilisant ces informations, nous allons ajouter des ombres à gauche de nos objets lettre.. 

Étape 2

Pour commencer, sélectionnez tous les calques qui composent l’objet texte et Groupe (Control-G) eux autres ensemble. Renommez le groupe "'Créer' Texte".

Étape 3

Créez un nouveau calque en tant que calque de découpage dans le groupe "Créer un texte" et définissez le Opacité à 77%. Cela nous aidera à voir à travers l'ombre à mesure que nous les ajoutons à la scène. Utilisez le Outil de sélection polygonale faire des sélections de l'endroit où les ombres pourraient tomber.

Étape 4

Créer un nouveau calque et Remplir avec du bleu (couleur temporaire qui nous aidera à mieux visualiser les ombres

Étape 5

En option, utilisez le Outil pour effacer (réglé sur une petite taille) et effacez les chevilles qui ne devraient pas avoir d'ombres.

Étape 6

Continuez ceci pour chaque lettre.

Étape 7

Lorsque toutes les ombres ont été ajoutées, changez sa couleur en noir, définissez le paramètre Mode de fusion à Multiplier, et ajuster le Opacité