Tutoriel : Bille de verre sous Inkscape

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.

Vus : 1823
Publié par Poupoul2 : 56