Arts Visuels & Numérique
Découvrez mille et une façon de dessiner à l'aide d'outils numériques.
- Découvrir les outils
- Quelle est la différence entre matriciel et vectoriel ?
- Quels logiciels de création graphique libre existent ?
- Kit de création graphique libre
- GIMP : Les tutos images et aide.
- INKSCAPE : Le logiciel de dessin vectoriel libre.
- Les différents menus d'Inkscape
- La flèche de sélection
- Carrés & Ronds
- Travailler avec précision
- Régler son espace de travail
- La différence entre Objets et Chemins
- Importer une image dans Inkscape
- Le système de calques
- Créer des groupes
- Aligner des objets entre eux
- Les opérations booléennes
- Le problème des bordures
- Générer des effets typographiques avec Inkscape ?
- (*) Réaliser une affiche avec Inkscape
- Différentes manières de réaliser le logo de la Labomedia
- PROCESSING : Je débute le code et la programmation.
Découvrir les outils
Pinceaux, Crayons, Compas... Et en numérique alors ?
Quelle est la différence entre matriciel et vectoriel ?
Quelle est la différence entre matriciel et vectoriel ?
Le numérique est un champ de bataille où s’affrontent deux types d’images distinctes : les images matricielles et les images vectorielles. Comprendre la distinction entre celles-ci est fondamental pour s’en servir à bon escient. Le but de cette page est d’éclaircir cette distinction.
Pour commencer, voici un cercle que j'ai dessiné dans le logiciel GIMP, qui traite des images matricielles :
Jusqu’ici, tout va bien. Je décide alors de zoomer sur le bord de mon cercle, en maintenant Ctrl et en utilisant la molette de la souris vers le haut. Stupeur ! Que vois-je apparaître !?
La jolie courbe de mon cercle est maintenant toute rugueuse… Vous le savez, ce que nous voyons là sont des pixels !
Qu’est ce qu’un pixel ? C’est le composant fondamental de l’écran de l’ordinateur.
Le nombre de pixels présent à l'écran s'appelle la résolution de l’écran : la résolution standard d’un écran est aujourd’hui 1920 x 1080, c’est-à-dire qu’il est constitué de 1920 colonnes de 1080 pixels, soit 2 073 600 pixels !
Chaque pixel est lui-même constitué de 3 LEDs : une rouge, une verte et une bleue, dont la balance permet de reconstituer toutes les couleurs que peut percevoir l’œil humain.
Pour pouvoir afficher une image à l’écran, nous avons en fait besoin d’un tableau en deux dimensions qui ressemble à ceci :
C’est de cette manière que l’appareil photo fonctionne. À partir des informations lumineuses que son capteur reçoit, celui-ci crée un tableau de valeurs de luminosité qu’on appelle communément une photo numérique. Cette représentation correspond au
format de fichier nommé JPEG. Le format PNG est similaire dans son mode de fonctionnement mais ajoute une quatrième valeur au pixel : sa transparence.
Voici une image prise à l’appareil photo dont j’ai extrait un carré de 25 x 25 pixels, puis que j’ai agrandi :
Les colonnes et rangées sont bien visibles. Il y en a 25 de chaque. Chaque carré contient trois valeurs de couleurs, une pour le rouge, une pour le vert et une pour le bleu.
Un problème se pose avec cette méthode : du fait que cette manière de stocker les données possède une taille minimale : il n’est pas possible de zoomer à l’infini. À un zoom de 100%, c’est-à-dire à taille réelle, à chaque pixel de l’écran correspond un pixel du fichier.
Cependant, à un zoom de 200%, un pixel du fichier correspond à 4 pixels de l’écran (en forme de carré). Ces 4 pixels ont donc la même couleur, puisqu’il n’y a pas d’information de couleur plus petite. L’image est pixelisée.
De ce fait, on peut déduire que lorsque l’on travaille avec une image matricielle, il ne faut jamais augmenter son zoom au-delà de 100%. C’est à partir de cette limite que l’image sera pixelisée. Il vaut mieux avoir en tête la résolution maximale qu’aura
l’image et générer le fichier en fonction de ce paramètre.
Je vais maintenant recommencer ma tambouille, mais cette fois-ci en dessinant un cercle sur Inkscape, qui, lui, permet de générer des images vectorielles. Voilà ce que nous obtenons en zoomant dessus :
Mazette ! Où sont donc passés mes pixels ? Eh bien ça dépend de ceux dont on parle. Les pixels de l’écran, eux, sont toujours là. Les pixels du fichier, par contre, ont disparu ! Pour la simple et bonne raison que nous sommes maintenant en présence d’un
fichier vectoriel, dont l’extension commune est .svg .
Nous utilisons ici une logique différente de stockage d’information. Pour schématiser, nous pourrions nous dire qu’au lieu de stocker directement l’image selon une suite de pixel, nous stockons une description de l’image, qui pourrait ressemblerait à ça :
Il s’agit d’instructions à dessiner, majoritairement composées de nombres, notamment de coordonnées relatives les unes aux autres, et de mots-clefs décrivant des formes graphiques, comme la courbe ou le rectangle.
Grâce à cette logique, le dessin n’est pas figé, mais nécessite une étape supplémentaire : il faut maintenant qu’il soit effectivement traduit en pixels afin de pouvoir être affiché à l’écran. Ainsi, le programme qui se charge de l’interpréter, dans notre cas Inkscape,
peut redessiner l’image à la bonne résolution indépendamment du zoom demandé. Il s’agit pour lui d’interpréter correctement les coordonnées contenues dans le fichier et de les adapter au zoom et à la résolution actuels.
Le vectoriel permet donc un redimensionnement infini. Cela vient du fait qu’au lieu de stocker des informations absolues, il ne contient que des relations entre les coordonnées, elles-même se référant à une valeur unique. En changeant cette valeur,
l’ensemble des relations est impactée et l’image entière est modifié aux bonnes proportions. De surcroît, ce système de coordonnées est également adapté à l’usinage, puisqu’il permet de fournir aux machines la position de leurs axes.
Vectoriel et matriciel : quels usages ?
On pourrait penser que la modularité du vectoriel relègue le matriciel au rang de technologie dépassée. Mais il n’en est rien. Comme vous vous en doutez, les deux formats sont en réalité complémentaires et n’ont pas vocation à être utilisés de la même manière.
En tout premier lieu, il n’est pas pertinent de prendre une « photo vectorielle ». Le monde n’étant pas constitué d’ellipses ou même de courbes, un tableau en deux dimensions contenant des couleurs correspond mieux à notre perception rétinienne, à condition que les pixels soient assez petits pour être indiscernables.
Cela implique que si nous souhaitons retoucher une photo, puis l’imprimer, le format matriciel paraît également plus approprié. À moins que la résolution de la photo soit ne trop basse, il ne semble pas nécessaire de changer son format lors de ces opérations. De surcroît, la vectorisation (le passage d’une image matricielle à une image vectorielle) modifie le rendu de celle-ci, et nous souhaitons en général garder le rendu originel.
Si nous souhaitons afficher une image à l’écran à différents niveaux de zoom, le vectoriel est plus approprié. Admettons que nous souhaitions faire une application interactive qui permette, depuis une image de la Terre vue de l’espace, de zoomer jusqu’à distinguer un brin d’herbe. Supposons qu’à taille maximale, ce brin d’herbe fasse 3 par 20 pixels, et que celui-ci est 10 000 fois plus petit que la Terre (ce qui est encore largement sous-estimé). Pour que le zoom sur le brin d’herbe respecte un ratio de 1 pixel dans le fichier pour 1 pixel à l’écran, il faudrait donc que la Terre, dans une image matricielle, fasse 200 000 pixels ! C’est beaucoup trop pour l’ordinateur. Or, en vectoriel, ce problème disparaît. L’écran calculera rapidement que le niveau de zoom est tel qu’il a juste à remplir l’écran de la couleur de la Terre, puis affichera le brin d’herbe au moment voulu. Bien sûr, c’est une exemple théorique, il existe de meilleures manières de concevoir un tel programme qu’un simple choix entre deux gigantesques fichiers.
Dans la même optique, le format vectoriel est très utilisé dans le web car il permet d’adapter automatiquement du contenu à la résolution du navigateur de l’utilisateur. Par ailleurs, nous n’avons parlé ici que d’un contenu gardant ses proportions, mais le vectoriel permet de déformer une image aisément, par exemple en élargissant un carré pour en faire un rectangle, ce que ne permet pas le matriciel, qui devrait ajouter ou supprimer des pixels arbitrairement.
De là suit que le vectoriel est préférable pour l’animation. Animer un dessin en images matricielles nécessite de dessiner chaque image l’une après l’autre. C’est un travail fastidieux et il est difficile d’obtenir une image fluide. Le vectoriel permet de bouger les points de référence de l’objet à animer ce qui simplifie la tâche. Les logiciels d’animation modernes, comme Krita, permettent même de ne configurer que des images clefs puis d’interpoler les positions des points entre ces images.
Quels logiciels de création graphique libre existent ?
Quels logiciels de création graphique libre existent ?
Pour de la retouche photo :
Si vous cherchez un successeur de Paint ou une alternative à Photoshop, GIMP est là pour vous ! Gestion des contrastes, redimensionnage, effets de flous et transparences, tout y passe.
Pour du dessin vectoriel :
Pour du tracé vectoriel, Inkscape est au top. Pourvu de nombreuses fonctionnalités et modules, il vous permettra tout autant de réaliser vos affiches de communications que préparer des fichiers d’usinages. Simple à prendre en main, il permet de travailler rapidement et efficacement.
Pour du dessin :
Que vous soyez artiste amateur ou designer, Krita est à votre service pour laisser libre cours à votre imagination. Doté d’un large choix de brosses et d’outils graphiques d’animation, il exploite aux maximum les possibilités des tablettes graphiques. À vos pinceaux !
Pour de la modélisation 3D :
Vous êtes un voyageur de l’espace? Embarquez dans Blender ! Le fleuron de la modélisation 3D est disponible sur la toile. Outils d’animations, moteur de rendu, gestion avancée des éclairages et rendus, ce truc-ci, ce truc-là… C’est sans fin ! Spring (2019) et Cosmos Laundromat (2015) ont été réalisé avec lui, au côté de nombreux plans d’architecture et de modèles d’impression 3D .
Kit de création graphique libre
Dans ce Livre, nous y présentons le trios incontournable du graphisme libre : Gimp, Krita et Inskape.
À eux trois ces logiciel balaye une fourchette large de création / retouche d'image.
Peinture numérique, retouche photo, dessins vectoriels et même animation, ces alternatives gratuite au cloud adobe et autres sont un chouettes atouts !
3 Logiciels d'édition et création d'image numériques
Ces trois logiciel : Gimp, Krita et Inkscape, appartiennent à une même catégorie de logiciels en création graphique, Ce sont des éditeurs d'images numériques.
Ces images numériques peuvent être sous la forme matricielles ou vectorielles. La différence technique entre les l'édition de vecteurs et d'image bitmap (= matricielle) provient de la différence entre les images vectorielles et les images matricielles.
À par l'Édition et la création d'image et parmi beaucoup d'autre choses, il ont en commun :
- L'export et la la lecture des fichiers en multiples formas (.PDF, .PNG, .JPG, .SVG, ...)
- Une gestion avancée de calques en couches,
- Et bien qu'il y ai des petites variations, la logique des interfaces.
Bien qu'ils aient énormément de capacité communes et pour mieux comprendre leurs spécificité et atouts distinctement on peut les classer en 3 groupes :
Krita - La peinture numérique /ou/ digital peinting [Bitmap]
Gimp - Retouche photo [Bitmap]
Inkscape - Dessin vectoriel(*) [Vecteur]
À noter que Gimp et Krita permettent de réaliser de l'animation 2D !
Il sont tous les trois sous licence GNU et sont utilisable sur GNU/LINUX, Windows, Mac OS, ....
Petit plus :
pages Wikipédia utiles : Krita - Gimp - inkscape - image numérique - Rester Graphic Editor - GNU GPL
(*) = type création de logo, dessin technique, supports de communication, typographie, médiums, ...
Gimp
GIMP est l'acronyme de GNU Image Manipulation Programme, un programme de manipulation d'image.
La première version est lancée le 29 juillet 1995 par Peter Mattis et Spencer Kimball. Ces développeurs et les mainteneurs de GIMP souhaitent créer un logiciel d'infographie libre haut de gamme pour la manipulation et la création d'images originales, de photos, d'icônes, d'éléments graphiques de pages web, et d'art pour les éléments de l'interface de l'utilisateur.
Il possède des outils utilisés pour la retouche et la manipulation d'image, le photomontage, le dessin à main levée, réajuster, rogner, convertir entre différents formats d'image, et diverses tâches plus spécialisées.
Un fichier de travail Gimp se fini par l’extension .XCF
image version : 2.10.38 () - manuel d'utilisation (anglais).
Krita
Krita est un outil pour le dessin libre et l'animation.
La première version est lancée le 21 juin 2005 au sein du projet KDE. elle est actuellement déveloper par la Foundation Krita et KDE.
Il permet d'éditer et retoucher les images matricielles. Il est Initialement inspiré de logiciels tels que GIMP ou Adobe Photoshop2, il s'est, dans un second temps, orienté pour la peinture numérique et l'animation 2D.
Un fichier de travail Krita se fini par l’extension .kra
image version : 5.2.6 (1er octobre 2024) - manuel d'utilisation.
Inkscape
Inkscape est un éditeur d'image vectorielle.
Première version 11 novembre 2003, sur la base d’une reprise d'un projet de logiciel du nom de Sodipodi, qui est lui-même une reprise du logiciel Gill, créé pour le bureau GNOME un environnement de bureau libre du système d'exploitation GNU. À cause de des divergences au sujet de l’avancée future du développement Inkscape est par la suite devenu une entité propre.
Il a des fonctionnalités similaires aux logiciels propriétaires CorelDRAW et Adobe Illustrator.
Un fichier de travail Inkscape se fini par l’extension .SVG
image version : 1.4 (13 octobre 2024) - manuel d'utilisation (anglais / français).
GIMP : Les tutos images et aide.
Traitement de l'image sur logiciel libre. Retouche photo, mise en page, dessin ? C'est ici !
Pour plus de détails retrouvez tous les tutos de la communauté du logiciel sur leur site officiel :
https://www.gimp.org/tutorials/
GIMP - Comment retoucher une photo rapidement
Comment retoucher une photo rapidement avec GIMP
Une photo importée depuis un appareil peut parfois nous paraître un peu fade.
Pour améliorer rapidement son rendu, nous allons voir ici comment ou peut se servir de l’outil Niveaux de GIMP pour régler son contraste.
Nous lançons GIMP, puis ouvrons le fichier contenant notre image via Fichier > Ouvrir.
En général, nous n’ouvrons pas directement le fichier présent dans l’appareil mais une copie que l’on a fait sur le disque dur.
Voici l’image que j’ai sélectionnée pour ce tutoriel :
Bien que celle-ci soit correcte, nous observons que le mur en arrière-plan paraît gris alors que celui-ci est en réalité blanc. De même, les ombrages sont peu marqués.
L’outil Niveaux va nous permettre rapidement de modifier cela.
Celui-ci est accessible depuis Couleurs > Niveaux… .
Hormis la case Aperçu située en bas à gauche que vous devriez cocher pour pouvoir voir les modifications appliquées à l’image en temps réel, seule la partie Niveaux d’entrée nous intéresse :
Comme vous pouvez le voir, un tableau en deux dimensions classe le nombre de pixels en fonctions de leur niveau de luminosité. Nous pouvons voir, à gauche, qu’il n’y a aucun pixel totalement noir, à droite qu’il n’y a aucun pixel totalement blanc, et
également un pic situé à droite, qui correspond dans ma photo au mur en arrière-plan.
Nous allons maintenant nous servir des flèches de sélection en-dessous du tableau pour restreindre les niveaux de luminosité à un plus petit nombre de valeurs :
Les pixels avec une luminosité moyenne inférieure ou égale à 19 sont devenus noirs. Ceux avec une luminosité égale ou supérieure à 214 sont devenus blancs.
Nous avions auparavant un nombre de valeurs de luminosité possibles compris dans un octet, c’est à dire 256 valeurs. Nous avons restreint ces possibilités, il n’y en a plus que 214 – 19, c’est-à-dire 195. Le logiciel a recalculé automatiquement les
pixels de la zone médiane pour les faire correspondre à la bonne valeur sur cette nouvelle échelle, en fonction de leur position dans l’échelle originale. Nous avons donc perdu en résolution lors de cette opération.
Une fois les noirs et blancs corrigés, vous pouvez maintenant utiliser la flèche du milieu, qui modifie le Gamma, c’est-à-dire l’endroit où se situe la valeur médiane de la luminosité sur la nouvelle échelle. Pas besoin de théorie ici, le réglage se fait à l’œil en s’aidant de l’Aperçu. Une fois que vous avez le bon réglage, appuyez sur Valider, et voilà le résultat !
GIMP - Comment recadrer une image
On commence par ouvrir le fichier que l’on veut modifier, avec Fichier > Ouvrir.
Lorsque celui-ci est apparu dans GIMP, on sélectionne, dans la barre d’outils, l’Outil de
découpage, en forme de scalpel :
Une fois celui-ci sélectionné, il faut cliquer au sein de l’image puis déplacer sa souris avant de relâcher, nous obtenons un cadre de découpe :
Il est alors possible de saisir les carrés situés sur les bords du cadre pour redimensionner celui-ci.
Une fois le cadre ajusté, il faut cliquer au milieu de celui-ci pour rendre le recadrage effectif.
Il faut maintenant exporter l’image. Attention, dans GIMP, Enregistrer ou Enregistrer sous sauvegarde un fichier GIMP, et non un fichier image.
Si nous voulons écraser l’ancien fichier, nous utilisons Fichier > Écraser nom_du_fichier.png, si nous voulons enregistrer une nouvelle image, nous utilisons Fichier > Exporter.
INKSCAPE : Le logiciel de dessin vectoriel libre.
Découvrir Inkscape, pour créer des dessins, des affiches et du contenu oueb !
Pour plus de détails retrouvez tous les tutos de la communauté du logiciel sur leur site officiel :
https://inkscape.org/fr/apprendre/
Les différents menus d'Inkscape
À la première utilisation, Inkscape peut paraître intimidant : il y a des boutons partout ! Pas de panique. Vous n'avez aucunement besoin de savoir à quoi sert chacun des boutons pour vous servir d'Inkscape.
Cet article vous présentera les différents menus de l'interface d'Inkscape. Il est possible que votre affichage soit un peu différent de celui présenté ici mais vous devriez retrouver vos petits aisément. À noter : dans le menu Affichage, en haut, j'ai sélectionné le mode Large que je trouve plus agréable pour travailler.
Voici d'abord un schéma coloré pour vous aider à vous repérer et faire la différence entres les menus :
Voyons maintenant l'utilité de ces espaces un par un. Veuillez noter que je n'utiliserai pas les noms officiels de ces menus mais plutôt des noms intuitifs et adéquats.
Le Menu Principal
Situé en haut à gauche, il s'agit du menu classique présent dans la plupart des logiciels, qui vous permettra par exemple d'enregistrer les fichiers, d'ouvrir les préférences, et d'accéder à toutes les fonctionnalités du logiciel.
Voici un aperçu des différents menus :
- Fichier : tout ce qui concerne la manipulation des fichiers ( enregistrement, import, propriétés... ).
- Édition : copier, coller, sélectionner... Et les préférences du logiciel !
- Affichage : permet de configurer l'apparence du logiciel, et notamment les grilles, la disposition des menus, le zoom...
- Calque : vous permet de naviguer entre les calques et de les manipuler.
- Objet : permet d'appliquer des modifications à l'objet actuellement sélectionné
- Chemin : permet d'appliquer des modifications au chemin actuellement sélectionné
- Texte : permet d'éditer le texte sélectionné
- Filtres : permet d'ajouter des effets graphiques au-dessus de vos formes
- Extensions : permet d'accéder aux extensions que vous avez installées
- Aide : permet d'accéder à la documentation
L'Espace de Travail
Situé au centre de l'interface, il s'agit de votre table à dessin.
Pas grand chose à raconter ici, même si vous y passerez la plupart du temps !
La Barre d'Outils
Située à gauche de l'interface, la Barre d'outils vous permet de sélectionner en un clic l'outil que vous souhaitez utiliser : sélection, dessin d'un rectangle, texte, règles, etc...
En général, après avoir sélectionné un outil, votre prochaine action aura lieu sur l'Espace de travail.
Le Menu d'Édition Rapide
Situé au dessus de l'Espace de travail, ce menu change en fonction de l'Objet que vous avez sélectionné. Il permet d'éditer l'objet rapidement, en fonction de son type.
Si l'objet sélectionné est un rectangle, par exemple, il permettra de modifier sa position, sa taille, le rayon de ses angles.
Si l'objet sélectionné est un texte, il permettra de changer sa police, son alignement, sa taille.
C'est notamment via ce menu que vous repositionnerez vos éléments, si vous souhaitez indiquer le placement via des chiffres plutôt qu'à la souris.
Le Menu Couleurs
Situé en bas de l'interface, le Menu couleurs permet de modifier rapidement la couleur de l'objet sélectionné, ainsi que son contour et sa transparence.
Le Menu Contextuel
Dans Inkscape, un certain nombre d'outils spécifiques sont considérés comme de petits modules autonomes, par exemple le système d'alignement, la modification d'un texte, l'édition du contour d'un objet, l'export au format PNG...
Dans l'exemple ci-dessus, c'est l'interface de modification des calques que j'ai affichée, à laquelle on accède via Calques > Calques... . L'interface présentée ici me permet d'ajouter ou supprimer des calques facilement. Il est également possible d'utiliser la souris pour réarranger les calques, ce qui est moins fastidieux qu'en utilisant le Menu principal.
À droite, vous pourrez naviguer entre les différents menus contextuels ouverts en cliquant sur leur noms, dans l'exemple ci-dessus on peut par exemple voir que le menu Exporter au format PNG est accessible en un clic.
La petite flèche grise à côté du nom du menu contextuel permet de le minimiser, la petite croix grise permet de le fermer.
Le Menu Raccourcis
Si vous utilisez l'affichage par défaut, ce menu sera scindé en deux, si vous utilisez le l'affichage Large, il sera regroupé tout à droite de l'interface.
Il permet d'effectuer des actions générales en un clic, par exemple créer un nouveau document, copier un objet, ou ouvrir un menu contextuel.
Je m'en sers personnellement assez peu, car la plupart des actions qu'il propose sont également accessibles via des raccourcis clavier. Il permet cependant d'activer et désactiver le magnétisme, ce qui est souvent nécessaire.
Ce qui conclut la présentation de l'interface d'Inkscape.
Celle-ci est assez chargée, mais il n'est pas nécessaire de tout connaître pour s'en servir : on se familiarise peu à peu avec les fonctionnalités au fur et à mesure de son apprentissage.
La flèche de sélection
C'est l'outil principal d'Inkscape ! La flèche de sélection permet d'attraper les objets, de les déplacer, de les redimensionner et de les faire pivoter.
Il s'agît de l'outil le plus en haut de la barre d'outil, par défaut associé au raccourci clavier F1.
Lorsque que vous cliquez sur un objet, celui-ci est sélectionné, et de petites poignées apparaissent autour de lui. En cliquant à nouveau dessus, ces poignées changent.
Lorsqu'un objet est sélectionné, cliquer dessus et déplacer la souris en maintenant le clic gauche permet de le déplacer.
Les poignées vers l'extérieur permettent de redimensionner l'objet.
Maintenir la touche maj en redimensionnant l'objet permet de le redimensionner de manière symétrique.
Maintenir la touche ctrl en redimensionnant l'objet permet de le redimensionner de manière proportionnelle.
Les poignées aux angles en cercle autour de l'objet permettent de faire pivoter l'objet.
Maintenir la touche ctrl en faisant pivoter l'objet permet de faire des pas de 30°.
Les poignées sur les côtés en cercle autour de l'objet permettent de déformer l'objet.
Lorsque l'on sélectionne un objet avec la flèche de sélection, le menu d'édition rapide permet de modifier rapidement les dimension, de changer la profondeur de l'objet, de les inverser ou les faire pivoter de 90°.
Carrés & Ronds
Inkscape propose deux outils pratiques pour dessiner des rectangles et des ellipses.
En fonction de votre PC, il est possible que les deux icônes qui permettent de sélectionner chacun de ces outils soient situées au même endroit. Il faudra alors laisser votre clic gauche appuyé sur l'icône visible ( icône de sélection de l'outil rectangle par exemple ) pour changer d'outil.
L'outil rectangle vous permet d'obtenir un rectangle par cliquer-glisser. Maintenir la touche ctrl appuyée pendant l'opération facilitera la réalisation d'un carré. Maintenir la touche maj enfoncée pendant l'opération centrera le carré autour du point de départ.
Une fois le rectangle ajouté, il est possible de modifier l'arrondis des coins à l'aide de la poignée ronde située sur son contour.
L'outil ellipse vous permet d’obtenir une ellipse par cliquer-glisser. Maintenir la touche ctrl appuyée pendant l'opération facilitera la réalisation d'un cercle. Maintenir la touche maj enfoncée pendant l'opération centrera l'ellipse autour du point de départ.
Une fois l'ellipse ajoutée, il est possible de modifier la portion angulaire qui sera remplie, comme dans le cas d'un camembert, à l'aide de la poignée ronde située sur son contour.
Veuillez noter que les rectangles et les ellipses sont des chemins particuliers, qui n'ont pas de poignées par défaut. Il faudra utiliser Chemin > Objet en chemin... pour leur en rajouter. Vous n'aurez alors plus accès au menu d'édition rapide associé, mais à celui d'un chemin générique. Plus d'informations à ce propos dans l'article sur les Objets et les Chemins.
Travailler avec précision
L'un des intérêts principaux des logiciels vectoriels est qu'ils permettent de travailler avec une précision absolue. Du fait que les formes dessinées soient stockées à l'aide de coordonnées, il est possible d'indiquer celles-ci avec n'importe quel degré de précision. Même au millionième de mm .
Pour travailler avec précision, nous ne travaillons pas à la souris, mais nous tapons les coordonnées au clavier, à l'aide du menu d'édition rapide.
Par exemple, pour créer le fond d'une affiche A4, je créé un rectangle n'importe où sur mon espace de travail, puis je reprends la flèche de sélection afin d'afficher le menu d'édition rapide des Objets. Afin de couvrir exactement la taille de ma page, j'indique une origine de [ 0, 0 ], une largeur de 210 et une hauteur de 297, ce qui correspond à la taille d'une feuille A4 :
Bonne nouvelle, vous pouvez effectuer des opérations mathématiques directement dans les boîtes, ce qui est pratique pour certaines opérations.
Par exemple, pour ne couvrir que la moitié de la feuille A4 :
Cette méthode est pratique pour créer des bordures, notamment autour des titres. Lorsque vous aurez tapé votre texte, et choisi votre police, vous pourrez alors trouver la taille de votre titre. Il vous est alors possible de copier, par exemple, sa largeur. Pour créer un cadre avec des marges de 15 millimètres, vous pourrez créer un rectangle, puis, en guise de largeur, coller la largeur de votre titre et rajouter 30 millimètres. Votre cadre fera donc exactement la taille de votre titre plus 30 mm.
Régler son espace de travail
Par défaut, lorsque vous ouvrez un nouveau document dans Inkscape, celui-ci vous présente une feuille A4 vierge.
Si vous souhaitez travailler sur un autre format papier, ou travailler pour des éléments graphiques qui seront affichés à l'écran, il vous faudra commencer par modifier quelques paramètres afin de pouvoir travailler avec aisance.
Ces réglages sont accessibles depuis le menu Fichier > Propriétés du document ( également accessible via le raccourci clavier ctrl + maj + D ) .
La première chose à modifier dépend de la destination de votre image. Si elle a vocation à être imprimée, il est préférable d'utiliser les millimètres comme unité de référence. Si elle a vocation à être visionnée sur un écran, par exemple sur un site web ou un jeu vidéo, il vaut mieux sélectionner le pixel comme unité de référence.
Ce réglage se fait en modifiant les boîtes suivantes :
Une fois ces unités réglées, il faudra définir la taille de votre espace de travail. Dans l'encart Taille de la page, des dimensions standards vous sont proposées, mais il est également possible de les spécifier en utilisant les boîtes de l'encart Dimensions personnalisées :
Par exemple, si vous travaillez pour un site web, après avoir sélectionné le pixel comme unité de référence, il est probable que vous souhaitiez changer les dimensions de l'espace de travail pour 1920 x 1080, ce qui correspond à la taille d'un écran HD, afin que l'image soit assez grande pour ne pas pixeliser sur ces écrans.
Une fois ces réglages faits, le cadre noir de l'espace de travail d'Inkscape correspondra à la taille réelle du document que vous souhaitez créer, et l'édition de dimensions se fera selon l'échelle adéquate.
La différence entre Objets et Chemins
Deux concepts sont centraux à l'utilisation d'Inkscape : les Objets, et les Chemins. Pour comprendre facilement ce qui va suivre, il est préférable d'avoir une petite idée de ce que l'on appelle dessin vectoriel.
Lorsque vous utilisez Inkscape, la plupart des formes que vous créerez seront similaires à celles que vous pouvez créer en utilisant l'outil pour tracer des courbes de Bézier et des segments de droites. Lorsque vous l'utilisez, vous pouvez tracer un chemin, relié par différents points, que vous finirez en général par clore en retournant au premier point :
Une fois le tracé refermé, celui-ci s'affiche maintenant comme ça :
Inkscape lui a rajouté un contour, et nous pourrions également remplir la forme.
Ce qui est intéressant, c'est ce qu'il se passe lorsque que nous utilisons une des flèches de sélection présente en haut de la Barre d'outils, à gauche de l'interface.
La première nous rajoute des poignées, qui permet de modifier la taille de notre forme :
La seconde flèche, elle, nous fait à la place apparaître chacun des points qui constituent notre forme :
Si des points apparaissent lorsque nous sélectionnons notre forme avec la seconde flèche, c'est que nous sommes en présence d'un chemin. Un chemin est une forme constituée d'une suite de points reliés entre eux. S'il y a au moins trois points, alors la forme peut être colorée à l'intérieur.
Les chemins sont des outils très utiles, dotés de propriétés particulières. Inkscape est par exemple capable de détecter la surface d'intersection de deux chemins.
Un chemin est nécessairement un objet, mais un objet n'est pas forcément un chemin. En réalité, tout ce qui est présent sur l'Espace de travail est un objet, une photo que vous auriez importée par exemple. Dans le cas de la photo, vous pouvez utiliser la première flèche pour la redimensionner, mais pas la deuxième flèche pour en sélectionner les points car... elle n'en a pas !
Ce qui explique une propriété particulière des rectangles et ronds que vous dessinez avec les outils qui leurs sont dédiés. Ceux-ci ne sont pas chemins. En effet, si vous utilisez la deuxième flèche pour attraper un des points du rectangle, vous vous rendez compte que celui-ci n'en a pas...
Pour des raisons d'optimisation, il est plus simple de stocker les informations concernant un rectangle autrement qu'avec ses points. Un rectangle est constitué de quatre points, chacun défini par deux informations, ce qui fait en tout 8 informations. Or, vous pouvez également le décrire en utilisant uniquement sa position, et sa taille, ce qui ne fait que 4 informations, soit moitié moins.
Si vous voulez transformer votre forme en chemin, il faudra utiliser Chemin > Objet en chemin... . C'est également le cas pour du texte.
Importer une image dans Inkscape
Bien qu'il soit un logiciel de dessin vectoriel, Inkscape permet également d'importer des images matricielles.
Pour ce faire, il faut utiliser le menu Fichier > Importer, ou plus simplement le raccourci clavier ctrl + I .
Après avoir sélectionné le chemin de l'image en question, une boîte de dialogue s'ouvre, vous permettant d'indiquer quelques paramètres :
Le premier paramètre concerne la manière dont le fichier sera importé.
Le paramètre Incorporer charge l'image dans le fichier Inkscape en cours d'édition. De cette manière, si vous supprimez le fichier originel de l'image ou modifiez son emplacement, celui-ci ne disparaît pas du fichier Inkscape. À l'inverse, Lier l'image charge l'image dans Inkscape à chaque ouverture du document sans le stocker dans le fichier. Celui-ci sera donc plus léger. Cependant, si son emplacement change ou si elle est supprimée, celle-ci ne s'affichera plus. Il est donc en général préférable d'Incorporer l'image.
Le paramètre de résolution de l'image définit sa taille réelle si elle doit être imprimée. Par défaut, il est préférable de la Déduire du fichier. À noter qu'en faisant cela, elle apparaîtra à sa taille originelle dans le document, ce qui impliquera qu'un agrandissement de celle-ci au-delà de ces dimensions résultera en une pixellisation de l'image.
Le mode de rendu de l'image définit la manière dont Inkscape affiche celle-ci dans l'espace de travail. À moins que vous n'utilisiez un vieux PC ayant peu de mémoire vive, il vaut mieux utiliser le mode Lisse afin d'avoir un rendu fidèle à la réalité dans l'espace de travail.
Le système de calques
Les calques sont un outil courant dans les logiciels de graphisme. GIMP utilise le même système, et c'est également le cas des langages de programmation pour faire l'interface des logiciels.
L'idée est équivalente à dessiner sur plusieurs feuilles de papier calque superposées, de manière à ne pas redessiner directement par dessus un dessin, et à pouvoir réarranger les calques au besoin.
Voici sa typologie, et les fonctionnalités qui vous intéresseront dans un premier temps :
En premier lieu, il est possible d'ajouter un calque à l'aide du bouton + vert situé en bas à gauche. Vous pourrez le renommer et indiquer sa position.
Cependant, en cliquant et glissant les calques dans l'interface, vous pouvez réagencer ceux-ci comme bon vous semble. Cela rend d'ailleurs un peu caduques les flèches oranges permettant de réarranger les calques. Il est également possible de ranger des calques à l'intérieur des autres calques.
Les calques situés en haut apparaissent devant, ceux situés en bas apparaissent derrière.
Le bouton - rouge vous permet de supprimer le calque sélectionné. Attention, cela supprime tous les objets qu'il contient !
Le petit bouton en forme d’œil à côté du nom du calque permet de cacher le calque, afin de mieux travailler.
Le petit bouton en forme de cadenas permet de verrouiller le calque, ce qui empêche d'en sélectionner les éléments. C'est notamment pratique lorsque l'on a mis un fond coloré à l'image, et que l'on ne souhaite pas le sélectionner quand on clique dessus.
Il est également possible de régler l'opacité générale du calque afin d'obtenir des effets de transparence.
Dans les outils de dessin matriciels, comme GIMP, un calque est constitué de pixels. De fait, lorsque que vous redessinez par dessus un dessin déjà présent, celui-ci est remplacé, car les pixels sont modifiés directement.
Ce n'est pas le cas avec un dessin vectoriel, car les formes sont stockées indépendamment les unes des autres. Un dessin placé au dessus d'un autre dans le même calque n'écrase pas celui qu'il recouvre.
Il devient donc possible de réarranger la superposition des objets graphiques à l'intérieur même d'un calque. Pour ce faire, il faut sélectionner l'objet dont on souhaite modifier la profondeur, puis utiliser le Menu d'édition rapide via les boutons d'agencement :
Ceux-ci permettent de descendre ou monter l'objet d'un niveau de profondeur, ou de l'envoyer au premier ou dernier plan. Cela ne changera pas les objets de calques par ailleurs.
Créer des groupes
Lorsque que vous commencez à faire des dessins complexes, il peut vous arriver d'avoir des dizaines de formes à l'écran. Ce qui peut être assez gênant pour s'y retrouver ou déplacer les objets.
Inkscape vous permet de grouper des objets ensemble afin qu'ils ne forment plus qu'un seul objet. À noter que cette opération est facilement réversible.
Pour grouper des objets ensemble, il faut commencer par sélectionner les objets que vous voulez grouper, par exemple en maintenant la touche ctrl enfoncée quand vous cliquez dessus. Une fois vos objets sélectionnés, vous pouvez utiliser le menu Objet > Grouper, ou plus simplement le raccourci ctrl + G afin de grouper ceux-ci.
Une fois votre groupe créé, c'est l'ensemble des objets que vous sélectionnerez, déplacerez et redimensionnerez à l'aide de la flèche de sélection. Cela sera visible car votre cadre de sélection, celui qui affiche vos poignées, englobera l'ensemble de la sélection.
Pour dégrouper un ensemble d'objet, on utilise en général ctrl + maj + G .
Pour retravailler sur un objet qui fait partie d'un groupe, deux solutions sont possibles.
La manière la plus simple est de dégrouper l'ensemble des objets, d'effectuer les opérations sur l'objet en question, puis de regrouper l'ensemble.
Il est cependant également possible d'ouvrir un groupe, en double-cliquant dessus. Cependant, lorsque que vous faîtes ceci, même si cela est imperceptible à l'écran, vous ne pouvez plus manipuler que les objets à l'intérieur de groupe. Pour sortir du groupe, il faudra double-cliquer hors des formes qui constituent le groupe. Cette manière de faire peut-être difficile à appréhender dans un premier temps.
Veuillez noter qu'il est possible de grouper des groupes, autant de fois qu'il vous plaît.
Aligner des objets entre eux
Il est assez fréquent de vouloir aligner des objets entre eux. Même si le magnétisme permet souvent d'accrocher les objets entre eux à la souris, il n'est parfois pas possible de l'utiliser, notamment pour centrer les objets.
Celui-ci se présente ainsi, pour la partie alignement qui concerne cet article :
La première chose à faire est de définir la méthode que vous utiliserez pour aligner vos objets. Comme vous pouvez le constater, j'ai choisi "Dernier sélectionné". Pour aligner, il faut plusieurs objets : un ou plusieurs objets à aligner, et l'objet qui sert de référence pour l'alignement. Dans mon cas, j'ai tendance à me dire "Je prends cet objet, puis je l'aligne avec celui-là". C'est pourquoi j'ai choisi "Dernier sélectionné" : je sélectionne cet objet-là, puis je sélectionne cet objet-là pour l'aligner. Je vous conseille de définir la manière qui vous convient, puis de vous y tenir ensuite.
Les opérations booléennes
Voici un des outils les plus magiques d'Inkscape : les opérations booléennes. Celles-ci ne s'appliquent que sur les chemins, et il vous en faudra deux chemins distincts pour que l'opération fonctionne. Il faudra sélectionner les deux formes en même temps, par exemple en utilisant la touche maj pour ce faire.
Elles consistent à créer une nouvelle forme à partir de deux formes, en prenant en compte l'espace sur lesquelles elles se recouvrent, et celui sur lesquelles elle ne se recouvrent pas. Dans certains cas, comme la différence, la forme recouvrante est utilisée pour effectuer l'opération, ce qui change le résultat en fonction de la forme qui recouvre l'autre.
Il est à noter que ces opérations détruisent les deux formes pour créer la nouvelle, il est donc parfois nécessaire de dupliquer les formes originelles si elles doivent être conservées.
Ces opérations se trouvent dans le menu Chemin .
Un bon dessin vaut mieux qu'un long discours :
Vous pourrez trouver un tutoriel avancé d'utilisation de ces opérations dans le tutoriel typographie.
Le problème des bordures
Inkscape permet de travailler de manière parfaitement précise puisqu'il manipule des coordonnées, ce qui vous permet de régler vos graphismes au pixel près.
Que vous soyez consciencieux ou travailliez pour des interfaces graphiques où les dimensions doivent être réglées très précisément, l'utilisation des bordures d'Inkscape peut poser problème.
Admettons, pour l'exemple, que vous souhaitiez créer un carré de 8 pixels entouré d'une bordure de 1 pixel, pour une largeur totale de 10 pixels.
Vous pourriez intuitivement pour ce faire créer votre carré, l'ajuster de telle sorte qu'il fasse 8 pixels, puis rajouter une bordure de 1 pixels.
En réalité, si vous suivez cette méthode, le carré total fait maintenant 9 pixels de large, et le carré intérieur ne fait plus que 7 pixels de large.
La raison en est la suivante :
Dans Inkscape, la bordure s'étend autour du contour de la forme. De fait, elle dépasse à la fois sur l'extérieur et l'intérieur de la forme. Dans notre cas, choisir 1 pixel d'épaisseur créer une bordure qui dépasse de 0.5 pixel de chaque côté, et qui recouvre la forme intérieure de 0.5 pixel de chaque côté. Ainsi, à partir du carré initial de 8 pixel, nous rajoutons 0.5 pixel de chaque côté, ce qui fait 9 pixels au lieu des 10 que nous souhaitions. De même pour la forme intérieur qui est maintenant recouverte.
Il serait possible de simplement reprendre notre forme et la redimensionner, ce qui permettrait de l'agrandir jusqu'à 10 pixels de côté. Malheureusement, cela agrandirait également le contour proportionnellement, qui ferait alors plus d'1 pixel de large.
Deux méthodes sont possibles afin de contourner le problème.
La première est de recalculer nos dimensions pour prendre en compte comment l'algorithme d'Inkscape gère le positionnement des bordures. Dans notre cas, il faudrait créer un carré de 9 pixels de large, puis lui rajouter un contour d'1 pixel, afin d'obtenir les bonnes dimensions.
L'autre méthode, plus lente mais plus facile à manipuler, serait en fait de ne pas utiliser le contour d'Inkscape, et de créer un premier carré de 10 pixels de côté de la couleur de notre bordure, puis un carré de 8 pixels de côté de la couleur de fond, puis de centrer celui-ci, afin de simuler l'effet de bordure.
Générer des effets typographiques avec Inkscape ?
Inkscape est un logiciel permettant de générer des images vectorielles très polyvalent. Il peut notamment être utilisé pour le graphisme et permet de facilement générer de jolis effets textuels si l’ont connaît quelques astuces.
Le but de cette page est de vous en présenter quelques unes, ainsi que de faire le tour de diverses fonctionnalités très utiles dans ce programme. C’est un excellent article pour approfondir sa manipulation, bien que l’article soit assez dense. Prenez votre temps.
Vous pourrez le télécharger depuis le site officiel. Celui-ci est libre et gratuit, et disponible sur les OS de bureau standards (Windows, Mac & Linux).
Assez intuitivement, il faut se servir de l’Outil Texte pour créer du texte dans Inkscape. Il se trouve, par défaut, dans la barre d’outils à gauche du logiciel :
Une fois sélectionné, vous pouvez trouver son menu de réglage en haut de page permettant de sélectionner vos préférences :
Cependant, il existe une meilleure méthode de réglage, notamment pour la sélection de police. Commencez par ouvrir le sous-menu Texte et Polices, soit en utilisant Ctrl + Maj + T, soit via le menu Texte > Texte et police… :
Une fois celui-ci ouvert, cliquez dans votre espace de travail et commencez à taper votre texte. Vous pouvez alors utiliser le sous-menu pour choisir une de vos polices et prévisualiser le résultat :
Cliquez sur Appliquer lorsque la police vous convient.
Une fois le texte tapé, nous n’aurons plus besoin de l’Outil Texte, mais utiliserons la Flèche de Sélection, située en haut à gauche de la barre d’outils :
Lorsque nous l’utilisons, les objets que nous avons sélectionnés sont entourés par un cadre pointillé et munis de poignées en forme de flèches qui permettent de redimensionner l’objet :
Bien. Les premier paramètres que nous pouvons modifier sont la couleur et la couleur du contour. Pour éditer facilement ceux-ci, utilisez les carrés de couleurs situés en bas à gauche de l’interface. Cliquer sur un carré change la couleur du fond de l’objet, cliquer en maintenant Maj permet de changer la couleur du contour.
Si vous souhaitez modifier la taille du contour, faîtes un clic droit sur la valeur numérique à droite de Contour en bas à gauche pour ouvrir un menu déroulant vous permettant de sélectionner une autre épaisseur :
Notre premier effet graphique consistera à superposer deux fois le texte de manière décalée pour obtenir un semblant de rendu complexe. Il nous faut donc deux textes similaires.
Pour dupliquer un objet dans Inkscape, il faut l’avoir sélectionné et utiliser Ctrl + D . Le changement ne vous apparaîtra pas immédiatement, car l’objet dupliqué se trouvera juste au-dessus du premier. Cependant, en le déplaçant à la souris, vous verrez bien vos deux objets.
Dupliquez donc votre texte, décalez le légèrement en bas à droite, puis modifiez sa valeur d’opacité via le menu en bas à gauche :
Voici donc un premier rendu, très simple :
Le premier texte est noir avec un contour gris de largeur 1, le second, légèrement décalé, est bleu avec un contour blanc de largeur 0,25, et est transparent à 50%. Le jeu de transparence entre les contours surligne les interstices et donne du corps à notre
typographie, qui en paraît plus complexe qu’elle ne l’est en réalité !
Ici le même processus est utilisé avec une troisième couche :
Sans transparence :
Effet de transparence intéressant : au lieu de décaler les couches de textes, on les agrandit proportionnellement par rapport au point central, ce qui donne un effet de zoom. Nous perdons en lisibilité :
Cette introduction est suffisante pour la plupart des usages. La suite de ce tutoriel est plus technique, et rentre dans un usage avancé d’Inkscape.
Nous allons maintenant voir un outil extrêmement puissant pour obtenir des rendus raffinés. Il s’agit de la vectorisation d’objets matriciels. Il vous faudra expérimenter avec différents types d’images pour comparer les rendus, qui sont très variés. Je vais utiliser une image simple pour cet exemple, mais vous pouvez trouver vous-même une texture, en utilisant un moteur de recherche d’image, en utilisant, par exemple, les mot-clefs ‘texture feuilles‘.
J’utiliserai pour ma part cette image-ci :
Il faut d’abord l’importer dans Inkscape, soit via Fichier > Importer, soit en utilisant Ctrl + I . Les réglages d’importation importent peu, sélectionnez éventuellement le Mode de rendu de l’image Lisse pour une meilleure qualité.
Une fois celle-ci importée et sélectionnée, utilisez le menu Chemin > Vectoriser un objet matriciel… pour ouvrir le menu de vectorisation :
Commencez par cocher la case Aperçu en direct pour avoir un aperçu immédiat du rendu, puis changez la valeur de Seuil de luminosité afin d’avoir une image qui correspond à vos attentes. Cela dépendra de la luminosité originelle de l’image mais les valeurs médianes sont en général les plus appropriées. Vous comprendrez mieux comment faire le réglage une fois avancé dans le tutoriel, si vous êtes encore hésitant, essayez un rendu qui contienne à peu près la même proportion de noir et de blanc.
Une fois satisfait, cliquez sur Valider. Vous obtenez une image noir et blanc de votre texture, qui va nous être utile :
À ce stade, vous pouvez fermer la fenêtre de vectorisation d’objets et supprimer la photo originale de l’espace de travail, nous n’en aurons plus besoin.
Vous devriez maintenant avoir un fichier Inkscape contenant deux objets : votre texte, ainsi que votre texture vectorisée. Avant de continuer, un outil va nous être utile pour la suite :
Attention, la manipulation suivante peut être un peu difficile à intuitionner la première fois. N’hésitez pas à revenir en arrière à l’aide de ctrl + Z. Vous comprendrez mieux une fois l’opération réalisée.
D’abord, vous pouvez faire une copie de votre texture, et la mettre dans un coin de l’espace de travail pour l’utiliser ultérieurement.
Ensuite, sélectionnez votre texte et dupliquez-le avec Ctrl + D . Attention, cela n’est pas visible à l’écran car il recouvre l’autre texte mais la copie est bien faite. Ne le déplacez pas car vous souhaiterez sûrement le superposer au texte originel. Nous en avons fait une copie car l’opération suivante détruira la copie du texte, mais nous garderons l’original.
Commencez par sélectionner votre texture, changez éventuellement sa couleur pour des questions de visibilité, puis positionnez-la pour qu’elle entoure le texte, au besoin en la redimensionnant :
En gardant la touche Maj enfoncée, vous pouvez maintenant sélectionner votre texture en même temps que la copie du texte que vous avez faîte. N’utilisez pas le curseur de sélection en le faisant glisser autour de l’ensemble, car vous sélectionneriez également le texte original, que nous ne voulons pas transformer.
C’est maintenant que la magie de la vectorisation va opérer. Comme notre texture est désormais un chemin vectoriel, et non une image constituée de pixels, nous pouvons effectuer des opérations logiques dessus. Nous allons demander à Inkscape de ne garder que l’intersection entre notre texte dupliqué et notre texture, via Chemin > Intersection, ou Ctrl + * pour ceux qui ont un pavé numérique :
Pour rappel, cette opération ‘détruit’ le texte, c’est pour ça que nous l’avons copié au préalable. Si besoin, renvoyez maintenant la sélection au premier plan (ou le texte original au dernier plan) et vous obtenez votre texture sur la surface du texte, au-dessus du texte original :
L’opération vous paraîtra peut-être fastidieuse la première fois mais est très rapide une fois les automatismes acquis.
En choisissant avec soin sa police, sa texture et ses couleurs, nous pouvons obtenir des effets d’une grande diversité :
Pour finir, nous allons voir comment encadrer du texte, ce qui est assez utile pour faire de jolis boutons. Ce sera également l’occasion de voir comment aligner correctement des objets entre eux, et une méthode pour créer des marges autour des objets dans Inkscape.
Commençons par ouvrir un nouveau fichier, tapons notre texte, puis sélectionnons l’Outil Rectangle dans notre barre d’outil :
Cliquez ensuite sur votre espace de travail et faites glisser votre souris avant de relâcher afin de créer le carré :
Pour rappel, vous pouvez utiliser petits carrés de couleurs en bas de l’interface pour changer les couleurs du carré que nous venons de dessiner : avec un clic gauche pour le fond, un clic gauche en maintenant la touche Maj enfoncée pour le contour.
Nous utiliserons ici la méthode la plus précise pour redimensionner le carré. Sélectionnez la Flèche de sélection, et vérifiez que vous avez correctement configuré l’Unité utilisée. Si c’est un bouton pour le web, nous travaillons en pixels ! Si c’est une image pour l’impression papier, nous travaillons en mm ! Le menu contextuel en haut de page vous permet de le configurer et d’indiquer les dimensions du rectangle :
Prenez l’habitude de configurer vos dimensions à partir de ce menu. Il permet d’être parfaitement précis.
Le champ X indique l’origine de l’objet horizontalement, à partir de la gauche.
Le champ Y indique l’origine de l’objet verticalement, à partir du bas.
Le champ L indique la largeur de l’objet.
Le champ H indique la hauteur de l’objet.
Ici seules les dimensions, largeur et hauteur, nous intéressent.
Une fois vos dimensions correctement réglées, nous allons voir comment arrondir les coins de notre rectangle. Reprenez l’Outil Rectangle pour voir apparaître, en haut à droite du rectangle, une poignée de forme ronde. Cliquez-dessus et faites-la glisser vers le bas avant de relâcher pour arrondir les coins :
Nous avons effectué cette opération après le redimensionnement car les coins auraient sinon été redimensionnés, ce qui les aurait probablement rendus non symétriques.
Répétez maintenant l’opération de texturage vue précédemment pour ajouter un fond stylisé à votre carré :
Comme vous le voyez, la texture dépasse sur la bordure du rectangle ! C’est parce que l’opération d’intersection ne prend en compte que le fond, et que la bordure commence sur la ligne extérieure du fond, puis s’épaissit vers l’extérieur et l’intérieur de
la forme (une bordure de 10 pixels dépasse de 5 pixels vers l’extérieur, et recouvre la forme de 5 pixels vers l’intérieur).
Pour arranger ça, rien de plus simple : nous pouvons dupliquer le rectangle du bas, ce qui envoie la copie au premier plan, puis rendre son fond transparent. Ainsi la bordure recouvre la texture qui recouvre le fond. Nous allons aller un peu plus loin. Effectuez cette opération, mais épaississez encore plus la nouvelle bordure :
J’ai changé de couleur pour cette nouvelle bordure afin que cela soit bien clair. Par défaut, la bordure n’est pas considérée comme une forme par Inkscape, ce qui empêche les opérations telles que l’intersection qui nous intéresse : nous allons remédier à cela en la sélectionnant puis en utilisant Chemin > Contour en
chemin :
Nous pouvons maintenant sélectionner à la fois notre nouvelle bordure et la texture afin d’opérer non pas une intersection mais une différence. Le raccourci est Ctrl + – . Comme la bordure recouvre la texture, la surface de la bordure sera enlevée à la
texture, ce qui nous permet d’obtenir une légère marge entre le contour du bouton et la texture :
Nous allons maintenant aligner le texte au bouton. Ouvrez le menu d’alignement via Objet > Aligner et distribuer… :
Si c’est la première fois que vous l’utilisez, je vous conseille de régler son comportement d’alignement une bonne fois pour toutes (Inkscape se souviendra de votre réglage). Il s’agit du menu contextuel Relativement à : . J’ai pour ma part sélectionné Dernier
sélectionné car je me représente l’opération comme : ‘ Je sélectionne cet objet afin de l’aligner avec cet objet.‘ . Ensuite, les icônes en dessous vous permettent de le positionner relativement, une fois les deux objets sélectionnés :
Comme le centrage se fait par rapport à la taille totale de l’objet, le centrage du texte s’est fait à partir de la taille du ‘l’ du mot ‘accueil’, je l’ai donc ensuite décalé un peu vers le haut pour que l’effet de centrage soit réellement réussi.
Je vais maintenant répéter l’ensemble de l’opération de différence réalisée précédemment entre la bordure du rectangle et la texture avec le texte :
- duplication du texte (1)
- épaississement de la bordure (2)
- contour en chemin (3)
- différence avec la texture (4) pour améliorer la lisibilité :
And that’s it ! Bien sûr, vous pouvez mixer les différentes techniques abordées pour améliorer le rendu du bouton :
Les rendus font plaisir à obtenir ! Amusez-vous bien, vous l’avez mérité !
(*) Réaliser une affiche avec Inkscape
(*) : Il manque des informations. Cette page est en cours de construction et n'est donc pas finalisée.
Cet article vous présente une méthode simple pour réaliser une affiche à l'aide d'Inkscape. Ce n'est qu'une méthode parmi d'autres, mais elle a l'avantage de vous guider si vous débutez dans l'utilisation du logiciel. Si vous n'êtes pas encore familier avec l'interface d'Inkscape, je vous conseille de jeter un coup d’œil à sa présentation.
Ouvrir un nouveau fichier et sauvegarder le document
En premier lieu, il faut ouvrir Inkscape, ce qui ouvre un nouveau document. En général, je commence par immédiatement sauvegarder ce document au bon endroit. À la fin de chaque étape, voir à chaque modification, il est en effet conseillé d'utiliser ctrl + s pour sauvegarder les modifications. Il arrive malheureusement qu'Inkscape se ferme subitement, et l'on a pas envie de recommencer ce que l'on a déjà fait.
Régler son espace de travail
Il faut avant tout régler son espace de travail. Pas la peine dans le cas de ce tutoriel, car Inkscape est réglé par défaut pour utiliser les mm, et un format A4, mais si votre affiche est dans un format différent, c'est le bon moment de le faire !
Ajouter un fond coloré
Je commence en général par ajouter un fond coloré à mon image. Cela me permet surtout d'avoir un repère pour aligner mes éléments graphiques.
Pour ce faire, j'utilise l'outil Créer des rectangles et des carrés pour ajouter un rectangle, puis j'utilise le Menu d'édition rapide pour le positionner à [ 0, 0 ], soit l'origine de ma feuille, et lui assigner une taille de [ 210, 297 ] afin qu'il fasse la taille de ma feuille A4.
Ensuite je sélectionne un couleur qui me plaît via le Menu couleur, en bas de l'interface.
Mettre en place les calques et ajouter un titre
Le but est maintenant d'ajouter un titre à l'image. Mais avant cela, je veux avoir deux calques différents : un arrière plan et un premier plan. J'ai renommé mon calque originel "Arrière Plan" car c'est là que se trouve mon fond coloré.
En ayant bien sélectionné mon "Premier Plan", j'utilise l'outil Texte pour écrire mon titre. Après avoir sélectionné la police, je l'agrandis à la souris, à l'aide de la flèche de sélection, en maintenant la touche ctrl enfoncée afin que l'agrandissement soit proportionnel.
Ensuite, je le centre par rapport à mon fond coloré, puis je verrouille le calque "Arrière Plan" pour qu'il ne me gêne pas.
Enfin, ayant sélectionné mon titre, je le remonte à l'aide de la touche "flèche haut", en maintenant la touche maj car cela va plus vite.
Encadrement du titre
Je souhaite maintenant encadrer mon titre.
Je commence par créer un carré, dont je change la couleur pour ne pas le confondre avec le fond. Cette fois, je me servirai de la taille de mon titre pour indiquer les dimensions de ce rectangle.
En sélectionnant mon titre, je m'aperçois qu'il fait 96,207 mm de large. Je copie cette valeur grâce à ctrl + c, puis, ayant resélectionné mon rectangle, je colle la valeur dans la boîte "Largeur".
J'aimerai avoir des marges de 15 mm autour de mon titre. À côté de "96,207", j'écris "+30", puis je valide pour appliquer le changement de largeur.
Je fais la même opération pour la hauteur de mon titre.
Puis je centre mon rectangle par rapport à mon titre.
Celui-ci, ayant été créé après le titre, le recouvre. Je le descends donc d'un niveau avec le bouton Descendre la sélection d'un cran.
Je peux maintenant lui choisir une autre couleur, et une bordure, si besoin.
Ajout des informations de bas de page
Je peux maintenant me servir du titre comme modèle pour ajouter d'autres encarts.
Je sélectionne le titre et sa boîte, puis le duplique avec ctrl + d . Je redescend ma nouvelle boîte vers le bas, modifie le texte et réduis la taille de l'objet à l'aide des poignées de sélection.
[ EN CONSTRUCTION ]
Différentes manières de réaliser le logo de la Labomedia
Dans Inkscape, il n'existe pas qu'une seule manière d'obtenir le même résultat.
Certaines sont plus rapides que d'autres, mais la meilleure est celle que vous préférez !
Voyons plusieurs manière d'obtenir le logo de la Labomedia !
Par duplication de carrés
Je commence par faire un carré avec l'outil rectangle, en maintenant la touche crtl pour qu'il soit bien carré.
Avec ctrl + d, je le duplique, puis utilise l'aimantation pour le coller à côté du premier. Je refais l'opération pour obtenir un angle.
Enfin, je pivote l'ensemble de 90°.
Par soustraction de carrés
Je commence par faire un carré, puis faire un deuxième carré deux fois plus petit que je mets dans un coin.
Avec l'opération de différence, je soustrais le deuxième carré au premier, et paf !
Par dessin et placement manuel des points
Je dessine une forme qui ressemble à peu près au logo, avec le bon nombre de points.
Puis je place les points à la bonne position, un par un, au clavier.
En déstructurant un carré
Je commence par créer un carré et le transforme en chemin pour que ses coins soient des nœuds. Les ayants sélectionnés, j'insère de nouveaux nœuds en leur milieux. Je me sers des coordonnées des nouveaux points pour centrer un des coins.
En contour
Le plus élégant. Je dessine une équerre à l'aide de trois points et épaissit le contour.
PROCESSING : Je débute le code et la programmation.
Un langage de programmation pour les débutants, idéal pour les projets artistiques.
Qu'est-ce que Processing ?
Processing est un langage de programmation qui a été créé pour faciliter l'apprentissage du code dans les milieux pédagogiques.
Son intérêt principal réside dans la facilité de pouvoir créer une fenêtre interactive sur laquelle on peut dessiner des éléments graphiques.
C'est également un très petit langage de programmation, dont on a rapidement fait le tour, bien que les possibilités d'utilisation tendent vers l'infini. Cela permet de s'initier au code sans se perdre dans des avalanches d'informations.
Processing est diffusé sous licence libre, et gratuit, vous pouvez le téléchargez ici !
Comment bien débuter avec Processing ?
Commençons par jeter un coup d’œil à l'interface !
Nous pouvons voir plusieurs éléments importants :
Pour débuter, je vous conseille de charger un exemple ! Ceux-ci sont situés dans le menu Fichier > Exemples. Je conseille d'ouvrir, dans le dossier Basics > Input, le fichier nommé Mouse1D. Une fois ouvert, lancez le à l'aide du bouton Exécuter, en forme de flèche.
Et voilà ! Prenez le temps de jeter un œil aux exemples qui vous permettrons de vous familiariser avec Processing. Vous pourrez copier-coller les morceaux de code qui vous intéressent, et modifier le contenu pour tester des possibilités !
Voyons maintenant les fondamentaux du code. Deux fonctions spéciales sont prévues dans Processing. La première est la fonction setup()
1: void setup() {
2: // Votre code ici
3: }
Elle permet d'indiquer au programme les commandes qu'il doit exécuter au moment où il démarre. C'est par exemple là que vous indiquerez la taille de la fenêtre à créer.
La seconde s'appelle draw(). C'est elle qui contiendra les instructions pour modifier l'affichage de la fenêtre du programme. Vous ne pouvez donner des instructions graphiques que dans cette fonction.
1: void draw() {
2: // Votre code ici
3: }
Utilisez la fonction println() pour afficher des informations dans la console.
1: void setup() {
2: println( displayWidth, displayHeight );
3: }
Enfin, voici la page de référence pour bien se servir de Processing ! Il s'agit de la documentation, qui vous explique chacune des fonctions préprogrammées dans Processing !
(*) Comment créer un petit jeu vidéo avec Processing ?
(*) : Il manque des informations. Cette page est en cours de construction et n'est donc pas finalisée.
Commençons par choisir la taille de l'écran ! 600 x 600 paraît pas mal pour commencer.
void setup() {
size( 600, 600 );
}Bien, nous allons maintenant créer notre joueur. Ce sera... un gros pixel ! Nous allons lui donner une position de départ, et référencer sa position. Pour ce faire, nous utiliserons une variable de type PVector(), adaptée aux positions 2D. Puis nous allons le dessiner
PVector position_initiale;
PVector position_actuelle;
void setup() {
size( 600, 600 );
position_initiale = new PVector( 20, 20 );
position_actuelle = position_initiale;
}
void draw() {
rect( position_actuelle.x - 10,
position_actuelle.y - 10,
20,
20 );
}Parfait ! Maintenant, nous allons le faire réagir au clavier :
PVector position_initiale;
PVector position_actuelle;
int vitesse_deplacement = 4;
void setup() {
size( 600, 600 );
position_initiale = new PVector( 20, 20 );
position_actuelle = position_initiale;
}
void draw() {
rect( position_actuelle.x - 10,
position_actuelle.y - 10,
20,
20 );
}
void keyPressed() {
if (key == CODED) {
if (keyCode == UP) {
position_actuelle.y = position_actuelle.y - vitesse_deplacement;
};
if (keyCode == DOWN) {
position_actuelle.y = position_actuelle.y + vitesse_deplacement;
};
if (keyCode == LEFT) {
position_actuelle.x = position_actuelle.x - vitesse_deplacement;
};
if (keyCode == RIGHT) {
position_actuelle.x = position_actuelle.x + vitesse_deplacement;
};
};
}Cela fonctionne... mis-à-part trois problèmes !
Premièrement, les anciennes positions du personnages sont encore affichées à l'écran. Cela se règle simplement, en repeignant l'écran entre chaque déplacement, en changeant la fonction draw() comme ceci :
void draw() {
background( 255 );
rect( position_actuelle.x - 10,
position_actuelle.y - 10,
20,
20 );
}Ensuite, le personnage se déplace bizarrement. C'est parce que l'algorithme lié au clavier choisi est le mauvais. C'est dans la fonction draw() que l'on peut régler cela :
void draw() {
background( 255 );
if (keyPressed == true) {
if (key == CODED) {
if (keyCode == UP) {
position_actuelle.y = position_actuelle.y - vitesse_deplacement;
};
if (keyCode == DOWN) {
position_actuelle.y = position_actuelle.y + vitesse_deplacement;
};
if (keyCode == LEFT) {
position_actuelle.x = position_actuelle.x - vitesse_deplacement;
};
if (keyCode == RIGHT) {
position_actuelle.x = position_actuelle.x + vitesse_deplacement;
};
};
};
rect( position_actuelle.x - 10,
position_actuelle.y - 10,
20,
20 );
}Enfin, il est possible de sortir de l'écran... Voici la solution :
void draw() {
background( 255 );
rect( position_actuelle.x - 10,
position_actuelle.y - 10,
20,
20 );
}Ce qui donne à ce stade le code suivant :
PVector position_initiale;
PVector position_actuelle;
int vitesse_deplacement = 4;
void setup() {
size( 600, 600 );
position_initiale = new PVector( 20, 20 );
position_actuelle = position_initiale;
}
void draw() {
background( 255 );
if (keyPressed == true) {
if (key == CODED) {
if (keyCode == UP) {
position_actuelle.y = position_actuelle.y - vitesse_deplacement;
};
if (keyCode == DOWN) {
position_actuelle.y = position_actuelle.y + vitesse_deplacement;
};
if (keyCode == LEFT) {
position_actuelle.x = position_actuelle.x - vitesse_deplacement;
};
if (keyCode == RIGHT) {
position_actuelle.x = position_actuelle.x + vitesse_deplacement;
};
};
};
if ( position_actuelle.x < 0 ) { position_actuelle.x = position_actuelle.x + 600; };
if ( position_actuelle.x > 600 ) { position_actuelle.x = position_actuelle.x - 600; };
if ( position_actuelle.y < 0 ) { position_actuelle.y = position_actuelle.y + 600; };
if ( position_actuelle.y > 600 ) { position_actuelle.y = position_actuelle.y - 600; };
rect( position_actuelle.x - 10,
position_actuelle.y - 10,
20,
20 );
}[EN CONSTRUCTION]