Choisir les logiciels libres

Aller au contenu | Aller au menu | Aller à la recherche

Mot-clé - inkscape

Fil des billets

mercredi 3 août 2011

Mesh Gradient sous Inkscape

Par Gilles le mercredi 3 août 2011, 16:52 - Logiciels libres

Jusqu'à présent, au grand dam de ses utilisateurs, il n'existe que deux formes de dégradés sous Inkscape : Le dégradé linéaire et le dégradé radial. D'autres formes de dégradés sont supportés par de nombreux outils graphiques, tels que les dégradés coniques ou en spirale, ou encore les dégradés le long d'une courbe.

Cette situation devrait évoluer dans les prochaines versions d'Inkscape, grâce au travail réalisé par Tavmjong Bah, l'un des développeurs d'Inkscape. Celui-ci a en effet intégré une preuve de concept permettant de réaliser d'autres formes de dégradé, en utilisant une version patchée de Cairo, le moteur de rendu actuellement utilisé par Inkscape. Les résultats sont assez bluffants.inkscape_lamp_gradient.png svg-mesh-conical.png

Il n'existe actuellement aucune version téléchargeable du code. L'implémentation sous Inkscape se limite strictement au moteur de rendu. Il n'existe même pas d'interface graphique permettant de créer ce type de dégradé. Il n'y a donc aucune chance que ces nouvelles fonctionnalités soient livrées avec la prochaine version 0.49.

En revanche, elles verront le jour, jusqu'à être intégrées dans la version 2.0 de la spécification SVG.

mercredi 20 avril 2011

Noun et the League of Movable Type : Deux projets libres à découvrir

Par Gilles le mercredi 20 avril 2011, 12:00 - Logiciels libres

Comme il n'y a pas que GNU/Linux dans la vie, on peut aussi découvrir quelques projets libres artistiques. En voici rapidement deux de grande qualité découverts au travers de mes pérégrinations.

The Noun Project

noun_blog.pngThe Noun Project a pour "mission"[1] d'organiser une bibliothèque de symboles visuels hautement reconnaissables. La collection est particulièrement complète et s'enrichit très régulièrement. Les symboles sont généralement disponibles sous licence Creative Commons Paternité ou domaine public[2]. Les symboles sont tous disponibles au format ouvert SVG, parfaitement éditable sous Inkscape. Évidemment comme c'est libre, on peut s'amuser :) . Les versions dérivées sont sous la même licence que leurs originaux. noun_project_reloaded.svg

Les contributions ne sont actuellement pas acceptées, mais ça viendra. The Noun Project cherche des traducteurs pour améliorer l'accessibilité linguistique du site.

The League of Movable Type

League of the movable types logo

The League of Movable Types a été créé par deux graphistes, fondateurs de We are a Good Company. Ce projet a pour objectif de fournir des polices de caractères de grande qualité sous licence libre Open Font Licence. Les résultats semblent prometteurs, en espérant que le projet soit pérenne. En tout cas, la production continue.

Notes

[1] Ce n'est pas moi qui le dit, c'est le projet lui-même

[2] Il convient d'être vigilant sur l'utilisation de matériel sous licence domaine public. La validité de cette licence est discutable dans de nombreux pays, y compris la France.

2 commentaires

vendredi 22 octobre 2010

Light painting avec Inkscape (la suite...)

Par Gilles le vendredi 22 octobre 2010, 22:08 - Logiciels libres

Il y a quelques temps, e-Phase nous avait proposé un tutoriel light painting avec Inkscape. Je l'avais initialement sollicité sur ce sujet, afin de voir ce qu'il pouvait tirer de sa palette graphique, et pouvoir comparer avec les résultats auxquels j'étais moi-même arrivé. J'ai repris son tutoriel et tenté de le marier avec mon tuto de création d'une bille de verre. Et le résultat est là : light_orb.png

Je ne referai pas un tutoriel complet sur cette image, mais voici quand même 2 ou 3 trucs que j'ai utilisé pour produire ce résultat.

  • Les rayons de lumière rouge sont obtenus en utilisant la technique proposée par e-Phase. Je n'y ai rien ajouté, ni enlevé.
  • Le reflet est réalisé sur un calque spécifique, à partir d'une copie des éléments présents sur les autres calques, auxquels un masque est appliqué pour tenter de simuler l'effet Fresnel[1].
  • La poussière de lumière est créée à partir d'un simple polygone de couleur, utilisé via l'outil Spray disponible à partir de la version 0.48 d'Inkscape. Sous Inkscape, vous pourrez en visualiser le résultat dans les versions précédentes, mais pas le créer autrement que manuellement.
  • Les cercles entourant la sphère doivent être partiellement masqués par celle-ci. Il a fallu que j'utilise à nouveau des masques pour ne conserver qu'une partie des cercles.

Le fichier SVG utilise massivement le flou, le rendu est donc un peu long, surtout si vous disposez d'une petite machine. N'hésitez pas à masquer les différents calques pour accélérer le rendu. Les images et le fichier SVG sont sous double licence Art Libre et Creative Commons BY-SA. Usez, si vous en avec l'usage. Si vous utilisez cette modeste création, laissez moi un petit message dans les commentaires ou envoyez moi un courriel.

Have fun !

Notes

[1] En gros, le principe de Fresnel est que la réflexion observée dépend de l'angle de vue. En fonction de cet angle, vous verrez plus ou moins les reflets

3 commentaires

dimanche 3 octobre 2010

Tutoriel : Bille de verre sous Inkscape

Par Gilles le dimanche 3 octobre 2010, 12:34 - Logiciels libres

Suite à un appel lancé sur une liste de discussion de l'Abul, voici un tutoriel de création d'une boule de verre sous Inkscape. Il a été réalisé avec Inkscape 0.48 mais ne devrait poser aucun problème avec les versions précédentes.

Ce tutoriel est assez long sur le papier, mais ne prend pas plus de 5 à 10 minutes à réaliser. Afin de le rendre accessible au plus grand nombre, j'ai détaillé de nombreuses étapes qui vous sembleront triviales si vous êtes déjà un peu familier avec Inkscape. Have fun !

Comme tout le contenu de ce blog, ce tutoriel est sous licence Creative Commons BY-SA. Les images et le fichier SVG sont sous double licence Art Libre et Creative Commons BY-SA. Si vous utilisez cette modeste création, laissez moi un petit message dans les commentaires ou envoyez moi un courriel.

L'idée principale est d'utiliser un empilage de formes pour arriver au résultat souhaité. empilage.png

  • Créez un cercle d'environ 200x200, à l'aide de l'outil Cercles & ellipses. Utilisez la touche CTRL pour créer un cercle et non une ellipse.

1.Capture-creer_cercle.png

  • À l'aide de la boîte de dialogue Remplissage & contours, supprimez la bordure (si nécessaire) et contrôlez l'opacité du cercle qui doit être de 100%.

2.capture2_capture3.png

  • À l'aide de l'outil dégradé, appliquez un dégradé linéaire sur le cercle. Utilisez la touche CTRL pour appliquer un dégradé parfaitement aligné sur votre cercle.

4.degrade.png

  • Dans la boîte de dialogue Remplissage & contours, éditez le dégradé pour obtenir les valeurs suivantes :

5.6.Capture-Editeur_de_degrade.png

  • Repassez en mode sélection, dupliquez votre cercle avec CTRL+D, déplacez le sur la droite en vous aidant de la touche CTRL pour conserver l'alignement avec le cercle original.

7.dupliquer_cercle.png

  • Dupliquez le une seconde fois (CTRL+D) sans déplacer le nouvel objet, changez en la coouleur à l'aide de la palette. La nouvelle couleur doit être plus foncée

8.changer couleur.png

  • Appliquez un nouveau dégradé, puis sélectionnez le point du haut du dégradé.

10.selection_point_degrade.png

  • Dans la boîte de dialogue Remplissage & contours, modifiez l'opacité de ce point pour la passer à 60.

11.modif_opacite_degrade.png

  • À l'aide de l'outil Sélection, sélectionnez votre cercle initial et dupliquez le à nouveau (CTRL+D). Déplacez le nouveau cercle au dessus des cercles de droite.

12.nouveau_cercle.png

  • Changez la couleur de ce nouveau cercle vers une couleur plus claire, soit à l'aide de la palette, soit à l'aide de la boîte de dialogue Remplissage & contours.

13.nouvelle_couleur.png

  • Réduisez légèrement la taille de ce nouveau cercle. Utilisez simultanément les touches CTRL+SHIFT pour que votre cercle conserve ses proportions et son centre initiaux.

14.reduction_cercle.png

  • À l'aide de la poignée basse de redimensionnement, réduisez le cercle aux deux tiers de sa hauteur environ pour obtenir une ellipse

15.reduction_cercle.png

  • À l'aide d'une des poignées latérales de redimensionnement, réduisez la largeur du cercle. Utilisez la touche SHIFT pour obtenir une réduction simultanée sur les deux côtés.

16.reduction_cercle_lateral.png

  • Transformez votre ellipse en chemin, via le menu Chemin > Objet en chemin, ou par la combinaison de touches SHIFT+CTRL+C. Appuyez sur F2 pour passer en mode édition de chemin.

17.transformation_chemin.png

  • Sélectionnez les deux points d'édition latéraux : Sélectionnez un premier point, appuyez sur SHIFT et sélectionnez le second point latéral

18.selection_points_edition_lateraux.png

  • Déplacez ces deux points légèrement vers le bas.

19.points_deplaces.png

  • Repassez en mode sélection avec F1, et appliquez un nouveau dégradé du haut vers le bas sur votre chemin.

20.nouveau_degrade.png

  • Sélectionnez le point haut de votre dégradé, et appliquez lui une opacité de 75%.

21_opacite_degrade.png

  • Repassez en mode sélection (F1), sélectionnez votre cercle initial et dupliquez le (CTRL+D).Déplacez ce nouveau cercle sur la droite, au-dessus des autres formes. N'oubliez pas d'utiliser la touche CTRL pendant le déplacement pour conserver l'alignement horizontal.

22.dupliquer_cercle.png

  • Appliquez une couleur sombre au contour de ce nouveau cercle : Cliquez avec le bouton droit de votre souris sur une couleur sombre de la palette et sélectionnez l'option Définir le contour.
  • Dans la boîte de dialogue Remplissage & contours, sélectionnez l'onglet Style du contour et passez l'épaisseur à 10.

23.epaisseur_contour.png

  • Restez dans la boîte de dialogue Remplissage & contours, passez sur l'onglet Fond, et appliquez un flou de 30.

24.flou.png

  • Déplacez légèrement le cercle flouté vers le bas. Utilisez la touche CTRL pendant le déplacement pour conserver l'alignement vertical.

25.deplacement_cercle_flou.png

  • Dupliquez le cercle flou (CTRL+D), supprimez le flou (boîte de dialogue Remplissage & contours)

26_dupliquer_cercle_flou.png

  • Supprimez le contour de ce nouveau cercle.

27.supprimer_contour.png

  • Changez la couleur du cercle vers une couleur sombre.

28.changer_couleur_cercle.png

  • Alignez le cercle sur les autres formes

29.aligner_cercle.png

  • Sélectionnez le cercle flouté, puis tout en maintenant la touche SHIFT enfoncée, sélectionnez le cercle du dessus.

30.selection_cercles.png

  • Appliquez une découpe, via Objet > Découpe > Définir.

31.decoupe.png

  • Dupliquez à nouveau votre cercle initial, celui de gauche (CTRL+D), et déplacez le au-dessus des formes de droite.

32.dupliquer_cercle.png

  • Dans la boîte de dialogue Remplissage & contours, supprimer le remplissage de ce nouveau cercle dans l'onglet Fond.

33.supprimer_remplissage.png

  • Dans l'onglet Contour, sélectionnez l'option Aplat pour créer un contour plein. Passez dans l'onglet Style du contour et appliquez une épaisseur de 4.

34.35.epaisseur_contour.png

  • Dans l'onglet Fond, appliquez un flou de 6.

36.flou_contour_cercle.png

  • Déplacez ce cercle vers le bas, à environ mi-hauteur des autres formes. Pour faciliter le déplacement, utilisez la touche flèche bas de votre clavier.

37.deplacer_cercle.png

  • Dupliquer à nouveau votre cercle initial (celui de gauche, CTRL+D pour dupliquer) et placez le au dessus de votre cercle flouté

38.dupliquer_deplacer_cercle.png

  • Vous devez sélectionner les deux cercles en même temps. Il suffit de cliquer sous le cercle flouté et de créer une boîte de sélection en maintenant le bouton gauche de votre souris enfoncé.

39.selection_cercles.png

  • Définissez une nouvelle découpe, via Objet > Découpe > Définir.

40.definir_decoupe.png

  • Déplacez cette découpe au dessus des autres formes. Utilisez la touche CTRL pour contraindre le déplacement de conserver l'alignement vertical.

41.deplacer_decoupe.png

  • Désélectionnez tout, en cliquant sur une zone vide, puis sélectionnez les deux premières formes de droite, en cliquant une première fois avec le bouton gauche de votre souris, puis une seconde fois tout en maintenant la touche SHIFT enfoncée.

42.selction_formes.png

  • Déplacez les formes sélectionnées vers le bas.

43.deplacer_formes.png

  • Sélectionnez le petit chemin et dupliquez le (CTRL+D)

44.sélection_chemin.png

  • Sélectionnez les deux formes du bas et replacez les dans l'alignement des autres

45.deplacer_formes.png

  • Sélectionnez la forme nouvellement créée et déplacez la d'un cran vers le bas. Il ne s'agit pas de déplacer la forme vers le bas, mais de la déplacer d'un cran dans l'empilement des formes. Ce déplacement peut être fait soit avec la touche PgDown, soit par Objet > descendre, soit par le bouton Descendre la sélection d'un cran. Déplacez cette forme vers le bas.

46.deplacer_forme.png

  • Réduisez la taille de cette forme avec les poignées de redimensionnement. Utilisez SHIFT+CTRL simultanément pour contraindre le positionnement du centre de la forme et conserver les proportions initiales.

47.reduire_forme.png

  • Dans la boîte de dialogue Remplissage & contours, sélectionnez une couleur de fond claire et appliquez un flou de 40.

48.couleur_flou_forme.png

  • Désélectionnez tout, puis sélectionnez la forme la plus au dessus, en cliquant sur l'empilage de forme. Déplacez cette forme légèrement vers le bas

49.deplacer_forme.png

  • Sélectionnez le chemin, dupliquez le (CTRL+D).

50.dupliquer_chemin.png

  • Replacez le cercle déplacé au même niveau que les autres.

51.replacer_forme.png

  • Sélectionnez le chemin placé sur le dessus en cliquant sur la forme, puis appliquez lui un flou de 5 et une opacité de 75% dans la boîte de dialogue Remplissage & contours.

52.flou_opacité_chemin.png

  • Sélectionnez votre cercle initial et déplacez le sous l'empilage de formes.

53.deplacer_cercle.png

  • Aplatissez le à l'aide du bouton de redimensionnement bas, en maintenant SHIFT enfoncée pour assurer un redimensionnement équilibré.

54.redimensionner_cercle.png

  • Dans la boîte de dialogue Remplissage & contours, appliquez lui un aplat de noir.

55.couleur_forme.png

  • Dans la boîte de dialogue Remplissage & contours, appliquez lui un dégradé radial, un flou de 6 et une opacité de 50%

56.degrade_radial.png

You're done :) !

image_finale.png

Le fichier SVG.

2 commentaires

dimanche 14 février 2010

Inkscape : Pixelsnap et JessyInk sont dans un bateau

Par Gilles le dimanche 14 février 2010, 01:35 - Logiciels libres

2 extensions Inkscape vraiment étonnantes et à découvrir de toute urgence si vous avez besoin de réaliser des présentations sympathiques, ou si dans vos exports bitmaps, il y a toujours ce petit quelque chose d'indéfinissable qui vous gêne, Pixelsnap et JessyInk.

Pixelsnap : Des lignes droites bien placées

Ça a l'air évident : un logiciel de dessin vectoriel doit être capable de placer tous vos objets au pixel près. Sauf qu'un dessin vectoriel, par définition, ça ne marche pas avec des pixels. C'est un peu capillotracté ce que je viens d'écrire, mais c'est ce qui fait toute la différence avec un dessin bitmap. Si vous avez déjà utilisé Inkscape pour réaliser par exemple un mockup de design web, au moment de l'export bitmap, il arrive que certaines lignes droites ressortent floues. C'est particulièrement vrai lorsque vos lignes font un pixel de large. J'avais remarqué ce problème particulier, et il m'a aussi été remonté dans les démonstrations réalisées lors de la dernière Ubuntu Party à paris.

Pixelsnap se charge d'ajuster ça, de façon à faire en sorte que vos lignes droites soient parfaitement placées et que ce malencontreux effet de flou disparaisse. Il est évidemment nécessaire de bien faire des essais, afin de ne pas dégrader le rendu final. Une fois bien utilisé, les résultats sont concluants (Cliquez sur l'image pour la visualiser en taille réelle). pixelsnap.png

L'installation en est très simple :

  • Télécharger l'archive de Pixelsnap sur le site officiel.
  • Décompressez l'archive avec votre gestionnaire d'archive préféré.
  • Vous trouverez dans le répertoire décompressé un fichier .inx et un fichier .py. Placez ces fichiers dans votre répertoire personnel d'extension Inkscape. Chez moi, sur Ubuntu 9.10, les extensions sont dans /home/MON-USER/.config/inkscape/extensions.[1]
  • Redémarrez Inkscape, une nouvelle extension Pixelsnap fait son apparition dans le menu...Extensions.

Pixelsnap est sous licence libre MIT.

JessyInk : Des présentations interactives (ou pas) en SVG

jessylogo.jpgAprès la simplicité de Pixelsnap, JessyInk est d'une autre trempe. Cette extension a pour objectif de vous permettre de réaliser des présentations. Elle demande un minimum de maîtrise d'Inkscape et de ses calques. JessyInk permet d'associer à un fichier au format ouvert SVG des commandes Javascript, permettant d'interagir avec les objets des calques, et de leur appliquer des effets de zoom, de transition...Il est possible d'assigner un effet différent à chaque objet de votre calque, ou encore de dessiner sur votre présentation directement depuis le navigateur.

Il est par ailleurs possible d'exporter le document dans un fichier PDF (Chaque calque devient une page du PDF), ou dans des fichiers PNG (Chaque calque génère une image PNG). Une démonstration est disponible ici (lisible avec un navigateur de qualité, pas IE quoi...). La présentation se contrôle avec les touches fléchées de votre clavier.

L'installation et l'utilisation se déroulent en 2 étapes : Installation et Post-installation

Installation

Si vous êtes sur ubuntu 9.04, 9.10 ou 10.04, il existe un dépôt PPA (Ce dépôt n'est pas officiel, vous l'utilisez à vos risques et périls). En savoir plus sur l'ajout de dépôt. Installez alors le paquet jessyink.

Pour tous les autres ou si vous préférez l'installer manuellement :

  • Téléchargez l'archive de JessyInk sur le site officiel
  • Décompressez l'archive avec votre gestionnaire d'archive préféré.
  • Copiez le contenu du répertoire décompressé dans votre répertoire d'extension Inkscape.

Post-Installation[2]

  • Relancez Inkscape
  • Rendez vous dans le menu Extensions > JessyInk et sélectionnez l'option Install/Update. Il ne se passera rien de particulier, mais l'extension sera bien installée.

Le tutoriel pour JessyInk arrive.

JessyInk est sous licence libre GNU GPL V3 ou spérieure.

Notes

[1] Appel à contribution : Il y a sans doute des afficionados de la ligne de commande qui pourront nous expliquer comment réaliser le téléchargement, la décompression et le déplacement des fichiers d'un seul coup.

[2] Pour Ubuntu comme pour les autres, on ne va pas tout vous mâcher non plus ;)

5 commentaires 2 rétroliens

- page 1 de 2