Comment créer un logo pour un site web: Tutoriel étape par étape

Comment créer un logo pour un site web - Clevious
Il est bien connu qu'un logo réussi est ce que les visiteurs mémorisent et associent à un service ou à un site web.

L'importance des logos change d'un site web à l'autre. Les logos peuvent être moins importants pour les blogs, mais ils revêtent une grande importance dans les sites web qui vendent des produits ou fournissent des services.

Un mauvais logo dans un nouveau site web sérieux de type e-commerce peut faire fuire les visiteurs et jouer le rôle de barrière pour eux — entre être un visiteur et être un client — par conséquent, peu importe le nombre de visiteurs que le site peut recevoir, la plupart d'entre eux ne deviendront jamais des clients étant donné le fait qu'un mauvais logo signifie que le service offert est amateur.

Faire un bon logo pour un site web est une étape très importante pour réussir dans son business en ligne.

Pour faire un logo professionnel, certaines personnes préfèrent embaucher des designers professionnels car il semble difficile de créer quelque chose d'original sur Photoshop.

Même si c'est une bonne idée d'embaucher des designers professionnels pour la création de logos, les services qu'ils fournissent sont généralement coûteux et ne sont pas à la porté de tout le monde.

L'option moins coûteuse — souvent considérée comme une alternative à la première — consiste à créer un logo avec une application web telle que Logo Garden. Ce dernier permet à ses utilisateurs de personnaliser un logo parmi un grand nombre de logos prêts rangés dans plusieurs catégories.

Dans ce tutoriel, je me concentre sur la question de comment créer un logo gratuitement sans payer un centime.

Le but de ce tutoriel est de vous montrer comment créer un logo professionnel, visuellement attrayant qui contribuera au renforcement de la mémoire qui se crée autour de votre site.

En tant que développeur web intéressé par le web design, ayant créé des logos pour mes sites web avec l'aide de conseils de designers professionnels que j'ai lus dans quelques de leurs livres, et avec certaines de mes observations personnelles, mes expériences seront précieuses pour vous de savoir comment je crée mes propres logos.

Ce que vous allez lire dans ce tutoriel est probablement ce que certains designers ne veulent pas que vous sachiez, car concevoir pour certains designers aujourd'hui est plus de savoir quoi faire que d'avoir les qualités innées d'un designer.

Étape 1: préparez-vous 


Avant de nous lancer dans la création d'un logo dans Photoshop, nous allons nous préparer en rassemblant toutes les informations nécessaires à notre design.

En constatant quelques sites populaires, nous pouvons observer deux catégories de logos: ceux qui sont construits sur une police spéciale seulement et ceux qui sont construits sur une police spéciale, plus une forme — dans la plupart des cas, la police se met à côté de la forme.

La forme peut être utilisée à de nombreuses fins et l'une d'elles est de rendre le nom, le service ou le contenu plus expressif.

L'expressivité des logos peut être liée au type du site: plus le site est général, moins le logo sera expressif et plus le site sera spécifique, plus le logo sera expressif.

Essayons d'appliquer ces idées à un site web virtuel appelé 'SmartHouseFuture': Le but d'un tel site web est de vendre des appareils qui transforment une maison ordinaire en une maison intelligente.

SmartHouseFuture est un site web de niche avec un intérêt spécifique et un objectif clair. Pour cela, nous allons faire de notre logo une combinaison d'une police spéciale et d'une forme dont le but est d'exprimer le nom du site: House (maison).

Jusqu'à présent, nous n'avons pas une idée claire sur la forme que le logo doit prendre, comment le logo devrait être? devrait-il comporter une maison à coté du nom du site ou au-dessus? Quelles couleurs devraient être utilisées?

Il est possible de rechercher des logos similaires sur Google pour apprendre quelques nouvelles idées.

Après, il sera temps de tester et d'évaluer différentes possibilités sur Photoshop — c'est ce que font certains designers.

En cherchant des logos similaires, j'ai trouvé ce qui suit:

Un exemple de logo.
De ce logo j'ai appris l'idée de mettre le toit au dessus du nom du site web.

Dans les lignes suivantes, je vais vous montrer comment installer les outils requis pour la création du logo.

Étape 2: Téléchargez les outils requis 


Pour créer un logo en suivant cette méthode, vous devez installer Adobe Photoshop.

Adobe Photoshop est l'éditeur graphique le plus populaire, adapté aux designers professionnels.

Dans ce tutoriel, j'utilise Adobe Photoshop Cs6.

Pour éviter de créer des formes à partir de rien, nous avons téléchargé et installé des formes personnalisées.

Voici comment installer des formes personnalisées:

1. Téléchargez les formes personnalisées en cliquant ici, puis Download.
2. Ouvrez Photoshop. Sur le côté gauche, cliquez avec le bouton droit de la souris sur la forme carrée et sélectionnez l'Outil Forme personnalisée.

L'outil Forme personnalisée


3. En haut, à côté de Forme, ouvrez le sélecteur de formes personnalisées.

Le sélecteur de formes personnalisées

4. Cliquez sur la roue, puis sur Charger les formes.

Charger les formes.

5. Recherchez où vous avez téléchargé le fichier, sélectionnez-le et cliquez sur Charger.

Charger.

De cette façon, les formes personnalisées vont être installées avec succès.

Nous devons maintenant trouver des polices spéciales.

Voici comment installer une nouvelle police dans Photoshop:

1. Fermez Photoshop.
2. Recherche des polices gratuites sur Google et choisissez la police que vous aimez, puis cliquez sur Télécharger. (Attention, si vous souhaitez à utiliser la police à des fins commerciales, vous devez d'abord bien rechercher pour savoir si elle est vraiment gratuite, sinon vous risquez de vous retrouver avec une police protégée par des droits d'auteur.)
3. Extrayez vos fichiers zip téléchargés.
4. Sur Windows 10, utilisez la barre de recherche située devant le bouton de démarrage et tapez "Polices". Vous verrez un dossier nommé Polices (vous pouvez également le trouver dans le panneau de configuration), ouvrez-le.

L'utilisation de la barre de recherche située devant le bouton de démarrage.

5. Ouvrez vos fichiers extraits, sélectionnez le(s) fichier(s) de la police de type TrueType Font, faites-le glisser jusqu'au le dossier Polices et déposez-le.

Installation de la Police.

Lorsque vous ouvrez Photoshop maintenant, vous trouverez votre nouvelle police installée.

L'étape suivante consiste à trouver la forme d'une maison pour la dessiner puis la personnaliser.

Étape 3: Dessinez et modifiez la forme personnalisée 


Il est maintenant temps de commencer à dessiner le logo dans Photoshop.

Le logo que je vais concevoir sera similaire au logo de référence que j'ai trouvé plus tôt.

Je vais essayer de ne pas copier les détails mais l'idée générale - qui n'appartient à personne - du «toit au dessus du nom du site» afin d'obtenir un design original à la fin.

Les instructions suivantes vous montreront comment dessiner une maison avec les formes personnalisées nouvellement installées et comment éditer la maison afin de ne garder que le toit.

1. Ouvrez Photoshop
2. En haut à gauche, cliquez sur Fichier, puis sur Nouveau.

La création d'un nouveau fichier.

3. Dans la nouvelle fenêtre, définissez la largeur sur 700 et la hauteur sur 350, puis cliquez sur OK.

La définition de la largeur et de la hauteur de l'image.

4. Sur le côté gauche, cliquez sur Outil de forme personnalisée, puis sur le haut, ouvrez le sélecteur de formes personnalisées et recherchez une forme qui représente une maison, puis sélectionnez-la.

le sélecteur de formes personnalisées.

5. En haut, à côté de Fond, choisissez une couleur autre que blanche pour pouvoir voir la forme lorsque vous la dessinez.

Changement de la couleur de la forme.

6. Pour dessiner la forme, il suffit de cliquer sur Maj + bouton gauche de votre souris. Plus vous faites glisser la souris, plus la forme devient plus grande. Voici le résultat.

La forme d'une maison.

7. Maintenant, il est temps de supprimer tout sauf le toit. Pour ce faire, assurez-vous que le calque de la forme créée est sélectionnée.

Le calque de la forme selectionné.

8. Sur le côté gauche, avec le bouton droit de votre souris, cliquez sur Outil Lasso et sélectionnez Outil Lasso polygonal.

Outil Lasso polygonal.

9. Avec l'outil Lasso polygonal, sélectionnez la maison, sauf le toit comme sur l'image:

Sélectionnez la maison, sauf le toit.

10. Sur votre clavier, cliquez sur Suppr. pour supprimer la partie sélectionnée.

Le toit.

Nous avons modifié avec succès la forme personnalisée, la prochaine étape consiste à écrire le nom du site et l'ajuster sous le toit.

Étape 4: Dessinez le nom du site web 


Il est maintenant temps de sélectionner la police nouvellement installée, définir sa taille et écrire le nom du site web.

1. Sur le côté gauche, cliquez sur Outil Text Horizontal, puis en haut, sélectionnez la police et la taille du texte.

Sélectionnez la police et la taille du texte

2. Cliquez sur l'espace blanc situé sous le toit, puis tapez le nom du site web.

Tapez le nom du site web sous la forme.

3. Vous pouvez également ajuster le nom du site ou le toit en cliquant dessus et en les déplaçant avec votre souris.

Super!

Ensuite nous allons essayer de changer les couleurs et essayer d'ajouter quelques effets.

Étape 5: Changez la couleur du logo


Sans aucun doute, les couleurs jouent un très grand rôle dans le marketing. Il y a même toute une branche de la psychologie qui s'intéresse aux couleurs à travers laquelle les spécialistes du marketing tirent des leçons. Par conséquent, choisir la bonne couleur pour le logo est une étape très importante.

Cette étape est difficile car il n'y a pas d'objectivité dans le choix des couleurs: ce que je peux aimer comme couleur pourrait être ce qu'un autre n'aime pas.

Toutefois, je pense qu'il y a quelques couleurs qui sont communément admirées telles que les couleurs de la nature comme le vert, le bleu, etc.

En utilisant Photoshop, j'ai appris que pour rendre les couleurs superbes, il faut qu'on essaie de rendre la couleur qu'on choisit hétérogène tout comme les couleurs dans la nature.

Par exemple, si vous examiner une feuille de plus près, vous verrez que le vert n'est pas homogène, mais il change légèrement d'un endroit à l'autre.

Cela devient plus clair lorsque vous en prenez une photo et vous la visualisez dans un éditeur de photos en zoomant sur ses différentes parties.

Dans les prochaines lignes, je vais vous montrer comment choisir une couleur et comment rendre la même couleur hétérogène.

1. Sur le côté droit, double-cliquez sur le calque du toit.

Double-cliquez sur le calque du toit

2. Une nouvelle fenêtre apparaîtra, activer l'incrustation en dégradé et cliquer sur la couleur à côté de Dégradé. Une nouvelle fenêtre apparaît, sélectionnez le troisième Noir, Blanc sous Paramètres prédéfinis et choisissez deux variétés de la même couleur en cliquant sur l'icône du crayon sous la couleur noir et celle du blanc. Les variétés devraient être très proches les unes des autres.

Activez l'incrustation en dégradé.

Comme vous pouvez le voir sur la photo, j'ai choisi le bleu océan comme couleur; sur le côté gauche, la couleur semble un peu plus sombre que celle du côté droit. Dans ce tutoriel, j'ai décidé d'utiliser une seule couleur pour la forme et la police.

Voici le résultat final:
Le résultat final.

Étape 6: Ajoutez un effet d'ombre au logo


Si vous souhaitez que le logo apparaisse comme devant un mur blanc ou un tableau blanc en y ajoutant l'effet d'ombre, il vous suffit de:

1. Double-cliquez sur le calque de l'objet (forme ou texte)
2. Activez Ombre portée et ajustez les options jusqu'à obtenir un effet d'ombre agréable.

Activez Ombre portée.

Voici le résultat final après l'application de l'effet de l'ombre:

Le résultat final après l'application de l'effet de l'ombre.

La prochaine étape est très facile mais très importante. Je vais vous montrer comment enregistrer votre logo et ce que vous devrez faire pour l'adapter à n'importe quel arrière-plan de n'importe quel site web!

Étape 7: Enregistrez le logo


Une des caractéristiques d'un logo professionnel est la capacité de s'adapter à n'importe quel arrière-plan, c'est-à-dire si le fond du site est gris, le fond du logo sera gris, s'il est noir, le fond du logo sera noir, etc.

Pour ce faire, vous devez supprimer l'arrière-plan de votre logo et enregistrer le fichier au format .png:

1. Sur le côté droit, avec le bouton droit de la souris, cliquez sur le calque de l'arrière-plan, puis avec le bouton gauche, cliquez sur Supprimer le calque.

Supprimez le calque.

2. Cliquez sur Fichier puis sur Enregistrer.
3. A coté du Nom du fichier, tapez le nom de votre logo. Dans la liste déroulante à côté de Format, sélectionnez PNG et cliquez sur Enregistrer.

Enregistrez le fichier au format .PNG

Le logo est maintenant prêt à être utilisé!

Vous pouvez maintenant sauvegarder de nombreuses copies pour différentes utilisations avec des tailles différentes: pour votre site web, votre profil Facebook, votre profil Twitter, etc.

Pour changer la taille de l'image: cliquez sur Image, puis Taille de l'image et définissez la nouvelle largeur et hauteur.

Conclusion


En tant que développeur web intéressé par le web design, j'ai partagé avec vous ma méthode de travail pour la création de mes propres logos dans Photoshop gratuitement.

Tout commence par la planification et la collecte d'informations sur le site web, le téléchargement des outils et des fichiers nécessaires, avant de travailler sur le logo.

Cet article est une extension à un autre article sur "Comment créer un site web rapidement et facilement en utilisant une application appelée WordPress".

Je l'ai écrit pour aider les gens à créer des sites web sans aucune connaissance en programmation.

J'espère que c'était intéressant et utile.

Si vous avez des questions ou des suggestions, vous pouvez utiliser la section des commentaires ci-dessous.

Comments