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

Sport Layout


I will start this layout with a blank document with the following sizes: 760x770 pixels.

I will place a image from my personal stock photo collection:

image 1

Then I will download the following set of brushes stars flower brushes and I will load this set of brushes in photoshop.

I will create a new layer ( to create a new layer you can press in the same time on (Ctrl+Shift+Alt+N).

With Brush Tool:

image 2

and with the following brush. I will add some details with this great brush:

image 3

I will grab Eraser Tool and with a soft round brush selected.

image 4

I will delete the edges of the sun rays.

image 5

After that I will use another brush from the same package.

image 6

and on a new layer I will add another details.

image 7

With Rectangle Tool I will create a navigation bar:

image 8

I will create the following layer style with the following proprieties:

Drop Shadow

image 9

Inner Shadow

image 10

Inner Glow

image 11

Gradient Overlay

image 12

And this is my final navigation bar:

image 13

With Line Tool I will create a 1 pixel vertical line. I will place this line right above the navigation bar:

image 14

Now you have to right click on the line layer in your layer palette, then choose Rasterize.

With Erazer Tool selected, and with a smooth round brush, please delete the top part and the bottom part of the line:

image 15

I will duplicate this layer several times, and I will place it like in the following image:

Note: To duplicate a layer you have to select the layer first in your layer palette, then you can press on Ctrl+J.

image 16

With Rectangle Tool I will create another shape with the following color #f1f1f:

image 17

I will rasterize this shape too by right clicking on the layer, and choose rasterize shape:

With Eraser Tool I will delete one more time some parts of the shape. I will use one more time a smooth round brush:

image 18

and this is my result:

image 19

I will download one more time a set of great brushes from Blue abstract brushes and from this set I will choose the following brush.

Note: set your foreground color to #cdcccc.

image 20

This is my brush ( on a new layer of course ):

image 21

I will create another rectangle with Rectangle Tool:

image 22

Rasterize this shape, then with a smooth round brush and with eraser tool selected, you can delete some parts of the rectangle.

image 23

I will create some dotted lines with Horizontal Type Tool:

image 24

I will write some dots (.........).

image 25

As you see I have a few lines on my layout. There are done the same with Horizontal Type Tool.

image 26

After that I will create a new layer (press Ctrl+Shift+Alt+N) and with the Brush Tool, and the following brush selected.

image 27

I will add some details to my layout. You can use different layers for each detail you add on this layout.

image 28

With Rectangle Tool and the following color #dcdcdc I will create a rectangle and I will place this rectangle like in the following image.

image 29

With Brush Tool and the following brush selected. I will add a splat on this rectangle (do not forget to create another layer).

image 30

I will download a great set of people custom shapes from People shapes - Silhouette shapes. I will load this set of custom shapes in photoshop, and I will select the following custom shape.

image 31

With a black color #000000 I will place the shape like in the following image.

image 32

I will select a different shape:

image 33

and I will place it on the left side:

image 34

Then with Type tool I will add alone some text. Please use different fonts, and at the end you will have something like mine.

Sport Layout



Author's URL: victor
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


Like us to: