Introduction

Bonjour à 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 réseaux sociaux, les forums, les chats, les applications de messagerie et plus encore. Alors, commençons.

 

...

 

 

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

 

 

1. Explorer les plates-formes et les tailles

La première étape consiste à explorer les différentes plates-formes ou les plates-formes 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 plates-formes.

 

LES FENÊTRES.

Appuyez sur Windows + Maj + S ou Impr-écran (touche)

 

MAC.

Appuyez sur Maj + Commande + 3 ou Maj + Commande + 4 (pour les zones de capture)

 

iPad.

Appuyez sur le bouton du haut + le volume ou le bouton d'accueil. Vous pouvez également balayer vers le haut depuis le coin inférieur gauche avec le crayon pomme.

 

TABLETTE SAMSUNG.

Appuyez sur Power + volume bas ou sur le bouton d'accueil (simultanément). Vous pouvez également utiliser Palm Swipe sur l'écran. Ou le menu Air Command avec le stylet S.

 

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, accédez à 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.

 

Prenez note de toutes les tailles où le profil est utilisé, commentaires, connexion-déconnexion, nom d'utilisateur, etc. Nous pouvons revoir les numéros de taille plus tard pour créer une maquette/modèle pour visualiser l'image/l'icône de profil.

 

Voici ma liste avec les numéros de taille :

 

Connexion / Connexion 32x32 px

Grand Profil 220x220 px

Nom d'utilisateur 120x120 px

Commentaires 50x50px

Icône 24x24px

 

 

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 entre les tailles de profil les plus courantes utilisées sur différentes plates-formes telles que Twitter, Instagram, YouTube, Facebook, etc. 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 commerciaux, photos de paysages à animaux de compagnie, illustrations numériques et traditionnelles, pixel-art et plus encore.

 

Plus loin dans ce tutoriel, nous allons voir 3 exemples et expliquer les décisions prises au cours du processus de conception. Nous allons en voir (a) un pour le pixel-art, un autre avec des photos (b) mais vous pouvez utiliser les mêmes astuces avec des illustrations aplaties ou scannées. Et un pour (c) les logos de noms.

 

REMARQUE : Gardez à l'esprit qu'avec ces exemples, nous allons nous concentrer sur le processus et ne pas plonger dans les détails des outils, ou expliquer étape par étape comment créer les images de profil, mais plutôt comment les optimiser pour mieux paraître dans de petits cercles. et carrés 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, Reconnaissable, Évolutivité et Forme de recadrage. Faisons-en un rapide examen.

 

SIMPLICITÉ

 

Évitez trop de détails. Les détails peuvent être beaux dans les grandes tailles, mais ils peuvent être difficiles à voir et à comprendre dans les petites tailles.

 

 

CONTRASTE

 

Il facilite la perception de l'image de profil. Vous pouvez utiliser des valeurs claires ou foncées ou des couleurs complémentaires/opposées. Vous pouvez également utiliser l'arrière-plan 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 rendront ce processus beaucoup plus facile.

 

 

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 photo/icône de profil.

 

 

FORME DE CULTURE

 

Faites votre composition et alignez l'image en sachant qu'elle va être recadrée par la forme (cercle, carré) de la disposition de la plate-forme. Évitez les cultures involontaires. Vous pouvez également utiliser ou incorporer la forme du recadrage dans votre conception.

 

 

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

 

 

4. Maquette de profil/modèle (étape par étape + téléchargement gratuit)

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

 

Cependant, vous pouvez télécharger les maquettes prêtes à l'emploi à partir des liens ci-dessous avec un PDF expliquant comment les utiliser et les choses 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 étant les vôtres. Ensuite, vous pouvez continuer ou passer au chapitre suivant : Mise à jour des objets de fichier dans l'installation de plusieurs fenêtres.

 

REMARQUE : Même si j'appelle ces 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échargez une maquette/un modèle pour les profils à l'aide d'un canevas de 1 000 x 1 000 pixels.

 

Téléchargez une maquette / un modèle pour les profils Pixel Art à l'aide d'une toile de 56x56 px.

 

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

Que vous créiez un nouveau profil à partir de rien ou que vous en adaptiez un. Nous allons travailler avec un format d'image 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 dans Préréglage, sélectionnez "Carré (1000 x 1000px)". Nommez votre document de profil et enregistrez-le en tant que fichier Clip Studio Paint .clip. Cela nous permettra de l'utiliser comme objet de fichier. Mais si vous préférez, vous pouvez également utiliser des fichiers .psd pour créer des objets fichiers.

 

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

 

4.2 Maquette/Modèle avec des objets de 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 emplacement avec le fichier image de profil/icône que nous avons créé auparavant.

 

 

IMPORTER LE PROFIL EN TANT QU'OBJET FICHIER

 

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

 

(1) Depuis 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 Calques avec une icône d'un fichier lié à côté (4).

 

 

REDIMENSIONNER AVEC LA GRILLE

 

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

 

 

Connexion / Connexion 32x32 px

Grand Profil 220x220 px

Nom d'utilisateur 120x120 px

Commentaires 50x50px

Icône 24x24px

 

 

Ensuite, allez dans Affichage> Paramètres de la grille / de la barre de règle et modifiez le nombre de divisions sur 1 et faites correspondre l'écart 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 depuis 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 d'informations (3). Cliquez sur la vignette (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 de l'outil (1). Cette méthode fonctionnera avec des profils 1000x1000px et avec du pixel-art. Si vous ne voyez pas l'option, cliquez sur l'icône de la clé et rendez l'option visible dans la palette de détails de l'outil secondaire en cliquant sur l'œil (2) à côté.

 

 

 

FORME DE CULTURE

 

 

Maintenant dans un calque vide en dessous et avec Snap to Grid actif (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 [Clip au calque ci-dessous] (2). Cela émulera le recadrage elliptique utilisé sur différentes plates-formes.

 

Modifiez ensuite à nouveau la taille de la grille pour la faire correspondre aux autres tailles de profil. Répétez le processus avec chacun jusqu'à ce que vous remplissiez 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 sombres. Et faites des cultures rectangulaires elliptiques et arrondies pour prévisualiser l'apparence de votre profil sur différents sites et plates-formes.

 

 

5. Mise à jour des objets de fichier dans plusieurs configurations de Windows

OUVRIR ET RÉORGANISER LES DOCUMENTS FENÊTRES

 

 

Si vous avez téléchargé les maquettes ci-dessus. Ouvrez ou faites glisser le fichier Image de profil (ou Profil Pixel Art) et l'un des mokcups/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 d'emplacement.

 

Cliquez ensuite sur (1) et faites glisser l'onglet de l'un des canevas et ancrez-le à gauche ou à droite, relâchez-le lorsque vous voyez la superposition rouge (2) apparaître.

 

Maintenant, nous pouvons voir les deux documents en même temps. Vous pouvez utiliser Ajuster au navigateur pour le canevas Profil 1 par 1, dans la palette Navigateur. Cette fonctionnalité peut être vraiment utile spécialement avec le pixel-art.

 

SAUVEGARDE ET MISE A JOUR DES OBJETS FICHIERS

 

 

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 dans le canevas Mockup/Template. Vous pouvez également accéder à Calque > Objets de fichier > Mettre à jour tous les objets de fichier.

 

Avec cette configuration, nous pouvons travailler sur les images/icônes des profils et vérifier « Les 5 principes de conception ou guides pour les profils » dans le processus. Vous pouvez enregistrer plusieurs étapes en visualisant les différentes tailles en même temps, dans une disposition similaire aux plates-formes sur lesquelles vous allez utiliser votre image de profil.

 

 

6. Processus de conception (icône de profil/image)

Dans ce chapitre, nous allons utiliser "Les 5 principes ou guides" pour les profils afin d'expliquer les décisions prises lors du processus de conception. Juste un petit rappel ce sont : Simplicité, Contraste, Évolutivité, Reconnaissable, Crop Shape.

 

 

6.1 Étapes du processus

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

 

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

2. Identifiez les problèmes ou problèmes dans l'image de profil.

3. Améliorer, essayer différentes approches et solutions. Révisez et continuez à vous améliorer si besoin.

4. Revé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 plonger dans les détails des outils comme nous l'avons fait dans les chapitres précédents. Si vous souhaitez des tutoriels ou des conseils avec plus de détails 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 fait une Silhouette sans antialiasing basée sur un modèle 3D. Et vérifiez si la forme était (1) Reconnaissable comme une tête. Puis peint sans anticrénelage en utilisant une palette de gris réduite de six valeurs pour (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 (3) Contraste dans le visage du sujet. Dans les tailles de profils plus petites, la tête semblait trop grosse et un peu disproportionnée. J'ai donc ajouté un dégradé de tramage à l'arrière pour éviter ou diminuer cette perception visuelle et améliorer la (4) évolutivité.

 

 

 

REMARQUE : Vous pouvez améliorer la simplicité du pixel art en utilisant un canevas plus petit 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 de photo/illustration

Au premier coup d'œil, j'ai remarqué que l'image avait besoin de plus (1) Contraste pour être utilisée comme profil. J'ai donc fait une sélection et coupé le sujet (faucon) de l'arrière-plan. Collez-le dans le canevas Profil 1000x1000px et placez-le 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 contraste (3). Pour améliorer le (4) contraste, j'ai utilisé les calques de réglage, la luminosité / le contraste, la courbe de tonalité et la carte de dégradé. Essayer 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 de la culture la plus utilisée sur les plates-formes. Cela a également aidé à créer différents plans et sensations de profondeur. 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, je revérifie les petites tailles du profil (7) Évolutivité.

 

 

 

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

 

 

c) Nom Logo Exemple

Dans ce nom de logo personnel fictif. On peut remarquer que le nom semble un peu long à lire aux petites tailles (1) Évolutivité. Donc, dans ce cas, j'ai décidé d'utiliser uniquement le "a" pour (2) Simplicité.

 

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

 

 

REMARQUE : Vous n'avez pas toujours besoin d'utiliser une seule lettre ou une seule couleur plate. 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 à de petites tailles. Par exemple, si votre police est trop claire ou trop fine, vous pouvez essayer une option en gras de la même famille de polices ou ajouter un effet de bordure de la même couleur.

 

 

...

 

 

7. Exportation de profils pour les plates-formes

Avant d'exporter l'image/l'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 plate-forme 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 petit dans le cas du pixel art. Essayez de toujours redimensionner l'image d'abord par vous-même et ne vous appuyez pas sur la méthode de la plate-forme pour redimensionner l'image.

 

REMARQUE IMPORTANTE : dans les deux cas, faites toujours une copie en premier et redimensionnez la copie et non le fichier d'origine ou source.

 

 

 

Pour les grandes images au-dessus de 2048, je vous recommande d'aller dans Edition > Modifier la résolution de l'image. Et sélectionnez 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 pixel-art, je vous recommande d'aller dans Édition> Modifier la résolution de l'image. Et sélectionnez la méthode Bords durs (voisin le plus proche). Vous pouvez modifier le numéro d'échelle jusqu'à ce que vous obteniez une taille proche de la recommandation. Ou entrez la taille exacte et vérifiez si les carrés ont la même apparence dans l'original et la copie.

 

 

FORMATS

 

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

 

 

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

 

 

Les fichiers JPEG sont largement utilisés avec les photographies et peuvent réduire considérablement la taille du fichier. Cependant, trop de compression 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 du pixel-art, des logos et des icônes propres. De plus, les fichiers JPG ne prennent pas en charge la transparence.

 

 

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

 

 

EXPORTATION (MONOCOUCHE)

 

Pour exporter votre image, accédez à Fichier> Exporter (une seule couche) et sélectionnez le format souhaité.

 

Maintenant, pour la couleur d'expression, sélectionnez la couleur RVB (1). Et gardez le rapport d'échelle (2) à 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 conserver une qualité supérieure à 80 et intégrez le profil ICC. Appuyez ensuite sur OK.

 

Si vous modifiez la taille du profil, n'oubliez pas d'en enregistrer une copie avant de redimensionner l'image. Et ne modifiez pas la taille du 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 plates-formes telles que 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, processus et principes que nous avons vus pour concevoir un profil animé.

 

 

Sommaire

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 en même temps. 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, exporter les profils pour les plateformes sociales, les applications de messagerie, les forums de discussion et plus encore.

 

Donc, j'espère que vous avez trouvé quelque chose d'utile que vous pouvez utiliser dans votre propre flux de travail. Merci à tous d'avoir lu l'article. C'est Ed qui dit "A bientôt".