Bienvenue sur le site !
Créer un projet
Pour créer un projet, rendez vous sur votre page de profil, puis cliquez sur "Nouveau projet". (si vous avez déjà ouvert un projet, vous pouvez directement en créer un nouveau en choisissant "Nouveau projet" dans la barre d'outils, section "Fichier". Une confirmation de sauvegarde vous sera demandée pour le projet ouvert). La page de projet s'ouvrira. Une boîte de dialogue s'ouvrira vous demandant le nom du projet, remplissez la, puis commencez à éditer !
Pour éditer un projet existant, rendez vous sur votre page de profil, une liste de tous vos projets sauvegardés apparaîtra. Cliquez sur le projet que vous voulez ouvrir, et vous reprendrez vos modifications la où vous en étiez.
Vous pouvez aussi rechercher le nom de votre projet dans la barre de recherche en haut de votre page de profil.
Modifier les informations du projet
Pour modifier le nom d'un projet dans la vue d'édition, cliquez sur le nom affiché en haut de la page. Ce champ est modifiable directement, vous pourrez donc directement changer le nom de votre projet. Pour que ces modifications soient prises en compte, n'oubliez pas de sauvegarder votre projet avant de quitter la vue d'édition !
Pour modifier d'autres informations du projet, telles que la taille de l'image (par défaut, elle est réglée à 500x500) ou la couleur de fond, cliquez sur le bouton "Modifier les informations du projet" dans la barre d'outils, section "Fichier". Une boîte de dialogue apparaîtra, vous demandant la largeur et la hauteur de l'image, ainsi que la couleur de fond ou une image de fond.
Remarque: Si vous modifiez le champ de couleur et que vous ajoutez une image, ce sera l'image qui sera ajoutée.
Après avoir validé, une boîte de dialogue peut apparaître si vous avez modifié un champ de dimensions.
En cliquant sur OK, les dimensions de toutes vos formes ainsi que leur position seront recalculées afin de rentrer dans la nouvelle image, (ou d'occuper le même espace qu'auparavant). Si vous appuyez sur "Annuler", toutes vos formes resteront en place comme avant le redimensionnement.
Disposition de la fenêtre
Entête (1)
Dans l'entête, vous trouverez quelques boutons pour naviguer sur le site: un bouton pour retourner sur la page d'accueil, sur la page d'aide (ici), ainsi que deux boutons pour vous rendre sur votre profil ou déconnecter (ou deux boutons pour vous inscrire ou vous connecter si vous n'êtes pas connecté).
Barre d'outils (2)
Ici, vous trouverez plusieurs boutons qui vous aideront à gérer. Ils sont regroupés en plusieurs sections:
- Dans la section "Fichier", vous pouvez créer un nouveau projet, modifier les informations du projet en cours, le sauvegarder et l'exporter.
- Dans la section "Edition", vous pouvez annuler ou refaire la dernière opération, ainsi que copier, coller ou dupliquer la forme selectionnée.
- Dans la section "Affichage", vous pouvez changer de thème (clair ou sombre) et passer en mode plein écran.
Fenêtre d'édition (3)
Ici se produiront tous les changements sur votre image. Toutes les formes que vous ajouterez y apparaîtront, et vous pourrez les modifier directement dessus.
Inspecteur (4)
Ici se trouvent différents champs que vous pouvez ajuster plus précisément, tels que la position ou les dimensions des formes. C'est ici aussi que vous pourrez appliquer des styles.
Hiérarchie (5)
Ici se retouvent toutes les formes que aurez ajouté sous la forme d'une liste. Cela vous permet d'avoir une vue organisée des différentes formes présentes sur votre image. Vous pouvez aussi modifier l'ordre à l'intérieur de la hiérarchie en glissant-déposant les formes au dessus des autres.
Menu contextuel (6)
Ce menu apparait en appuyant sur le clic droit de votre souris. En cliquant sur une forme ou sur un élément de la hiérarchie, cela sélectionnera la forme et différentes options vous seront proposées.
En cliquant sur un endroit de l'image ou aucune forme n'est présente, un menu vous sera tout de même présenté, mais certaines options ne seront pas disponibles.
Ajouter des formes
Pour ajouter une forme, cliquez sur le bouton "Ajouter une forme", disponible sur le côté droit de la fenêtre, ou dans le menu contextuel. Une boîte de dialogue apparaîtra.
Vous pourrez ensuite choisir entre différents types de formes disponibles.
- Les formes simples correspondent à quelques formes telles que les lignes, les courbes et le texte.
- Le dessin libre se présente sous la forme d'un espace où vous pourrez dessiner directement avec votre souris.
- L'onglet "Image" vous permet de selectionner une image directement de votre ordinateur et de l'intégrer à l'intérieur de votre projet.
-
L'onglet "Formes géométriques" vous permet de choisir parmi de nombreuses formes, ou de créer la votre en cliquant sur "Ajouter un autre polygone..."
Ici vous pourrez choisir le nombre de côtés du polygone, s'il est régulier (tous les côtés ayant la même longueur), ainsi que la largeur et la hauteur de son conteneur. Un aperçu est disponible à chaque instant et vous pouvez directement déplacer les points pour obtenir la forme que vous souhaitez.
- L'onglet "Modèles sauvegardés" vous permet d'ajouter une forme que vous aurez sauvegardés précedemment.
Modèles
Si vous voulez sauvegarder une forme particulière pour l'utiliser une autre fois ou dans un autre projet, vous pouvez la sauvegarder en tant que modèle. Pour cela, sélectionnez la forme que vous souhaitez enregistrer, puis cliquez sur "Sauvegarder comme modèle" à droite de la fenêtre ou dans le menu contextuel. Une boîte de dialogue apparaîtra.
Modifier des formes
Contrôles
Les contrôles s'affichent lorsque vous selectionnez une forme (en cliquant dessus ou sur l'élément dans la hiérarchie correspondant). Ils permettent de modifier la forme.
Pour changer de contrôle, cliquez sur l'icône correspondante en dessous de la forme selectionnée.
Déplacer
Le contrôle selectionné par défaut est celui de mouvement. Il permet de déplacer la forme à travers l'image.
Pour la déplacer librement, cliquez sur un endroit quelconque de la forme, tout en maintenant le clic de votre souris enfoncé, déplacez la.
Pour la déplacer uniquement sur un axe (vertical ou horizontal), cliquez sur une des flèches de couleur, puis déplacer la forme comme expliqué précedemment.
Redimensionnement
Ce contrôle permet d'agrandir ou de rétrécir la forme selectionnée.
Pour la redimensionner librement, cliquez sur un endroit quelconque de la forme, puis déplacez votre souris (vers l'extérieur de la forme pour l'agrandir et vers l'intérieur pour la rétrécir).
Pour les formes non régulières, il est aussi possible de redimensionner suivant un axe (lorsque les flèches sont disponibles). Dans ce cas, les instructions sont les mêmes que pour déplacer présentées ci-dessus.
Tourner
Ce contrôle permet de tourner la forme selectionnée.
Pour cela, cliquez sur un endroit quelconque de la forme, puis déplacez votre souris de manière à faire tourner la forme.
Déplacer un point (polygones et courbes uniquement) (bêta)
Sur les polygones et les courbes, il est possible de déplacer directement les points sur la forme. Pour cela, cliquez sur un sommet de la forme, puis déplacer avec votre souris comme expliqué précedemment.
Attention ! Cette fonctionnalité n'est pas encore stable, il est possible que vous ne puissiez pas obtenir le résultat que vous souhaitez (en particulier lorsque la forme a été tournée).
Inspecteur
L'inspecteur vous permet de retrouver de nombreuses options qui vous permettront de modifier vos formes, et de les rendre comme vous le souhaitez.
Vous pouvez modifier le nom de la forme en cliquant sur le champ correspondant (il est modifiable directement), ou en double-cliquant sur l'élément correspondant dans la hiérarchie.
Parmi celles-ci, vous pourrez y trouver les coordonnées de position (X représente l'axe horizontal, et Y l'axe vertical), la taille de la forme, ainsi que sa rotation. Modifier les champs directement ici vous permettra d'avoir plus de contrôle sur ces paramètres, afin d'être plus précis.
D'autres paramètres disponibles sont expliqués ci-dessous.
Formes régulières
Pour certaines formes, vous avez la possibilité de les rendre régulières. Cela signifie que la largeur et la hauteur seront de la même longueur. Pour les images importés, cela la remettra à son ratio originel.
Cette option est modifiable dans l'inspecteur, sous la forme d'une case à cocher.
Lorsqu'une forme est régulière, redimensionner sur un axe modifiera aussi le deuxième axe, de sorte à ce que la forme reste régulière.
Points d'une forme
Pour certaines formes, vous avez la possibilité de modifier une par une les coordonnées des points qui composent la forme. Ces coordonnées sont relatives au conteneur de la forme: l'axe X correspond à l'axe horizontal, de la gauche vers la droite, et l'axe Y correspond à l'axe vertical du haut vers le bas.
Remarque: Pour les courbes, le deuxième point correspond au point de contrôle de la courbe quadratique.
Styles
Les styles vous permettent de modifier différents aspects esthétiques de votre forme.
Les options principales disponibles sont les couleurs, les bordures, ainsi que l'opacité et la profondeur.
C'est aussi ici que vous pourrez modifier l'apparence du texte.
La profondeur permet d'organiser votre image lorsque plusieurs formes se superposent. Celle qui aura une profondeur plus élevée se retrouvera au dessus des autres formes, et celle qui aura la profondeur la plus faible sera en dessous. Par défaut, la profondeur est de 0, ce qui signifie que la forme qui sera au dessus est celle qui aura été ajoutée en dernière.
Styles personnalisés
Si les styles proposés ne sont pas suffisants, et que vous voulez en ajouter d'autres, cliquez sur "Ajouter des styles personnalisés".
Comme indiqué, seul du code CSS pourra être appliqué.
Modifier le texte
Pour vos éléments de texte, il existe deux moyens de modifier le texte correspondant:
- Soit en double cliquant sur la forme, ainsi vous pourrez modifier le texte directement.
- Soit dans l'inspecteur, dans le champ "Contenu"
Pour modifier l'apparence du texte, toutes les options sont disponibles dans l'inspecteur, dans la section "Style de l'élément".
Sauvegarder / exporter un projet
Lorsque vous êtes connecté sur votre compte, vous pouvez sauvegarder votre projet afin de le retrouver dans l'état où vous l'avez laissé plus tard. Pour cela, cliquez sur le bouton "Sauvegarder le projet" dans la barre d'outils, section "Fichier".
Si vous n'êtes pas connecté, en cliquant sur ce bouton vous serez redirigé vers la page de connexion, où vous pourrez vous connecter puis récupérer votre projet dans l'état où il était avant votre connexion.
Attention ! Pensez à sauvegarder votre projet une fois connecté.
Que vous soyez connecté ou non, vous pouvez exporter votre projet sous la forme d'une image PNG. Pour cela, cliquez sur la bouton "Exporter le projet" dans la barre d'outils, section "Fichier". L'image sera directement téléchargée sur votre ordinateur.
Raccourcis clavier
| Raccourci | Description |
|---|---|
| F2 | Renommer la forme selectionnée |
| Suppr | Supprimer la forme selectionnée |
| Ctrl / Cmd + D | Dupliquer la forme selectionnée |
| Ctrl / Cmd + S | Sauvegarder le projet |
| Ctrl / Cmd + C | Copier la forme selectionnée |
| Ctrl / Cmd + V | Coller la forme selectionnée |
| Ctrl / Cmd + Z | Annuler la dernière opération effectuée |
| Ctrl / Cmd + Y (ou Ctrl / Cmd + Shift + Z) | Refaire la dernière opération annulée |
| F11 / Cmd + Option + F | Passer en mode plein écran |
Paramètres du compte
Pour modifier vos paramètres de compte, rendez vous sur votre page de profil, puis cliquez sur "Paramètres du compte".
Sur cette page, remplissez les champs que vous voulez modifier, puis cliquez sur "Valider". Une confirmation de votre mot de passe vous sera demandée, puis vos paramètres seront modifiés.