Tutorial: Creating sleek gaming feel window

Tutorial: Creating sleek gaming feel window

I’m working in a game production company, so I always wanted to design things that has the gaming feel in it. The gaming window I created here is actually inspired by one current hot racing game, so I decided to learn from it and shares it here. Well, it underwent some rounds of tweaks, and finally it became the one shown above.

Because this tutorial is involving a lot of layer styling and a texture, so I made a set of layer styles and the texture available for download. Besides, the final result PSD file also included too at the end of the post. So what are you waiting for, read on to learn the trick!


Preparing the stage

I assume you are using Adobe Photoshop CS and above. So launch the program, create a new canvas with 470px width and 200px height (the setting I used for this tutorial). Plus, you can download the working files that I zipped. There is a layer styles file, a texture and the finished PSD. Save it to the Desktop and unzip it.

Below are the basic structure of how the window is being created. Actually is not very hard, and here we go!

Tutorial: Creating sleek gaming feel window

Tutorial start!

1. First we create the frame of the window, by using Rounded Rectangular Tool with radius setting of 10px. Draw out the shape and name the layer “Frame”.

Tutorial: Creating sleek gaming feel window

2. Now, repeat the previous step again to draw out an inner window, but now with 8px radius. Draw out the inner window with around 4px smaller than the “Frame”. You can draw the guideline for more precise result. Name the layer “Window”.

Tutorial: Creating sleek gaming feel window

3. Duplicate the “Window” layer twice. Rename the top “Window” layer to “Title Bar”, while the second “Window” layer to “Main Body”. Hide the original “Window” layer for backup purposes.

Tutorial: Creating sleek gaming feel window

4. Select the “Title Bar” layer’s vector mask shown below. You can see a outline stroke appears when the vector mask thumbnail is selected. Then, use the Rectangular Shape tool, draw out a rectangular below the shape, with the selected options below.

Tutorial: Creating sleek gaming feel window

5. With the “Title Bar” vector mask selected, select Path Selection Tool from the Tools palette, and click COMBINE. The basic shape of “Title Bar” is formed.

Tutorial: Creating sleek gaming feel window

6. By using the same steps, now we create the basic shape for “Main Body”. Final result is shown below. Note that there is a little gap between the “Title Bar” and “Main Body”, because we are going to create 2 horizontal bars in between in next step.

Tutorial: Creating sleek gaming feel window

7. Now, by suing the Rectangular Tool, draw two thin rectangular bar like below. The top bar is slightly thicker than the bottom bar. Name the top bar “Orange Hr Bar”, and the bottom “Gray Hr Bar”.

Tutorial: Creating sleek gaming feel window

8. Now, we have all the basic parts of the sleek gaming feel window.

Tutorial: Creating sleek gaming feel window

9. Now, it is time to apply layer styles to each part! But first, we need to load the layer styles file that downloaded earlier. Open up the Styles palette or tab, and click on the small arrow, select Load Styles, locate and select the layer styles file. The style appeared as thumbnails. Now, apply the styles to each layers, matching the numbers shown below.

Tutorial: Creating sleek gaming feel window

10. Now, we need to create the texture for main body. Open the texture.gif inside the unzipped folder, go Edit > Define Pattern, and click OK. Select the “Main Body” transparency, then create a new layer on top of it. Next, select the Pattern Stamp Tool, from the pattern palette, select the pattern that created just now, draw out the pattern on the selection area. Name it layer “Main Body Texture”.

Tutorial: Creating sleek gaming feel window

11. In this step, we are going to create the texture for title bar. Create a new layer above the “Title Bar” layer. Hit “D” to make the foreground and background color to default black and white. Go to Filter > Render > Clouds. A b/w cloud is created. Then add some noise (Filter > Noise > Add Noise) to it with the options shown below. Name the layer “Title Bar Texture”.

Tutorial: Creating sleek gaming feel window

12. Here, select the “Title Bar” transparency. With the “Title Bar Texture” layer selected, go to Layer > Layer Mask > Reveal All. Layer mask for “Title Bar Texture” is created. Now inverse the current marquee selection and hit Ctrl+X to delete the selection. The result is shown in picture below. It looks weird at this moment.

Tutorial: Creating sleek gaming feel window

13. Change the “Title Bar Texture” layer blending to Overlay. It looks more blended but we are not done yet. Now create a Rectangular shape with 2px wider compared to the hidden “Window” shape. Apply the layer style number 5 (refer picture step 9) and name it “Frame Highlight”.

Tutorial: Creating sleek gaming feel window

14. Now drag the layers to most bottom, just above the “Frame” layer. Congratulations, you just created a sleek gaming feel window! Feel free to add text or other stuff on it. If you created a window that does not look like this, or don’t want to read the lengthy steps, you can check the final working file that downloaded earlier on.

Tutorial: Creating sleek gaming feel window

Conclusion
Well, basically this is it. Hope you like and learn something from this tutorial. It’s all about how the styles is being set. Maybe in next post, I will share out another layer styles file that consists of the styles that I had created for past few months!

Similar Posts:
Powered by Shutterstock

Comments

  • http://www.gosammy.com Sam

    Great tutorial Jay-han, I’ve always wondered how designers went about making comps using vector masks (I’ve always kept making new shapes).

    I also think the writing steps inside the pictures was a great idea šŸ™‚

  • http://www.jay-han.com jayhan

    Thanks Sam for the comment. šŸ˜€

  • http://revolutions.ifastnet.com Aldo

    Great work!!!
    This is pretty cool.
    I was wondering if you could work under/with me on my game for graphics as i dont have enough people on it.

    Please contact my id or sign up at my website and register>Login and go to post office, and pm Aldo.

  • Arvvin

    GREAT!
    i really need this, its amazing.
    thanks a lot!

  • Raziel

    Absolutely brilliant!

  • http://www.jay-han.com jayhan

    Thanks for the comment! Thanks guys! šŸ˜€

  • Mark

    Can I have the font you used in the window? Its so cool!

  • http://www.jay-han.com jayhan

    Hi Mark, the font i used is called “X-scale”, you can view and download it below:

    http://www.dafont.com/xscale.font

  • http://www.likenota.com Likenota.com

    not a bad tutorial, but in my personal opinion i think the style and the carbon effect is much too common.

  • http://www.jay-han.com jayhan

    Hi Likenota, thanks for the comment.

    Yeah, it could be comment, but im here just to teach a way to do it šŸ˜‰

  • Br0t

    Well what can i say?

    -WOW

    -amazing

    -Fantastic

    Absolutely nice, but the look is something for racing games not my beloved FPS^^

  • http://www.jay-han.com jayhan

    thanks Br0t! Yepp, it was inspired by racing games šŸ˜€

  • http://www.qoobe.org Qoobe

    Cool one mate. I like it šŸ˜‰

  • http://www.jay-han.com jayhan

    Thanks Qoobe šŸ˜‰

  • http://www.datamouse.biz Free icons

    Really freat tut. Nice layout – would work well with something like Halo, too.
    DM

    http://www.datamouse.biz/catalog

  • Ed

    Err the texture.gif thing won’t work for me. When I define pattern it turns it into just a black box so when I draw the pattern on I end up with a black box…

  • http://www.jay-han.com jayhan

    Hi Ed, thanks for the info, yeah, you are right, I shouldn’t save the texture in gif, but png. Now i had change the texture file to png already. You can download it again here:

    http://www.jay-han.com/files/Window-workingfiles.zip

  • static

    Yeah is good ( “P.S: Do you think writing the steps in the picture is good?” ) and … very good tutorial … Thx šŸ˜€

  • sunten

    so cool,3x.

  • http://www.jay-han.com jayhan

    thanks static and sunten šŸ˜€

  • Paridhi.Mp

    Very nice

  • http://www.jay-han.com jayhan

    thanks Paridhi.Mp šŸ˜€

  • http://huh? jossay

    to be honest didnt help at all it acktually made everything worse
    thaks

  • http://www.jay-han.com jayhan

    well, it might distract the text a little i think it do help explain things better, thanks for the comment šŸ™‚

  • http://www.mvhyips.com Stephen

    Thanks for your tutorial, I will give it a try. šŸ™‚

  • http://www.jay-han.com jayhan

    You are welcome Stephen šŸ™‚

  • http://www.logodesignnewzealand.co.nz Rajita – Logo Design

    This is excellent for photoshop beginners like me who are just learning the ropes of designing.

  • http://www.jay-han.com jayhan

    thanks Rajita, hope you can learn something from here!

  • http://russianmobalexandro.ru Alexandri Djimitri

    Awesome my bro, Russia forever <3