Télécharger le Cahier de Coloriage n°1

Merci pour vos retour sur le cahier de coloriage #1 !  Certaines personnes m’ont demandé de pouvoir télécharger les pages séparément afin d’imprimer un dessin et pas un autre.

Voici les images présentées par thématique. Cliquez sur l’aperçu pour télécharger l’image en pdf 🙂 Bon coloriage !

Les Mandalas

 

Mandala Nature imaginaire  .

Mandala Nature ordonnée  .

Mandala Marin  .

Mandala Forêt  .

Mandala Coline bretonne 

Les paysages ronds

La plage et la montagne 

Les roches  

Les jeux typographiques

Mary Poppins  

Fruité 

Les images pour enfants

Les petites dolls  

Les cupcakes 

Les bonshommes de neiges 

Les repas 

Les têtes de chats

Les illustrations

La jeune fille au bain  

Saci Pereré  

Plage Pontanegra  

La couverture (elle se colorie aussi)

La couverture recto 

 

 

Parution de l’article 8 conseils pour créer une landing page efficace

Parution dans le Linux Pratique n°100 de mon article intitulé : « 8 conseils pour créer une landing page efficace ».

Cet article évoque 8 points importants pour optimiser une page importante de votre site dans l’objectif de faire venir vos visiteurs.

Il contient des conseils ergonomiques pour conduire efficacement ses internautes.

Le numéro 100 du magazine est actuellement en kiosque et jusqu’à fin avril, après vous pourrez le commander sur le site de l’éditeur : Diamond édition.

Bonne lecture !

Colorisation avancée avec Inkscape

Comment bien maîtriser l’outil Filet de dégradé. En général réservé aux dessins réalistes, il est néanmoins apprécié des illustrateurs. Partons d’une illustration réalisée sur papier puis encrée avant d’être scannée.

Première étape de colorisation rapide avec l’outil Remplissage de zone bornée

Inkscape est dotée d’un outil similaire aux logiciels bitmaps (Gimp, Krita… ) : une sorte de pot de peinture. Il s’appelle « Remplir une zone bornée ».

Dans le principe, activez-le, puis cliquez dans la zone à colorier. Il faut veiller à ce que la zone soit bornée, c’est-à-dire, fermée.

Au besoin, fermez la zone avec l’outil crayon (vous effacerez le trait de crayon par la suite).

Activez l’outil Remplir une zone bornée, et cliquez dans la zone. Une forme a été créé remplisssant l’espace.

Si vous avez l’impression que rien ne se passe
  • Regardez dans la barre d’état, s’il y a une erreure, le message est lisisible et compréhensible la plupart du temps. Vous avez alors un bonne indication pour remédier au problème.
  • La forme ne semble pas avoir été créée, peut-être que la zone n’est pas fermée, du coup Inkscape ne peut pas générer une forme. Fermer complètement la zone à remplir.
  • La forme est bien présente, mais elle n’a pas de remplissage, modifier sa couleur avec le dialogue « Fond et contour ».
  • La forme est bien présente, mais elle est de la même couleur que la zone, modifier sa couleur dans « Fond et contour ».

Cela signifie qu’Inkscape a créé une nouvelle forme dont vous pouvez définir la couleur et/ou le style du fond et du contour.

Choisissez la couleur de votre choix.

Deuxième étape de l’amélioration avec le filet de dégradé

Le dialogue Fond et contour permet de définir le rendu de votre colorisation :

  • applat (comme la célèbre bande dessiné Tintin)
  • dégradé (linéaire, radial ou filet de dégradé).

Voyons comment utiliser le filet de dégradé.

Le filet de dégradé permet d’avoir un maillage personnalisable de la forme et que chaque intersection du maillage affiche une couleur différente. Cela permet de réaliser des dégradés moins monotones que les dégradés radiaux ou linéaires.

Sélectionnez la forme de votre choix. Dans le dialogue Fond et contour, cliquez sur l’option Filet de degradé.

Le filet de dégradé s’affiche avec des losanges gris qui matérialise la couleur. Ces losanges sont personnalisables. Chaque losange possède deux poignées rondes qui servent à orienter la courbure de la couleur et son poids.

Une fois un losange sélectionnée, celui-ci devient bleu et ses poignées sont en forme de flèche inversée.

Conseil

Évitez d’activer l’outil nœud durant cette procédure car il devient alors compliqué de distinguer les nœuds du filet de dégradé de ceux de la forme.

La personnalisation d’une couleur dans un filet de dégradé

Sélectionnez le nœud et choisissez une couleur grâce à l’onglet Fond du dialogue Fond et contour.

Si vous avez besoin de rajouter une partie colorée à votre forme, double cliquez sur une des lignes bleue du filet de dégradé avec l’outil filet de dégradé. A l’intersection des lignes bleues, un losange se créé. Déplacez-le au besoin.

Modifier le poids de la couleur et l’orientation avec les poignées.

Concrètement, on se retrouve très vite à faire de nombreux allés et retour entre la sélection du losange et sa couleur. Mais très vite le dégradé se matérialise sous nos yeux et rend la procédure intuitive.

Diminuer le nombre de losange gris

Il n’est pas possible de supprimer à la volée des losanges gris. Il faudra obligatoirement passer par la barre d’outil. Observez les options Lignes et colonnes. Avant de les changer, basculez la forme sous Fond en aplat. Activez l’outil filet de dégradé, modifier les valeurs Lignes et Colonnes pour que cela corresponde à vos besoins puis rebasculez la forme en filet de dégradé. Les changements sont maintenant pris en compte.

Partager un filet existant

Lorsque l’on créé un filet de dégradé, il devient éternel et réutilisable par n’importe quel objet.

Chaque filet de dégradé porte un nom « meshgradientXXXX ». Mémorisez le nom de votre filet de dégradé à ré-appliquer. Sélectionner votre forme et appliquez-lui le filet de dégradé du même nom. Quel gain de temps !

Un inconvénient : le filet de dégradé conserve ses couleurs mais aussi sa dimension. Vous devez donc déplacer les losanges pour faire en sorte qu’il recouvre la surface de votre nouvel objet.

Que pensez-vous du nouvel outil Filet de dégradé ?

Avantages :

  • Plus de détail de couleur qui épousent la forme.
  • plaisir de peaufiner son illustration.
  • partage des filets de dégradé entre objets.

Inconvénients :

  • Exige plus de temps.
  • Multiplie les nœuds, à appliquer en fin de travail pour ne pas être incommodé.

Critique ergonomique

Les raccourcis clavier habituel au niveau de la couleur ne s’appliquent pas sur le filet de dégradé. Par exemple, on ne peut pas copier-coller le style d’un objet contenant le filet de dégradé. Or, dans une illustration on a vite fait d’avoir un très grand nombre de filet de dégradé, ce n’est pas évident de mémoriser un nom imposé.

Quand on partage un filet de dégradé, le filet ne s’adapte pas à la forme de l’objet, il conserve la forme de l’objet précédent. On aurai souhaité que le filet de dégradé se marie aussi bien que lorsqu’il est généré pour la première fois.

Le losange gris ressemble trop fort à un nœud. Lorsque celui-ci est sélectionné ses poignées se transforment en flèches mais rien ne l’y relie. Le bout de la poignée est alors très difficile à discerner, surtout si les poignées sont hors-champ. Pourquoi ne pas avoir relié le losange à ses poignées ?

L’option de l’outil devrait renvoyer en temps réel le nombre de Lignes et de Colonnes et ses changements devraient être affectée immédiatement sur l’objet.

Ajouter un losange de couleur est facile, et pourtant sa suppression semble impossible.

L’option pipette depuis la barre d’outil ne semble pas fonctionner (privilégier la pipette présente dans le dialogue Fond et Contour comme solution de contournement).

Mes conseils :

  • Changer davantage l’aspect du losange pour ne pas le confondre avec les autres nœuds (des vecteurs).
  • Joindre les losanges à leurs poignées.
  • Pouvoir renommer le dégradé car dans le menu voir une quantité incroyable de mesgradient1234 n’aide pas la mémorisation.
  • Supprimer un losange directement depuis le canevas, par exemple en le sélectionnant et en appuyant su Suppr.

Publication Cahier de Coloriage n°1

20 illustrations réalisées de manière traditionnelle (papier, crayon) ont été sélectionnées pour proposer un cahier de coloriage. À vos feutres, pinceaux ou crayons de couleur !

Une idée dans l’ère du temps

Les cahiers de coloriage fleurissent partout, j’ai eu envie de proposer le mien. Les illustrations sélectionnées sont aussi bien pour les petits que les grands ! Non le coloriage n’est pas destiné qu’aux enfants.

Colorier (ou dessiner) est apaisant, essayez, cela détend.

Une conception originale

Le papier sélectionné pour ce cahier est écologique : issue du recyclage des algues de Venise ! Doux et délicatement texturé au toucher, c’est le papier idéal pour donner envie de dessiner dessus. Il est épais pour accueillir vos peintures et surtout ne pas tacher l’autre côté du papier.

Une licence libre

Les illustrations sont sous licence art libre et la mise en page du cahier a été conçue uniquement avec des logiciels libres (SimpleScan, Gimp et Scribus).

Où l’acheter ?

Les éditions Floss Manuals Francophone ont accepté d’en éditer quelques-uns. Vous le trouverez dans leur boutique à 10 euros.

Vous souhaitez le télécharger ?

Certains m’ont demandé de pouvoir télécharger les images séparément. Rendez-vous dans cet article pour cela ! Bon coloriage !

Changement dans Google Image

Google réalise beaucoup d’AB/Testing. J’adore les dénicher. Une fois que les tests de fonctionnalités sont testés positivement, ceux-ci sont publiés pour tous les utilisateurs. Le dernier changement publié que j’ai perçu est celui concernant la recherche d’image.

En France, le moteur de recherche le plus utilisé est Google (90%), et la recherche s’effectue de plus en plus via les images au détriment de celle classique par mots-clés. C’est peut-être pour cette raison que Google a modifié la recherche par image ?

Des boutons de filtre sélectif et exclusif

Dorénavant, après avoir écrit le mot-clé de la recherche, une liste de bouton couleur arc-en-ciel s’affiche en ligne avant les résultats des images en grille compacte.

Avant Google nous proposait une liste complémentaire de mots-clés en les proposant en complétion automatique, maintenant cette liste de mots-clés est matérialisée et directement cliquable depuis cette longue ligne de bouton colorés.

On remarquera que ces boutons (servant de filtre) sont exclusifs : la sélection de l’un d’eux fait disparaître les autres. À quand le filtre multicritère ?

Un choix ergonomique audacieux

On ne peut s’empêcher de penser que ces boutons sont tellement nombreux que le designer n’a pas pu les afficher tous en haut de l’écran. Il a été, peut-être, décidé de les proposer alignés avec un bouton matérialisant le scroll pour n’occuper qu’une ligne. Le designer a suivi la recommandation d’utiliser des couleurs différentes afin de pallier à leur visibilité malgré leur très grand nombre, en essayant de ne pas trop surcharger le coût cognitif de la compréhension de cette page web.

La stratégie partagée par le menu du journal « Le Monde »

Le choix d’associer la couleur à un très grand menu (composé de 12 items !) est également soutenu par Le Monde, qui sobrement, dans sa version actuelle, associe chaque catégorie à une couleur. Couleur qui se décline dans chaque page web de la catégorie (les titres, le fil d’ariane et les décorations adoptent la couleur de la catégorie).

Cliquons, par exemple, sur la rubrique « International« .

La page s’habille du même bleu.

Une « complétion automatique graphique »

Dans l’exemple, j’ai effectué une recherche sur « mont saint michel », parmi les mots-clés à associer, il y a peinture. Si je clique sur peinture, il y a bien le même résultat des images que si j’avais réalisé comme recherche « mont saint michel peinture ». Il s’agit donc bien d’une autre présentation des mots-clés à associer via une « complétion graphique », si je peux me permettre cette expression.

Réaliser un flocon de neige avec Inkscape

Voyons pas à pas comment créer un flocon de neige rapidement grâce aux fonctionnalité avancées d’Inkscape.

Créer le fond

1. Avec l’outil Cercle (F5) créez un cercle de 200px de diamètre.

2. Ouvrez le dialogue Remplissage et contour (Maj+Ctrl+F) et appliquez-lui un dégradé radial de d5f6ffff vers 00aad4ff.

Créer le flocon

Avec l’outil Étoile (*),  tracez une étoile avec 6 branches. Tournez-la si besoin avec l’outil Sélection (s).

Cette étoile n’a pas de fond, un contour blanc et un style de contour de 4 pixels avec des raccords arrondies.

Pour réaliser les copies des étoiles, utilisez l’outil Sélection (s) pour sélectionner l’étoile blanche. Puis réaliser un duplicata avec Ctrl+D. Le duplicata s’est positionnée exactement au-dessus de l’étoile. Ce qui est exactement ce dont nous avons besoin.

Veillez bien à avoir décocher l’option qui redimensionne en préservant la proportion des épaisseurs des contours (situé dans la barre de l’option de l’outil Sélection).

Réduisez légèrement l’étoile en glissant une double flèche située au coin vers le centre en maintenant Ctrl (pour préserver la proportion) et Maj (pour conserver le redimensionnement à partir du centre).

Répétez cette opération pour réaliser la troisième étoile située au centre.

Créer les branches

Avec l’outil de Bézier (b), placez un point en haut de l’étoile, aidez-vous de guides si besoin.

Terminez le tracé en déposant un second et dernier point au bas de l’étoile. Bravo, vous avez le début d’une branche.

Si votre branche n’est pas droite, utilisez le dialogue Espacer et Aligner pour rendre verticale la ligne.

Avec ce même outil (de bézier), réalisez un petit trait oblique.

Avec l’outil Sélection (s), sélectionnez-le, cliquez une seconde fois dessus pour afficher la petite croix qui indique son centre de rotation. Déplacez-le sur la branche.

Ainsi lors de sa duplication (Ctrl+D), puis du déplacement en miroir (bouton situé dans l’option de l’outil sélection, la branche va se placer toute seule au bon endroit !

La procédure se répète pour l’ensemble des branches. Sélectionnez les deux traits obliques, groupez-les (Ctrl+G). Déplacez le centre au centre de l’étoile. Dupliquez le groupe.  Cliquez sur « Retournez verticalement les objets sélectionnés » (v).

De la même façon groupez la branche, dupliquez-la, positionnez correctement le centre puis utilisez les doubles flèches de rotation de l’outil Sélection pour pivoter une branche et les options de retournements symétriques pour la dernière branche.

Une légère ombre

Bravo, le flocon est terminé. Pour l’embellir, je propose de grouper l’étoile blanche, de la dupliquer, de modifier le contour blanc en contour 3771c8ff (bleu foncé).

Et de placer cette copie sombre en dessous (modifier les niveaux dans l’option de l’outil Sélection), et de rajouter un flou de 1%.

Le flocon est terminé. Avec un peu d’entraînement, en 5 minutes, vous pourrez réaliser de nombreuses variantes basées sur l’étoile, le duplicata et la rotation des éléments.

Ponta Negra Natal Brésil

Réalisation

Dessiné sur papier traditionnel avec un crayon. Encré avec un feutre noir.

Puis après un scan, colorisation avec Inkscape.

Inspiration

J’ai dessinée cette plage où j’allais souvent étant enfant, à la manière de Wouzit, illustrateur et auteur belge.

Licence

Cette image est sous licence Art Libre (copyleft).

Parution de l’article Bien démarrer avec Bootstrap pour créer un site responsive et esthétique

Parution de mon second article sur Bootstrap dans le même numéro 99 de Linux Pratique des éditions Diamond.

Couverture du Linux Pratique #99

Dans le cahier web, vous trouverez mon article dédié à Bootstrap 3. Celui-ci explique comment démarrer un projet de site web avec Bootstrap dans l’objectif de profiter de cet outil pour avoir un site responsive (qui s’adapte comme on le souhaite à un écran d’ordinateur, de tablette et de smartphone), tout en profitant de l’esthétique de cet outil.

Article sur Bootstrap 3

Bonne lecture !