Royal Interface
By Michael in TutorialsIts 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.
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
Ja2
Posted on June 29th, 2008
Btw. The font bieng used is Parchment for the head title!!! :)P.S. Add me on msn at jathu_6@hotmail.com