Title-Screen Buttons

I have worked on making a series of buttons for the title screen of our thus-far nameless game based upon the “Echo” concept document.

Ours is a game that takes place in nature, and I wanted the title-screen to be reflective of this. I made the buttons to be in the shape of leaves, partly to match the aforementioned nature-theme, but also simply because I like the vibrant green color and the pattern of the veins within them. I went specifically with oak leaves because they have a more interesting shape most other kinds of leaves, but still have an “elongated” shape fit to be the frame for short pieces of text.

I used a royalty free image from the site 123rf.com as a reference and then tried to imitate the look as accurately as possible.

Here is the specific image, if you are interested:

https://www.123rf.com/photo_22011553_oak-leaf-isolated-against-a-white-background-quercus-robur.html

Very specific link name, come to think of it.

I wanted to have three versions of the button; one neutral, one active for when the cursor is hovering above it, and one for when it is clicked. Deciding how the active version would look was easy. I just had the leaf emit a warm glow. The hard part was coming up with how the clicked version would look. I toyed with the idea of simply having the glow change color, or having the leaf be a bit darker, as if covered in shadow. I scrapped both of those, however, as I felt that a palette swap of the glow would be to subtle, and that to darken the leaf felt lazy. Instead I made the leaf look torn and ragged in the edges, so that it would seem like, when clicking, something had actually touched it.

Some of my group mates was not too keen on the clicked version, but did not really give a reason as to why. My fellow graphics student gave it the thumbs up, however, so I didn’t change it yet.

The text will probably not look the same when the buttons are implemented, because the programmers felt that it would be better if the text was changeable in Unity, which I can understand. Maybe it is possible to make it look like this in Unity as well, but I’m sure that something equally nice can be done otherwise.

The text itself was interesting to make, since I had never used the text tool in Photoshop before. The font is called “Dungeon” and was downloaded from DaFont.com, another very helpful site. I made it look golden because I thought it would look nice against the vibrant green of the leaf, even though It clashes with the nature-theme somewhat.

I added a picture with the buttons atop the title-screen background I made a few weeks ago, but this will probably not be used in finished product either, since the team seemed to have other ideas.