Photoshop Design Process

Summary

This study showcases some variations of the final results and steps I took in designing the final layout of a gaming UI Screen. The game is about football, and the screen designed is a player’s profile screen. 

The Scene

The first step in creating this is to provide a nice, attractive background and set up a scene for a player.

I went through a lot of options until I finalized one of them. Adding and removing stuff, cutting and chopping, slicing and dicing, doing backflips and push-ups.

At first, I was not sure what player should I add. All the players I found were either running or stepping forward. To be honest I wanted to add Zlatan at first. You are probably asking why Zlatan Ibrahimovic, well just because he is Zlatan ( golden in Serbian ).

But the problem was that he is stepping forward. I wanted to give a more powerfull feeling, so I wanted the player that is standing proudly. I visualized it to be at the football stadium, with lights and the sky above.

footballplayer
footballplayer1
playershadow
scenedesign1
scenedesign2
scenedesign3
scenegrass
scenestadium1
stadiumpatch
stadiumpitch2

Stadium Pitch

I had problems with finding a proper football pitch stadium. Because all I found was not symmetric and was very blurry with lights. So I had to experiment a lot until I found the one where you can see the crowd.

https://www.freepik.com/premium-photo/football-pitch-large-stadium_2876814.htm#page=1&query=football-pitch-large-stadium&position=12

The Grass

The grass is transformed so hard. Although there is some angle in the original image, I had to skew it a lot to match the perspective I wanted.

I also added highlight effects using the dodge tool in photoshop.

https://www.freepik.com/premium-photo/grass-background-golf-courses-green-lawn_5751024.htm#page=1&query=grass-background-golf-courses-green-lawn&position=43

The Player

As mentioned I wanted to add a standing player, that looks powerful enough so the whole scene looks mighty. Ronaldo was dfo one of those mighty players, and I found the proper image of him here.

https://www.pngfuel.com/free-png/nlalu

The Shadow

From the games and stadium, I know that there are 4 shadows while the game is on because lights are on all 4 sides during the game. I copy-pasted, cropped, colored, added blur had a coffee, and there we had a nice 4 side shadow. It looked great but it was not enough, Ronaldo looked like he is flying in the air. I realized there is a small shadow to be added on the grass itself bellow his feet. Using burn tool I burned some grass and achieved this look.

The Sky

Added clouds and stars on the dark blue overlay. I also used some of the brushes from brushezy to add a bit more drama to it. I had brushes from before, so I’m not sure exactly what pack I used, but I know they are from brushezy.

https://www.brusheezy.com/free/sky

https://www.freepik.com/free-photo/beautiful-black-night-sky-with-stars-web_5451059.htm#page=1&query=beautiful-black-night-sky-with-stars-web&position=9

https://www.freepik.com/premium-photo/panorama-morning-sky-cloud_3000336.htm#page=1&query=panorama-morning-sky-cloud&position=9

Scene Outcome

Ok, so we had, the grass, player, sky, clouds, football pitch, shadows.
I played a bit with lights to add more drama too.
I also added Nordues sponsorship fine touches to the football pitch.
The scene was there, it was time for the UI.
On top of everything, I added some effects, where I adjusted brightness, contrast and some curves.

The User Interface

At first, I was not sure If I should mimic the Top Eleven game. Because after all If I get the job, I will have to adjust to that predefined style. So I was thinking If I should come up with something similar, or my unique style.

In the guides, it clearly said to use inspiration from advertisement campaigns, billboards, and magazines.

Ok, it was clear, I knew what to do, but I wanted to mock it up, and share as a draft in this case study anyway.

 

I also experimented a lot with different UI styles. At this stage, I was not sure what style should I use.

The guides clearly say to use inspiration from advertisement campaigns, but the wireframe shows exactly that this is a game UI. It also says on top that it is for iOS, but requirements ware for Andriod resolution.

 

Anyway, I had no problems to stick closely to requirements, but it made me think about it more than expected.

 

 

It looked cool, but it was still to regular for me. I wanted something really special, while still following requirements. I figured out there are too many elements on a page, and adding icons is making it busy.
At this stage, I was sure icons for stats should be removed, as there can be more content and it will create a lot of noise.
And then, boom, it hit me, the idea to add progress bar inside the player’s number behind. I wanted to add percents to it, so it is more clear that whit is part of the progress bar but I removed that eventually so I could add arrows where the user can switch between the players.

I used money icons I found on freepik
https://www.freepik.com/free-vector/money-video-game_939901.htm#page=1&query=money{78d8c761bc1bc0a5aab406374b309a946dbcdb293a72bde1c4d9d9ad760ef673}20&position=32

And the arrow icon I ofund on flaticon.

https://www.flaticon.com/free-icon/left-arrow_271220?term=back&page=1&position=3

At this stage, I wanted to experiment with the color of statistics. In my version, I added them in a horizontal position with a carousel.

Like this, we can add the unlimited number of stats on the screen and it will still look awesome.

I was not sure if color should be light on dark on stats. On my big screen, both looked fancy, but I was afraid of the contrast in the user’s hand.

So I did some short AB test where I put the screens on the mobile screen to check out its readability.

The dark color looked fancier on the computer screen.

Dark buttons were dfo cool, but readability was not so great in hand. Light buttons won.

I used the Figma mirror for this test, as it allows me to switch fast between images.

So there we had it 2 final versions. One awesome, and one SUPER awesome.

Conclusion

I enjoyed designing the screens. I felt like I am playing the game and not working at all. When I design stuff I truly like I get lost in time and forget about everything else. It’s like becoming obsessed with the design and that is the feeling I am doing this job in the first place.

Below you can find a Zip file, with 2 final images, and PSD deliverable.

I also included the textual file with all the links.

Like what you see? Let me know about your thoughts, I’m eager to heir any feedback, positive or not.

Download{78d8c761bc1bc0a5aab406374b309a946dbcdb293a72bde1c4d9d9ad760ef673}20Deliverables

Leave a Reply

Your email address will not be published.