Introduction To Pixel Art – The Queen

For this task we were challenged to create an image of The Queen in a pixel art format. It would be used as a sprite in a game. This meant that the final image must accurately represent The Queen and follow the criteria for a pixel art style. To help us get an accurate representation we were to use a reference image of The Queen. Using this would allow us to replicate the key features which are iconic about how she looks. However a reference image would have only been used to replicate key features like clothing or accessories rather than the pose or posture. The reference would be used for three different images of different sizes. This was a good way to practice with different canvas and image sizes. In this post I will be explaining the process that I went through to get the final image.

Each image that we were going to make would be a different size. The three different sizes were 16×16, 24×24 and 32×32. We started with 16×16 as this was the smallest and most basic canvas size. The dimensions were increasing by 8 each time as I was working in an 8 bit format. Since there are less pixels to work with it is significantly easier to produce an image as there is less shading and detail that can be included.

To start I opened Photoshop and opened a new project. Here I changed the dimensions of the canvas size to 16×16 pixels and the name of the project. The colour mode was left as it was already on the RGB mode which is exactly what is needed for the task. RGB is used for digital purposes so almost anything that is going to be viewed on a screen. The other main colour modes that are offered are CMYK and Greyscale. CMYK is the colour mode that is used for print so the colours shown on screen are altered to represent what would be seen on paper once printed out. Greyscale is used as for black and white print. Once on the project file I turned on the pixel grid by going to view>show>pixel grid. This would show each individual pixel on the canvas which is ideal when doing pixel art. The last thing I changed for the project was the background colour. I changed it to a slightly darker grey as this would help give the other colours a better representation as to how they actually looked like.

After setting up the project and the canvas size I imported my reference image. This meant that I could view my work and the reference image side by side.I then created a silhouette as a guide for the pose and the features of The Queen. This would help me get a better queen 1.PNGunderstanding of how the sprite needs to be proportioned.

After this I added colour to the sprite. I used the reference image to help with certain colours and shades. I also added some accessories like a badge and the flower on The Queen’s hat to break apart all the shades of blue in the image.
queen 2.PNG

I then repeated the process with the other dimensions, 24×24 and 32×32. As the size of the canvas increased I found that I was able to add more detail. For example in the 32×32 version there is a detailed shadow, a necklace, detailed clothing and a more complex pose. This was not an option with the lower resolutions as there was less space to work with.

What were the requirements and parameters of this visual-based problem?

For the task we had to illustrate three different images representing The Queen. Each image had to be in a different resolution, 16×16, 24×24 and 32×32. This meant that each variation would look different as there were different dimensions to work with. To help us get an accurate representation we were to use a reference image of The Queen. Using this would allow us to replicate the key features which are iconic about how she looks. The reference image would have only been used to replicate key features like clothing or accessories rather than the pose or posture.

What research activities did you undertake to create your solutions to this visual-based problem?

Before starting each variation, I researched into what poses would be worth recreating. I thought that doing this was a good idea as it would help me illustrate each image in a different way, as well allowing me to practice with different sprite postures. As the sprites were going to be used in a side scroller game, I then researched which poses were commonly used as this would have a big impact on how the character is perceived within the game.

How did you apply your practical skills to solve this visual-based problem? 

To get the final versions of the images I used the techniques that I had learnt in lesson. For example the colours chosen were very similar in terms of contrast and saturation. In my opinion this gave the image a better feel as the colours work well as if the sprite is in a lighting setup. I also used what I had learnt to find a balance between getting enough detail and the correct proportions. When using the smaller dimensions for pixel art I found that each pixel is extremely important as it represents a larger amount of space. Therefore it can take time to get a god balance of detail and proportion in the sprite.

How effective were your solutions in solving this visual-based problem?

I think that my work accurately represented the Queen as there are several parts on each image that show something iconic which would suggest it is her. As the size of each canvas increased, I found that the image was more detailed, therefore easier to recreate. Also I found that it became easier to find a balance between a good proportion and amount of detail.

Game Development, Mind Maps and Mood Board

Here I created mood boards and a mind map to help generate new ideas for our game. The mood boards represent characters and location. For the character images, I found that it helped me get a better idea as to what kind of characters would be seen in the game and how they would look. I think that the costumes that I found were also a big part of the research as they would need to be recognizable and iconic so that the player knows who the characters are and about their personality. Similarly the location of the game and the area that surrounds the player would also have a big part as it would also give a good sense of atmosphere and theme of the game.

location-mood-boardgame-dev-mind-mapcharacter-mood-board

Reflection

This week we continued working with pixel art and planning for our game .Firstly we worked on a similar task from the previous week, that involved us recreating an image of the queen in different canvas sizes. I felt this was very effective as it allowed me to practice with different work spaces and body positions. The second task was to create mind maps and mood boards that would help us generate ideas. Although I have done this before I wanted to take a different approach and try to implement different images that fitted together within one image. I felt this would be a good technique to use for future projects.

Bibliography:

Fans, R. (2017) Queen Image. Available at: https://www.google.co.uk/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwiFzuuVhdjRAhUiKcAKHZRVD5oQjRwIBw&url=http%3A%2F%2Froyal-fans.com%2F2017%2F01%2F20%2Fthe-queen-appeared-to-be-in-extremely-high-spirits-she-beamed-from-ear-to-ear-as-she-arrived-at-the-annual-meeting-in-sandringham%2F&bvm=bv.144686652,d.eWE&psig=AFQjCNEMB4q8YDKBMeyakd5AyyXOt-WXsQ&ust=1485253117716132 (Accessed: 17 January 2017).

Lovelace, A. (2014) Ada Lovelace. Available at: https://www.google.co.uk/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjkyJrVhdjRAhXFKMAKHTc-CGQQjRwIBw&url=http%3A%2F%2Falchetron.com%2FAda-Lovelace-1138470-W&bvm=bv.144686652,d.eWE&psig=AFQjCNHPH4K18v91sypKZAX18wScGpiQLQ&ust=1485253246656577 (Accessed: 17 January 2017).

Image: Celebrating Ada Lovelace – Primo toys (no date) Available at: https://www.google.co.uk/imgres?imgurl=https%3A%2F%2Fwww.primotoys.com%2Fwp-content%2Fuploads%2F2016%2F10%2FAda.png&imgrefurl=https%3A%2F%2Fwww.primotoys.com%2Fblog%2F2016%2F10%2Fadalovelace%2F&docid=5CZZjVayGtHwyM&tbnid=PIEMrkeAbC8agM%3A&vet=1&w=2400&h=1200&safe=active&bih=864&biw=1745&q=ada%20lovelace&ved=0ahUKEwjwuLbShdjRAhXKSiYKHcotD60QMwhPKBUwFQ&iact=mrc&uact=8 (Accessed: 17 January 2017).

Lovelace, A. (no date) Image: 1000+ images about Ada Lovelace on Pinterest | mathematicians .. Available at: https://www.google.co.uk/imgres?imgurl=https%3A%2F%2Fs-media-cache-ak0.pinimg.com%2Foriginals%2Fb7%2F2a%2Fee%2Fb72aee00a4ffe86a8c57128d483e1203.jpg&imgrefurl=https%3A%2F%2Fwww.pinterest.com%2Fpinknapalm%2Fada-lovelace%2F&docid=LsB8JfKRrd0MqM&tbnid=96wT2g1kfEaUVM%3A&vet=1&w=442&h=550&safe=active&bih=864&biw=1745&q=ada%20lovelace&ved=0ahUKEwi3y9f_hdjRAhUC0iYKHVK-DZ8QMwg6KAswCw&iact=mrc&uact=8 (Accessed: 23 January 2017).

Clothing, G. (no date) Image: 1000+ images about georgian era fashion on Pinterest | Georgian .. Available at: https://www.google.co.uk/imgres?imgurl=https%3A%2F%2Fs-media-cache-ak0.pinimg.com%2Foriginals%2F8a%2F55%2Fd2%2F8a55d2c47143b32c0b56f8935dca71bf.jpg&imgrefurl=https%3A%2F%2Fwww.pinterest.com%2Fmushielala%2Fgeorgian-era-fashion%2F&docid=TE99VsowTJa2vM&tbnid=knc9fAnHtawSYM%3A&vet=1&w=440&h=572&safe=active&bih=864&biw=1745&q=georgian%20clothing&ved=0ahUKEwiso_6fhtjRAhVCMSYKHS9tCYcQMwg-KBIwEg&iact=mrc&uact=8 (Accessed: 17 January 2017).

Scott, L. (no date) Image: We make history: Ladies’ fashions of the Georgian era. Available at: https://www.google.co.uk/imgres?imgurl=http%3A%2F%2Fwww.wemakehistory.com%2FFashion%2FGeorgian%2FGeorgianLadies%2FGeorgianLadies_14.jpg&imgrefurl=http%3A%2F%2Fwww.wemakehistory.com%2FFashion%2FGeorgian%2FGeorgianLadies%2FGeorgianLadies.htm&docid=cJ1tzMR7wO4YxM&tbnid=GMC30mTz3T4X3M%3A&vet=1&w=302&h=375&safe=active&bih=864&biw=1745&q=georgian%20clothing&ved=0ahUKEwiso_6fhtjRAhVCMSYKHS9tCYcQMwgwKAQwBA&iact=mrc&uact=8 (Accessed: 17 January 2017).

Bose, D. (no date) Image: Ancient Egyptian inventions you won’t believe you didn’t know. Available at: https://www.google.co.uk/imgres?imgurl=http%3A%2F%2Fmedia.buzzle.com%2Fmedia%2Fimages-en%2Fgallery%2Fcountries%2Fegypt%2F900-178769498-egyptian-culture.jpg&imgrefurl=http%3A%2F%2Fwww.buzzle.com%2Farticles%2Fancient-egyptian-inventions.html&docid=344_MZkBRac9GM&tbnid=0hGJrGnh3xDsTM%3A&vet=1&w=900&h=594&safe=active&bih=864&biw=1745&q=egyptian&ved=0ahUKEwiC6c2Zh9jRAhXKfCYKHYOQCCUQMwgvKAAwAA&iact=mrc&uact=8 (Accessed: 17 January 2017).

Driver, M. (no date) Tutankhamun wallpaper. Available at: https://www.google.co.uk/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjB9J-_h9jRAhVRFMAKHd9YBY8QjRwIBw&url=http%3A%2F%2Fwallpapersafari.com%2Ftutankhamun-wallpaper%2F&bvm=bv.144686652,d.eWE&psig=AFQjCNFGy56FIQLnI7pJneE8G40vIlTHuw&ust=1485253741434842 (Accessed: 23 January 2017).

GetYourGuide2017 (2008) Cairo: Great pyramids of Giza sunrise or sunset tour. Available at: https://www.google.co.uk/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwiI0ouGiNjRAhWrDMAKHXmiDu4QjRwIBw&url=https%3A%2F%2Fwww.getyourguide.com%2Fcairo-l92%2Fenjoy-sunrise-or-sunset-at-the-great-giza-pyramids-t43086%2F&bvm=bv.144686652,d.eWE&psig=AFQjCNEN381vXXe0vODko-oFYGtQWapd-g&ust=1485253847670966 (Accessed: 17 January 2017).

Jarus, O. (no date) Pyramids of Giza & the Sphinx. Available at: https://www.google.co.uk/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjL1cHYiNjRAhUkLcAKHXcxASgQjRwIBw&url=http%3A%2F%2Fwww.livescience.com%2F22621-pyramids-giza-sphinx.html&bvm=bv.144686652,d.eWE&psig=AFQjCNHGxao22wxe09WWdT02Rob5cHTFvA&ust=1485253990177616 (Accessed: 17 January 2017).

Advertisements