Learn how to create an artistic website layout in Photoshop
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 explain only how to design this layout in Photoshop but I will not cover the conversion PSD to XHTML. The tutorial on how to code this layout in XHTML it will be available on our PSD to HTML Section available only to our premium members
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)
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:
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.
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:
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:
Want to Download the Source File?
In order to download the source file you will need to become a Premium Member.
Already a premium member? When you click on the download link please make sure that you are logged in.
Please compare my result with yours. If you have something that you like than I suggest you to visit our Web Layouts Tutorial section because you will find another cool tutorials to practice with. Also don’t forget to follow us on twitter if you’d like to know when we publish new tutorials.
If you need a custom job or simply you just want to get in touch with us, please use the contact formblog comments powered by Disqus