Fiche n°1 – Inkscape – Interface & Prise en main Table des ... · Fiche n°1 – Inkscape –...

16
Fiche n°1 – Inkscape – Interface & Prise en main Table des matières 1-Quelques notions de dessin vectoriel................................................................................................................................... 1 1.1-A propos d'Inkscape............................................................................................................................................................ 1 1.2-Le format svg.......................................................................................................................................................................... 1 2-L'interface.......................................................................................................................................................................................... 2 2.1-la barre de menus................................................................................................................................................................. 3 2.2-la barre des commandes.................................................................................................................................................... 8 2.3-les boîtes de dialogues attachables :............................................................................................................................ 9 2.4-la barre des contrôles du magnétisme...................................................................................................................... 10 2.5-les boutons de la boîte à outils..................................................................................................................................... 11 2.6-les barres de contrôle des outils.................................................................................................................................. 13 2.7-le canevas.............................................................................................................................................................................. 13 2.8-la palette de couleurs....................................................................................................................................................... 14 2.9-la barre d'état et d'informations................................................................................................................................. 15 Les sources qui m'ont aidés à réaliser cette fiche : Inkscape, logiciel de dessin vectoriel utilisant le format SVG par Stephane Rolle, Jérémie Ory, Thibault Tavernier http://fr.flossmanuals.net/inkscape/ http://tavmjong.free.fr/INKSCAPE/MANUAL_v14/html_fr/ Ce document est soumis à la licence GNU FDL. Cela signifie qu'il est libre de droits. http://blogs.lyceecfadumene.fr/informatique

Transcript of Fiche n°1 – Inkscape – Interface & Prise en main Table des ... · Fiche n°1 – Inkscape –...

Page 1: Fiche n°1 – Inkscape – Interface & Prise en main Table des ... · Fiche n°1 – Inkscape – Interface & Prise en main. 1- Quelques notions de dessin vectoriel. 1.1-A propos

Fiche n°1 – Inkscape – Interface & Prise en main

Table des matières

1-Quelques notions de dessin vectoriel...................................................................................................................................1

1.1-A propos d'Inkscape............................................................................................................................................................1

1.2-Le format svg..........................................................................................................................................................................1

2-L'interface..........................................................................................................................................................................................2

2.1-la barre de menus.................................................................................................................................................................3

2.2-la barre des commandes....................................................................................................................................................8

2.3-les boîtes de dialogues attachables :............................................................................................................................9

2.4-la barre des contrôles du magnétisme......................................................................................................................10

2.5-les boutons de la boîte à outils.....................................................................................................................................11

2.6-les barres de contrôle des outils..................................................................................................................................13

2.7-le canevas..............................................................................................................................................................................13

2.8-la palette de couleurs.......................................................................................................................................................14

2.9-la barre d'état et d'informations.................................................................................................................................15

Les sources qui m'ont aidés à réaliser cette fiche :

• Inkscape, logiciel de dessin vectoriel utilisant le format SVG par Stephane Rolle, Jérémie Ory,

Thibault Tavernier

• http://fr.flossmanuals.net/inkscape/

• http://tavmjong.free.fr/INKSCAPE/MANUAL_v14/html_fr/

Ce document est soumis à la licence GNU FDL. Cela signifie qu'il est libre de droits.

http://blogs.lyceecfadumene.fr/informatique

Page 2: Fiche n°1 – Inkscape – Interface & Prise en main Table des ... · Fiche n°1 – Inkscape – Interface & Prise en main. 1- Quelques notions de dessin vectoriel. 1.1-A propos

Fiche n°1 – Inkscape – Interface & Prise en main.

1- Quelques notions de dessin vectoriel.

1.1- A propos d'Inkscape

Inkscape est un logiciel de dessin vectoriel libre.

Sa principale originalité est l'utilisation du SVG

Scalable Vector Graphics comme format natif. Il

assure les fonctionnalités suivantes :

• Manipulation des principaux composants

SVG : les formes, les chemins, le texte, les

marqueurs, les clones, les

transformations, les motifs et les

groupements

• Des fonctionnalités avancées : l’édition de

nœuds, la gestion des couches, les

opérations de chemins complexes, la

vectorisation des bitmaps, le texte suivant

des chemins, le texte contournant des

objets,

• Importation depuis de nombreux formats

notamment Postscript, EPS, JPEG, PNG et

TIFF

• Exportation en PNG, PDF, ainsi que de

nombreux formats vectoriels.

1.2- Le format svg

Le format SVG est un format image «libre», qui

signifie Scalable Vector Graphics. En français,

cela signifie « image vectorielle extensible ». Les

images vectorielles peuvent être agrandies et

rapetissées à l'infini sans perdre leurs

caractéristiques. Cette propriété donne le nom

de « Scalable » au sein du sigle SVG.

Les images matricielles sont liées à une

résolution spécifique, elles stockent l'image sous

forme d'une grille de pixels. Quant à elles, les

images vectorielles décrivent les formes et les

objets de l'image indépendamment de la

résolution et sont ainsi mieux adaptées à la

création assistée par ordinateur.

A noter que Inkscape peut aussi importer et

afficher des images matricielles. Elles seront

alors de simples objets du dessin vectoriel,

manipulables comme tous les autres

(déplacement, transformation, découpe...)

Il est très difficile de convertir une image

matricielle (PNG, JPEG, GIF et BMP) dans un

Page 1/15 - http://blogs.lyceecfadumene.fr/informatique

Page 3: Fiche n°1 – Inkscape – Interface & Prise en main Table des ... · Fiche n°1 – Inkscape – Interface & Prise en main. 1- Quelques notions de dessin vectoriel. 1.1-A propos

format vectoriel comme SVG (mise à part les

images simples telles que les logos, impossible

pour une photo). En revanche, il est possible de

créer une image de n'importe quel format raster

à partir d'une image vectorielle et ce sans aucune

perte de qualité. Par exemple, Inkscape crée des

images SVG qu'il exporte ensuite en PNG

(format raster).

Le format SVG est compatible avec Scribus et les

navigateurs web.

2- L'interface

L'interface d'Inkscape est constituée d'un

ensemble d'éléments originaux permettant un

travail simple, harmonieux et contextuel. Elle est

constituée principalement de la fenêtre de

documents dans laquelle le dessin peut être créé.

Cette fenêtre contient elle-même plusieurs

zones qu'il est important de bien identifier pour

se repérer aisément dans l'application.

On peut la diviser en neuf grandes zones :

Page 2/15 - http://blogs.lyceecfadumene.fr/informatique

6

7

4

5

8

3

2

1

1- la barre de menu situé

2- la barre des commandes

3- la barre des contrôles du magnétisme

4- les boutons de la boîte à outils

5- la barre de contrôle des outils

6- le canevas

7- la palette de couleurs

8- la barre d'état et d'informations.

9- les guides et règles

9

Page 4: Fiche n°1 – Inkscape – Interface & Prise en main Table des ... · Fiche n°1 – Inkscape – Interface & Prise en main. 1- Quelques notions de dessin vectoriel. 1.1-A propos

2.1- la barre de menus

Menu Outils

Fichier

- Nouveau : permet d'accéder à de nombreux formats

prédéfinis

- Propriétés du documents :

- Format

- Unités

- Couleur de fond

- Guides

- Grilles

- Magnétisme

- Etc...

Édition

• Annulation / rétablir

• Copier / couper / coller

• Dupliquer / cloner

• Outils de sélection

Page 3/15 - http://blogs.lyceecfadumene.fr/informatique

Page 5: Fiche n°1 – Inkscape – Interface & Prise en main Table des ... · Fiche n°1 – Inkscape – Interface & Prise en main. 1- Quelques notions de dessin vectoriel. 1.1-A propos

Menu Outils

Affichage

• Zoom

• Grille : Une Grille est composée de deux ou trois

ensembles de lignes parallèles régulièrement

espacées. Une Grille rectangulaire se compose de

lignes horizontales et verticales, ressemblant

fortement à une feuille ordinaire de papier quadrillé.

• Guides : Les Lignes de guide sont des lignes

individuelles qui peuvent être placées librement.

Pour créer une Ligne de guide, tirer avec le Bouton

gauche de la souris depuis la règle de gauche sur le

canevas pour une Ligne de guide verticale ou depuis

la Règle supérieure pour une Ligne de guide

horizontale.

Un double clic sur le guide permet d'en éditer les propriétés.

Calque

Les calques permettent de gérer différentes couches

indépendamment les unes des autres. On pourra, par

exemple, séparer le texte et les autres objets, formes,

images, concevoir un document dans plusieurs langues (Un

calque pour chaque langue), etc...

Attention :

• L'ordre d'empilement des calques est important.

• Il faut d'abord sélectionner le calque sur lequel on

veut travailler (en le sélectionnant dans la liste

déroulantes des calques ou dans la boîte de

dialogue ) et ensuite y ajouter les éléments souhaités.

Page 4/15 - http://blogs.lyceecfadumene.fr/informatique

Page 6: Fiche n°1 – Inkscape – Interface & Prise en main Table des ... · Fiche n°1 – Inkscape – Interface & Prise en main. 1- Quelques notions de dessin vectoriel. 1.1-A propos

Menu Outils

• Visibilité

• Verrouillage

• Ordre

Objet

- Remplissage et contour :

• Fond (uni, dégradé...)

• Contour (uni, dégradé)

• Style du contour

• Flou

• Opacité

• Grouper / dégrouper

• Monter / descendre

• Tourner / retourner

• Aligner et distribuer :

Page 5/15 - http://blogs.lyceecfadumene.fr/informatique

Page 7: Fiche n°1 – Inkscape – Interface & Prise en main Table des ... · Fiche n°1 – Inkscape – Interface & Prise en main. 1- Quelques notions de dessin vectoriel. 1.1-A propos

Menu Outils

De nombreux outils sont disponibles pour aligner des objets

entre eux ou les distribuer par rapport à la page.

Deux types de positionnement sont disponibles :

alignement, pour lequel les centres ou les bords des objets

sont alignés sur d'autres, et distribution, pour lequel les

objets sont distribués dans une certaine direction

déterminée par leurs centres ou leurs bords.

Chemin

• Objet en chemin

• Contour en chemin

• Vectoriser le bitmap : transforme une image

matricielle en image vectorielle.

• Outils de « combinaison » :

◦ Union

◦ Différence

◦ Intersection

◦ Exclusion

◦ Division

◦ Combiner

◦ Séparer

• Outils de « taille » :

◦ Contracter

◦ Dilater

Texte

• Texte et police

• Mettre suivant un chemin

• Encadre

• Convertir en texte

Page 6/15 - http://blogs.lyceecfadumene.fr/informatique

Page 8: Fiche n°1 – Inkscape – Interface & Prise en main Table des ... · Fiche n°1 – Inkscape – Interface & Prise en main. 1- Quelques notions de dessin vectoriel. 1.1-A propos

Menu Outils

Filtres

Les Filtres sont une fonctionnalité du SVG qui permet à un

visualiseur SVG de modifier l'aspect d'un objet d'une

manière bien définie comme l'ajout d'une texture à un

remplissage, l'ajout d'une ombre floue à un objet ou la

modification de la couleur d'un objet.

Extensions

Inkscape peut être complété d'extensions. Celles-ci sont

des scripts ou programmes qui peuvent être lancés depuis

Inkscape. La plupart des extensions nécessitent des

programmes externes.

Aide

L'aide en français est disponible en ligne à cette adresse :

http://tavmjong.free.fr/INKSCAPE/MANUAL/html_fr/

Page 7/15 - http://blogs.lyceecfadumene.fr/informatique

Page 9: Fiche n°1 – Inkscape – Interface & Prise en main Table des ... · Fiche n°1 – Inkscape – Interface & Prise en main. 1- Quelques notions de dessin vectoriel. 1.1-A propos

2.2- la barre des commandes

Elle contient des raccourcis vers un grand

nombre de fonctions des menus. Cliquez sur la

flèche vers le bas à l'extrémité droite pour

accéder aux éléments masqués faute de place.

La barre de commande comporte un grand nombre d'outils standards :

• ouvrir un fichier

• enregistrer un fichier

• imprimer un fichier

• Copier, couper et coller

• Etc...

Outil Légende Raccourci Développement

Créer un nouveau document depuis le modèle

par défaut

Ctrl + N

Ouvrir un document existant Ctrl + O

Enregistrer le document Ctrl + S

Imprimer le document Ctrl + P

Importer une image SVG ou bitmap dans ce

document

Ctrl + I

Exporter ce document ou la sélection en image

bitmap

Maj + Ctrl + E

Annuler la dernière action Ctrl + Z

Refaire la dernière action annulée Maj + Ctrl + Z

Copier la sélection vers le presse papier Ctrl + C

Couper la sélection vers le presse papier Ctrl + X

Coller les objets du presse papiers sous le

pointeur de souris, ou coller du texte

Ctrl + V

Page 8/15 - http://blogs.lyceecfadumene.fr/informatique

Page 10: Fiche n°1 – Inkscape – Interface & Prise en main Table des ... · Fiche n°1 – Inkscape – Interface & Prise en main. 1- Quelques notions de dessin vectoriel. 1.1-A propos

Outil Légende Raccourci Développement

Zoomer pour ajuster la sélection à la fenêtre 3

Zoomer pour ajuster le dessin à la fenêtre 4

Ajuster la page à la fenêtre 5

Dupliquer les objets sélectionnés Ctrl + D

Créer un clone (une copie liée à l'original) de

l'objet sélectionné

Alt + D

Couper le lien entre le clone sélectionné et son

original, le transformant en objet indépendant

Maj + Alt + D

Grouper les objets sélectionnés Ctrl + G

Dégrouper les groupes sélectionnés Maj + Ctrl + G

Éditer les couleurs de l'objet, ses dégradés,

l'épaisseur de son contour, les têtes de flèches, les

pointillés...

Maj + Ctrl + F

Voir et sélectionner une police, une taille de

police et autres propriétés de texte

Maj + Ctrl + T

Afficher les calques Maj + Ctrl + L

Voir et éditer l'arbre XML du document Maj + Ctrl + X

Aligner et distribuer les objets Maj + Ctrl + A

Éditer les préférences globales d'Inkscape Maj + Ctrl + P

Éditer les préférences du document (enregistrées

avec celui-ci)

Maj + Ctrl + D

2.3- les boîtes de dialogues attachables :

Les boîtes de dialogues ouvertes sont placées au

sein de la fenêtre principale d'Inkscape sur le

côté droit, comme illustré sur la figure suivante.

Les boîtes de dialogues amarrées peuvent être

réarrangés, redimensionnés. Pour déplacer une

boîte de dialogue, Cliquez-tirez gauche à la

Page 9/15 - http://blogs.lyceecfadumene.fr/informatique

Page 11: Fiche n°1 – Inkscape – Interface & Prise en main Table des ... · Fiche n°1 – Inkscape – Interface & Prise en main. 1- Quelques notions de dessin vectoriel. 1.1-A propos

souris la barre de titre.

On peut modifier ce paramètre via le menu

Fichier > Préférences d'Inkscape :

2.4- la barre des contrôles du magnétisme

Cette barre de propriétés permet de gérer

finement la manière dont le magnétisme sera

appliqué aux objets contenus dans le dessin en

cours. Cette barre est placée verticalement sur

le côté droit de la fenêtre Inkscape.

L'aimantation, tout comme un aimant attire un

bout de métal, attirera le curseur de la souris sur

une des poignées, un nœuds de l'objet le plus

proche. La distance d'attraction est réglable via

les paramètres du document : Menu Fichier >

Propriétés du document > Magnétisme

Outil Légende Raccourci Développement

Activer le magnétisme %

Boîte englobante :

C'est la plus petite boîte

Aimanter aux coins des boîtes englobantes

Aimanter aux bords des boîtes englobantes

Aimanter aux coins des boîtes englobantes

Aimanter depuis et vers le milieu des boîtes

englobantes

Page 10/15 - http://blogs.lyceecfadumene.fr/informatique

Page 12: Fiche n°1 – Inkscape – Interface & Prise en main Table des ... · Fiche n°1 – Inkscape – Interface & Prise en main. 1- Quelques notions de dessin vectoriel. 1.1-A propos

Outil Légende Raccourci Développement

rectangulaire avec des côtés

parallèles aux axes x et y, qui

contient entièrement un

objet.

Aimanter depuis et vers le centre des boîtes

englobantes

Aimanter aux nœuds ou aux poignées

Aimanter au chemin

Aimanter aux intersections des chemins

Aimanter aux points de rebroussement

Aimanter aux nœuds doux

Aimanter depuis et vers le milieu des segments

Aimanter depuis et vers le centre des objets

Aimanter depuis et vers le centre de rotation d'un

objet

Aimanter aux bords de la page

Aimanter aux grilles

Aimanter aux guides

2.5- les boutons de la boîte à outils

La boîte à outils est un élément primordial

d'Inkscape.

Elle est verticale et se situe à gauche de la

fenêtre principale.

Chaque outil sélectionné par un clique gauche

sur son icône va activer et afficher une barre de

contrôle contextuelle qui lui est propre. Cette

barre de contrôle vous donnera accès à tout une

série d'options de réglage de cet outil.

Page 11/15 - http://blogs.lyceecfadumene.fr/informatique

Page 13: Fiche n°1 – Inkscape – Interface & Prise en main Table des ... · Fiche n°1 – Inkscape – Interface & Prise en main. 1- Quelques notions de dessin vectoriel. 1.1-A propos

Outil Légende Raccourci Développement

Sélectionner et transformer des objets F1

Éditer les nœuds ou les poignées de contrôle d'un chemin F2

Ajuster les objets en les sculptant ou en les peignant Maj + F2

(Dé)zoomer F3

Créer des rectangles et des carrés F4

Créer une boîte 3D Maj + F4

Créer des cercles, des ellipses et des arcs F5

Créer des étoiles et des polygones *

Créer des spirales F9

Dessiner des lignes à main levée F6

Tracer des courbes de bézier et des segments de droites Maj + F6

Créer un tracé calligraphique ou au pinceau Ctrl + F6

Créer et éditer des objets textes F8

Pulvériser les objets en les sculptant ou en les peignant Maj + F3

Effacer les chemins existants Maj + E

Remplir une zone bornée Maj + F7

Créer et éditer des dégradés Ctrl + F1

Capturer des couleurs depuis l'image F7

Créer des connecteurs Ctrl + F2

Page 12/15 - http://blogs.lyceecfadumene.fr/informatique

Page 14: Fiche n°1 – Inkscape – Interface & Prise en main Table des ... · Fiche n°1 – Inkscape – Interface & Prise en main. 1- Quelques notions de dessin vectoriel. 1.1-A propos

2.6- les barres de contrôle des outils

La barre de contrôle des outils est horizontale et

se situe sous le menu principal. Son apparence

varie en fonction de l'outil sélectionné et la

modification qu'elle permet n'est appliquée qu'à

la sélection actuelle ou à l'objet futur.

→ Sélection

• Rotation

• Ordre des objets

• Position...

→ Texte

• Police

• Gras, Italique

• Positions

• Sens d'écriture...

→Dégradé

• Type de dégradé

• Édition du dégradé

2.7- le canevas

Page 13/15 - http://blogs.lyceecfadumene.fr/informatique

Page 15: Fiche n°1 – Inkscape – Interface & Prise en main Table des ... · Fiche n°1 – Inkscape – Interface & Prise en main. 1- Quelques notions de dessin vectoriel. 1.1-A propos

C'est la zone de travail sur l'image.

Par défaut le canevas est en pixel mais cela peut être modifié via les propriétés du document

Fichier > propriétés du document : Ctrl + Maj + D

Unités disponibles : en centimètres, foot (le pied anglais = environ 30 cm), inch (le pouce anglais = 25.4

mm), mètres, millimètres, pica et point.

2.8- la palette de couleurs

Il est possible de modifier rapidement la couleur

d'un objet ou la couleur de son contour.

Une fois l'objet sélectionné, un clic gauche de la

souris sur une couleur remplira l'objet de cette

même couleur, alors qu'un clic gauche

accompagné de Maj modifiera la couleur de son

contour.

La flèche située à droite de la palette permet

d'accéder à d'autres palettes ainsi que d'en

modifier l'aspect.

Page 14/15 - http://blogs.lyceecfadumene.fr/informatique

- L'onglet « Page » permet de régler les

dimensions de la page, ainsi que les unités

utilisées.

- L'onglet « Guides » permet de paramétrer

les guides : Lignes permettant de placer des

éléments de l'image.

- L'onglet « Grilles » permet de quadriller le

canevas.

Page 16: Fiche n°1 – Inkscape – Interface & Prise en main Table des ... · Fiche n°1 – Inkscape – Interface & Prise en main. 1- Quelques notions de dessin vectoriel. 1.1-A propos

2.9- la barre d'état et d'informations

De nombreuses informations sont disponibles :

• La couleur de remplissage ainsi que la couleur du contour (indicateur de style).

• Le sélecteur de calques (verrouillage, visibilité).

• L'aide contextuelle sur l'outil en cours de sélection (zone de notification).

• Les coordonnées du curseur.

• Le zoom. (Par défaut 35%)

Page 15/15 - http://blogs.lyceecfadumene.fr/informatique