15
Feb
2013

Design Image Hosting Template layout in Photoshop

Posted in: Photoshop , Comments Off

Today we will design a nice looking, dark, web 2.0 File / image / video hosting web template layout in Adobe Photoshop.
You can download the layer PSD file of the layout at the end of tutorial.

Final Preview

Before I start the tutorial, lets see the final image of the template layout we will design in this tutorial.

Step 1:

Create a new document (File >> New) of size 1100 X 900 px with white background.

Step 2:

Fill the background with color #303239

Apply noise to background layer.

Step 3:

In this step we will leave equal margin of 100 px from both side. Create two guide leaving margin of 100px from left side and right side from “windows >> New Guides..”




Step 4:

In this step we will add logo. Starting from left guide line and around 100 px from top add a nice looking logo with site name.
For logo shape I have used a custom shape with color #c27122, which can be downloaded from here.
Vector Shape Mix

For site name text I have used karabine font and #baced9 color.

For site slogan text, I have used Jenny font and #ffffff color.

So, our logo is ready.

Step 5:

Create a new layer and name it as Top Part.
Select rectangle tool with #1c1c1c color.
rectangle tool

Draw a rectangle shape starting from left Guides line to right guides line and of about 60px height.

Free transform Top Part layer (CTRL + T). Right click and select Perspective.

Slightly drag top right point to left side as shown below.

It should become like this.

Right click again and this time select “Scale”.

And scale the shape little down. So, it looks like this now.

Step 6:

Apply following layer style to Top part layer.

So, it looks like this now.

Step 7:

Create a new layer and name it as Bottom Part.
Select rectangle tool with #1c1c1c color.
rectangle tool

Draw a rectangle shape just below top part shape and of about 350px height.

Apply following layer style to Bottom layer.


So, it looks like this now.

Step 8:

Create a new layer between Top Part and bottom part layer and name it as menu bg.
Select “Rounded Rectangle Tool” with 8 px radius and #bc6f23 color.
Rounded rectangle tool

Draw a shape as shown below.

Apply following layer style to menu bg layer.


So, it looks like this now.

Step 9:

Add links text over menu bg layer. Use #000000 font color.

Step 10:

Create a new layer. Select “Text Tool
Write following text in white color. Using “Elliptical Tool” add radio button in black color.

Step 11:

Create a new layer named upload box. Select “rectangle tool” with #2e2e2e color.
Draw a rectangle shape as shown below.

Apply following layer style to upload box layer.

So, it looks like this.

Step 12:

In this step we will add browse button to right of browse box. Create a new layer and name it as “Browse Button“. Select “Rounded Rectangle Tool” with 5 px radius and #000000 color. Draw a button as shown below.

Apply following layer style to “Browse button” layer.

It should look like this now.

Step 13:

Load “Browse button” layer, and make a selection as shown below.

Create a new layer and fill the selection with white color. Change opacity to 7%

Now using text tool type Browse on the button. Our layout looks like this now.

Step 14:

Similarly add another box for option to resize image.

Step 15:

Add a upload button just like we made browse button but in #ca8038 color.

Step 16:

Now we will add a gallery that will showcase latest uploaded or featured images on the site. Create a new layer and name it as gallery.
With rounded rectangle tool and 8 px radius draw a shape as shown below in color #1c1c1c

Apply following layer style to gallery layer.

Add few image inside galley layer.

Step 17:

And in footer we will add some footer text.

Our image hosting template layout is ready.

I hope you liked the tutorial. below you can download PSD file of the layout.

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati
Both comments and pings are currently closed.

Comments are closed.