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

Modern Layout with Screw Heads


Open a new document in photoshop with a white background
Size should be 760x770 pixels

Select Rounded Rectangle Tool ( set radius to 20 pixels ) and draw a simple grey rectangle

image 1

Next go to Edit > Transform Path > Warp and use the following settings:

image 2

Hit Enter then with Move Tool place this shape in the middle of the canvas

image 3

Now we will add some layer styles. be sure you have this rectangle selected . then add the following layer styles:


image 4

image 5

Gradient color for Gradient Overlay settings:

image 6

image 7

Gradient color for Stroke settings:

image 8

This is my result:

image 9

Now hold the Ctrl key down and press on the Layer Thumbnail with your left mouse click

image 10

You will notice that you have selected all the layer

image 11

No go to Select > Modify > Contract ( Choose contract by 20 pixels ) and press ok
This is my result

image 12

Now select Elliptical Marquee Tool ( press on subtract from selection ) and delete the selection from the bottom. You should leave selected only a part of selection like in the next image:

image 13

This selection we will need

image 14

Create a new layer ( press Ctrl+Shift+Alt+N )
Select Paint Bucket Tool and fill your selection with whit ( or any other color you want )
Then press Ctrl+D to deselect

image 15

Now please add the following layer styles

image 16

image 17

image 18

This is my result

image 19

Now we will add a navigation under blue header

First select Rounded Rectangle Tool and make a simple rectangle

image 20

Go to Edit > transform path > perspective and drag the left bottom corner to the left side and press Enter

This is the result

image 21

Now add the following layer styles

image 22

image 23

image 24

image 25

This is my result after i have moved this layer under the blue one

image 26

Add some text

image 27

Now we will add some screws heads. Select Ellipse Tool and make a small circle ( hold down Shift key while you create this circle )

Then add the following layer styles:

image 28

image 29

image 30

image 31

I have duplicated this layer a few times and i have placed this small screw heads like in the following image

Click to enlarge
Click to enlarge

Now we will add another text and some images

Click to enlarge
Click to enlarge

I will add also a text logo with some star brushes over the text
For this text logo i have applied the first layer style we have created in this tutorial. The same layer style with the first rectangle

This is my final result. I hope you like it

Modern Layout with Screw Heads Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: amitk
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Modern Layout with Screw Heads"

Only registered users can write comment

Reader's comments