love-blogging-yesweblog-dot-fr
Photos, Ressources, Tutoriel

Créer une Photo de Profil Ronde pour Sidebar avec Picmonkey

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 ;) !

rainy

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 :

rosemary-sidebar

Ou encore l’exemple avec le très beau Template Blogger Minigray de l’épiceriedublog :

minigray-template-bogger-epicerie

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.

crop-square

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 :

photo-square

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 :

frames-picmonkey

Cela va affichera par défaut les formes, ou Shapes en anglais, de la rubrique Frames. Comme suit :

shape-cutouts

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) :

photo-about-avatar

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.

PicMonkey Photo editing made of win

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 à une pro qui créera votre avatar :) J’en parlerai justement récemment dans ce billet :)

Voilà c’est tout pour cette fois-ci !

Article Précédent Article Suivant

Pourrait également vous intéresser

Pas de Commentaire

Laisser un Commentaire

%d blogueurs aiment cette page :