Psdbase - Adobe Photoshop Tutorials

Create a Fantastic Gallery Theme

On 02.14.10, In Web Layouts, by admin

In this tutorial we will be creating a Fantastic Gallery Layout using Adobe Photoshop. This tutorial uses lots of blending options to create effects, as well as the  marquee and shapes tool.

Preview:

Resources:

Creating a New Photoshop Document

1 Open Photoshop, create a new document that is 1000px by 1000px, with a background color of #ffffff

Creating The header space

2 Select the Rectangular Marquee Tool (M), create a selection across the top part of the canvas, it should have a height of 60px, fill the selections foreground color with a  dark blue (#282b30).

3 Select the Rectangular Marquee Tool (M), and create a selection across the top part of the canvas underneath the first one, it should have a height of 60px, set your foreground colour to (#82982d) and background to (#5a691f), select the linear Gradient tool (G) and drag a gradient downwards.

4 Select the Rectangular Marquee Tool (M), and create a selection across the top part of the canvas, its color should be #191b1f and have a height of 5px.

5 Select the Rectangular Marquee Tool (M), and create a selection across the top part of the green rectangle, its color should be #ffffff and have a height of 1px, its blending options should be set to overlay and have a opacity of 50%.

6 Select the Rectangular Marquee tool (M), Create a selection across the bottom of the green rectangle, make sure its inside the rectangle. Its height should be 25px fill the layer white (#ffffff) and set its blending option to overlay with and opacity of %15

7 Select the Rectangular Marquee Tool (M), and create a selection across the bottom of the green rectangle, its height should be 1px, fill the layer black (#000000).

8 Select the Rectangular Marquee Tool (M), and create a selection 1px from the black , its height should be 200px, Select the linear gradient tool (G) with a foreground color of (#000000) and background colour of(#ffffff) and drag the gradient downwards.

9 Duplicate the black 1px line and the gradient together, and lower there opacity to 15%. Select the Move Tool (v) and lower the layer 25px.

Here is what we have so far:

Creating The Main Content area

10 Select the Rounded Rectangle tool (U) with a Radius of 5px, its width should be 620px and height 550px

11 Double click the layer and open the layer styles dialogue box, use the settings below:

Creating The image area’s

12 Select the Rounded Rectangle Tool (U) with Radius set at 5px and foreground color to white (#ffffff), its width should be 296px and height 124px. double click the layer to open the layer styles dialogue box and enter in the details below:

Creating The Search bar

13 select the Rounded Rectangle Tool (U) and create a white (#ffffff) its height should be 30px and width 250px.

14 Double click the layer to open the layer styles dialogue box, enter the settings in the image below:

15 I found a nice search icon over at Iconfinder and placed it inside the search input on the right side

Creating The login panel

16 Select the Rounded Rectangle Tool (U) and create a light green (#dce7cc).

17 Double click the layer and open the layer styles dilouge box, use the settings in the image below:

18 Duplicate the layer, one for user name and one for password.

Creating The footer

19 Select the Rectangular Marquee tool (M), and create a rectangle going accross the entire bottom part of the canvas, its height should be 50px. Set your foreground to #4d4d4d and fill the layer ctrl+f5.

Adding the content

20 for the logo I added some horizontal text, the font is myrid pro and it’s size is 11px.

21 For the main contact area I added a image to the img area we added early then duplicated them till I had as many as I wanted.

22 For the Navigation I added some bold ariel text at 11px, its color should be #282b30.

23 For the login I added genral infomation on each box and added a remember me input

24 Underneath the login I added some ads, they are sitting on a rounded rectangle with a stroke.

Congratulations! You have now completed the tutorial.

Thank you for reading this tutorial, if you’d like to see more tutorials don’t forget to subscribe via Twitter or RSS.