Editeur d’image en pixel en ligne : 5 outils

Si le gif est un dinosaure qui a survécu au web2.0, on peut presque en dire autant des images créées en pixel. En fait toutes les images sont faites de pixels, mais quand on parle de l’art du pixel, on parle en fait de dessiner une image pixel par pixel (point par point) , comme on peut le voir dans la figure de gauche.

Commençons par expliquer ce qu’est un pixel ! Le pixel  est l’unité de base permettant de mesurer la définition d’une image numérique matriciellePour faire plus simple : le pixel est un point lumineux. Chaque point lumineux ajouté à un autre point forme une image. Au fur à mesure des évolutions technologiques, on a commencé par le premier pixel qui ne pouvait prendre que deux états, le noir et le blanc et qui prenait en mémoire 1 seul bit! (C’est l’époque où la mémoire des ordinateurs manquait cruellement ). Puis on a créé un pixel à 4 bits et donc à 16 couleurs (4 à la puissance 2), puis 8 bits avec 256 couleurs, 16 bits avec 65 mille couleurs et maintenant 24 bits avec 16 millions de pixels. Avec 24 bits, on est plus fort que l’oeil, donc on aura plus aucune évolution en terme de pixel.

  • Exemple FF FF FF qui est le blanc, en binaire ça fait 16 bits à 1111 1111 1111 1111 1111 1111
  • Exemple 00 00 00 qui est le noir, en binaire ça fait 0000 0000 0000 0000 0000 0000 .

Bref, nous les vieux geeks, le pixel est pratiquement gravé& dans notre DNA. Pour les plus jeunes, il s’agit d’un truc vaguement familier.  Mais nous les vieux geeks on s’accroche à la partie nostalgique, c’est un peu comme les taxis face à UBER, on s’accroche, mais contrairement à Uber, les jeunes peuvent tout de même s’intéresser au vieux pixels car en fait le pixel n’est pas prêt de mourir et  à ce titre, je viens de dresser une liste de service en ligne qui offrent une option de dessin au pixel.

Piskelapp.com

On commence par le meilleur, car en terme d’image, on peut créer des animations au pixel qui vont prendre un minimum de mémoire sur une application de jeu par exemple.

Dessin au pixel 1

On aura donc une grande facilité à créer une animation comme celle qui suit :

On pourra se référer la fiche : Créer une animation en pixel et sauvegarde en GIF qui explique plus en détail cet outil.

Piq.codeus.net/draw

Cet outil en ligne est assez sophistiqué, même si on ne traite que du pixel. On pourrait même dire que c’est le photoshop du dessin au pixel, car il y a déjà une notion de calque, ce qui va faciliter grandement l’élaboration du dessin. De plus, les nombreuses options disponibles permettront un rendu de dessin optimum.

Dessin au pixel 2

Si on est doué, on pourra vraiment réaliser de petite oeuvre numérique de qualité. Dans mon cas, mon essai n’est pas concluant. Dommage qu’on ne puisse pas importer des photos et les retoucher avec cet outil.

Pixieengine.com/pixel-editor

Dessin au pixel 3 en gif

Avec cet outil, on est plutôt dans le spartiate ou le minimalisme, en fait on revient à la source de l’édition de pixel avec très peu d’options. On prendra soin de bien définir la taille du dessin. En effet,  si on commence à dessiner avec un dessin de 16X16 pixels, c’est un peu petit.

Sur la gauche voilà une animation qui fait un peu mal aux yeux qui permet de résumer un peu ce qu’on peut faire avec cet outil

L’avantage de cet outil c’est qu’on peut importer une image et la modifier.  Attention toutefois à ne pas importer des images trop grosses sous peine de blocage.

Makepixelart.com

Cet outil est encore plus simple d’usage, il faudra donc passer un peu plus de temps pour faire un truc assez valable. L’avantage, c’est qu’on peut faire une sauvegarde en format PNG ce qui permet de pouvoir faire des dessins avec des zones transparentes (alha) , ce qui sera très utile pour la superposition d’image.

Dessin au pixel 4

 

Make8bitart.com

Cet outil en ligne est encore plus simple d’usage et la simplicité implique aussi un résultat très simple, comme son non l’indique on a le droit à 8bits en terme de couleur soit 256 couleurs plus la couleur alpha qui permet l’option transparent. On appréciera le grand espace disponible pour faire des

Dessin au pixel 5

Avec l’outil on a le droit au minimum : la pipette, le remplissage et le crayon avec une taille variable. Avec un peu de patience, on pourra faire un truc simple et bien meilleur que ce que j’ai réalisé pour le test.

Un sujet voisin le Favicon

Un favicon, c’est une photo « iconisée » (extension en .ico) que vous trouvez la plupart du temps devant un url. Cette « photo » est d’une dimension petite de 16X16 pixels.  Vu la petitesse de la photo, on peut vraiment créer un favicon grâce aux outils que je viens de décrire ci-dessus.

Vous pourrez donc aussi consulter la liste de 10 outils qui permettent de créer des favicons.

exemple de favicon pixel

Conclusion : malgré la prolifération des mémoires et des images de 20 millions de pixels, il existe toujours un créneau pour la création d’image en pixel. Cet univers appartient surtout à la section des icones qu’on voit dans les logiciels et les jeux vidéos. Noramlement une image en pixel doit être sauvegardée en format bitmap, ou PNG, mais pas en JPG qui a une facheuse tendance à compresser les images. 

 

 

 

 

Transformer une photo en emoji

Une petite brève avant de partir en weekend : le service en ligne  image 2 emoji.com offre la transformation de votre photo en un ensemble d’icones emoji.  Pour éviter un grand discours, voilà ce qu’on peut faire (avant après).

Thierry Roget en emoji

Ça ne sert pas à grand chose, mais c’est fun. Si on fait un zoom sur la photo transformée, on pourra trouver les figurines emoji très connu des fanatique de jeu japonais.

Après transformation à vous ensuite de récupérer l’image et de la rogner pour arriver à créer un avatar de 400X400 pixels, ce qui est un peu juste pour le web.

Pour ceux qui ne savant pas ce qu’est un emoji :

Emoji (prononcé [emod?i]) est le terme japonais qui désigne les émoticônes utilisées dans les messages électroniques et les pages web japonaises. Signifiant à l’origine pictogramme, le mot emoji signifie littéralement « image » (e) + « lettre » (moji). Ces caractères sont utilisés de la même façon que les émoticônes ASCII. 

source wikipedia

http://www.image2emoji.com

Pour aller plus loin :

Dans le même genre nous avons aussi les favicons et vous avez aussi des services de de création de mosaique, sans oublier les transformations de photos en code ASCII dont j’ai déjà testé 12 services. N’oubliez pas non plus tous les services de création d’AVATAR en ligne où j’en compte déjà presque 30 services.  ha! et bien sûr le création de GRAVATAR

Ecrire son nom en EMOTICON

L’émoticône ou l’emticon, j’espère que vous connaissez? C’est l’assemblage de l’émotion et de l’icone, en résumé c’est une petite image qui a pour but de passer une émotion. les emoticônes (ou émoticônes) sont légions dans les applications de chat (whatsapp, face, skype, viber…) et même moi, le vieux geek, j’utilise cette fonction régulièrement.

Maintenant on peut écrire son nom en émoticon, ou plutôt écrire son nom avec un ensemble d’émoticônes. On peut faire ça chez  2symbol.com qui offre une grande variété d’outils inutilement utiles et dont je parle parfois sur ce blogue (ici).

Que fait 2symbol.com  name ?

  • Il permet d’écrire un mot ou plusieurs mots avec des émoticônes.
  • Choisir des plusieurs ou un seul emoticônes pour écrire le mot.
  • Changer la police, la taille, les motifs, le fond noir, blanc, ou transparent.
  • Sauvegarder le travail effectué en format png, jpg.

Création de mot en emoticon

Pour résumer, il est préférable de le faire en image, car on comprend mieux ce qu’offre ce service en ligne.

LOL
LOL
LOL
LOL
LOL
LOL
LOL

 

LOL
LOL

 LOL

LOL

 

LOL

 

LOL

 

LOL

 

LOL

 

LOL

 

LOL

 

LOL
Conclusion :
Ce service en ligne est un peu bling bling, mais les émoticones vont perdurer sur internet tout comme les bons vieux gifs.  Notons, qu’il  a une option tout à fait intéressante. C’est la fonction « fond transparent » qui permet de d’insérer le résultat  dans une autre image en utilisant un logiciel de photo, ce qui donne  le résultat qui sit. Notez que ce résultat a été produit avec sumopaint.

 

Pin It on Pinterest