Tuto – DIGIDESIGN de Ladigitale, appli de création grap… — Transcript

Tutoriel de DigiDesign de la Digitale, une plateforme d'applications libre, gratuite et respectueuse de vos données. DigiDesign est un outil de création graphique sans inscription qui vous permet de faire n'importe quelle illustration, y compris des images animées GIF.

Voici un exemple d'illustration réalisée à l'aide de DigiDesign.

Pour accéder à cette application, rendez-vous sur le site ladigitale.dev.

Vous descendez et vous allez trouver DigiDesign.

Vous cliquez sur utiliser, pas de création de compte, vous cliquez directement sur créer un visuel et vous arrivez dans l'éditeur.

Dans DigiDesign, vous avez accès à des modèles qui peuvent peut-être vous convenir. Vous pouvez faire une recherche par mot-clé, de préférence en anglais, ici par exemple, j'ai fait une recherche sur le thème de la fête. Ce modèle me convient, je clique dessus et les éléments s'insèrent dans la zone d'édition.

Je vais alors pouvoir les modifier à volonté comme ceci afin d'en faire et bien ce que je souhaite. Ici par exemple, je modifie en Happy Birthday.

Tout ce que je fais dans ma zone d'édition peut être annulé ou rétabli à l'aide des deux petites flèches qui sont ici.

Voyons à présent comment créer une illustration à partir de zéro. Je fais fichier, nouveau projet et j'ai donc une édition blanche.

Je vais tout de suite aller dans redimensionner pour choisir le format de mon illustration. Je peux rentrer des données libres en terme de largeur et hauteur ici en pixels ou choisir des préformats indiqués là, par exemple, et bien le full HD. Je pourrais ensuite redimensionner mon illustration à tout moment de sa création et l'option redimensionnement magique permettra de garder les éléments centrés au milieu.

Voyons à présent comment insérer un fond sur notre illustration. Première possibilité, on peut choisir une image dans la base d'images libre de droit Unsplash. Je vais faire par exemple une recherche sur Rio, voilà, tout un tas d'images et par exemple celle-ci, et bien peut me convenir. Voilà le fond de mon illustration.

J'annule, je peux également, si je le souhaite, en cliquant ici, et bien avoir un fond transparent, c'est-à-dire pas de fond du tout. Dans ce cas-là, pour conserver cette transparence, il faudra bien penser à enregistrer l'image au format PNG.

Enfin, et bien, je peux choisir une couleur unie, soit ici, soit en cliquant ici, et bien sur le nuancier, par exemple, je vais choisir et bien ce bleu clair.

Voyons à présent comment insérer du texte. Je clique ici sur texte et deux possibilités s'offrent à moi. Première chose, choisir des préformats qui sont ici. Par exemple, celui-ci, je clique, il s'insère, je peux bien sûr le déplacer, en modifier l'orientation, je peux également l'agrandir ou le rétrécir à volonté. Je le place ici et bien sûr, je peux modifier le texte. Double clic, ici par exemple, je vais mettre Rio de Janeiro et en dessous, et bien double double clic, je vais mettre par exemple, voilà, Brésil.

Ensuite, je peux également insérer du texte à l'aide de ces éléments de base. Je clique par exemple sur ce format et je vais par exemple indiquer Paradis entrée terrestre. Et là encore, et bien, je peux redimensionner ma zone et la placer où je le souhaite.

En cliquant sur un texte, et bien on a accès à tous les éléments de base d'un traitement de texte et bien plus encore. On peut modifier par exemple, et bien la couleur du texte, on peut modifier si on le souhaite sa police de caractère, sa taille comme ceci, en indiquant et bien les mesures que l'on souhaite, voilà. On peut également et bien le mettre à droite, à gauche ou le centrer et le justifier, en gras ou pas, italique ou non, souligné ou non, rayé ou non. Et puis ici, on peut faire quelques modifications comme la largeur et bien entre les lignes et la largeur ici entre les lettres.

On a également la possibilité et bien d'ajouter des effets. Par exemple, ici, si je sélectionne et bien mes deux zones de texte à l'aide du bouton contrôle et que je clique sur effet, et bien par exemple, je peux ajouter un effet de flou comme ceci. Je peux également ajouter un contour. Par exemple, voilà, si je choisis un contour rouge, et bien, je vais pouvoir voir qu'autour de mes lettres en noir, il y a ce contour rouge. Je peux également ajouter un fond, voilà, en agrandissant ou réduisant les marges et en choisissant par exemple ici la couleur. Et enfin, je peux ajouter une ombre, une ombre, voilà, qui est plus ou moins flou et que je peux décaler si je le souhaite comme ceci. Voilà pour ce qui est et bien des différents effets.

On peut également décider et bien d'animer ces éléments. Par exemple, Rio de Janeiro, je vais par exemple et bien mettre une animation, c'est-à-dire quelque chose qui va avoir lieu une seule fois et ça évidemment, c'est dans le cadre des images animées GIF, pas dans le cas des images statiques. Donc par exemple, si je choisis et bien un zoom, voilà, je peux décider que c'est un zoom sur l'entrée de l'image ou sur la sortie ou les deux. Alors on va choisir entrée. Je peux mettre un délai de déclenchement et bien de l'animation et décider de sa durée, par exemple, voilà, une seconde et demi comme ceci. Et puis, si je sélectionne Brésil en dessous et que je retourne sur animer, je peux également choisir des effets permanents comme par exemple, et bien le clignotement, voyez, ici Brésil, et bien clignote comme ça tout le temps. Voilà. Si je clique ici sur page, et bien, je peux voir l'animation et voir ce que ça donne. Voilà, quels sont les effets et les animations que j'ai ajouté à mon texte. Je peux bien sûr les supprimer si je le souhaite.

Voyons à présent et bien comment ajouter des photos, des images. Première façon, on peut aller sur photo et faire des recherches d'images dans la base d'images libre de droit Unsplash. Donc par exemple, ici, voilà, je fais une recherche sur Rio, je descends et par exemple, voilà, et bien, imaginons que je trouve que cette plage est parfaite, je clique et je l'insère sur mon écran. Elle aussi, je peux bien sûr la redimensionner si je le souhaite, la réorienter si je le souhaite. J'ai également accès comme pour le texte et bien à différentes données, la possibilité de dupliquer, la possibilité de supprimer, la possibilité également ici de jouer sur la transparence, la possibilité également de verrouiller une image, voyez, je ne peux plus rien modifier. Bien sûr, je peux déverrouiller, dupliquer, supprimer comme on l'a vu. Je peux également faire une recherche d'image en allant en chercher une dans mon appareil. Je clique sur téléverser, je clique sur téléverser une image et dans mon ordinateur, je récupère par exemple cette illustration. Je clique et elle s'insère sur mon écran. Je vais pouvoir alors la mettre et bien sur ma zone d'édition. Ici par exemple, et bien, je peux mettre mon image ici en haut et décider de la placer sous le texte. C'est assez simple, il suffit et bien de cliquer sur position, ici ou ici et de décider et bien par exemple de mettre l'image en arrière-plan comme ceci. Je peux également, comme on l'a vu, décider de jouer sur la transparence comme cela. J'ai également et bien la possibilité et bien d'avoir accès à tout un tas d'options pour jouer sur les images, la possibilité de retourner horizontalement ou alors verticalement l'image comme ceci. La possibilité d'ajouter des effets, un par exemple, je peux jouer sur la luminosité, je peux basculer en sépia, je peux décider de mettre par exemple une bordure noire ou alors par exemple, et bien une bordure bleue et cetera et cetera, ajouter une ombre, rajouter un rayon, voilà, comme ceci. Bref, à moi et bien de faire ce que je souhaite. Je peux également ajuster l'image, c'est-à-dire la mettre en plein écran comme ceci.

Enfin, et bien, j'ai également la possibilité et bien d'ajouter un masque, c'est-à-dire de mettre l'image dans un cadre. Par exemple, si je sélectionne et bien cet élément, voilà, j'ai mon image comme ceci. Alors du coup, les bordures et bien ne ressemblent plus à rien et je vais tout simplement et bien décider de les supprimer. J'ai la possibilité également de rogner une image, par exemple, si je ne veux et bien en conserver qu'une partie, voilà, comme ceci et je valide. Et je peux également, si je le souhaite, animer l'image avec par exemple et bien une rotation ou un rebond. Voilà, par exemple, je décide et bien de lancer ce rebond.

Voyons à présent et bien comment insérer d'autres éléments comme par exemple les icônes. Alors icône, on va vous proposer tout un tas d'icônes de base. Vous pouvez faire une recherche dans deux bases de données, soit Iconfinder, soit Noun Project et faire une recherche à l'aide de mots-clés de préférence en anglais. Par exemple, ici, si je recherche un avion, je vais taper plane et cette image par exemple m'intéresse, je l'insère et là encore, et bien, je vais pouvoir modifier tout ce que je souhaite à l'aide des options qui sont en haut. Par exemple, ici, je vais en modifier la couleur. Je peux également, si je le souhaite, insérer des formes, des lignes ou des flèches par exemple, un par exemple, si j'insère une ligne, et bien, je peux par exemple, voilà, la mettre ici en bas. Je peux l'agrandir et ensuite, je peux jouer sur les différents éléments. Je peux choisir la couleur, je peux choisir également la taille de ma ligne, les différents formats proposés et cetera et cetera. Voilà, également rajouter une flèche à un bout ou à l'autre. Voilà, par exemple, ici, je vais mettre des flèches aux deux bouts. Et enfin, et bien, je peux également décider d'animer ma forme avec soit une animation unique, soit un effet en continu comme on l'a vu tout à l'heure. Je peux également choisir des formes que je souhaite, par exemple, voilà, ici, je vais prendre ce soleil et ce soleil par exemple, et bien, je le mets ici et je décide par exemple, et bien de lui attribuer une couleur, voilà, quelque chose comme un orange. Euh voilà, ici. Voilà, un jaune. Ensuite, et bien, vous pouvez également créer des QR codes, c'est-à-dire des liens flashables vers des sites internet. Par exemple, ici, j'ai un lien vers la page Wikipédia de Rio de Janeiro. Je récupère le lien. Je retourne dans mon DigiDesign. Je clique sur QR code, je colle le lien, ajouter un QR code et voilà, ici, et bien, lorsque les gens et bien flasheront ce QR code avec un smartphone ou une tablette, ils arriveront directement sur le site Rio de Janeiro de Wikipédia. Enfin, et bien, on a également la possibilité de jouer sur les calques. Les calques, et bien, vous montrent et bien tous les éléments que vous avez insérés et bien sur votre image. Pour chacun de ces éléments, vous avez la possibilité de les déplacer comme ceci, de les masquer, de les verrouiller ou de les supprimer. Cela vous permet de réorganiser très facilement votre illustration.

Une fois que vous avez fini, et bien, vous allez pouvoir enregistrer tout ça. Première chose, vous allez pouvoir cliquer sur télécharger. Alors, soit et bien une image statique sans effet, PNG ou JPEG par exemple, ou un PDF ou d'autres formats. Par exemple, ici JPEG, télécharger. Si je clique, et bien, je me retrouve bien avec mon illustration. Je peux également décider de conserver les animations en téléchargeant l'illustration en GIF. Voilà, je peux jouer ici sur la résolution et le nombre d'images par seconde. Je clique sur télécharger GIF et je retrouve ici mon image, et bien, avec les différentes animations que j'ai ajouté tout à l'heure à l'écran dans ma zone d'édition. Comme il n'y a pas de création de compte dans DigiDesign, on peut sauvegarder également l'illustration dans un format modifiable au format JSON. Soit en passant par ici, enregistrer en JSON, soit en cliquant ici, télécharger au format JSON et on enregistre. Ici, je me retrouve et bien avec cet élément que je pourrais télécharger dans DigiDesign sur n'importe quel et bien ordinateur afin de pouvoir le modifier. Voyons un exemple, par exemple, si je vais et bien ouvrir un autre DigiDesign que j'ai créé, voyez, au format JSON, je clique sur ouvrir. Je patiente, et bien, je me retrouve avec mon illustration et tous les éléments cliquables, modifiables à volonté. Dernier point, vous avez également et bien la possibilité de créer plusieurs pages sur et bien votre zone d'édition. Hein, par exemple, si je clique ici, et bien, j'ajoute une deuxième page. Je peux également la déplacer à l'aide des petites flèches si je le souhaite, en la mettant par exemple ici au-dessus et je peux bien sûr supprimer la page si je le souhaite. Ça, c'est surtout utile si vous créez une animation puisque vous aurez les deux pages qui se joueront les unes après les autres. Voilà, maintenant vous savez l'essentiel sur DigiDesign et c'est à vous de jouer.