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

Stylish Layout


Let's start with a new document

Size 760x770 Pixels
Background color : 012c3e

Now go to Filter > Render > Lightning Effects and use the following settings

image 1

Then Select Rounded rectangle Tool and create a simple shape ( the next image is resized )

image 2

For this shape add the following layer styles

image 3

image 4

image 5

image 6

image 7

This is the result

image 8

Now please go to www.free-photoshop.com and download the Custom Shape #1 - Banners set.

Load the custom shapes in photoshop and add a shape like in the following image

Click to enlarge
Click to enlarge

Then add the following layer styles for this custom shape

image 10

image 11

image 12

image 13

image 14

image 15

This is my result

Click to enlarge
Click to enlarge

Select Rectangle Tool and create a shape

image 17

Go to Edit > Transform > Warp ( if you don't have warp tool you can use Pen tool to create something similar )

image 18

This is my result

image 19

Then add the following layer styles

image 20

image 21

image 22

image 23

image 24

image 25

This is my result after i have applied the layer styles. You can notice that i have placed this layer under the custom shape layer

image 26

Then add some text

image 27

Be sure you have the type tool selected. now press On "Create Warped Text" button

image 28

And use the following settings

image 29

This is my result

image 30

Create a new shape with the Rectangle Tool ( i have used the following color : #012c3e )

Click to enlarge
Click to enlarge

Now it is time to load another set of brushes in Photoshop

For this you need to download the Brush #6 -Flowers set from www.free-photoshop.com

Then create a new layer on top of all layers ( press Ctrl+Shift+Alt+N )

And with brush tool press one time on the logo

image 32

Then add the following layer style

image 33

image 34

This is the result

image 35

Duplicate this layer ( press Ctrl+J )

Then select Both Layers and press Ctrl+E ( this will merge both layers )

image 36

Load the selection now ( Go to Select > Load selection )

image 37

Now select Brush tool and with different colors try to add as many details on this selection

This is my result

image 38

Now please add some text on your layout

Click to enlarge
Click to enlarge

Then select Line Tool. ( set the weigh to 3 pixels ) and make a horizontal line on the bottom of your layout

Then with the same tool set the line weight to 1 pixels and add the second line above the first one

image 40

Now load Brush #1 set from www.free-photoshop.com and add on your layout some details

This is my final result

Stylish Layout Tutorial: Final Result (Click to enlarge)
Click to enlarge

I hope you like it.



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 "Stylish Layout"

Only registered users can write comment

No comments yet...