Share
Obtenons notre propre part de la typographie avec cette affiche sombre et sale. Non, ce n'est pas votre conception typique, car nous allons «casser la grille» dans l'espoir de créer une mise en page dynamique et excitante. Alors, prenez les outils habituels du commerce, Photoshop et Illustrator, et suivez ces étapes pour créer votre propre solution.
Avant de commencer, jetons un coup d'œil à l'image que nous allons créer.
Notre éditeur vidéo Gavin Steele a créé un didacticiel vidéo pour compléter ce didacticiel texte + image..
En définitive, le design est un moyen d’exprimer un message, une idée. Pour concevoir, il faut reconnaître le fait que le design n’est en aucun cas une décoration. En faisant valoir votre point de vue, vous vous efforcez de trouver le juste équilibre entre ce qui est beau, esthétique et ce qui est fonctionnel et utile. Je voulais explorer une interprétation visuelle de ce qui est écrit, non seulement à l'aide de caractères typographiques, mais également en développant le concept au moyen d'illustrations visuelles, d'où le verre qui se brise..
Alors quoi de briser la grille, de toute façon? Je ne suis en aucun cas un expert du domaine, mais la planification du réseau, aussi élémentaire soit-elle, a été bénéfique pour moi. Parfois, cependant, toutes ces boîtes grises symétriques peuvent devenir ennuyeuses, et c’est au héros de designer de sauver son jour: casser la grille.
Il est important de garder à l'esprit le fait qu'un réseau endommagé se diversifie et empêche la prévisibilité, tout en contribuant à une conception unifiée. Le déséquilibre intentionnel est contrôlé et géré par le reste des éléments. Même si vous avez des proportions asymétriques, vous finissez toujours par trouver un équilibre. C’est ce que nous visons - nous allons casser une grille carrée typique selon une présentation typographique inhabituelle et l’équilibrer à la fin au moyen de morceaux de verre soigneusement planifiés.
Un exemple pratique de briser la grille peut être vu sur ce site actuel. Notez que le logo Psdtuts + et la cuillère sont tous deux plus bas que la ligne horizontale clairement visible. Tout cela dans le but d'éviter la monotonie, par le biais de détails subtils. Si cela avait été une grille classique, le logo et la cuillère ne seraient pas un peu plus bas que la ligne de séparation.
Commencez un nouveau document Photoshop en utilisant un format de papier A3 à 300 dpi. Pour sélectionner le paramètre A3, choisissez Papier international dans le menu déroulant. Dès que vous commencez, prenez l’outil Dégradé (G) et créez un dégradé linéaire de haut en bas en utilisant un gris moyen (# 837e7e) et un sombre (# 3f3f3f)..
Commençons maintenant à planifier la mise en page. Pour créer une grille de base avec laquelle nous commencerons, allez dans Edition> Préférences> Guides, Grille, Tranches et Nombre. Recherchez la section Grille et assurez-vous que votre grille est divisée par 2,5 cm avec une seule subdivision. Vous devrez peut-être aussi le rendre visible en accédant à Affichage> Afficher> Grille..
Il est temps de planifier le point focal. J'ai placé le mien à une place du centre, pour que la pièce ait une base stable. N'oubliez pas que chaque composition nécessite un équilibre, en particulier celui dans lequel vous expérimentez l'asymétrie. Tout dépend du sentiment que vous avez prévu: si la boîte est plus haute que le centre, vous aurez l’impression de flotter, alors que vous êtes sous, cela suggère un environnement statique..
Le point focal et l'élément d'ancrage de cette pièce est le type. Après tout, ceci est une affiche typographique, n'est-ce pas? La police doit également refléter le concept. Puisqu'il s'agit de grilles, la police elle-même devrait être minimale et intensément géométrique. Bifurk correspond à la description de poste et nous l'utilisons ici. Si ce n'est pas un argument suffisant, il est gratuit aussi, ce qui en fait un bon choix pour un tutoriel.!
Utilisez la grille pour planifier votre mise en page et saisissez vos lettres individuellement en créant un nouveau calque pour chaque lettre. De cette façon, il sera plus facile d'ajuster l'espacement entre les lettres. J'ai utilisé une forme carrée pour planifier l'espacement. Créez une forme personnalisée carrée avec l'outil Rectangle (U) tout en maintenant la touche Maj enfoncée et faites-la glisser entre les lettres. Ce faisant, vous assurez un bon alignement optique.
À ce stade, nous allons changer les couleurs du texte. Faites de subtiles variations de ce rouge lavé: d05252. Note: J'ai aussi activé et créé des guides, pour rendre la mise en page plus claire.
Nous allons donner aux lettres une texture maintenant. La texture sera faite par un nuage de mots en utilisant le texte Lorem Ipsum, qui est étroitement associé à la conception graphique. Vous pouvez créer votre propre nuage ou utiliser cet outil en ligne vraiment astucieux appelé Wordle. C'est un générateur de nuages de mots, et c'est ce que j'ai utilisé ici. Rendez-vous sur leur site et cliquez sur le bouton Créer. Collez du texte factice et générez un nuage. Continuez à effectuer des opérations aléatoires jusqu'à ce que vous trouviez la meilleure forme, puis sélectionnez Téléphoto comme police et Chaleur comme sélection de couleur. Vous pouvez modifier ces paramètres en utilisant les boutons situés au-dessus du nuage..
Nous allons maintenant suivre ce tracé dans un traitement de type style fragmentaire. Prenez donc une capture d'écran du nuage et collez-la (Commande + V) dans un nouveau fichier Illustrator. Encore une fois, vous aurez besoin d'Illustrator pour pouvoir tracer un objet en direct. Accédez à Objet> Suivi en temps réel> Options de traçage. Utilisez la couleur et 256 couleurs. Si vous recherchez une exécution plus précise, ajustez les paramètres du menu..
Pour éliminer les éléments superflus, tels que l'interface Web et l'arrière-plan blanc, vous devez développer le nouvel objet tracé en direct. Appuyez sur le bouton Développer. vous le verrez une fois que l'objet est sélectionné.
A l'aide de l'outil de sélection directe (A), faites glisser et supprimez tous les éléments en excès. Un moyen facile de supprimer le blanc contenu dans les lettres consiste à sélectionner une forme blanche, puis à sélectionner> identiques> couleur de remplissage. Appuyez sur supprimer, et ce sera la fin de vos tracas.
Ensuite, copiez-le (Commande + C) et collez-le (Commande + V) dans votre projet Photoshop. Collez-le en tant qu'objet intelligent afin de pouvoir le développer et le contracter librement sans perte de qualité. Faites-en un masque de découpage en maintenant Alt et en cliquant entre le calque de l'objet dynamique et le calque de la lettre.
J'ai également utilisé le nuage dans d'autres parties de la conception en tant que texture. La seule modification à apporter consiste à ajuster l'opacité du calque aux alentours de 15%..
Il est maintenant temps pour la partie la plus laborieuse: créer le verre brisé. Retournez à Illustrator et dessinez des morceaux de verre cassés à l'aide de l'outil Plume. Conservez une forme rectangulaire comme référence. Remplissez-les avec cette couleur: 757575. Faites des entailles subtiles qui suivent la forme de base, et rappelez-vous que les fissures dans le verre ne sont pas parfaitement droites.
Créez un nouveau calque et utilisez l’un des triangles comme référence pour créer une version plus fragmentée. Assurez-vous de le remplacer par l'ancien, une fois que vous avez terminé.
Sélectionnez l'une des pièces et allez à Effet> 3D> Extruder et biseauter. Suivez les paramètres indiqués ci-dessous.
Une fois que vous l'avez transformé en objet 3D, copiez l'objet et collez-le à sa position exacte (Commande + F). Recherchez votre panneau Apparence sous Fenêtre> Apparence et double-cliquez sur l'effet Extrusion 3D et biseautage indiqué. Cela ouvrira l'effet 3D actuel que vous avez sur le verre. Avec celui-ci, changez seulement le bouton Turn Cap On pour Turn Cap In. Cela simule un effet de transparence en révélant le bord intérieur aussi.
Répétez le processus pour les bits restants. Commencez également à jouer avec la mise en page. Faites quelques petites pièces, comme si vous voyagiez dans l’espace donné, et faites-les pivoter individuellement.
Faites des morceaux plus petits, d'autres plus gros. Copiez de petits fragments et transformez-les en petits morceaux ébréchés. N'oubliez pas de modifier leurs paramètres 3D, afin qu'ils ne ressemblent à aucune pièce précédente.
Juste comme avant, collez-les dans Photoshop. Si vous remarquez des améliorations possibles du positionnement, il vous suffit de double-cliquer sur l'icône d'objet dynamique. Cela vous ramènera à Illustrator, où vous pourrez faire des ajustements. Une fois que vous avez terminé, enregistrez simplement (Commande + S) et revenez à Photoshop. Après un écran de chargement rapide, vos modifications auront été appliquées. Définir le mode de fusion du calque sur Lumière dure.
Créez maintenant un nouveau calque vide (Commande + Maj + N) sur l'objet dynamique et faites-en un masque d'écrêtage. Utilisez un pinceau doux et rond et peignez avec du blanc dans les zones que vous souhaitez mettre en surbrillance. Réduisez l'opacité du calque en fonction de la puissance souhaitée de la lumière..
Dupliquez l'objet dynamique et déplacez-le au-dessus de tous les autres calques. Définir le mode de fusion de son calque sur Écran.
Il est temps de commencer les dégâts et la distorsion. Créez un nouveau calque au-dessus de tous les autres et remplissez-le de blanc. Allez dans Filtre> Déformation> Correction de l'objectif. Modifiez les paramètres de la vignette et faites-le glisser jusqu'à environ -50 ou -60. Définissez le mode de fusion du calque sur Multiplier.
Téléchargez cette texture et insérez-la sur la totalité de la toile dans un nouveau calque. Le désaturer (Commande + Maj + U), définir le mode de fusion de son calque sur Gravure sur couleur et son opacité sur 70%..
Téléchargez une autre texture et collez-la dans un nouveau calque. Définissez le mode de fusion de son calque sur Couleur et Opacité sur 30%. Allez à Image> Réglages> Teinte et Saturation. Changer la teinte à 158.
Allez à Calque> Nouveau calque de réglage> Courbes. Utilisez les paramètres indiqués ci-dessous.
Oui, encore une texture… Mettez celle-ci sur tout, désaturez-la (Commande + Maj + U), réglez le mode de fusion du calque sur Gravure linéaire et Opacité à 20%. La partie spéciale à propos de celui-ci est cependant l'inclusion de lignes horizontales, qui suggèrent une grille.
Et maintenant, une subtile altération de couleur. Nous allons éclaircir le rouge d'un cran au moyen d'un mélangeur de canaux (Calque> Nouveau calque de réglage> Mélangeur de canaux). Utilisez les paramètres trouvés dans l'image suivante.
Pour terminer, j'ai ajouté quelques morceaux de verre derrière le texte et un dégradé gris clair, doux et rond derrière tout.
Astuce: Précisez vos images lorsque vous redimensionnez à des résolutions plus petites. Vous pouvez imaginer qu’un peu d’informations se perdent lorsqu’une image passe de 5000 px à 600 px. Vous pouvez lui donner une nouvelle sensation en affinant avec Filtre> Netteté> Masque flou..
En outre, lors de l'affûtage du grunge, vous pouvez obtenir des résultats assez spectaculaires, car Photoshop crée essentiellement des biseaux subtils. Regardez les lettres ci-dessous: Avez-vous remarqué à quel point les lettres rouges accentuées semblent avoir un biseau d'un pixel? Eh bien, c'est de l'affûtage.
Juste n'en faites pas trop! Gardez un œil sur les bords déjà coupants, car ils peuvent être endommagés lors de l’affûtage..
Nous avons maintenant terminé! J'ai hâte de vous voir mettre ces techniques à profit.
Accentsconagua