Documentation
1. Introduction
Bienvenue sur la page de documentation de l’éditeur de Pixel Art de DiyPixelArt. Cet éditeur permet de réaliser des images dans un style pixel art avec des perles à repasser de multiples façons : Dessin à la souris, pixellisation de photos, génération d’image IA par texte et transformation d’image par IA.
L’éditeur est accessible gratuitement pour tous afin de réaliser un design personnalisé. Il est principalement conçu pour s’intégrer à la boutique de diypixelart.shop pour ajouter au panier un design personnalisé.
Vous pouvez naviguer vers la section qui vous intéresse depuis la table des matières ou commencez par la section de démarrage rapide.
2. Démarrage rapide
Pour un démarrage rapide, le point de départ dépend du résultat souhaité : transformer une photo en mosaïque (2.1) ou dessiner soi-même un modèle (2.2).
2.1. Transformer une photo en mosaïque
- Cliquer sur l’icône (
) en haut à gauche pour passer sur l’interface de transformation d’image - Ouvrir le panneau « Téléverser«
- Cliquer sur le bouton « Depuis l’appareil » et sélectionner l’image depuis la mémoire de l’appareil dans la fenêtre qui s’ouvre. Un premier rendu sans réglage s’affiche dans la fenêtre de visualisation à droite.
- Jouer sur les paramètres pour obtenir le meilleur résultat. Si un réglage n’est pas clair, cf. 3.1. Interface de transformation d’image qui détaille les réglages.
2.2. Dessiner soi-même un modèle
- L’éditeur se charge par défaut sur l’interface d’édition. Si l’interface est celle de transformation d’image, cliquer sur l’icône ( ) pour passer sur l’interface d’édition.
- Redimensionnez la grille à la taille souhaitée avec l’outil (
) - Facultatif : Pour charger un modèle dans le calque d’arrière-plan, cliquez sur le bouton (
) et sélectionnez arrière-plan dans la fenêtre qui s’ouvre. Aller chercher le fichier à charger. Ajuster la position avec cliquer-déplacer et le zoom avec la fenêtre latérale. - Dessinez votre motif avec les outils disponibles !
3. Interfaces
L’éditeur est composé de 2 interfaces de travail : l’interface de transformation d’image (3.1) et l’interface d’édition (3.2).
3.1. Interface de transformation d'image
L’interface de transformation d’image permet de faciliter la transformation d’une image dans un style pixel art et de jouer sur les paramètres pour obtenir le meilleur résultat.
Cette interface est découpée en 4 parties : l’entête (1), la barre latérale des réglages (2), la barre de résumé (3) et la fenêtre de visualisation (4).
3.1.1. Entête
Moins utile pour cette interface. Cf. 3.2.1 pour sa description.
3.1.2. Barre latérale des réglages
Cette barre regroupe tous les réglages applicables pour obtenir le meilleur résultat.
Ces réglages sont regroupés dans 3 panneaux ouvrants permettant de charger une image (1), ajuster la taille (2) et ajuster les couleurs (3).
Info : L’interface de conversion d’image dispose d’un système d’historique à l’aide des boutons précédent et suivant (ou Ctrl+Z et Ctrl+Y) qui permettent de revenir à un état précédent des paramètres à tout moment.
3.1.2.1. Panneau téléverser
Ce panneau permet de charger une image dans l’éditeur pour transformation depuis l’appareil local à l’aide du bouton « Depuis appareil »
Une thumbnail de visualisation est présente après le chargement de l’image pour rapidement visualiser l’image d’origine.
Astuces :
- Utilisez le drag and drop sur la fenêtre de visualisation pour charger une image dans l’éditeur
- Un clic sur la thumbnail ouvre une lightbox pour voir en grand l’image d’origine
3.1.2.2. Panneau taille
- Le format de la mosaïque de sortie pour s’adapter au format de l’image de base.
- La taille finale de la mosaïque. Le rendu sera plus ou moins « pixelisé » en fonction de la taille de la mosaïque.
- La portion de l’image de base utilisée pour la transformation en mosaïque.
Astuce : Il est possible de déplacer « naturellement » par appui-déplacer l’image à la souris (ou un doigt sur mobile) depuis la fenêtre de visualisation.
Conseil : Pour capturer un maximum de détails, il est conseillé de zoomer sur la zone d’intérêt ou d’agrandir la mosaïque.
3.1.2.3. Panneau couleur
Le panneau de couleur permet d’améliorer significativement le résultat final en adaptant les couleurs utilisées pour la mosaïque.
(1) : Cette case à cocher permet d’envoyer au serveur l’image pour calculer et supprimer l’arrière-plan de l’image.
Info : L’image est simplement traitée et n’est pas sauvegardée sur le serveur.
Astuce : L’interface utilisateur est désactivée pendant le traitement qui prend en général une dizaine de secondes. Pendant le traitement vous pouvez ouvrir le mini-jeu pour patienter. Des notifications sont affichées et mises à jour au cours du traitement.
(2) : Les filtres pré-définis ajustent automatiquement les réglages de couleur de l’image. Plusieurs filtres pré-définis sont présents pour essayer rapidement différents rendus.
(3) : Ces sliders permettent d’ajuster indépendamment et finement le réglage des couleurs de la mosaïque.
(4) : Cette grille donne plusieurs informations : les couleurs de la palette qui sont utilisées, les couleurs utilisées en petite quantité, les couleurs désactivées ainsi que le nombre de pixels de chaque couleur en passant la souris sur la case (ou avec un tap sur mobile). Cliquer sur une couleur utilisée la désactive, elle sera remplacée par la prochaine couleur la plus proche. Cette fonctionnalité est utile pour désactiver une couleur « gênante ».
(5) : Cette case à cocher active ou désactive le « tramage » qui accentue l’effet mosaïque et permet de reproduire une couleur par plusieurs couleurs proches. Le slider en-dessous permet de contrôler l’intensité de l’effet.
Astuce : Commencer par les filtres pré-définis pour trouver rapidement l’ajustement de couleurs qui rend le mieux. Si une couleur semble gênante (souvent le gris / bordeaux) essayer de la supprimer de la palette pour voir le nouveau résultat. Finalement ajuster finement les réglages indépendants si besoin pour avoir le meilleur résultat. Le mieux est d’essayer et voir le résultat, il est toujours possible de revenir en arrière avec les boutons précédent/suivant (ctrl+z/ctrl+y) si le résultat est moins bon ! Une fois satisfait du résultat global, il est possible de passer sur l’éditeur pour faire des retouches sur les pixels avec les outils disponibles.
Attention : Les retouches locales de la mosaïque doivent être la dernière étape ! En effet, retourner sur l’interface de conversion d’image recalculera automatiquement la grille, ce qui effacera les modifications locales de l’utilisateur. Une popup de confirmation est présente pour éviter la perte de modifications par erreur.
3.1.3. Barre de résumé
Cette barre permet de visualiser rapidement les dimensions de la mosaïque finale ainsi que le coût de la configuration sélectionnée. Finalement, le bouton éditeur permet de passer sur l’interface éditeur une fois la conversion globale terminée.
3.1.4. Fenêtre de visualisation
La fenêtre de visualisation permet de voir l’impact en direct des réglages. Chaque carré coloré correspond à une perle. La grille bleue permet de voir facilement la délimitation de chaque plaque pour former l’image finale.
3.2. Interface d'édition
Cette interface permet de travailler sur chaque pixel d’un design à l’aide de différents outils.
L’interface d’édition est découpée en 4 parties : l’entête (1), les outils (2), la palette de couleur(3), la zone de travail (4) et les infos sur la grille (5)
3.2.1. L'entête
L’entête permet de naviguer facilement entre les projets, régler les paramètres de l’éditeur, changer d’interface, voir le nombre de crédits restant, voir l’état de la connexion et finalement d’ajouter au panier une fois le design terminé.
Icône
Description
Menu
Changer d’interface (conversion d’image <-> éditeur)
Utilisateur non connecté
Utilisateur connecté
3.2.2. Les outils
Les outils permettent de réaliser différentes actions sur la grille (tracer, effacer, redimensionner, transformer, etc.). Les chevrons en partie inférieure ouvrent un sous-menu avec d’autres outils. Ces outils sont organisés par thèmes. Pour une description complète des outils, cf. section 4.
3.2.3. La palette de couleur et les calques
La grille de couleur permet de sélectionner une couleur dans la palette à utiliser avec un outil sur la grille (tracer, remplir, remplacer couleur, etc.).
Le slider de contraste permet d’adapter le contraste visuel de la grille arrière pour les pixels non remplis (non visible sur le résultat final).
Finalement, les boutons de visibilité permettent d’afficher ou de cacher les calques de la grille et de l’image d’arrière-plan.
Info : l’éditeur travaille uniquement avec 2 calques.
- Un calque pour la grille de pixels qui correspond au résultat final.
- Un calque pour une image d’arrière-plan en semi-transparence pour tracer dessus ou pour la convertir dans la grille.
3.2.4. La zone de travail
Cet espace sert à la fois de visualisation et de zone de travail sur laquelle utiliser les outils.
3.2.5. Les infos sur la grille
Cette section informe rapidement sur les statistiques de la grille, notamment sur les dimensions, le nombre de pixels (et donc de perles) total, le nombre de couleurs utilisées ainsi qu’une nomenclature du nombre de pixels par couleur utilisée.
Astuces :
- Passer la souris sur la section des dimensions affiche une popup pour avoir la taille réelle en cm.
- Cliquer sur une couleur utilisée la sélectionne pour l’utiliser sur la grille.
- La sélection d’une couleur depuis cette barre sur mobile affiche un bouton « Supprimer » pour remplacer la touche « suppr » sur ordinateur. Cette action supprime cette couleur de la grille et la remplace par la couleur la plus proche parmi celles utilisées.
4. Liste des outils
3 types d’outils sont présents : les outils sélectionnables (1), les outils d’action (2) et les outils d’ouverture fenêtre (3).
Réalise une sélection rectangulaire (1).
Dessine le pixel cible avec la couleur de la palette sélectionnée. Fonctionne aussi en appui-déplacé (1).
Rempli une zone fermée de pixels identiques avec la couleur de la palette sélectionnée (1).
Remplace tous les pixels de la grille de la couleur de la case cible par la couleur sélectionnée dans la palette (1).
Ecrit sur la grille un texte à l’endroit sélectionné (1).
Efface le pixel cible. Fonctionne aussi en appui-déplacé (1).
Efface une zone fermée de pixels de la couleur de la case cible. Utile sur mobile pour effacer une zone de couleur (1).
Supprime tous les pixels de la grille (1).
Sélectionne dans la palette de couleurs la couleur de la case cible. Utile pour sélection rapide de couleur (1).
Redimensionne la grille pour s’adapter à la taille du design. Utile pour faire tenir le design sur un minimum de plaques (1).
Supprime tous les pixels qui ne sont pas dans la zone fermée où se trouve la case cible. Utile après détourage du sujet pour effacer l’arrière-plan d’un seul coup (1).
Ouvre une fenêtre pour redimensionner la grille (3).
Applique une symétrie horizontale à la grille (2).
Applique une symétrie verticale à la grille (2).
Applique une rotation de 90° de la grille vers la droite (2).
Applique une rotation de 90° de la grille vers la gauche (2).
Permet de déplacer la grille dans la fenêtre de visualisation (1).
Recentre la grille dans la fenêtre de visualisation (2).
Zoom sur la grille dans la fenêtre de visualisation (2).
Dé-Zoom de la grille dans la fenêtre de visualisation (2).
Retourne dans l’état précédent dans l’historique de la grille (2).
S’il y a eu un retour dans l’historique de la grille, retourne dans l’état suivant dans l’historique de la grille (2).
Ouvre une fenêtre pour la génération d’une image pixel art à partir d’un texte (3).
Ouvrir une fenêtre avec l’historique des générations d’images IA précédentes (3).
Envoie l’image d’arrière-plan au serveur pour transformation IA dans un style pixel art (2).
Ouvre la fenêtre latérale de conversion de l’image d’arrière-plan vers la grille (1+3).
Ouvre la fenêtre latérale de réglage de l’arrière-plan (1+3).
Télécharge la grille en tant qu’image à l’échelle 1:1. Utile pour télécharger les données de la grille et les réutiliser ultérieurement (2).
Télécharge une capture d’écran de la grille agrandie. Utile pour télécharger un rendu visuel de la grille à une plus grande échelle (2).
Télécharge localement le projet actuel dans une archive .tar. Utile pour réaliser une sauvegarde en local d’un projet sans passer par le serveur (2).
Charge une image dans l’éditeur (3).
Charge un projet depuis une archive .tar locale. Utile pour reprendre un projet dans l’état où il a été sauvegardé en local (3).
Charge dans l’arrière-plan une image aléatoire de génération IA provenant du serveur. Utile pour avoir un exemple des possibilités (2).
Ouvre une fenêtre de simulation du rendu réel de la grille avec des cylindres creux (3).
Créé et ouvre dans un nouvel onglet la notice PDF d’assemblage du design actuel (3).
Ouvre la fenêtre de bibliothèques de sprites publics et privés (3).
Enregistre la grille actuelle en tant que nouveau sprite privé (2+3).
Ouvre la fenêtre de mini-jeu. Utile pour reprendre une partie mise en pause précédemment (3).
Affiche les limites de chaque plaques pour former le design actuel. Utile pour se rendre compte de la taille d’un design (1).
Passe en mode « information ». Dans ce mode chaque appui sur un outil affiche la popup d’information sur l’outil au lieu de l’activer. Utile sur mobile (1).
5. Fenêtres
Les différentes fenêtres présentes dans l’éditeur sont les suivantes :
5.1. Fenêtre redimensionner la grille
Cette fenêtre permet de redimensionner la grille à partir de tailles prédéfinies ou en indiquant une taille spécifique.
Info : Les dimensions de la grille doivent être entre 1 et 256 dans chaque direction.
5.2. Fenêtre génération d'image IA
Cette fenêtre permet, à partir d’une description texte et de divers paramètres pour guider le modèle de générer par IA une image pixel art.
- Largeur / hauteur : Les dimensions finales souhaitées de l’image en pixels (entre 32 et 256).
- Description : Le prompt texte descriptif pour générer l’image
- Orientation : Choix de l’orientation du sujet sur l’image.
- Supprimer l’arrière-plan : Case à cocher pour supprimer l’arrière-plan à la génération.
- Vue isométrique : Case à cocher pour avoir un rendu sous une vue isométrique.
5.3. Fenêtre d'historique de générations IA
Cette fenêtre regroupe les images générées précédemment par IA sur le serveur.
Info : Effacer une image avec le mode suppression supprimera définitivement le fichier du serveur. Cette action est irréversible.
5.4. Fenêtre de conversion d'arrière-plan
Cette fenêtre permet de convertir l’image dans l’arrière-plan vers la grille. Utile pour convertir les images qui sont déjà au format pixel art dans l’arrière-plan (génération IA, historique de génération, image aléatoire).
Info : Contrairement aux autres parties de l’éditeur, cette fonctionnalité ne dispose pas encore d’un système d’historique. Cette fonctionnalité sera le sujet d’un développement futur.
5.5. Fenêtre de réglage d'arrière-plan
Cette fenêtre permet de manipuler l’arrière-plan (zoom et position) depuis l’interface éditeur. Dans le « Mode 1:1 », chaque pixel de l’image d’origine est associé à une case de la grille. Ce mode est utile pour naviguer facilement dans les feuilles de sprite et convertir un sprite dans la grille.
5.6. Fenêtre de simulation de rendu
Cette fenêtre permet de simuler le rendu réel de la grille avec des cylindres creux et de simuler rendu accroché dans un cadre sur un mur.
5.7. Fenêtre de génération notice PDF
Cette fenêtre permet de générer la notice PDF pour l’assemblage de la réalisation. Le PDF contient une pré-visualisation du modèle, la nomenclature des perles ainsi qu’un patron pour chaque plaque à assembler.
5.8. Fenêtre de bibliothèque de sprites
La bibliothèque de sprites regroupe l’ensemble des sprites sauvegardés par l’utilisateur connecté dans l’onglet « Mes sprites », ainsi que tous les sprites publics accessibles à tous sans comptes dans l’onglet « Public ». Un clic sur un sprite permet de le charger dans la grille.
Concernant les sprites privés de l’utilisateur, 3 actions supplémentaires sont présentes :
- Editer
- Supprimer
- Soumettre un sprite pour approbation
En fonction de l’option sélectionnée, l’affichage sur les sprites change pour indiquer le mode :
Info :
- Supprimer un sprite supprimera définitivement le fichier du serveur, cette action est irréversible.
- Soumettre un sprite pour approbation permet d’envoyer à l’administrateur le sprite sélectionné. L’administrateur pourra ensuite valider pour ajouter une copie à la bibliothèque publique ou refuser à sa discrétion.
5.9. Fenêtre de mini-jeu
Cette fenêtre intègre un mini-jeu de type Pacman dans l’éditeur. Ce jeu est prévu pour patienter lors des phases de génération IA ou de suppression d’arrière-plan qui prennent un certain temps… mais il est possible d’y jouer à n’importe quel moment !
6. Gestion des projets
L’éditeur dispose d’un système de sauvegarde des projets. Ainsi, l’utilisateur peut travailler sur plusieurs projets en parallèle et reprendre son projet exactement à l’endroit où il s’était arrêté.
6.1. Sauvegarder un projet
Il y a deux possibilités pour sauvegarder l’avancement d’un projet :
- Sauvegarder sur le serveur (recommandé)
- Télécharger une copie locale
6.1.1. Sauvegarde sur le serveur
Cette option par défaut est la plus simple et transparente pour l’utilisateur, depuis l’éditeur, il suffit de cliquer sur « Sauvegarder projet ». L’utilisateur doit disposer d’un compte sur le site diypixelart.shop pour pouvoir sauvegarder un projet.
Après clic sur le bouton de sauvegarde, une popup d’information s’ouvre pour confirmer la sauvegarde du projet.
Astuce : Une fois le projet sauvegardé sur le serveur, l’url de la page change avec l’ajout d’un numéro pour le projet :
(ex : https://www.diypixelart.shop/pixel-editor/?project_id=35)
Attention : Pour l’instant aucune sauvegarde automatique ou session dans le navigateur n’est implémentée. Avant de quitter la page, vérifiez que toutes les modifications sont sauvegardées. En cas de modifications non sauvegardées et fermeture de la page, une popup s’ouvre pour que l’utilisateur confirme son choix.
Attention : La limite de projets sauvegardés sur le serveur est fixée à 10 projets par utilisateur. Au-delà la sauvegarde d’un projet ne sera possible qu’en local par téléchargement de l’archive projet sur l’appareil de l’utilisateur (cf. 6.1.2).
6.1.2. Sauvegarde locale
L’outil « Télécharger le projet » permet de télécharger un fichier .tar contenant toutes les propriétés du projet. Il est possible de recharger le fichier dans l’éditeur à l’aide de l’outil « Charger projet locale » (
).
6.2. Charger un projet
6.2.1. Depuis le serveur
La page Mes projets permet de retrouver tous les projets sauvegardés de l’utilisateur connecté.
Pour charger un projet dans l’éditeur, il suffit de cliquer sur une carte. Pour supprimer un projet, le clic sur le bouton supprimer fera apparaître une popup pour confirmer le choix de l’utilisateur.
Astuce : Depuis l’éditeur le clic sur le bouton « Mes projets » dans le menu permet d’accéder directement à cette page. Attention de bien sauvegarder le projet en cours avant de retourner sur le menu des projets.
Info : Supprimer un projet supprimera définitivement le fichier sur le serveur, cette action est irréversible.
6.2.2. Depuis une sauvegarde locale
Pour charger un fichier dans l’éditeur, utiliser l’outil « Charger projet local » ().
Astuce : Le drag-and-drop d’un fichier de sauvegarde sur la fenêtre de visualisation charge le projet sans avoir besoin d’aller le chercher dans une fenêtre sur le disque.
7. Raccourcis et mobiles
7.1. Raccourcis clavier
La liste des raccourcis clavier est disponible dans l’éditeur avec le bouton « Aide » dans accessible avec le bouton « Menu » (ou raccourci espace).
7.2. Boutons mobiles
Des boutons supplémentaires sont prévus pour les interfaces mobiles sans clavier. Ces boutons apparaissent en bas de l’espace de travail en mode éditeur dans les cas suivants :
(1) Après une sélection réalisée avec l’outil de sélection (
) les boutons suivants apparaissent.
Ces boutons permettent respectivement d’annuler la sélection (= Echap), copier la sélection (= Ctrl+C), couper la sélection (= Ctrl+X), coller la sélection (= Ctrl+V) et de supprimer la sélection (touche Suppr).
(2) Avec l’outil texte (
) l’interface suivante apparaît avec les boutons suivants pour respectivement écrire le texte sur la grille et afficher le clavier virtuel de l’appareil.
(3) Finalement pour supprimer une couleur de la grille en la sélectionnant depuis la palette de couleur utilisée, les deux boutons apparaissent pour respectivement cacher la barre de suppression de couleur et pour supprimer la couleur sélectionnée :
8. Réglages
Des réglages sont présents dans l’éditeur pour adapter l’interface en fonction de l’appareil (ordinateur ou appareil mobile) ainsi qu’en fonction des préférences de l’utilisateur. Cette fenêtre est accessible depuis le menu de l’éditeur à la catégorie « Réglages » :
Les réglages disponibles sont les suivants :
(1) : Ci-dessous à gauche option décochée à droite option cochée. Les vidéos sont utiles à la découverte des outils pour comprendre leur fonctionnement mais prennent de la place dans l’interface. A adapter en fonction des préférences et de l’expérience de l’utilisateur.
(2) : Ci-dessous à gauche option décochée à droite option cochée. La prévisualisation de l’outil à côté du curseur est utile pour voir rapidement quel outil est sélectionné qui est particulièrement utile sur desktop. Sur mobile l’image de prévisualisation de l’outil est cachée par défaut.
(3) : Ci-dessous à gauche option décochée à droite option cochée. Les boutons supplémentaires sont utiles sur interface mobiles sans clavier et à la découverte des actions réalisables au clavier dans l’éditeur. Cependant ils peuvent être gênant en prenant de la place sur l’interface de travail.
(4) : Ci-dessous à gauche option décochée à droite option cochée. L’affichage du mini-jeu à chaque opération sur le serveur permet de passer le temps plus rapidement… le désactiver permet de rester concentré sur sa création personnalisée !
Info : Indépendamment de l’interface d’attente, une notification est présente pour informer l’utilisateur sur l’avancement du traitement de sa requête.
9. Astuces
9.1. Logiciels
Sans vouloir être exaustif, cette section décrit quelques fonctionnalités prévues dans l’éditeur pour simplifier l’utilisation :
Astuce
Desktop
Mobile
Translation grille
Appui molette + déplacement souris
Translation 2 doigts équidistants
Zoom sur grille
Molette souris
Ecartement ou rapprochement 2 doigts
Déplacer une partie de la grille sélectionnée
Après sélection, réaliser un cliquer maintenu à l’intérieur de la sélection et translater la souris
Idem avec swip à 1 doigt
Tracer en continue
Avec l’outil tracer, maintenir enfoncé le clic et déplacer la souris
Idem réaliser swip avec 1 doigt
Effacer en continue
Indépendamment de l’outil sélectionné, réaliser un clic droit maintenu pour effacer les pixels.
Utiliser l’outil « Effacer » avec swip à 1 doigt.
9.2. Métier
Cette section décrira les bonnes pratiques pour obtenir le meilleur résultat d’une transformation d’image.