Introduction to Pixel Art – “The Queen”

For this task, I was required to interpret one of two images of Queen Elizabeth II into pixel art as if she was a side scrolling player sprite in 16×16, 24×24 and 32×32 resolutions. This also involved making sure that there was contrast or blended colours where necessary to show the change in parts of the body along with adding depth to the image. The sprites were also supposed to just have features that imply who it is so imitating the original image’s pose was not advised.

I researched other images of the Queen in order to accurate some of her design in the image with the character of the queen do decide what should be maintained in my work and what wouldn’t matter, such as the detailed design of her dress.

16-bit

After setting up a grid (in Preferences under Edit), I then set up the first canvas as 16 pixels by 16 pixels allowing me to see where the Pencil tool will draw the square as well as aid me to see the individual pixels clearer. I opened the Navigator window to see the progress of the image from a smaller view (showing all the pixels together at a distance to observe how the sprite looks closer to actual size).

1

I opened the original image next to the set up canvas then filled in the canvas grey and used a darker grey to decide on a shape for her body as well as features. I then proceeded to use the Pencil Tool as it’s default setting is sized 1 pixel as well as the Eraser Tool which was set to 1px to add parts of the base colours, which I used the Eyedropper Tool to get colours of the pixels from the original image in order to try and build a resemblance between the two visually but the problem with doing this is that it will only be the colour of one pixel from the original meaning that the one pixel can be any shade of the colour and can make it look very different when placed for example, the crown kept coming out dark green coloured.  I decided to maintain the position of her arms as I felt it suits the character of the Queen but this proved hard as the arm over laps the body meaning that shading ideally would be required but with the lack of distinguish between the arm and body means that shading would over complicate the model, making it less evident to what it is. Another problem I faced was that her hair and face, for the darker areas, have the same colours used so colour picking them to used made the head look unappealing so I used 3 very similar shades of the colour of the hair and avoided using too darker browns as to give more contrast amongst the head. The head also became the main focus as it needed a fair amount of room to be able to distance the pixels enough to make the face.

2

24-bit

Using the same grid options as before, I opened a new canvas, making it sized 24×24 and created the silhouette.

3

I then used the colour pick tool to get 5 shades of colour from the original image to try and implement shading into my work. I found that this can make lines too heavy and indistinguishable from one and other.

4

To try and improve this, I decided to try and pick areas with high and low contrast so that body parts could be told apart.

Upon filling in the areas with colour, I decided to work on the blending of pixels which I did by selecting the colour and lowering the brightness of it, then replacing it. This let me get higher contrasting colours as well introducing a lighter and darker scale that was more effective.

7

I also produced each colour on a different layer (with all the shades of the same section) to keep each part separate for ease of back tracking.

32-bit

Taking what I had learned, I ultimately created a canvas sized 32×32 pixels and produced the following shading an outline instead of filling in the silhouette. I also only picked one colour from each part of the body (placed on each layer) to effect the difference of colour in place, using the shading technique of adjust the colour’s brightness to create shading and highlight.

 

As a rule to myself, I attempted to make all of the pictures looks as though the light is coming from the top right of the  image by using the darkest shadings as outlines of parts in the bottom left of the image and the medium shades for the outline of brighter areas.

11

I feel that my solutions for solving the problems I faced were effective as I feel that if I had started on the 32×32 piece, it would not have been as successful due to the colour and shading problems I faced. I can further use these skills as when picking colours and shading in future as well as the ability to create any art using the process above (not necessarily pixel art).

Indie Game – Mind Map and Mood Boards

For this task, we used our research and further research (from secondary sources) to put together 1 mind map and 3 mood boards about the characters, location and scenario of our game. This will help us further develop concepts for the game, get a better overall understanding of the research as well as familiarising with everything that could play a part in the final product.

Mind Map

Using the information from the research I have previously done about Egypt and some that was collected from the internet about Ada Lovelace, I created a mind map with three main branches (character, location and scenario) to put attach my research onto.  Then researched relevant images, thinking about the possible genre and colour schemes to create a montage of pictures that I felt would portray an ideal vision. Due to wanting to finish this task in an appropriate amount of time, I only used one website for each subject of research where in future using more than one can prove to be more reliable.

Character
character-moodboard

Bibliography
Ancient Egypt Online (no date) Available at: http://www.ancientegyptonline.co.uk/images/Tutanhkamuntombstatue1.jpg (Accessed: 9 February 2017).
Ancient Origins (no date) Available at: http://www.ancient-origins.net/sites/default/files/styles/large/public/field/image/Tutankhamun_0.jpg?itok=nmiga1vC (Accessed: 9 February 2017).
CTG Publishing (no date) Available at: http://ctgpublishing.com/wp-content/uploads/2013/11/Portland-Place-London-circa-1815-1024x664.jpg (Accessed: 9 February 2017).
Egyptian Streets (no date) Available at: http://egyptianstreets.com/wp-content/uploads/2015/09/982967438.jpg (Accessed: 9 February 2017).
GMA News (no date) Available at: http://images.gmanews.tv/webpics/2015/12/000_Nic6520521_2015_12_17_16_15_17.jpg (Accessed: 9 February 2017).
My Dress City (no date) Available at: http://www.mydresscity.com/images//l/2015043005/modest-sweetheart-quinceanera-dresses-with-lace-for-2015-1819-0.jpg (Accessed: 9 February 2017).
Pinterest (no date) Available at: https://s-media-cache-ak0.pinimg.com/564x/68/57/85/68578520b8ac46b9ed642f4a33fdbde3.jpg (Accessed: 9 February 2017).
Pinterest (no date) Available at: https://s-media-cache-ak0.pinimg.com/236x/88/34/f6/8834f6e683f41585c4486e46bd5b25dc.jpg (Accessed: 9 February 2017).
Pinterest (no date) Available at: https://s-media-cache-ak0.pinimg.com/originals/ea/d4/17/ead4173f6aadfdc15d892d9f7f084e48.jpg (Accessed: 9 February 2017).
Pinterest (no date) Available at: https://s-media-cache-ak0.pinimg.com/564x/58/31/d5/5831d57f9087ad0cba3b7e2327abc6ec.jpg (Accessed: 9 February 2017).
WikiMedia (no date) Ada Lovelace Portrait Available at: https://upload.wikimedia.org/wikipedia/commons/a/a4/Ada_Lovelace_portrait.jpg (Accessed: 9 February 2017).
Wrodpress (no date) Lady Lovelace White Dress Available at: https://scienceissexydotcom.files.wordpress.com/2014/03/lady-lovelace-white-dress1.jpg (Accessed: 9 February 2017).
(no date) Pinterest. Available at: https://s-media-cache-ak0.pinimg.com/236x/03/57/b1/0357b1ebc474bfb3461c79f363b9c34d.jpg (Accessed: 9 February 2017).

Senario
senario-moodboard

Bibliography
History Computer (no date) Available at: http://history-computer.com/Babbage/Images/analiytical_engine1.jpg (Accessed: 9 February 2017).
IGS (International Glaciological Society) (no date) Available at: https://www.igsoc.org/symposia/2012/london/raslogo.gif (Accessed: 9 February 2017).
Padua, S. (2015) The Marvellous analytical engine- how it works. Available at: http://sydneypadua.com/2dgoggles/the-marvellous-analytical-engine-how-it-works/ (Accessed: 9 February 2017).
Pinterest (no date) Available at: https://s-media-cache-ak0.pinimg.com/236x/2c/0b/23/2c0b23f20d52609d0da686bd73696a9e.jpg (Accessed: 9 February 2017).
Pinterest (no date) Available at: https://s-media-cache-ak0.pinimg.com/564x/e6/0c/35/e60c35a462ed5f9640ef7e1ca3421380.jpg (Accessed: 9 February 2017).
Pinterest (no date) Available at: https://s-media-cache-ak0.pinimg.com/236x/da/ec/ba/daecbabf119402e11f553837bb7f194c.jpg (Accessed: 9 February 2017).
Pinterest (no date) Available at: https://s-media-cache-ak0.pinimg.com/564x/a0/bf/f1/a0bff1d1d5a8881fd666834b6f00220c.jpg (Accessed: 9 February 2017).
Primary Home Work Help (no date) Available at: http://www.primaryhomeworkhelp.co.uk/egypt/images/anubis.jpg (Accessed: 9 February 2017).
Symbol Dictionary (no date) Available at: http://symboldictionary.net/library/graphics/symbols/glossaryseba.jpg (Accessed: 9 February 2017).
WikiMedia (no date) Available at: https://upload.wikimedia.org/wikipedia/commons/8/84/Entrance_to_the_Royal_Astronomical_Society_1.jpg (Accessed: 9 February 2017).

Location
levels-moodboard

Bibliography
Ancient Egypt Online (no date) Available at: http://www.ancient-egypt-online.com/images/hieroglyphs.jpg (Accessed: 9 February 2017).
emaze (no date) Available at: https://userscontent2.emaze.com/images/5cdaec6b-9261-4813-ad6e-6fc69d579d9f/ec7446636c4855e4a0c5c411933de6ef.jpg (Accessed: 9 February 2017).
Guardians (no date) Available at: http://guardians.net/hawass/articles/images/RoboticExploration/photo%20003_sm.jpg (Accessed: 9 February 2017).
Irregular Webcomic! #3369 (2015) Available at: http://www.irregularwebcomic.net/3369.html (Accessed: 9 February 2017).
Japan Times (no date) Available at: http://www.japantimes.co.jp/wp-content/uploads/2015/11/f-tut-a-20151130.jpg (Accessed: 9 February 2017).
Pinterest (no date) Available at: https://s-media-cache-ak0.pinimg.com/564x/1b/c9/50/1bc9503b345d243d8c1c8ff090d3e927.jpg (Accessed: 9 February 2017).
Quora (no date) Available at: https://qph.ec.quoracdn.net/main-qimg-ab47853a952bc5f3642f13916dfb6870-c?convert_to_webp=true (Accessed: 9 February 2017).

As the mood boards should flow better, for the last one I completed (location) I used the Magic Wand tool to remove parts of the image to try and make the different picture overlay better and somewhat blend which required simply removing the skies from the images.

In conclusion I feel that I completed the task at a good pace but feel more research could have been produced on the mind map as well as more revision into the layouts of mood boards. This can help me overcome issues with colour palette as it is visible which colours work well together which can also help  with the  ergonomics of any interactive content as well as giving a visual representation to any audio, for instance the hallway of the Pyramid looks hall/cave like therefore any audio could have an echo added to it.

Advertisements