Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Photoshop  Home Photoshop Web Layout General Website Layout
rss

General Website Layout

Author: amitk More by this author


So open a new document in photoshop
Size : 760x770 pixels
background color : white

Select Rectangle Tool and 2 simple shapes

image 1

For the top shape please add the following layer style

image 2

image 3

Then Rasterize this shape ( Layer > Rasterize > shape )

Select line Tool. ( set the weight to 1 pixel )

Set the foreground color to #282828 and create a line on the middle of the top shape

Then add the following layer style for this line

image 4

This is my result

image 5

Now it is time to go to www.free-photoshop.com and download the Globe pack. You can see there a nice set of globes.

You can find this set of globes in PSD Logos

Download this set of Globes and add one which you like on the header of your layout

image 6

Then under this globe add a Simple rounded shape

image 7

For this shape behind the globe , add the following layer styles

image 8

image 9

image 10

This is my result > you can see that i have added also some text on the header

image 11

Now select the Line Shape , and rasterize the Line

image 12

Then choose Eraser tool, Select a big rounded brush, and delete some parts of the line near the globe

image 13

Select Rounded Rectangle Tool , Set the radius to 20 pixels , and create a simple shape on the right side of your layout

image 14

Then add the following layer styles

image 15

image 16

image 17

This is my result

image 18

Then duplicate this layer a few times and with the arrow keys place the duplicated shapes like me.

Note : to duplicate a layer , first you need to select it then press CTRL+J

image 19

Now add some text over this shapes

image 20

Now select rectangle Tool , and create a small rectangle

image 21

Go to Edit > Transform Path > Warp ( this option you have it only on CS2 or above )

Use the following settings

image 22

After you hit " Enter " your shape should be like mine

image 23

Create a small circle with Ellipse Tool and place it like me

image 24

Then place the last shape we have created like me

image 25

Then duplicate the small circle and place it on the other side

image 26

For the small circle from right side please add the following layer style

image 27

This is the result

image 28

Now select the small circle from the left side and add the following layer style

image 29

This is the result

image 30

Now for the arch , add the following layer styles

image 31

image 32

image 33

image 34

This is my result

image 35

Duplicate this 3 elements ( the circles and the arch a few times and place them like me )

image 36

Now let's add a image on the empty white place. I will add a 3D render. Please add your own images,

Click to enlarge
Click to enlarge

Now set your foreground color to White, Select Line tool, Set the line weight to 3 pixels, and make some line on your header

image 38

Then near this 3 pixel lines add another lines. this time be sure the lines will have only one pixel

image 39

Select Rounded Rectangle Tool , Set the radius to 30 pixels and make a big shape

Click to enlarge
Click to enlarge

Now add the following layer styles for this shape

image 41

image 42

Then select one more time Rounded rectangle tool , set the radius to 210 pixels, and create 2 shapes like me

Click to enlarge
Click to enlarge

For this 2 shapes add the following layer styles

image 44

image 45

image 46

image 47

This is my result

Click to enlarge
Click to enlarge

Now on your layout please add alone some text

Click to enlarge
Click to enlarge

Then duplicate the small circles and the arch a few times and place it on the left side of your layout

image 50

Then you can add between your text buttons some dots

You can create this with a pattern or you can simple use the type tool.

Alternatively you can download the Brush #1 from www.free-photoshop.com

image 51

Now please add another shape on the header with Rounded Rectangle tool ( radius = 20 pixels )

image 52

And after that please add some text

image 53

This is my final product

General Website Layout Tutorial: Final Result (Click to enlarge)
Click to enlarge

I hope you like it.



Author's URL: www.talk-mania.com

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "General Website Layout"