Can you design icons for different screens?
Simple computer icons (buzstop, iStockphoto)
Simple computer icons (buzstop, iStockphoto)
How does this align with my curriculum?
Use pixels to design an icon in two sizes.
Materials:
Feel free to use any materials that you can think of. Some suggested items could include:
- a writing utensil
- paper (graph or dot paper is helpful but not necessary)
- a computer program that makes tables or grids (ex. Word or Excel, or even Minecraft)
What to do!
You are a graphic designer for a new 2D video game and you need to create some new icons and characters. The game can be played on phones and desktop computers, so it needs simplified images for smaller screens, and larger versions for bigger screens.
Examples of grid-based icons (Source: buzstop via iStockphoto).
Image - Text version
Shown is a black, white and gray illustration of various icons. All of the icons are created using black and gray squares. In the first row are icons for a cursor, a sound effect, a floppy disc, an hourglass and a pointing hand. In the second row is a computer browser screen, a thought bubble, a location marker and an envelope. Below are icons of arrows, magnifying glasses, locks, keys and documents. The bottom row has an icon of a garbage can and a block of text that says “NOW LOADING” surrounded by a black rectangle.
- Start with two grids. One must be 10x10 or smaller, and the other must be 15x15 or larger.
- Choose one of the grids and design a simple icon, character, or object, using only black squares and white squares. If you need ideas, look around for a simple object to copy or pick your favourite animal.
- Next, try to scale your design onto your other grid. You can add or subtract details as needed, but try to keep it recognizable and the same proportions.
- What do you think is easier? Scaling up to make a design larger or down to make it smaller? Which design did you like better?
- Share your design with others! Try scaling someone else’s design and see if your version matches the one they made
Computers and digital screens use tiny points of colour arranged in a grid, called pixels (or “picture elements”), to display images. On many modern screens, the pixels are too small to see, but sometimes in older screens you can make out the little square pixels. The more pixels in an image, the more detailed the image can be. However, the more pixels there are, the more data there is to be stored and processed by the computer. The number of pixels in a screen or particular image can also be referred to as its “resolution.”
When working with images and computers, it’s important to understand how resolution affects them. On the one hand, high resolution images with lots of pixels will look clear and crisp even on large screens, or when printed out. On the other hand, lower resolution images with fewer pixels will load faster on websites and take up less computer memory to store. Smaller screens will also not have as many pixels as large screens, so a high resolution image will still get scaled down, and icons might need to get redesigned to still be understandable.
Try encoding your images into a new format, like the way a computer translates images into code. You can try a string of symbols (ex. having 0 = white square and 1 = black square) or a “tune” using two sounds, or any other format you can imagine!
- What would someone need to know to translate your code back into an image?
- If you encode both of your designs, how do they compare in the amount of information you’d have to convey?
- How could you shorten your code without losing any information?
What's Happening?
Computers and digital screens use tiny points of colour arranged in a grid, called pixels (or “picture elements”), to display images. On many modern screens, the pixels are too small to see, but sometimes in older screens you can make out the little square pixels. The more pixels in an image, the more detailed the image can be. However, the more pixels there are, the more data there is to be stored and processed by the computer. The number of pixels in a screen or particular image can also be referred to as its “resolution.”
Why Does It Matter?
When working with images and computers, it’s important to understand how resolution affects them. On the one hand, high resolution images with lots of pixels will look clear and crisp even on large screens, or when printed out. On the other hand, lower resolution images with fewer pixels will load faster on websites and take up less computer memory to store. Smaller screens will also not have as many pixels as large screens, so a high resolution image will still get scaled down, and icons might need to get redesigned to still be understandable.
Investigate Further!
Try encoding your images into a new format, like the way a computer translates images into code. You can try a string of symbols (ex. having 0 = white square and 1 = black square) or a “tune” using two sounds, or any other format you can imagine!
- What would someone need to know to translate your code back into an image?
- If you encode both of your designs, how do they compare in the amount of information you’d have to convey?
- How could you shorten your code without losing any information?