Comment créer une mascotte de site Web

Quelques fois par mois, nous revoyons certains des articles préférés de nos lecteurs au cours de l'histoire de Vectortuts +. Ce tutoriel de Scott Jackson a été publié le 8 mai 2009..

Dans ce tutoriel, je vais donner un aperçu de la manière dont un personnage a été développé, du brief initial au mascotte final du site, puis de créer plusieurs poses pour différentes parties du site..

Ce personnage a été conçu à l’origine pour un site Envato qui n’a pas décollé, et l’œuvre n’est pas utilisée. C’est pourquoi j’ai retravaillé cela un peu pour devenir un personnage de Vectortuts +. Vérifions le processus de fabrication de cette mascotte de site Web et apprenons des tas de conseils en cours de route.!


1. Introduction

La conception des personnages et des mascottes n'est pas nouvelle et existe depuis longtemps, mais avec l'avènement d'Internet, elle a connu une sorte de renaissance. Sur Internet, nous sommes confrontés à un déluge d’informations, de données et d’images. L'utilisation d'une mascotte de site peut constituer un moyen efficace de réduire cette surcharge d'informations et de vous connecter au spectateur sur le plan émotionnel. Les mascottes et les personnages peuvent être utilisés dans le cadre d'un logo ou indépendamment, mais l'avantage qu'ils ont sur un logo seul est qu'ils ont un caractère et une personnalité qui leur est propre..

J'ai utilisé Adobe Illustrator pour créer la mascotte à l'aide de ses outils et fonctions les plus élémentaires. Pour cette raison, je vais me concentrer sur le développement et le déroulement des opérations. J'espère que cela vous donnera un aperçu de la création de personnage et vous aidera à créer vos propres mascottes.

Je vous donnerai également un aperçu des meilleurs sites de création de personnages sur le Web et vous donnerai quelques conseils au fur et à mesure..


2.Le cadeau gratuit

Pour plus d'inspiration et en prime, les bonnes personnes chez Vectortuts + vous donnent la possibilité de télécharger les fichiers originaux pour votre propre usage, ce qui est un super freebie. Voir le fichier de téléchargement pour plus d’informations sur l’utilisation. Le personnage est disponible dans les formats AI et EPS.


3.Le bref

Bien que cette étude soit fictive, elle s’appuyait à l’origine sur un projet Envato. Cependant, pour les besoins de ce tutoriel, je suppose que cette mascotte sera destinée au site Vectortuts +, ce qui nous donne une cible à utiliser comme exemple..

La mascotte sera "The Tuts Guy" et il représentera le lectorat de Vectortuts +, ainsi que les rédacteurs des tutoriels. Une disposition positive, amicale et un appel à tous les groupes d'âge. Pour paraître professionnel mais toujours décontracté. De plus, il doit s’intégrer à la palette de couleurs du site pour pouvoir facilement intégrer le caractère à la mise en page..


4.Avant de commencer, voici quelques points à garder à l'esprit

De par leur nature, les mascottes sont destinées à être utilisées sur le Web. N'oubliez pas de définir votre fichier sur RVB.

Comme mentionné dans The Brief, le personnage doit pouvoir s'intégrer au jeu de couleurs du site. Avec une mascotte humaine, cela peut être fait en utilisant les vêtements et les cheveux pour faire correspondre ou accentuer le site. Avec un animal ou une création fictive, vous avez beaucoup plus de flexibilité.

Accordez une attention particulière au public cible, à l'image et au site. Regardons quelques autres conseils aussi.


5. Proportions

Le personnage doit-il être intégré à côté d'un logo ou d'un en-tête? Si tel est le cas, la toile est généralement une large bande et l'utilisation d'une silhouette haute et droite peut donner l'impression qu'elle est perdue et que les traits du visage s'atténuent. Alors, que peut-on faire à ce sujet?

Rendez les caractères aussi proches que possible de la largeur.


6.Cadrer l'image

En recadrant la partie supérieure du corps et en vous concentrant sur les caractéristiques les plus importantes, vous pouvez économiser de l'espace et augmenter l'impact des mascottes. Vous pouvez également voir comment le caractère plus condensé se prête beaucoup mieux au format de l'en-tête..


7.La dynamique de l'image ou de la profondeur de champ

Cela peut être très utile pour le concepteur qui construit le site, si vous leur fournissez une mascotte dans un plan, côté élévation, car cela facilitera beaucoup l'intégration dans la mise en page du site. Sinon, la profondeur de champ peut donner une image plus intéressante..


8. Poids et contours

Je n'ai pas de règle absolue en matière de poids de ligne ou d'utilisation du travail en ligne. Bien que ne pas utiliser de travail à la chaîne du tout puisse donner une impression de légèreté à la mascotte, il peut également se perdre en arrière-plan, en particulier si elle est occupée. L'utilisation de traits et / ou d'un contour plus épais peut donner à l'image plus de présence et de définition..


9. Tout est dans les yeux

Il y a un dicton qui dit que les yeux sont la fenêtre de l'âme. Avec le design des personnages, les yeux sont la première chose à laquelle nous nous connectons. Nous nous connectons lorsque nous voyons un personnage pour la première fois de la même manière que lorsque nous rencontrons quelqu'un pour la première fois. Il est donc important de prendre cela en compte dans votre conception. Les yeux peuvent communiquer très rapidement une richesse d'émotions et donner de la vie à un personnage..

Il est facile de penser que plus le rendu des yeux est complexe, mieux ce sera, mais en fait, correctement effectué, deux points peuvent tout aussi bien le faire..


10. Commencer et mettre mes idées sur papier

Bien que je dispose d’une tablette Wacom, je l’utilise très rarement pour dessiner des idées. Je préfère le crayon, le papier et la capacité de donner un sens à un tas d'idées chaotiques disséminées dans mon espace de travail.

À ce stade, j'essaie de tout mettre sur papier avant de passer au crible pour voir ce qui fonctionne pour moi. J'affine ensuite les bruts avant d'utiliser un pavé de mise en page pour les bruts finaux. Je préfère les tablettes graphiques au papier calque, car elles sont beaucoup moins chères et que le travail au crayon est moins sujet au maculage..


11. Il est temps de passer au numérique

J'envoie très rarement des ébauches au crayon à un client. Je fais habituellement le petit effort supplémentaire et les convertis en vecteurs, en particulier s'il doit y avoir un certain nombre de poses du même caractère afin qu'elles aient une idée claire du résultat final. Cela m'a conduit à peine à utiliser un scanner en faveur de la prise d'un cliché des crayons bruts avec un appareil photo numérique, voire de l'appareil photo de mon téléphone portable, qui est facilement et rapidement importé via Bluetooth.

Ici, j’ai travaillé sur un certain nombre de variantes pour que le client puisse regarder.

Je vais comprendre que j'ai eu des retours et que nous allons choisir le personnage n ° 4, mais je pense que cela fonctionnerait mieux avec une barbe enlevée..
Voici le personnage principal (moins la barbiche) qui apparaîtra sur la page d'accueil du site Web, mais je dois maintenant développer les personnages pour le reste du site..


12.Retour aux visuels

Celles-ci auront toutes un emplacement très similaire à celui du personnage principal, ce qui permet de réutiliser des éléments du personnage d'origine. Cela réduit non seulement votre charge de travail de façon spectaculaire, mais ajoute également un sens de continuité au site. Avoir les différentes parties du personnage sur des calques individuels est d'une grande aide ici, car bouger les bras et incliner la tête peuvent transformer la pose.

Les mascottes ne sauraient en dire plus sur leur arrière-plan, mais il est possible d'ajuster la posture et d'ajouter quelques accessoires simples au spectateur..

Utiliser le dessin original pour le personnage principal en conjonction avec un pavé de présentation me donne un peu de longueur d'avance en ce qui concerne les autres poses. Pour le reste des poses, il suffit de les soumettre au client et d’apporter les modifications nécessaires jusqu’à ce qu’il en soit satisfait..

Ci-dessous sont les personnages finis. Tout ce qui reste à faire est de les fournir au client dans le format de son choix. Dans ce cas, vous pouvez télécharger les fichiers originaux pour votre usage personnel ici.


13.Informations complémentaires et inspiration

Voici un aperçu de certains de mes sites préférés basés sur la conception de personnages pour vous inspirer:

  • Mojizu.com - Moji est le mot japonais qui désigne le caractère et c'est en quoi consiste ce site. C'est une communauté de concepteurs de personnages où vous pouvez vous inscrire pour créer un profil et soumettre vos propres Mojis. Une guerre hebdomadaire avec Moji les affronte dans un combat pour trouver le champion Moji à travers une série de rounds.

  • Ilikecharacters.com - Un tout nouveau site dédié à la présentation du meilleur en matière de création de personnages créé par l'artiste Steve Rack.

  • characterhunter - Un blog qui fait suite à une recherche continue de personnages dans les rues de Tokyo. Un bon si comme moi vous aimez kawaii (mignon). Écrit en français sur le design japonais, ce site montre comment le design d'une mascotte peut surmonter les différences de langue et de culture..

  • Smashing Magazine - Didacticiels d’illustration pour 40 personnages - Une série complète de didacticiels pour la conception de 40 personnages.

  • vinylpulse - Le design des personnages qui est passé dans le monde 3D.

  • patchtogether - Si vous avez toujours rêvé de faire votre travail en vinyle, cet endroit pourrait vous convenir.

Abonnez-vous au fil RSS Vectortuts + pour rester au courant des derniers tutoriels et articles sur les vecteurs.