La Sidebar, aussi appelée la barre latérale, fait partie de ces éléments de design très populaires qu’on retrouve souvent sur les Blogs. Qu’il s’agisse d’une sidebar à gauche ou à droite, elle permet la plupart du temps d’afficher des icônes de réseaux sociaux, une courte présentation du blog et/ou de son propriétaire, mais aussi assez couramment, une photo ou un avatar de différents formats. Et parmi ces formats, l’avatar rond reste un des plus appréciés.
Alors comment obtenir une image arrondie à afficher en haut de la Sidebar de son blog ? Quels peuvent être les formats utilisés ? Que permet l’outil Picmonkey ? Voici un début de réponse 😉 !
Sommaire
Exemples d’avatars ou Photos de Profil
Bien que l’avatar au format rectangulaire en tête de sidebar revienne en force, la photo de profil au format arrondi est un classique. Les démos de thèmes sont d’ailleurs un très bon exemple de combien ce petit détail fait mouche pour pas mal de propriétaires de Blogs. Voici un exemple de Photo de profil ronde visible via la démo du thème WordPress Rosemary de chez Solopine (le thème n’est plus à la vente en 2023) :
Ou encore l’exemple avec le très beau Template Blogger Minigray :
Alors comment réussir à créer rapidement ce format de photo quand on ne dispose pas de Photoshop ou même de PhotoFiltre ? Il se trouve que PicMonkey, dans sa version gratuite, permet de répondre à ce petit besoin, en quelques clics seulement.
Créer un Avatar Rond avec PicMonkey
Pour réaliser cette opération, il suffit d’importer la photo ou l’image concernée sur Picmonkey. Ensuite on sélectionnera sur l’affichage par défaut, l’outil Crop tout en haut à gauche.
Dans le menu Crop, on choisira Square dans le menu déroulant, ce qui correspond au format carré. Cela fera apparaître un filtre sur la photo ou l’image qu’il conviendra de positionner afin de centrer le visage ou l’élément central du visuel à mettre en évidence sur l’avatar, comme suit sur cette capture :
Une fois le filtre carré positionné comme vous le souhaitez, vous pourrez appliquer celui-ci en cliquant à gauche sur le bouton vert Apply.
Ensuite, via le menu de gauche, on se rendra et on cliquera sur l’icône en forme de petit tableau comme suit. Ce menu est le menu Frames :
Cela va affichera par défaut les formes, ou Shapes en anglais, de la rubrique Frames. Comme suit :
Par défaut, la forme ronde sera sélectionnée et positionnera automatiquement cette forme sur votre image ou photo. Cool, c’est justement le but de l’opération 😉 Aussi, pour obtenir un fond transparent autour de la photo/avatar, on cochera donc tout en bas, Transparent Background. Avant d’appliquer la forme à votre photo, vous pourrez repositionner au besoin ou réduire ou agrandir la taille de la forme, pour centrer un visage par exemple. Enfin, une fois que la modification vous convient, vous pourrez valider via Apply.
Pour finir, il suffira si nécessaire de retailler à des dimensions courantes pour une sidebar, la taille de votre image. Pour ça, vous pouvez passer par le menu Resize de Picmonkey, tout en bas à gauche. Je vous montre ceci juste ici en vidéo avec un récap de ce petit tutoriel textuel :
Voilà, vous aurez pu le constater avec cette vidéo très courte, on peut effectuer avec l’outil en ligne Picmonkey dans sa version gratuite, l’opération en seulement quelques clics 🙂
Les Autres formats d’avatar ou Photos de Profil
Bien entendu, si l’avatar au format arrondi séduit beaucoup et est un détail féminin apprécié, d’autres format comme le carré classique ou la photo rectangulaire demeurent des valeurs sûres 🙂 Auquel cas, Picmonkey peut également répondre à ce besoin avec les formes proposées qui peuvent être manuellement agrandies ou aplaties selon les envies 😉 L’éditeur étant très simple à utiliser et souple, il autorisera donc beaucoup de possibilités que vous pourrez tester afin de déterminer ce qui vous convient le mieux : Un avatar rond ? Carré ? Ou une autre forme plus fantaisiste ?
Les dimensions
Attention aux dimensions de votre photo ou image. Une sidebar classique fait 300 pixels de large. Retaillez donc bien votre photo ou image avant de la télécharger sur votre Blog. Si toutefois WordPress retaille les images, ce n’est pas forcément le cas pour toutes les plateformes. D’ailleurs, certains thèmes ou design ont de largeurs de sidebar à 280 ou à 320 pixels. Il faudra donc vérifier ce détail et retailler l’image de façon à ce qu’elle soit plus petite.
Une taille moyenne sera par exemple de 220×220 px ou de 250×250 pour une image carrée avec l’avatar arrondi. Pour l’image rectangulaire ou carrée qui fera toute la largeur de la sidebar, on choisira donc une largeur égale à celle de la sidebar. Voici, ci-dessous, l’image travaillée pour la vidéo tuto, avec les dimensions 250×250 et un format .png pour gérer et conserver la transparence autour de la photo et donc des visages des deux fillettes (image émanant de Fotolia) :
Transparence
Là aussi, importance de la transparence si vous optez justement pour la photo au format arrondi. Pour conserver la transparence proposée par l’outil Picmonkey, il conviendra d’enregistrer votre image ou photo au format .PNG. En effet, le format .JPG ne gère pas la transparence et vous affichera du blanc par défaut autour de la photo. Si le fond de votre sidebar est blanc, alors parfait. Cependant, si le fond de la sidebar n’est pas blanc, alors vous aurez un carré blanc affiché autour de votre photo ronde en tête de votre Sidebar. Autant dire que ça va jurer 😉
Conclusion : En quelques clics et sans Photoshop, on peut réussir à obtenir des résultats satisfaisants avec une photo de qualité 🙂 Il ne faut donc pas hésiter à passer quelques minutes à fureter parmi les options gratuites d’outils comme Picmonkey pour découvrir des fonctionnalités sympas qu’on oublie ou ignore souvent.
Et si toutefois, vous n’obtenez pas un résultat qui vous convient ou si encore vous ne souhaitez pas montrer votre minois, vous pouvez aussi très bien recourir à un(e) pro qui créera votre avatar.
Voilà c’est tout pour cette fois-ci !
