Photoshop Tutor

Royal Interface

By Michael in Tutorials

Its been awhile since last update. It has been a few rough month and i am doing my best to come up with the time to write new tutorials. Today we are going to design something along the lines of a Royal Interface, i think the idea mainly came from the Casino it self and i am not sure whether this interface has a purpose however it does teach a few techniques.

………………………………………………………………………………………………………………………………………..

Lets begin by setting up our environment. As usual, i have already premade a background for you guys to use so you may just design over it.

Now grab your Rounded Rectangle Tool, set the radius to 8 and fill it in with the hex displayed below:

Our base of the interface is now ready so lets begin slowly adding layers of detail. Our first layer would be to add some shadows. So duplicate the original layer you have just made and following the guidelines below apply your burn tool with the Range set to Mid tones and Exposure at 100%.

Now lets add detail to our shadowing, we will begin with the Inner Shadow. Please apply the settings listed below:

Good, we are working our way up to the pattern. You will need to choose a pattern that you may like however below i have attached mine.

Pattern

We have our base of shadows and patterns, lets add some depth with adding a more darker shadow. Using the same technique with burn tools described above, duplicate the original layer of the base and setting your size approximately to 200, burn over the orange until it turns into a dark brown/orange. After that, grab your eraser tool and take off all the unnecessary orange on top leaving just the shadow.

Just for the final touch, we need a little bit of glare. So duplicate your original base, set it to white and slice it about 3/4 in. After that set the opacity down to 10%.

Looking good there. Its time to create our interface’s display. Go back to your Rounded Rectangle Tool and create a rounded rectangle inside your current one except with a size 10 radius. The hex for the color is listed inside.

We need to spice up our display so below i listed a set of effects that i applied to that specific layer. Apply the same settings over and we will take a look at our results

Drop Shadow

Inner Shadow

Wood Trim

Take a look at what you got. Throw some text on it and there you have it, your very own royal interface.

These icons link to social bookmarking sites where readers can share and discover new web pages.

You can leave a response, or trackback from your own site.

Carlos
Posted on March 26th, 2008

great work m8 good to have you back ^^

Michael
Posted on March 26th, 2008

Thank you Carlos. Its good to be back, ill see what else i can write up in this few days that i have some free time.

Colin
Posted on March 27th, 2008

Thank you so much for this tutorial, it’s nice to have some inspiration once in a while. It was nice to see your update in my RSS feed after so long. Keep em coming.
Where did you get that wood texture/pattern my friend?
~CH

Weekly Hot Photoshop Tutorials (#1) » Free Photoshop Tutorials and Resources
Posted on March 28th, 2008

[...] Royal Interface at Photoshop [...]

PSDTuts - Photoshop Tutorials and Links - Best of the Web - March
Posted on April 2nd, 2008

[...] Visit Tutorial [...]

KPrints
Posted on April 2nd, 2008

What is the name of that font? is kind of old english….

Great tut by the way.

User2
Posted on April 2nd, 2008

Great tutorial. Nope I do not know the name of this font either.

http://www.KPrints.com

Dino
Posted on April 4th, 2008

Hi nice tutorial by the way. I have two questions:
1.where did you get that pattert in the background?
2. where can I get the background?

vidya
Posted on April 12th, 2008

wow…. nice tutorial:)THANKS A LoT!

Photoshop basics and more « All About The Web
Posted on April 16th, 2008

[...] A great start for modern interfaces @ Pstut [...]

Aleron
Posted on April 24th, 2008

Hey Michael

I really like this background with the lighting effect - is it to do?

Jason

Tim Dobson
Posted on April 24th, 2008

Sweet and well designed

Micky
Posted on May 21st, 2008

It’s funny

regles poker couleur
Posted on May 29th, 2008

telecharger everst poker…

It must be noted poker en ligne arnaque telecharger everet poker telecharger world poker online poker rooms jeux gratuites poker texas…

gyurex
Posted on May 31st, 2008

HELP!!!!!

Best of the Web | www.brand-forge.com
Posted on June 12th, 2008

[...] Royal Interface This tutorial uses some of Photoshop’s basic vector shape tools. It blends in some layer styles. The results are simple, but have a professional modern feel. The techniques covered in this tut could be used to make a fun website design. Visit Tutorial [...]

Ja2
Posted on June 29th, 2008

Hey guys, I found a wood texture closely related to this texture used. All u have to do is import the picture in photoshop then, rotate it 90 ccw and then save it as a pattern.

P.S. Add me on msn at jathu_6@hotmail.com

Btw. The font bieng used is Parchment for the head title!!! :)P.S. Add me on msn at jathu_6@hotmail.com