how to create an artistic website layout in Photoshop Tutorial

Hello buys and girls. For today we have created another psd template and I think it can be used as a static website (simple HTML page) but in the same time can be integrated with one of the popular CMS platforms such as WordPress, Joomla or Drupal.

I do also think that this theme can fit pretty well with a showcase website (CSS gallery, Logo Gallery or anything else related to gallery, a place where you can showcase your products).

Please note that in this tutorial I will cover only how to create this theme in Photoshop and the PSD to XHTML tutorial will be posted pretty soon on our website.

Here is my final output

To create this tutorial I have used the following resources:

• Vector Ornaments from our Premium Files (available only to our premium members)
• Colorful Texture from DeviantArt
• Basic elements (Rectangle Tool, Ellipse Tool, etc) in Photoshop

Step1 – Creating the Top Area

Create a new document 1100 by 1450 and as a foreground choose # ede4c7

Next from here choose texture 05.png then place it in your document(File>Place). As you can see the image is quite small compared to our document, but you don’t need to worry because I will apply a free transform. To do that make sure that the image is selected on your layer palette then hit Ctrl (Command)  + T on your keyboard to make a Free Transform.

Select the middle right corner (please see the screenshot) and while you’re holding Ctrl + Alt + Left Mouse Button, drag that corner a little bit to the right (in this manner you will extend it a little bit, in order to make it wider)

Now I will select Erase Tool with a soft brush (the default one from Photoshop)  – 150px in size  , then I will gently start erasing  the edges of the image. Here is my result:

Next with Type Tool I will add the logo. The font used for “Trendy” is Avalon Medium – 48px and for “Tuts” I have used Sylfaen 36px.

Step2 -  Creating the navigation

To create the navigation I will select Rectangle Tool and I will create this shape 949 by 67px and I will apply this layer styles:

Then with type tool I will add the links for navigation. Here’s my result:

Next, because this layout will be used as a showcase website (for a css gallery, logo gallery, etc) I need to make it a little bit artistic. In order to give an artistic touch, please download this cool ornaments from Premium Files.

When you will add this ornaments, on your layer palette,  please make sure that you place them just below the navigation bar. Because I will use more ornaments, on my layer palette  I have grouped them in folders

So I will start adding the ornaments and I will begin with the left side

From the same pack I will continue to add more ornaments (in order to create a nice effect)

As you can see the ornaments are black and white, and it does not look to better, that’s why I will apply this layer styles:

And here is my result

I will use the same ornaments and layer styles for the bottom part of the navigation. My result:

What do you think? For me I think the navigation it looks pretty cool.

Step 3 – Creating the content area

First I will start by creating “Featured Area Section”
I will select Rectangle Tool and I will create this shape (949 by 266px)

then I will go to Edit>Transform>Warp
Now if you will look on the top (Photoshop Interface), on Wrap choose Arch, then for bend set -10%

Once you have something like this hit Enter to apply the transformation.
My result

Now I will change the color for this shape I will use #f5eed7 and I will apply this layer styles:

Next I will Right Click on my shape and I will choose Rasterize Layer

Then select Rectangular Marque Tool and make a similar selection

Hit Delete on your keyboard than press Ctrl + D to deselect.
Next on the left side I will add some text using Type Tool and on the right side I will add an image.

To create a nice shadow at the bottom of this section I will select Ellipse Tool and I will create this shape

I will apply a Gaussian Blur (Filter>Blur>Gaussian Blur) and I will lower the opacity to 21%, than with Rectangular Marquee Tool I will make a similar selection

Hit Delete on your keyboard than press Ctrl + D to deselect, than using again some ornaments from our Premium Files.

Here’s my result

Next I will select Rectangle Tool and I will create this shape. Color #f5eed7 dimension 949 by 597, I will apply this layer styles also:

Next I will concentrate on the content area. First with type tool I will write “Latest Updates”, than with Rectangle Tool I will create this shape. Color # ead7b8 dimensions 207 by 176px, than I will apply this layer styles:

My result

Next I will add an image on the top of this shape

Than with Rectangle Tool I will create this black shape, I will lower the opacity to 50% and with type tool I will write “Click here to see more”

In the same way I will create the rest of the shapes

With Ellipse Tool I will create a nice pagination at the bottom . For the first circle I have used this color: # 817e7e and for the last 2 # 910b53

Next just below the pagination it will come “Featured Artist Section” and to create it  I will use the same techniques  used to create ” Featured Area Section “.
Here is my final result for for this section:

Step 4 – Creating the footer

To create the footer I will use the same techniques which has been used to create the Top Area. I will use again  the same colorful texture
and again the same vector ornaments.
Here is my result for footer:

And here is my final result for the entire layout.

Want to Download the Source File?

Source :-  tutorialized.com