Week 3 – UI Design

Creating cookie clicker UI

I used Krita and Photoshop for both of these to save time when making my cookie clicker as I was more familiar with them. The task was to create UI buttons for the game project we are working on in another module, a Cookie Clicker game.

I originally made a basic cookie in Krita which I quite liked as it had an old flash game feel to it.

I made this by using a couple of different brushes such as an ink brush and to add a bit of extra detail I used one of the comic-style brushes which created the little dots on the cookie.

I made this with a soft colour palette as I wanted to make my cookie clicker a calming game so I went with lighter colours like beige, pink, and greens.

These are the Buttons I made in photoshop, the way I made these was by using the shape tool to make a rectangle and copying this so I had even buttons, I only did two first so that I could add a mouse and a cookie to the button.

After drawing and colouring these I used another layer to add in the shadows which at this point I had 4 buttons. This was quite difficult to do at first as I didn’t know how to go about doing it but I ended up copying each button, putting it a layer below then locking the layer so I could change the colour of it to make a shadow.

This is an example of what it looks like in action when I replaced the sprites in Unity with the UI buttons I made.

I do really like how the cookie turned out but I wish I made the shadow a bit darker as it looks like it just moves when I sort of wanted it to look like it was a button being pressed instead.

What did I find challenging?

One thing I found challenging was creating the buttons for the upgrades, I ended up not really liking them much as they felt out of place, in the future, I feel like I would make them in different software such as illustrator as that has more tools that I could use for UI to be better quality; I could also look at game inspiration to see what the buttons they use look like.


Posted

in

by

Tags:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *