Introduction

Bonjour à toutes et à tous, aujourd'hui nous allons voir comment créer et utiliser une maquette/un modèle pour visualiser votre icône/image de profil dans différentes tailles. Suivre des principes ou des guides pour optimiser le profil pendant le processus de conception. Et enfin, comment exporter les images afin que nous puissions les utiliser sur diverses plateformes telles que : les médias sociaux, les forums, les chats, les applications de messagerie et plus encore. Alors, commençons.

 

...

 

NOTE : Les images utilisées dans ce tutoriel ont été conçues, créées ou produites par l'auteur du tutoriel. Les logos de Clip Studio Paint, Clip Studio et CELSYS appartiennent à leurs propriétaires.

 

 

1. Exploration des plateformes et des tailles

La première étape consiste à explorer les différentes plateformes ou les plateformes sur lesquelles vous allez télécharger l'image de profil. Il peut s'agir de médias sociaux, de chats, d'applications de messagerie ou de tout ce que vous prévoyez d'utiliser.

 

Prenez une capture d'écran de l'appareil que vous utilisez. Vous pouvez utiliser des raccourcis ou d'autres méthodes pour capturer la disposition des différentes plateformes.

 

WINDOWS.

Appuyez sur Windows+Shift+S ou Impr. écran (touche)

 

MAC.

Appuyez sur Shift+Command+3 ou Shift+Command+4 (pour les zones de capture)

 

iPAD.

Appuyez sur le bouton supérieur + volume ou le bouton d'accueil. Vous pouvez également glisser vers le haut depuis le coin inférieur gauche avec l'Apple Pencil.

 

TABLETTE SAMSUNG.

Appuyez simultanément sur Alimentation + volume bas ou le bouton d'accueil. Vous pouvez également utiliser le balayage de la paume sur l'écran. Ou le menu Air Command avec le S Pen.

 

Ouvrez vos captures d'écran dans Clip Studio Paint et utilisez l'outil de sélection rectangulaire et la palette d'informations pour vérifier les tailles utilisées pour les profils. Si vous ne voyez pas la palette d'informations, allez dans Fenêtre > Informations. Vous pouvez vérifier la largeur et la hauteur représentées par un H pour horizontal et un V pour vertical.

 

Notez toutes les tailles où le profil est utilisé, les commentaires, la connexion-déconnexion, le nom d'utilisateur, etc. Nous pourrons revoir les chiffres des tailles plus tard pour créer une maquette/un modèle afin de visualiser l'image/l'icône de profil.

 

Voici ma liste avec les chiffres des tailles :

 

Connexion / Login 32x32 px

Grand profil 220x220 px

Nom d'utilisateur 120x120 px

Commentaires 50x50 px

Icône 24x24 px

 

 

Pour ce tutoriel, je vais utiliser des tailles personnalisées basées sur des captures d'écran prises sur un PC Windows. Celles-ci sont proches ou intermédiaires par rapport aux tailles de profil les plus courantes utilisées sur différentes plateformes comme Twitter, Instagram, YouTube, Facebook, et plus encore. Cependant, gardez à l'esprit que ces tailles ne sont pas absolues et peuvent changer pour s'adapter à l'écran de l'appareil que vous utilisez.

 

 

2. Types de profils

Vous pouvez trouver différents types d'images de profil telles que : logos ou symboles, noms personnels ou d'entreprise, photos de paysages ou d'animaux de compagnie, illustrations numériques et traditionnelles, pixel-art et plus encore.

 

Plus tard dans ce tutoriel, nous allons voir 3 exemples et expliquer les décisions prises pendant le processus de conception. Nous allons voir (a) un exemple pour le pixel-art, un autre avec des photos (b) mais vous pouvez utiliser les mêmes astuces avec des illustrations aplaties ou numérisées. Et un pour (c) les logos de nom.

 

NOTE : Gardez à l'esprit qu'avec ces exemples, nous allons nous concentrer sur le processus et non pas sur les détails des outils, ni expliquer étape par étape comment créer les images de profil, mais plutôt comment les optimiser pour qu'elles aient une meilleure apparence dans de petits cercles et carrés en suivant 5 principes ou guides.

 

 

3. Les 5 principes ou guides de conception pour les images/icônes de profil

J'essaie d'utiliser 5 principes ou guides tout au long de mon processus lorsque je conçois une image ou une icône de profil. Ce sont : Simplicité, Contraste, Reconnaissabilité, Évolutivité et Forme de recadrage. Passons-les rapidement en revue.

 

SIMPLICITÉ

 

Évitez trop de détails. Les détails peuvent être superbes en grande taille, mais ils peuvent être difficiles à voir et à comprendre en plus petite taille.

 

 

CONTRASTE

 

Il facilite la perception de l'image de profil. Vous pouvez utiliser des valeurs claires par rapport à des valeurs sombres ou des couleurs complémentaires/opposées. Vous pouvez également utiliser le fond de la plateforme à votre avantage.

 

 

ÉVOLUTIVITÉ

 

Vérifiez si l'image de profil peut s'adapter à différentes tailles. La simplicité et le contraste de l'image faciliteront grandement ce processus.

 

 

RECONNAISSABLE

 

Vous pouvez utiliser des formes ou des silhouettes pour rendre votre image reconnaissable à différentes échelles. Vous pouvez également utiliser des couleurs ou associer une couleur à votre image/icône de profil.

 

 

FORME DE RECADRAGE

 

Réalisez votre composition et alignez l'image en sachant qu'elle sera recadrée par la forme (cercle, carré) de la mise en page de la plateforme. Évitez les recadrages involontaires. Vous pouvez également utiliser ou incorporer la forme du recadrage dans votre conception.

 

 

SUIVANT : Dans les prochains chapitres, nous allons voir comment créer et utiliser une maquette/un modèle pour vérifier facilement ces 5 principes lors de la conception des profils. Après cela, nous allons passer en revue le processus de conception que j'essaie de suivre, puis nous examinerons quelques exemples.

 

 

4. Maquette/Modèle de profil (pas à pas + Téléchargement gratuit)

Dans ce chapitre, nous allons voir les étapes de base pour créer une maquette à l'aide d'objets fichier dans Clip Studio Paint.

 

Cependant, vous pouvez télécharger les maquettes prêtes à l'emploi à partir des liens ci-dessous, accompagnées d'un PDF expliquant comment les utiliser et ce que vous pouvez et ne pouvez pas faire. En résumé, vous pouvez les utiliser mais veuillez ne pas les concéder sous licence, les distribuer ou les vendre comme les vôtres. Ensuite, vous pouvez continuer ou passer au chapitre suivant : Mise à jour des objets fichier dans une configuration multi-fenêtres.

 

NOTE : Même si je les appelle maquettes/modèles. Ce sont des documents de fichier .clip et non les modèles qui apparaissent lorsque vous créez un nouveau document dans Clip Studio Paint.

 

 

LIENS POUR TÉLÉCHARGER DES MAQUETTES/MODÈLES GRATUITS :

 

Télécharger la maquette/le modèle pour les profils utilisant un canevas de 1000x1000px.

 

Télécharger la maquette/le modèle pour les profils Pixel Art utilisant un canevas de 56x56 px.

 

4.1 Création d'un document de profil 1:1

Que vous créiez un nouveau profil à partir de zéro ou que vous en adaptiez un. Nous allons travailler avec un rapport d'aspect 1 sur 1, qui est la norme sur toutes les plateformes.

 

1. Pour les profils utilisant des illustrations, des photos ou des logos de nom. Créez un nouveau document et, à partir de la présélection, choisissez « Carré (1000 x 1000px) ». Nommez votre document de profil et enregistrez-le en tant que fichier .clip de Clip Studio Paint. Cela nous permettra de l'utiliser comme objet fichier. Mais si vous préférez, vous pouvez également utiliser des fichiers .psd pour créer des objets fichier.

 

2. Pour les profils Pixel Art, vous pouvez utiliser de petites tailles de canevas pour rendre les carrés visibles. Je vais créer une taille moyenne de 56x56px. Mais vous pouvez aussi essayer des tailles plus petites comme 16x16, 24x24 pour des pixels plus grands. Ou des canevas plus grands de 64x64px et plus pour ajouter plus de détails. Ensuite, enregistrez le fichier en tant que fichier Clip Studio Paint (.clip) afin que nous puissions l'utiliser comme objet fichier plus tard.

 

4.2 Maquette/Modèle avec objets fichier

 

CRÉER ET ENREGISTRER UN DOCUMENT

 

Nous allons créer un nouveau document de 720x1080 px pour visualiser les images/icônes de profil dans différentes tailles de la même manière que lorsque nous utilisons les médias sociaux, les chats, les applications de messagerie ou d'autres plateformes. Pour simuler un thème sombre, vous pouvez changer la couleur du papier en gris foncé ou en noir.

 

Ensuite, enregistrez le document au même endroit que le fichier Image/Icône de profil que nous avons créé précédemment.

 

 

IMPORTER UN PROFIL COMME OBJET FICHIER

 

Maintenant, importons le fichier .clip de l'image/icône de profil ou du Pixel Art dans le document que nous venons de créer.

 

(1) Dans Fichier > Importer > Créer un objet fichier… Sélectionnez le fichier que vous allez utiliser comme objet fichier et cliquez sur Ouvrir (2).

 

Vous verrez un message (3) concernant l'objet fichier que nous venons de créer. Et l'objet fichier apparaîtra dans la palette des calques avec une icône de fichier lié à côté (4).

 

 

REDIMENSIONNER À L'AIDE DE LA GRILLE

 

Vérifiez les tailles utilisées pour les profils à partir des captures d'écran des plateformes et sites que vous allez utiliser ou consultez la liste des tailles personnalisées utilisées pour ce tutoriel.

 

 

Connexion / Login 32x32 px

Grand profil 220x220 px

Nom d'utilisateur 120x120 px

Commentaires 50x50 px

Icône 24x24 px

 

 

Ensuite, allez dans Affichage > Paramètres de la grille/barre de règles et changez le nombre de divisions à 1 et faites correspondre l'espacement avec l'une des tailles utilisées pour le profil, par exemple 100px. Et rendez la grille visible depuis Affichage > Grille.

 

Maintenant, avec l'outil Objet (raccourci O), redimensionnez l'objet fichier en le faisant glisser par les coins (1) et alignez-le avec l'un des carrés de la grille (2).

 

Vous pouvez vérifier la taille dans la palette (3) Informations. Cliquez sur la miniature (4) en maintenant CTRL dans la palette des calques ou faites un clic droit > Sélection à partir du calque > Créer une sélection.

 

 

IMPORTANT :

Changez la [Méthode d'interpolation] en Haute précision (couleurs moyennes) dans la palette de propriétés d'outil (1). Cette méthode fonctionnera avec les profils de 1000x1000px et le pixel-art. Si vous ne voyez pas l'option, cliquez sur l'icône de clé à molette et rendez l'option visible depuis la palette Détail de l'outil secondaire en cliquant sur l'œil (2) à côté.

 

 

 

FORME DE RECADRAGE

 

 

Maintenant, sur un calque vide en dessous et avec l'aimantation à la grille activée (CTRL+3). Dessinez un cercle 1 par 1 avec l'outil Ellipse.

 

 

Alignez l'objet fichier au-dessus du cercle (1) et dans la palette des calques, sélectionnez l'objet fichier et cliquez sur l'icône [Masque d'écrêtage] (2). Cela simulera le recadrage elliptique utilisé sur différentes plateformes.

 

Ensuite, modifiez à nouveau la taille de la grille pour l'adapter aux autres tailles de profil. Répétez le processus avec chacune jusqu'à ce que vous ayez complété toutes les tailles utilisées pour la connexion (1), le grand profil (2), le nom d'utilisateur (3), les commentaires (4) et les icônes (5).

 

 

Vous pouvez créer des thèmes clairs et foncés. Et réaliser des recadrages elliptiques et rectangulaires arrondis pour prévisualiser l'apparence de votre profil sur différents sites et plateformes.

 

 

5. Mise à jour des objets fichier dans une configuration multi-fenêtres

OUVRIR ET RÉARRANGER LES DOCUMENTS DE FENÊTRE

 

 

Si vous avez téléchargé les maquettes ci-dessus. Ouvrez ou faites glisser le fichier Image de profil (ou Pixel Art de profil) et l'une des maquettes/modèles (Profil - Cercles ou Profil - Carrés) vers Clip Studio Paint.

 

Ou ouvrez les fichiers que vous avez créés et enregistrés dans le même dossier.

 

Ensuite, cliquez (1) et faites glisser l'onglet d'un des canevas et ancrez-le à gauche ou à droite, relâchez-le lorsque vous voyez l'incrustation rouge (2) apparaître.

 

Maintenant, nous pouvons voir les deux documents simultanément. Vous pouvez utiliser Ajuster au Navigateur pour le canevas de profil 1 par 1, dans la palette Navigateur. Cette fonctionnalité peut être très utile, surtout avec le pixel-art.

 

ENREGISTRER ET METTRE À JOUR LES OBJETS FICHIER

 

 

Maintenant, dessinez, peignez ou écrivez n'importe quoi sur le fichier de profil et enregistrez votre travail. Il devrait se mettre à jour automatiquement dans le fichier de maquette.

 

Si vous êtes sur le canevas Maquette/Modèle. Vous pouvez également aller dans Calque > Objets fichier > Mettre à jour tous les objets fichier.

 

Avec cette configuration, nous pouvons travailler sur les images/icônes de profil et vérifier les « 5 principes ou guides de conception pour les profils » au cours du processus. Vous pouvez enregistrer plusieurs étapes en visualisant les différentes tailles simultanément, dans une disposition similaire à celle des plateformes où vous allez utiliser votre image de profil.

 

 

6. Processus de conception (Icône/Image de profil)

Dans ce chapitre, nous allons utiliser « Les 5 principes ou guides » pour les profils afin d'expliquer les décisions prises pendant le processus de conception. Juste un rapide rappel : Simplicité, Contraste, Évolutivité, Reconnaissabilité, Forme de recadrage.

 

 

6.1 Étapes du processus

Les étapes du processus de conception que nous allons suivre sont : Concentrer, Identifier, Améliorer, Vérifier et Répéter.

 

1. Concentrez-vous sur un principe (parmi les 5 mentionnés ci-dessus).

2. Identifiez les problèmes ou les défauts de l'image de profil.

3. Améliorez, essayez différentes approches et solutions. Révisez et continuez à améliorer si nécessaire.

4. Vérifiez l'évolutivité de l'image à l'aide de la maquette et de l'exportation, ou...

5. Répétez. Concentrez-vous sur un autre principe et répétez le processus.

 

 

6.2 Exemples de profils

Nous allons maintenant examiner trois exemples différents en suivant les étapes mentionnées ci-dessus. Nous allons nous concentrer sur le processus sans entrer dans les détails des outils, comme nous l'avons fait dans les chapitres précédents. Si vous souhaitez des tutoriels ou des astuces plus détaillés sur les outils et techniques utilisés pour chaque exemple, faites-le moi savoir dans les commentaires.

 

a) Exemple de Pixel Art

Pour commencer, j'ai créé une silhouette sans anti-aliasing basée sur un modèle 3D. Et j'ai vérifié si la forme était (1) reconnaissable comme une tête. Ensuite, j'ai peint sans anti-aliasing en utilisant une palette de gris réduite de six valeurs pour la (2) simplicité.

 

Après cela, j'ai ajouté de la couleur avec des cartes de dégradé en utilisant des couleurs opposées dans le cercle chromatique pour améliorer et obtenir plus de (3) contraste sur le visage du sujet. Dans les petites tailles de profils, la tête semblait trop grande et un peu disproportionnée. J'ai donc ajouté un dégradé tramé à l'arrière pour éviter ou diminuer cette perception visuelle et améliorer la (4) évolutivité.

 

 

 

NOTE : Vous pouvez améliorer la simplicité en pixel art en utilisant des canevas plus petits et moins de couleurs ou de valeurs. Mais en diminuant les détails et en stylisant davantage l'image. Ensuite, vous pouvez vérifier et explorer différentes solutions pour améliorer l'image si nécessaire et l'exporter.

 

 

b) Exemple Photo/Illustration

Au premier coup d'œil, j'ai remarqué que l'image nécessitait plus de (1) contraste pour être utilisée comme profil. J'ai donc fait une sélection et découpé le sujet (faucon) de l'arrière-plan. Je l'ai collé sur le canevas de profil 1000x1000px et l'ai placé au centre pour éviter (2) de recadrer la tête du sujet (oiseau).

 

Ensuite, j'ai ajouté un calque de dégradé à l'arrière-plan pour créer plus de (3) contraste. Pour améliorer le (4) contraste, j'ai utilisé des calques de réglage, Luminosité/Contraste, Courbe de tonalité et Carte de dégradé. J'ai essayé d'utiliser des couleurs opposées ou complémentaires entre le sujet (faucon) et l'arrière-plan.

 

Après cela, j'ai décidé d'ajouter un cercle (5) pour incorporer la forme du recadrage le plus utilisé sur les plateformes. Cela a également aidé à créer différents plans et une sensation de profondeur. Pour séparer le sujet (faucon) du cercle et de l'arrière-plan, en essayant de préserver la silhouette (6) reconnaissable. J'ai ajouté une ombre subtile entre les deux. Enfin, j'ai revérifié les tailles plus petites du profil (7) évolutivité.

 

 

 

NOTE : Vous pouvez adapter ces astuces et les utiliser avec des photos de personnes, d'animaux de compagnie, d'objets, etc. Vous pouvez également les adapter à des illustrations aplaties ou numérisées. Assurez-vous simplement de créer une copie d'abord et de ne pas travailler directement sur le fichier original ou source.

 

 

c) Exemple de logo nominatif

Dans ce logo nominatif personnel fictif. Nous pouvons remarquer que le nom semble un peu long pour être lu en petites tailles (1) Évolutivité. Donc, dans ce cas, j'ai décidé d'utiliser uniquement le 'a' pour la (2) Simplicité.

 

Ensuite, j'ai remarqué que le 'a' semblait un peu petit pour les commentaires et les tailles d'icônes. J'ai donc agrandi le 'a' pour améliorer son adaptation aux plus petites tailles (3) Évolutivité. Enfin, j'ai choisi une couleur verte à associer au logo dans les deux versions, l'icône et le logo nominatif complet, pour le rendre (4) Reconnaissable.

 

 

NOTE : Vous n'avez pas toujours besoin d'utiliser une seule lettre ou une seule couleur unie. Vous pouvez essayer différentes approches ou solutions et voir ce qui fonctionne le mieux pour vous et le profil. Vérifiez simplement si l'image peut être reconnaissable en petites tailles. Par exemple, si votre police est trop claire ou fine, vous pouvez essayer une option en gras de la même famille de police ou ajouter un effet de bordure de la même couleur.

 

 

...

 

 

7. Exportation de profils pour les plateformes

Avant d'exporter l'image/icône de profil, parlons du moment où vous devez redimensionner l'image et des formats pris en charge par les plateformes.

 

 

 

REDIMENSIONNER L'IMAGE

 

La taille d'image de 1000x1000px devrait être suffisante pour n'importe quel média social, application de messagerie ou forum. Mais chaque plateforme peut vous recommander des tailles minimales ou maximales pour les images de profil. Si votre image est plus grande comme 2048 pixels alors que seulement 400 pixels sont nécessaires. Ou plus petite dans le cas du pixel art. Essayez toujours de redimensionner l'image vous-même en premier et ne vous fiez pas à la méthode de la plateforme pour redimensionner l'image.

 

NOTE IMPORTANTE : Dans les deux cas, faites toujours une copie d'abord et redimensionnez la copie, pas le fichier original ou source.

 

 

 

Pour les grandes images de plus de 2048, je vous recommanderais d'aller dans Édition > Modifier la résolution de l'image. Et de sélectionner la Haute précision (couleurs moyennes) comme méthode d'interpolation. Ensuite, vous pouvez entrer la taille exacte en pixels et appuyer sur OK.

 

 

Pour les images en pixel art, je vous recommanderais d'aller dans Édition > Modifier la résolution de l'image. Et de sélectionner la méthode Bords durs (plus proche voisin). Vous pouvez modifier le nombre d'échelle jusqu'à obtenir une taille proche de celle recommandée. Ou entrer la taille exacte et vérifier si les carrés ont le même aspect dans l'original et la copie.

 

 

FORMATS

 

Les formats les plus courants pour les images de profil sont PNG (Portable Network Graphics) et JPEG ou JPG (Joint Photographic Experts Group).

 

 

Les fichiers PNG sont principalement utilisés avec des logos, du pixel art, des icônes, des illustrations graphiques et des couleurs et graphiques plats ou unis. Ou si vous avez besoin d'une image avec transparence. Les fichiers PNG ont tendance à avoir une meilleure qualité mais peuvent produire des fichiers de plus grande taille.

 

 

Les fichiers JPEG sont largement utilisés avec les photographies et peuvent beaucoup compresser la taille du fichier. Cependant, une compression excessive pourrait diminuer la qualité de l'image. Vous pouvez utiliser ce format avec des images, des illustrations et d'autres graphiques. Mais il n'est pas recommandé de l'utiliser avec le pixel-art, les logos et icônes nets. De plus, les fichiers JPG ne prennent pas en charge la transparence.

 

 

Je vous recommanderais d'utiliser le PNG chaque fois que vous le pouvez ou un JPEG avec une qualité supérieure à 80 %. Gardez à l'esprit que certaines plateformes comme Facebook peuvent compresser encore plus la qualité des images une fois que vous les avez téléchargées.

 

 

EXPORTER (CALQUE UNIQUE)

 

Pour exporter votre image, allez dans Fichier > Exporter (Calque unique) et sélectionnez le format souhaité.

 

Maintenant, pour la couleur d'expression, sélectionnez la couleur RGB (1). Et maintenez le (2) rapport d'échelle à 100 %. Laissez le reste par défaut et appuyez sur OK. Vérifiez l'aperçu (3) et cliquez à nouveau sur OK.

 

Pour les fichiers JPEG, essayez de maintenir la qualité au-dessus de 80 et d'intégrer le profil ICC. Appuyez ensuite sur OK.

 

Si vous modifiez la taille du profil, n'oubliez pas d'enregistrer une copie avant de redimensionner l'image. Et ne modifiez pas la taille sur le document original ou source. Vous pouvez également ajouter les dimensions au nom du fichier pour reconnaître facilement la taille du document.

 

 

INFORMATIONS SUPPLÉMENTAIRES : Certaines plateformes comme Facebook ou Telegram peuvent prendre en charge les fichiers GIF animés ou les fichiers vidéo MP4 lorsqu'ils sont téléchargés depuis un appareil mobile sous Android ou iOS. Même si nous n'avons pas vu d'exemple pour ce type de fichiers, vous pouvez toujours adapter les astuces, le processus et les principes que nous avons vus pour concevoir un profil animé.

 

 

Résumé

Pour récapituler, nous avons vu comment créer et utiliser une maquette/un modèle pour visualiser l'image ou l'icône de profil dans différentes tailles simultanément. Nous avons également vu des principes ou des guides qui peuvent vous aider à créer et à optimiser le profil pendant le processus de conception. Et enfin, quand et comment redimensionner les images, pour exporter les profils pour les plateformes sociales, les applications de messagerie, les chats, les forums et plus encore.

 

J'espère donc que vous avez trouvé quelque chose d'utile que vous pourrez utiliser dans votre propre flux de travail. Merci à tous d'avoir lu l'article. C'est Ed qui vous dit « À bientôt ».