Choisir les logiciels libres

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

Mot-clé - svg

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

jeudi 27 mai 2010

Assurez la promotion des RMLL 2010

Par Gilles le jeudi 27 mai 2010, 00:41 - Logiciels libres

RMLL_2010_AFFICHE.png

Affichage

Si vous disposez d'un blog ou d'un site web, d'un espace d'affichage (ailleurs qu'au dessus-de votre lit), il est possible pour vous d'assurer la promotion des prochaines Rencontres Mondiales du Logiciel Libre.

L'affiche est disponible et téléchargeable sur le site (PNG et PDF A3 et A4). Si vous avez besoin de volumes, une demande peut être faite. L'un de nos partenaires prend en charge l'impression d'un nombre conséquent d'affiches aux formats A3 et A4. Le fichier source vectoriel SVG est également disponible et sous licence libre Art libre, pour ce qui a été produit par l'organisation de la manifestation. Cela exclut donc évidemment les logos des applications et des partenaires qui leur appartiennent. En utilisant le fichier source (multilangue français/anglais), vous pouvez produire tous les formats souhaités (Si vous avez des plans pour de l'affichage en 4x3 partout en France, contactez nous LOL )

Pour les téléchargements et les demandes, c'est par là que ça se passe.

Bannières web

Si vous disposez d'un espace web, vous pouvez y afficher une des bannières. Elles sont existantes en divers formats, y compris les stickers web (assez sympa, non?) Les bannières et stickers, c'est par ici.

un commentaire

- page 1 de 3