| Les deux révisions précédentesRévision précédente | |
| issue119:inkscape [2017/04/08 15:03] – auntiee | issue119:inkscape [2017/04/09 17:09] (Version actuelle) – andre_domenech |
|---|
| This will display the Mesh Gradients tool control bar (shown below).** | This will display the Mesh Gradients tool control bar (shown below).** |
| |
| Dans l'article précédent, j'ai parlé du danger très réel auquel la norme SVG 2 fait face : bien qu'elle contienne de nouvelles fonctionnalités très utiles, le manque d'implication des fournisseurs de navigateurs menace le futur de SVG en tant que norme indépendante. En tant qu'utilisateurs individuels, nous ne pouvons faire que peu de choses pour influencer l'issue, mais nous pouvons commencer à mettre en ligne des documents qui utilisent certaines fonctionnalités de SVG 2 pour prouver qu'il y a une demande pour elles. Cependant, puisqu'on n'a pas de documents codés à la main, ceci nous limite aux fonctions qui sont supportées dans les outils d'auteurs - ce qui signifie, pratiquement, celles supportées par Inkscape. | Dans l'article précédent, j'ai parlé du danger très réel auquel la norme SVG 2 fait face : bien qu'elle contienne de nouvelles fonctionnalités très utiles, le manque d'implication des fournisseurs de navigateurs menace le futur de SVG en tant que norme indépendante. En tant qu'utilisateurs individuels, nous ne pouvons faire que peu de choses pour influencer l'issue, mais nous pouvons commencer à mettre en ligne des documents qui utilisent certaines fonctionnalités de SVG 2 pour prouver qu'il y a une demande pour elles. Cependant, puisqu'on n'a pas de documents codés à la main, ceci nous limite aux fonctions qui sont supportées dans les outils d'auteurs, ce qui signifie, pratiquement, celles supportées par Inkscape. |
| |
| La dernière fois, j'ai regardé l'addition non contestée de l'Ordre de Coloriage dans la spécif. SVG. Aujourd'hui, je vais me pencher sur un autre gros ajout - un qui était anticipé impatiemment par les utilisateurs d'Inkscape depuis la première fois où il est apparu dans les versions de développement - les Filets de dégradé (appelés aussi les Dégradés tramés, en fonction de la personne à qui vous posez la question). Pour poursuivre, vous aurez besoin d'une exemplaire d'Inkscape 0.92 ; voyez l'article précédent pour quelques conseils d'installation. | La dernière fois, j'ai regardé l'addition non contestée de l'Ordre de Coloriage dans la spécif. SVG. Aujourd'hui, je vais me pencher sur un autre gros ajout - un qui était anticipé impatiemment par les utilisateurs d'Inkscape depuis la première fois où il est apparu dans les versions de développement - les Filets de dégradé (appelés aussi les Dégradés tramés, en fonction de la personne à qui vous posez la question). Pour poursuivre, vous aurez besoin d'un exemplaire d'Inkscape 0.92 ; voyez l'article précédent pour quelques conseils d'installation. |
| |
| Il n'y a pas de doute que les simples dégradés linéaires et radiaux disponibles dans SVG 1.x sont extrêmement limitants. Plutôt que d'ajouter des types séparés pour les dégradés coniques, spirales, carrés et autres, SVG 2 ajoute les Filets de dégradés, qui sont suffisamment flexibles pour couvrir tous ces cas et plus encore - au prix toutefois de quelques ajustements manuels pour obtenir le résultat exact que vous voulez. Comme avec n'importe quel type de dégradé, vous avez besoin d'un objet auquel l'appliquer - je commencerai par un simple carré. Une fois l'objet cible sélectionné, cliquez sur l'icône Filet de dégradé de la barre de taches : | Il n'y a pas de doute que les simples dégradés linéaires et radiaux disponibles dans SVG 1.x sont extrêmement limitants. Plutôt que d'ajouter des types séparés pour les dégradés coniques, spirales, carrés et autres, SVG 2 ajoute les filets de dégradés, qui sont suffisamment flexibles pour couvrir tous ces cas et plus encore, au prix toutefois de quelques ajustements manuels pour obtenir le résultat exact que vous voulez. Comme avec n'importe quel type de dégradé, vous avez besoin d'un objet auquel l'appliquer ; je commencerai par un simple carré. Une fois l'objet cible sélectionné, cliquez sur l'icône Filet de dégradé de la barre de taches : |
| |
| Ceci affichera la barre de contrôle de l'outil des Filets de dégradé (voir ci-dessous). | Ceci affichera la barre de contrôle de l'outil des Filets de dégradé (voir ci-dessous). |
| As you move your cursor back over the canvas, the status bar informs you that you can “Drag or double click to create a mesh”. With a single object selected, both approaches give the same result, so I usually just double-click on the object. With more than one object selected, however, a double-click will apply the mesh to only one of them, with the others becoming de-selected. Click-dragging the mouse, on the other hand, applies separate meshes to each object. You don’t even have to drag over the objects themselves, so, if you’ve got a particularly busy drawing, you can simply drag over a blank bit of canvas around the periphery to have the same effect without any risk of accidentally affecting other elements.** | As you move your cursor back over the canvas, the status bar informs you that you can “Drag or double click to create a mesh”. With a single object selected, both approaches give the same result, so I usually just double-click on the object. With more than one object selected, however, a double-click will apply the mesh to only one of them, with the others becoming de-selected. Click-dragging the mouse, on the other hand, applies separate meshes to each object. You don’t even have to drag over the objects themselves, so, if you’ve got a particularly busy drawing, you can simply drag over a blank bit of canvas around the periphery to have the same effect without any risk of accidentally affecting other elements.** |
| |
| Pour créer un nouveau filet sur votre objet, vous devez d'abord régler quelques paramètres simples. Les deux premières icônes (marquées « Créer ») vous permettent de choisir entre un filet de dégradé ou un dégradé conique. En pratique, il n'y a pas de véritable dégradé conique dans SVG - le bouton en crée juste une illusion commode en utilisant le filet de dégradé. Pour le moment, assurez-vous que le premier bouton est sélectionné. La paire de boutons suivante (« sur : ») définit où le filet sera créé : soit sur le remplissage, soit sur le contour de votre objet ; j'utiliserai le Remplissage pour ces exemples. Enfin, vous devez décider combien de lignes et de colonnes devront être présentes dans votre filet. De grandes valeurs ralentiront le rendu, mais vous assurent un contrôle plus fin sur le dégradé. Je commencerai avec un simple filet de 2x2, car c'est suffisant pour expliquer les bases. | Pour créer un nouveau filet sur votre objet, vous devez d'abord régler quelques paramètres simples. Les deux premières icônes (marquées « Créer ») vous permettent de choisir entre un filet de dégradé et un dégradé conique. En pratique, il n'y a pas de véritable dégradé conique dans SVG - le bouton en crée juste une illusion commode en utilisant le filet de dégradé. Pour le moment, assurez-vous que le premier bouton est sélectionné. La paire de boutons suivante (« sur : ») définit où le filet sera créé : soit sur le remplissage, soit sur le contour de votre objet ; j'utiliserai le remplissage pour ces exemples. Enfin, vous devez décider combien de lignes et de colonnes devront être présentes dans votre filet. De grandes valeurs ralentiront le rendu, mais vous assurent un contrôle plus fin sur le dégradé. Je commencerai avec un simple filet de 2x2, car c'est suffisant pour expliquer les bases. |
| |
| Quand vous ramenez votre curseur sur le canevas, la barre d'état vous informe que vous pouvez « Cliquer-glisser ou double-cliquer pour créer une toile ». Avec un seul objet sélectionné, les deux approches donnent le même résultat ; aussi, habituellement, je double-clique sur l'objet. Cependant, si plus d'un objet sont sélectionnés, le double-clic ne s'appliquera qu'à un seul d'entre eux, tout en désélectionnant les autres. À l'inverse, un cliquer-glisser à la souris applique un filet indépendant à chaque objet. Vous n'avez même pas à glisser sur les objets eux-mêmes ; aussi, si vous avez un dessin particulièrement chargé, vous pouvez glisser simplement sur une partie vide du canevas à la périphérie pour obtenir le même effet, sans le risque de toucher accidentellement d'autres éléments. | Quand vous ramenez votre curseur sur le canevas, la barre d'état vous informe que vous pouvez « Cliquer-glisser ou double-cliquer pour créer une toile ». Avec un seul objet sélectionné, les deux approches donnent le même résultat ; aussi, habituellement, je double-clique sur l'objet. Cependant, si plus d'un objet sont sélectionnés, le double-clic ne s'appliquera qu'à un seul d'entre eux, tout en désélectionnant les autres. À l'inverse, un cliquer-glisser à la souris applique un filet indépendant à chaque objet. Vous n'avez même pas à glisser sur les objets eux-mêmes ; aussi, si vous avez un dessin particulièrement chargé, vous pouvez glisser simplement sur une partie vide du canevas à la périphérie pour obtenir le même effet, sans le risque de toucher accidentellement d'autres éléments. |
| Quelle que soit l'approche que vous prenez, votre objet sera maintenant rempli avec une grille de nœuds et de lignes connectés, divisant la zone avec le nombre de lignes et de colonnes que vous avez sélectionné dans la barre de contrôle de l'outil. Une couleur est donnée à chaque nœud, en alternant entre la couleur de remplissage et le blanc, pour obtenir un résultat comme celui-ci : | Quelle que soit l'approche que vous prenez, votre objet sera maintenant rempli avec une grille de nœuds et de lignes connectés, divisant la zone avec le nombre de lignes et de colonnes que vous avez sélectionné dans la barre de contrôle de l'outil. Une couleur est donnée à chaque nœud, en alternant entre la couleur de remplissage et le blanc, pour obtenir un résultat comme celui-ci : |
| |
| Dans ce cas-ci, il y a neuf nœuds. L'outil de Filet de dégradé étant actif, vous pouvez cliquer, soit sur un nœud individuel pour le sélectionner, soit sur une ligne de liaison pour sélectionner les nœuds d'extrémité, ou vous pouvez faire un cliquer-glisser avec votre souris au-dessus d'un certain nombre de nœuds pour faire une sélection groupée. Vous pouvez aussi utiliser la touche Maj pour ajouter ou retirer des nœuds à la sélection. Un certain nombre de nœuds étant sélectionnés, vous pouvez utiliser les nuanciers en bas de la fenêtre, ou le dialogue Fond et contour, pour leur assigner une couleur. En attribuant une couleur différente à chaque nœud, vous créez immédiatement des dégradés complexes, ce qui aurait été très pénible dans les versions précédentes d'Inkscape : | Dans ce cas-ci, il y a neuf nœuds. L'outil de Filet de dégradé étant actif, vous pouvez cliquer, soit sur un nœud individuel pour le sélectionner, soit sur une ligne de liaison pour sélectionner les nœuds d'extrémité, ou vous pouvez faire un cliquer-glisser avec votre souris au-dessus d'un certain nombre de nœuds pour faire une sélection groupée. Vous pouvez aussi utiliser la touche Maj pour ajouter ou retirer des nœuds à la sélection. Un certain nombre de nœuds étant sélectionné, vous pouvez utiliser les nuanciers en bas de la fenêtre, ou le dialogue Fond et contour, pour leur assigner une couleur. En attribuant une couleur différente à chaque nœud, vous créez immédiatement des dégradés complexes, ce qui aurait été très pénible dans les versions précédentes d'Inkscape : |
| |
| Tout comme vous pouvez donner une couleur différente à chaque nœud, il est possible de les déplacer en les tirant avec la souris, vous permettant de définir la couleur en tout endroit de votre objet, et pas seulement sur ceux régulièrement espacés qui ont été fournis initialement. En tirant les nœuds des côtés à l'intérieur de l'objet, des parties vides se créent le long des bords ; il n'y a pas de notion de dégradés répétitifs ici. Le glissement de ces nœuds en dehors de l'objet ne fait que couper le remplissage au bord. | Tout comme vous pouvez donner une couleur différente à chaque nœud, il est possible de les déplacer en les tirant avec la souris, vous permettant de définir la couleur en tout endroit de votre objet, et pas seulement sur ceux régulièrement espacés qui ont été fournis initialement. En tirant les nœuds des côtés à l'intérieur de l'objet, des parties vides se créent le long des bords ; il n'y a pas de notion de dégradés répétitifs ici. Le glissement de ces nœuds en dehors de l'objet ne fait que couper le remplissage au bord. |
| The mesh in this case was 10×10, but even then there aren’t enough nodes in some areas to capture the details – the green stalk at the top is perhaps the most obvious example. This is an unfortunate limitation of mesh gradients: there’s no way to subdivide individual patches in the mesh, to allow for fine detail where it’s needed, while retaining broad swashes of color elsewhere. The workaround is to stack several meshes on top of each other, but this then becomes harder to manage.** | The mesh in this case was 10×10, but even then there aren’t enough nodes in some areas to capture the details – the green stalk at the top is perhaps the most obvious example. This is an unfortunate limitation of mesh gradients: there’s no way to subdivide individual patches in the mesh, to allow for fine detail where it’s needed, while retaining broad swashes of color elsewhere. The workaround is to stack several meshes on top of each other, but this then becomes harder to manage.** |
| |
| La première de ces icônes vous permet de passer les lignes sélectionnées de droites à courbes. Les lignes droites n'ont pas de poignées de Bézier, mais se comportent de façon un peu plus prévisible quand vous les bougez ; aussi, il est parfois plus facile de passer en lignes droites, de déplacer les nœuds, puis de revenir à des courbes de Béziers pour l'ajustement final - la seconde icône semblerait pouvoir convenir pour cette action, mais ce n'est pas le cas. | La première de ces icônes vous permet de passer les lignes sélectionnées de droites à courbes. Les lignes droites n'ont pas de poignées de Bézier, mais se comportent de façon un peu plus prévisible quand vous les bougez ; aussi, il est parfois plus facile de passer en lignes droites, de déplacer les nœuds, puis de revenir à des courbes de Bézier pour l'ajustement final - la seconde icône semblerait pouvoir convenir pour cette action, mais ce n'est pas le cas. |
| |
| Au lieu de ça, le second bouton changera la longueur (mais pas l'angle) des poignées de Bézier de tous les nœuds sélectionnés, de façon à forcer les chemins à former un ellipse, si possible. Cela pourrait sembler être une chose plutôt arbitraire à faire, mais cela rend plus facile l'adoucissement des transitions entre les différentes parties du filet, simplifiant la création de dégradés comme ceci : | Au lieu de ça, le second bouton changera la longueur (mais pas l'angle) des poignées de Bézier de tous les nœuds sélectionnés, de façon à forcer les chemins à former un ellipse, si possible. Cela pourrait sembler être une chose plutôt arbitraire à faire, mais rend plus facile l'adoucissement des transitions entre les différentes parties du filet, simplifiant la création de dégradés comme ceci : |
| |
| Le troisième bouton vous permet d'économiser un peu de travail si vous utilisez les filets de dégradé pour reproduire les tonalités d'une image existante. En cliquant dessus, tous les nœuds pré-sélectionnés prennent la couleur de l'objet placé derrière eux dans l'axe z. Supposez que vous essayez de créer une représentation vectorielle d'une image bitmap : vous pouvez bouger les nœuds pour les positionner au-dessus des points clés de l'image, appuyer sur Ctrl-A pour les sélectionner tous, puis cliquer sur le bouton pour qu'ils prennent les couleurs respectives. Dans cet exemple, j'ai utilisé cette technique pour « décalquer » l'image bitmap d'un poivron rouge : | Le troisième bouton vous permet d'économiser un peu de travail si vous utilisez les filets de dégradé pour reproduire les tonalités d'une image existante. En cliquant dessus, tous les nœuds pré-sélectionnés prennent la couleur de l'objet placé derrière eux dans l'axe z. Supposez que vous essayez de créer une représentation vectorielle d'une image bitmap : vous pouvez bouger les nœuds pour les positionner au-dessus des points clés de l'image, appuyer sur Ctrl-A pour les sélectionner tous, puis cliquer sur le bouton pour qu'ils prennent les couleurs respectives. Dans cet exemple, j'ai utilisé cette technique pour « décalquer » l'image bitmap d'un poivron rouge : |
| |
| Dans ce cas, le filet était de 10x10, mais, même ainsi, il n'y a pas assez de noeuds dans certains coins pour capturer les détails - la queue verte au sommet en est l'exemple le plus évident. C'est la malheureuse limitation des filets de gradients : il n'y a aucune façon de subdiviser des taches individuelles de couleur dans le filet, pour pouvoiraffiner un détail là où c'est nécessaire, tout en gardant de larges aplats ailleurs. La solution de remplacement est d'empiler plusieurs filets l'un sur l'autre, mais cela devient ensuite plus difficile à gérer. | Dans ce cas, le filet était de 10x10, mais, même ainsi, il n'y a pas assez de noeuds dans certains coins pour capturer les détails - la queue verte au sommet en est l'exemple le plus évident. C'est la malheureuse limitation des filets de gradients : il n'y a aucune façon de subdiviser des taches individuelles de couleur dans le filet, pour pouvoir affiner un détail là où c'est nécessaire, tout en gardant de larges aplats ailleurs. La solution de remplacement est d'empiler plusieurs filets l'un sur l'autre, mais cela devient ensuite plus difficile à gérer. |
| |
| **If you do need more detail it is possible to split a row or column in two, creating more patches to work with. With the Mesh Gradient tool active, double-click on the line connecting two nodes and an extra set of nodes and lines will be inserted. Remember, though, that the operation affects the entire row or column, not just a single patch, so potentially adds many more nodes than you actually need. Currently there is no way to delete a row or column, so it’s usually better to start with a slightly coarser mesh than you need and then split to add more nodes where you need to, rather than be stuck with an unnecessarily fine mesh that you can’t simplify. | **If you do need more detail it is possible to split a row or column in two, creating more patches to work with. With the Mesh Gradient tool active, double-click on the line connecting two nodes and an extra set of nodes and lines will be inserted. Remember, though, that the operation affects the entire row or column, not just a single patch, so potentially adds many more nodes than you actually need. Currently there is no way to delete a row or column, so it’s usually better to start with a slightly coarser mesh than you need and then split to add more nodes where you need to, rather than be stuck with an unnecessarily fine mesh that you can’t simplify. |
| https://commons.wikimedia.org/wiki/File:Red-Pepper.jpg** | https://commons.wikimedia.org/wiki/File:Red-Pepper.jpg** |
| |
| C'est tout pour le nouvel outil Filet de dégradé, en bref. Maintenant, allez-y et créez des fichiers SVG pleins de filets et mettez-les en ligne pour que Google les indexe ! Bien sûr, vous aurez droit au problème « catch-22 » dû au fait que les navigateurs ne savent pas quoi faire du nouveau contenu de vos fichiers ; aussi, vous pourriez aussi poster une image exportée en bitmap jusqu'au moment où les navigateurs se mettront au niveau (espérons-le). Autre solution : vous pouvez essayer d'utiliser le polyfill en Javascript écrit par Tavmjong Bah (l'auteur du code du filet de dégradé dans Inkscape) : http://tavmjong.free.fr/SVG/POLYFILL/MESH/mesh.html | C'est tout pour le nouvel outil Filet de dégradé, en bref. Maintenant, allez-y et créez des fichiers SVG pleins de filets et mettez-les en ligne pour que Google les indexe ! Bien sûr, vous aurez droit au problème « catch-22 » dû au fait que les navigateurs ne savent pas quoi faire du nouveau contenu de vos fichiers ; aussi, vous pourriez aussi poster une image exportée en bitmap jusqu'au moment où les navigateurs se mettront à niveau (espérons-le). Autre solution : vous pouvez essayer d'utiliser le polyfill en Javascript écrit par Tavmjong Bah (l'auteur du code du filet de dégradé dans Inkscape) : http://tavmjong.free.fr/SVG/POLYFILL/MESH/mesh.html |
| |
| Les filets de dégradé ne sont qu'une fonctionnalité de SVG 2 qui est en danger si les fournisseurs de navigateurs ne sont pas persuadés de la prendre en charge. La seule façon pour SVG d'avoir un futur fort est que les gens l'utilise. Que vos fichiers SVG utilisent les filets de dégradé ou non, postez-les en ligne et encouragez d'autres à faire de même. | Les filets de dégradé ne sont qu'une fonctionnalité de SVG 2 qui est en danger si les fournisseurs de navigateurs ne sont pas persuadés de la prendre en charge. La seule façon pour SVG d'avoir un futur fort est que les gens l'utilisent. Que vos fichiers SVG utilisent les filets de dégradé ou non, postez-les en ligne et encouragez d'autres gens à faire de même. |
| |
| Crédits image | Crédits image |
| https://commons.wikimedia.org/wiki/File:Red-Pepper.jpg | https://commons.wikimedia.org/wiki/File:Red-Pepper.jpg |
