Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Royal Interface

Royal Interface


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.

image 1

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

image 2

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%.

image 3

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

image 4

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.

image 5

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.

image 6

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%.

image 7

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.

image 8

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

image 9

Inner Shadow

image 10

Wood Trim

image 11

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

Royal Interface



Author's URL: PhotoshopTutor
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Royal Interface"

Captcha