Design Blog

With this new Photoshop tutorial, you are going to learn to create a wonderful Template dedicated to companies working the web hosting market. The use of black / blue colours as well as the gradients helps to bring a fashion and graphical design. And for all VIP members of Gradfpedia, we purpose them to download the psd file of this template. You will be able to use it in your web projects.

Look at below the final result of this Photoshop tutorial.

We can now start this Photoshop tutorial.

STEP 1 CREATE THE DOCUMENT

Open your Photoshop software, then go to menu File> New and enter name and sizes. Press on the OK key.

Your picture automatically appears on screen.

STEP 2 CREATE THE BACKGROUND

Create a new layer (menu Layer>New>Layer) and fill it using the Paint Bucket Tool (G). Now go to menu Layer>Layer Style>Gradient Overlay. Setup the style as bellow.

Create again a new layer and select the Brush Toll (B) and edit the foreground colour by the white. Select the soft rounded pressure size, increase the size (around 900px) and reduce the opacity to 10%.

Create a new layer (menu Layer>New>Layer), then go to this page to download the patterns set. Import the patterns into your Photoshop software, then, select the Paint Bucket Tool (U) and use one of them for your layer (do not forget to select the pattern option from the option tool bar, on the top screen).

To finish, add a layer mask onto the pattern layer and use the Gradient Tool (G) to hide the bottom part.

ETAPE 3 CREATE THE LOGO

Put all layers regarding the background into one group. Create now a second group (name it header). Use the Pen Tool (P) to create a cloud as shown in the picture below.

Go to menu Layer>Layer Style and add these three layer styles.

Create an active selection around the cloud (to do it, press on the Ctrl key and click on the layer thumbnail). Then, create a new layer and use the Radial Gradient Tool (G) with the white colour to create a glow on the right side. Change the blending mode to overlay and reduce the opacity to 80%.

Use now the Text Tool (T) to create a title for your Template.

To rasterize the cloud layer, right-click on the layer and select Rasterize the Layer. Create now an active selection around your Text. Move the selection from some pixels to the left, then press the Del key.

Go to the iconfinder.com website to look for some icons, import them into your document. Use the Text Tool (T) to add some links.

ETAPE 4 CREATE THE MENU

Create a new group and name it « menu ». Use the Rounded Rectangle Tool (U) to create le basement of the menu. Add these layer styles as shown below.

Wit the Text Tool (T), add some links. Use colour #b0b0b0 for the links and the white #fff for the active links.

Create a new layer (menu Layer>New>Layer). Then, use the Rectangular Marquee Tool (M) to create a sharing line between the links. Create a first sharing line using the colours #171a1c and #595f64.

Regarding the active link, create a new layer, use then the Rectangular Marquee Tool (M) to create a rectangle. Fill the selection using the Paint Bucket Tool (G). Add now the layers styles below to this shape.

To complete the menu, you are going to create a submenu. To do it, create a new group, then use the Rounded Rectangle Tool (U) to create the menu, and after, use the Define Custom Shape menu (with the rectangle shape) to create the arrow.

Continue to complete the menu using again the Text Tool (T). Create now sharing lines with the colour #bcc8d4 and then with this colour #e1ebf5 to create a coloured background under the active link.

To finish the step regarding the menu, you are going to create a search engine on the right. Use first the Rounded Rectangle Toll (U) with a radius of 100px. Use now the Ellipse Tool (U) for the validation button. Go to the iconfinder.com website to look for a zoom icon and place it over the button. Use now the Text Tool (T) to add the specification SEARCH.

Add the following styles onto the Input.

Regarding the button, use same styles as them used for the menu but deactivate for this time, the stroke and the drop shadow.

And to finish, add a colour overlay and a drop shadow on the icon.

See below the search engine result.

And now, see the whole result of the header Template.

STEP 5 CREATE THE SUBSCRIPTION AREA

Better to use the guides for the rest of this tutorial. Create first a new group you name box1.

Use now the rounded rectangle tool (U) to create the first block of subscriptions (use the blue colour #195c93)

Create a new layer and create after an active selection around the rectangle. Fill the selection and after, delete the bottom part. Add now a gradient overlay.

Create a new layer and after, create a dark sharing line with colour #0d3454 and a clearer one with the colour #2178b4.

Add the title using the Text Tool (T). Add a drop shadow to this text.

Create a new group and name it price. Create now a new layer and use the Rectangular Marquee Tool (M) to create a rectangle and fill it with black colour. Add on this layer a blue gradient overlay (#134b78 -> #195e96). Add a thin border on the bottom rectangle, use this colour #0c2d50.

Use the Text Tool (T) to fill the price area.

Use same tool to create a setup list directly under the price.

Under each setup, add a blue rectangle (#1c659e and #165388).

It is really the time now, to create the button. Use for that, the Rounded Rectangle Tool (U) and create a rectangle, duplicate it (right-click on the layer and after, select Duplicate the Layer). Rasterize the copy and use the Rectangular Marquee Tool (M) to delete the left side of the button.
On the blue button, add layer styles.

Regarding the grey part, use same styles but using now these following colours: #393e42 -> #555a5e for the gradient and #1f2124 for the stroke. Deactivate the drop shadow.

Use the Text Tool (T) to add the title of the button. Use the Custom Shape Toll (U) to add the small rectangle.

STEP 6 OTHER SUBSCRIPTIONS

Duplicate the group regarding the first block. Reduce on the top, the rounded rectangle. Update all colours form the blue to the grey.

Duplicate one more time the group, move the third subscription to the right side. Create a grey sharing line between the two subscriptions.

Apply same method to the left side

Duplicate again the group and edit the colours du get a darker grey.

To finish, create a new layer and after, use the Gradient Tool (G) (with the first Foreground gradient -> Transparent and black colour) to create a drop shadow.

See the final result :

STEP 7 CREATE THE CONTENTS

Create new group and name it the content. Create a rectangle with colour #1b1d1f all along the width (use the Rounded Rectangle Tool (U)).

Use the Text tool (T) to add a title and text on the left. Add an icon on the left of the text too.
On the right, create three buttons using the Rounded Rectangle Tool (U). Regarding the blue button, use same styles than the styles used for the blue button previously created in the first Subscriptions block. For the grey buttons, use the style already used for the Search engine.

STEP 8 CREATE THE FOOTER

Create first a new group and name it Footer.
Use now the Rectangular Marquee Tool (M) to create an active selection on the bottom part of the document. Create a new document and fill the selection with this colour #070708.

Create a thin border on the top of the rectangle, using the colour #1d2021.

Go back to the inconfinder.com web site to look for some icons. Use after the Text Tool (T) to create a title and a links list.

Apply same method to create two more lists.

Create now on the right a new block, but using this time a newsletter form. The styles for the input and the button have been previously used.

Use one more time the Text Tool (T) to add the Copyright on the Template.

Your Template is now finished. To custom it, do not hesitate to edit colours or icons. On this page you can find thousand of Photoshop Gradients.

If you like this Tutorial, please, help us, sharing it on Twitter or on Facebook. And if you can, please, let a comment, we will really be happy!If you like this Tutorial, please, help us, sharing it on Twitter or on Facebook. And if you can, please, let a comment, we will really be happy!

DOWNLOAD PSD

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.