Aller au contenu principal

Peux-tu concevoir des icônes pour différents écrans?

Icônes d'ordinateur simples

Icônes d'ordinateur simples (buzstop, iStockphoto)

Icônes d'ordinateur simples

Icônes d'ordinateur simples (buzstop, iStockphoto)

Utilise les pixels pour concevoir une icône en deux tailles.

Matériel:

N'hésite pas à utiliser tous les matériaux auxquels tu peux penser. Voici quelques suggestions d'articles:

  • un crayon
  • du papier (du papier quadrillé ou à points est utile mais n’est pas nécessaire)
  • un programme informatique qui crée des tableaux ou des grilles (ex. Word ou Excel, ou même Minecraft)

Marche à suivre

Tu es graphiste pour un nouveau jeu vidéo en 2D et tu dois créer de nouvelles icônes et de nouveaux personnages. Le jeu peut être joué sur des téléphones et des ordinateurs de bureau, il a donc besoin d'images simplifiées pour les petits écrans, et de versions plus grandes pour les écrans plus grands.

L'illustration présentée est une illustration noire, blanche et grise de diverses icônes.

Exemples d'icônes basées sur une grille (Source : buzstop via iStockphoto).

Image - Version texte

L'illustration présentée est une illustration noire, blanche et grise de diverses icônes. Toutes les icônes sont créées à l'aide de carrés noirs et gris. Dans la première rangée se trouvent les icônes d'un curseur, d'un effet sonore, d'une disquette, d'un sablier et d'une main qui pointe. Dans la deuxième rangée, on trouve un écran de navigateur d'ordinateur, une bulle de pensée, un marqueur de lieu et une enveloppe. En dessous se trouvent des icônes de flèches, de loupes, de serrures, de clés et de documents. La rangée du bas comporte l'icône d'une poubelle et un bloc de texte qui dit « Téléchargement » entouré d'un rectangle noir.

  • Commence par deux grilles. L'une doit être 10x10 ou plus petite, et l'autre doit être 15x15 ou plus grande.
  • Choisis l'une des grilles et conçois une icône, un personnage ou un objet simple, en utilisant uniquement des carrés noirs et des carrés blancs. Si tu as besoin d'idées, regarde autour de toi pour trouver un objet simple à copier ou choisis ton animal préféré.
  • Ensuite, essaie de mettre ton dessin à l'échelle sur ton autre grille. Tu peux ajouter ou soustraire des détails si nécessaire, mais essaie de le reconnaître et de garder les mêmes proportions.
  • À ton avis, qu'est-ce qui est le plus facile ? Mettre à l'échelle pour agrandir un dessin ou le réduire pour le rendre plus petit ? Quel design as-tu préféré ? 
  • Partage ton dessin avec les autres ! Essaie de mettre à l'échelle le dessin de quelqu'un d'autre et vois si ta version correspond à celle qu'il a faite.

Les ordinateurs et les écrans numériques utilisent de minuscules points de couleur disposés dans une grille, appelés pixels, pour afficher les images. Sur de nombreux écrans modernes, les pixels sont trop petits pour être visibles, mais parfois, sur des écrans plus anciens, tu peux distinguer les petits pixels carrés. Plus il y a de pixels dans une image, plus l'image peut être détaillée. Cependant, plus il y a de pixels, plus il y a de données à stocker et à traiter par l'ordinateur. Le nombre de pixels d'un écran ou d'une image particulière peut aussi être appelé sa «résolution».

Lorsque tu travailles avec des images et des ordinateurs, il est important de comprendre comment la résolution les affecte. D'une part, les images à haute résolution avec beaucoup de pixels auront l'air claires et nettes même sur de grands écrans ou lorsqu'elles sont imprimées. D'autre part, les images à plus faible résolution avec moins de pixels se chargeront plus rapidement sur les sites Web et occuperont moins de mémoire d'ordinateur. Les écrans plus petits n'ont pas autant de pixels que les grands écrans, donc une image haute résolution sera toujours réduite et les icônes devront peut-être être redessinées pour rester compréhensibles.

Pousser l'enquête

Essaie de coder tes images dans un nouveau format, comme la façon dont un ordinateur traduit les images en code. Tu peux essayer une chaîne de symboles (ex. avoir 0 = carré blanc et 1 = carré noir) ou une «mélodie» en utilisant deux sons, ou tout autre format que tu peux imaginer! 

  • Que devrait savoir quelqu'un pour retraduire ton code en image? 
  • Si tu codes tes deux créations, comment se comparent-elles au niveau de la quantité d'informations à transmettre? 
  • Comment pourrais-tu raccourcir ton code sans perdre aucune information?

Qu’est-ce qui se passe?

Les ordinateurs et les écrans numériques utilisent de minuscules points de couleur disposés dans une grille, appelés pixels, pour afficher les images. Sur de nombreux écrans modernes, les pixels sont trop petits pour être visibles, mais parfois, sur des écrans plus anciens, tu peux distinguer les petits pixels carrés. Plus il y a de pixels dans une image, plus l'image peut être détaillée. Cependant, plus il y a de pixels, plus il y a de données à stocker et à traiter par l'ordinateur. Le nombre de pixels d'un écran ou d'une image particulière peut aussi être appelé sa «résolution».

Pourquoi est-ce important?

Lorsque tu travailles avec des images et des ordinateurs, il est important de comprendre comment la résolution les affecte. D'une part, les images à haute résolution avec beaucoup de pixels auront l'air claires et nettes même sur de grands écrans ou lorsqu'elles sont imprimées. D'autre part, les images à plus faible résolution avec moins de pixels se chargeront plus rapidement sur les sites Web et occuperont moins de mémoire d'ordinateur. Les écrans plus petits n'ont pas autant de pixels que les grands écrans, donc une image haute résolution sera toujours réduite et les icônes devront peut-être être redessinées pour rester compréhensibles.

Pousser l'enquête

Pousser l'enquête

Essaie de coder tes images dans un nouveau format, comme la façon dont un ordinateur traduit les images en code. Tu peux essayer une chaîne de symboles (ex. avoir 0 = carré blanc et 1 = carré noir) ou une «mélodie» en utilisant deux sons, ou tout autre format que tu peux imaginer! 

  • Que devrait savoir quelqu'un pour retraduire ton code en image? 
  • Si tu codes tes deux créations, comment se comparent-elles au niveau de la quantité d'informations à transmettre? 
  • Comment pourrais-tu raccourcir ton code sans perdre aucune information?

Sujets connexes