Combien de temps passez-vous à essayer de créer des illustrations uniques et créatives pour vos créations? Probablement beaucoup plus longtemps que vous ne le souhaiteriez.

Boucleur vous permet de réduire le temps d'illustration tout en créant des illustrations complètement originales. Il s’agit d’un nouveau plug-in Sketch qui vous permet de créer des formes et des motifs uniques en dupliquant, en déplaçant et en faisant pivoter des objets plusieurs fois, ce qui donne des illustrations époustouflantes.

Aujourd'hui, je vais vous montrer comment, sans aucune compétence en dessin, vous pouvez créer des illustrations incroyables pour les conceptions, bannières et arrière-plans de vos applications en moins de 20 secondes.

N'hésitez pas à télécharger l'original Fichier d'esquisse J'ai créé pour suivre pendant le tutoriel.

Pourquoi Looper?

J'ai fait des recherches sur différents plugins et applications pour m'aider à créer des illustrations originales, et j'ai trouvé que Looper fonctionne mieux car il me permet de créer des illustrations complexes en quelques secondes que je rêvais de créer seul. Vous pouvez créer de nombreux types d'illustrations, comme des motifs réguliers ou aléatoires, des arrière-plans et même des formes logotypées.

Le tutoriel

Flux et astuces générales du Looper

Lorsque vous travaillez avec Looper, vous devez toujours commencer par une forme simple. Pour exécuter votre «boucle», vous pouvez utiliser CMD + L ou vous pouvez parcourir le menu des plugins en cliquant sur: PLUGIN> LOOPER> LOOP. Vous pouvez utiliser Looper sur un seul calque ou un groupe de calques.

Gardez à l'esprit que si vous créez des motifs complexes et volumineux, le rendu du résultat peut prendre un certain temps. De plus, j’ai remarqué que Looper fonctionne mieux si vous définissez ses valeurs avec les flèches haut et bas de votre clavier. Si vous maintenez la touche MAJ enfoncée tout en utilisant la flèche vers le haut ou vers le bas, les valeurs augmenteront de dix au lieu d'un.

Formes abstraites

La meilleure façon de comprendre le fonctionnement de Looper est de créer quelque chose de totalement abstrait. Commencez avec un outil vectoriel et dessinez la forme que vous aimez. Ensuite, lancez votre boucle (CMD + L) et jouez avec les paramètres comme bon vous semble.

comment fonctionne node js

De la même manière, vous pouvez également créer des arrière-plans complets. L'ajout de dégradés au calque vous donne des effets vraiment sympas:

Modèles simples

Looper n'est pas seulement idéal pour générer des formes abstraites, mais aussi pour créer des motifs simples, créatifs ou aléatoires. Dans l'exemple ci-dessus, j'ai utilisé un seul rectangle pour former l'ensemble du motif. Pour créer des patterns également distribués, utilisez la section «Form a Grid» dans Looper. J'ai randomisé mon motif par rotation et opacité, ce qui m'a donné un effet fantastique en moins de 10 secondes:

Ornements

Vous pouvez également créer de superbes ornements mathématiquement parfaits avec Looper. Tracez une ligne verticale ou horizontale et ajoutez des éléments à côté. J'ai créé un exemple simple avec une ligne et un cercle. Regardez ci-dessous pour voir combien d'ornements différents j'ai réussi à créer simplement en modifiant le nombre de copies. C'est une bonne habitude de commencer avec le plus petit nombre possible de copies de formes et de les augmenter une par une. De cette façon, vous verrez comment votre modèle change au fil du temps.

Remarquez que j'utilise uniquement la fonction de rotation par défaut et que je commence par deux copies:

Effet 3D

J'ai remarqué qu'en jouant avec les calques Sketch, vous pouvez créer des effets 3D impressionnants. La clé pour créer une image en 3D est d'ajouter des dégradés et des ombres à votre forme de départ et de dupliquer cette forme dans la section «Déplacer». La rotation et la mise à l'échelle aident ici aussi:

Sphère de particules

Que pouvez-vous construire en dupliquant un seul point? Eh bien, pour une chose, vous pouvez créer une sphère faite de particules. Après avoir généré beaucoup de points avec une échelle et une opacité aléatoires, masquez-les simplement avec la forme ovale dans Sketch:

comment faire des polices personnalisées

Effet de vague

Que pourrions-nous faire avec une ligne droite? En déplaçant la ligne de quelques pixels le long d'un axe et en la tournant très doucement, vous pouvez créer une onde froide, comme dans l'exemple ci-dessous:

Tron 1982 - Grilles de construction

Enfin et surtout, recréons l'illustration de Tron. En dupliquant deux formes simples, une ligne et un rectangle, vous pouvez créer une grille de perspective:

Tout ce que vous avez à faire est d'utiliser Looper deux fois sur ces formes. Tout d'abord, dupliquez le rectangle avec l'échelle incrémentée de pourcentages. Vous pouvez augmenter l'opacité de toutes les instances dans la section Opacité. Dans la deuxième étape, dupliquez la ligne avec Rotation sur les paramètres par défaut.

Et voilà! Une grille de perspective d'aspect Tron réalisée en 20 secondes!

Vous pouvez utiliser la grille de perspective pour créer d'autres illustrations 3D comme dans l'exemple ci-dessous:

Autres exemples - Sydney

À ce stade, vous avez probablement remarqué que Looper vous offre des possibilités illimitées pour créer des illustrations vraiment complexes. Ci-dessous, j'ai fait trois autres exemples inspirants, chacun avec une forme de départ et les paramètres nécessaires pour les créer afin que vous puissiez les reproduire ou les utiliser comme base pour créer vos propres illustrations.

Presque l'étoile de la mort

Mer profonde

• • •

Lectures complémentaires sur le blog ApeeScape Design:

• eCommerce UX - Un aperçu des meilleures pratiques (avec infographie)
• L'importance de la conception centrée sur l'humain dans la conception de produits
• Les meilleurs portefeuilles UX Designer - Études de cas et exemples inspirants
• Principes heuristiques pour les interfaces mobiles
• Conception anticipative: comment créer des expériences utilisateur magiques