Learn how to create an artistic website layout in Photoshop

Jun 9th, 2010View Comments

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

Click Here To See The Live Preview (CSS/HTML)

Because this live preview was encrypted, browsers such as Internet Explorer wont display the website correctly, that’s why I suggest to use a modern web browser such as FireFox, Chrome or Safari.
This problem will not occur for non encrypted files which are available for our Premium Members.

Artistic Website Layout Tutorial In Photoshop

To create this tutorial I have used the following resources:

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:

Click Here To See The Live Preview (CSS/HTML)

Because this live preview was encrypted, browsers such as Internet Explorer wont display the website correctly, that’s why I suggest to use a modern web browser such as FireFox, Chrome or Safari.
This problem will not occur for non encrypted files which are available for our Premium Members.

Artistic Website Layout Tutorial In Photoshop

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 form

  • http://www.thewebtuts.com The Web Tuts

    Tutorial added to the web tuts !

  • http://www.thewebtuts.com The Web Tuts

    Tutorial added to the web tuts !

  • http://inkness.com Willie

    This is one of the best web layout tutorial that I have ever seen! All of your tutorials are amazing and you have a really nice taste when you choose your colors! I’ll check the Infinity Design Pack, because I really want to download the source file for this tutorials and I saw on TrendyPacks some really nice elements also.

    By the way, when you will code this PSD in XHTML?

  • http://inkness.com Willie

    This is one of the best web layout tutorial that I have ever seen! All of your tutorials are amazing and you have a really nice taste when you choose your colors! I’ll check the Infinity Design Pack, because I really want to download the source file for this tutorials and I saw on TrendyPacks some really nice elements also.

    By the way, when you will code this PSD in XHTML?

  • admin

    Hello Willie,

    Thanks for your appreciations. We put a lot of effort to create this tutorials and we have worked much more to create Infinity Design Pack, so every time when we read this kind of comments, we know that we haven’t worked in vain.

    Currently we’ve been working to transform all of our PSD in XHTML tutorials, and we will publish them pretty soon.

  • admin

    Hello Willie,

    Thanks for your appreciations. We put a lot of effort to create this tutorials and we have worked much more to create Infinity Design Pack, so every time when we read this kind of comments, we know that we haven’t worked in vain.

    Currently we’ve been working to transform all of our PSD in XHTML tutorials, and we will publish them pretty soon.

  • Solaine

    As Willie has pointed out this is great tutorial and the outcome is awesome! However the only thing which needs to be fixed (in my opinion, of course) is that gap between the navigation and “Featured Area Section”.

    I have been reading your tutorials since the beginning and you told us on each and every tutorial that you will code all PSD’s in XHTML. My question…If I will buy your Infinity Pack I will be able to download the HTML & PSD source file for the upcoming tutorials?

    Thanks again for your wonderful tutorials!

  • Solaine

    As Willie has pointed out this is great tutorial and the outcome is awesome! However the only thing which needs to be fixed (in my opinion, of course) is that gap between the navigation and “Featured Area Section”.

    I have been reading your tutorials since the beginning and you told us on each and every tutorial that you will code all PSD’s in XHTML. My question…If I will buy your Infinity Pack I will be able to download the HTML & PSD source file for the upcoming tutorials?

    Thanks again for your wonderful tutorials!

  • http://www.free-naturewallpaper.com Laura

    This is exactly what I’ve been looking for! I’m reading Lowery’s CS3 Web Workflows, but am lacking in the actual creation of the graphics. The design pack will be great. I know you can’t cover everything, but I seem to stumble on measurements and alignment. I pulled out the header image (for my latest web page design) and put into dreamweaver, then the content image and they just didn’t line up right. I went back to the drawing board with my guides and it seems to be working.

    Thanks for this tutorial!

  • http://www.free-naturewallpaper.com Laura

    This is exactly what I’ve been looking for! I’m reading Lowery’s CS3 Web Workflows, but am lacking in the actual creation of the graphics. The design pack will be great. I know you can’t cover everything, but I seem to stumble on measurements and alignment. I pulled out the header image (for my latest web page design) and put into dreamweaver, then the content image and they just didn’t line up right. I went back to the drawing board with my guides and it seems to be working.

    Thanks for this tutorial!

  • admin

    @Solaine – Thank you for your nice words Solaine. With Infinity Design Pack you will be able to download all of our resources (including the source file for our tutorials) and all of the products released in Trendypacks.com for a period of 6 months.

    @Laura – Thanks Laura. We’re not using guides in our tutorials because sometimes it’s really hard to explain in words, especially when we write this tutorial with screenshots. Anyway if you use our dimensions for the shapes when you’re drawing the layout it should be fine. We’re working to code this psd templates in XHTML, but we haven’t had any kind of troubles with alignment ;)

  • admin

    @Solaine – Thank you for your nice words Solaine. With Infinity Design Pack you will be able to download all of our resources (including the source file for our tutorials) and all of the products released in Trendypacks.com for a period of 6 months.

    @Laura – Thanks Laura. We’re not using guides in our tutorials because sometimes it’s really hard to explain in words, especially when we write this tutorial with screenshots. Anyway if you use our dimensions for the shapes when you’re drawing the layout it should be fine. We’re working to code this psd templates in XHTML, but we haven’t had any kind of troubles with alignment ;)

  • http://www.clippingimages.com/ clippingimages

    Good photo shop tutorial.

  • http://www.clippingimages.com/ clippingimages

    Good photo shop tutorial.

  • rafael

    what? I was supposed to PAY for that pack? nice tutorial GREEDY ASSHOLE. ;/

  • rafael

    what? I was supposed to PAY for that pack? nice tutorial GREEDY ASSHOLE. ;/

  • admin

    @ Rafael. First of all thank you for your comment, we appreciate the criticism as well!

    Before to judge us if we are GREEDY or ASSHOLES, let’s do some math. Currently on this website trendyTUTS we have 16 FREE photoshop tutorials (you don’t have to pay to read them). Just to create a single tutorial it takes at least 7hours….

    Now with “that pack” – we call it Infinity Design Pack – you will get access to all of our resources listed on both trendyTUTS and trendyPACKS + 6months of free updates.

    We have worked A LOT to create all of the resources listed on trendyPACKS.com (a couple of months) and we will continue to do so.

    Now think a little bit. Why do you call us “GREEDY ASSHOLE”? Because we have spent countless of hours to create all of this tutorials and resources? :|

  • admin

    @ Rafael. First of all thank you for your comment, we appreciate the criticism as well!

    Before to judge us if we are GREEDY or ASSHOLES, let’s do some math. Currently on this website trendyTUTS we have 16 FREE photoshop tutorials (you don’t have to pay to read them). Just to create a single tutorial it takes at least 7hours….

    Now with “that pack” – we call it Infinity Design Pack – you will get access to all of our resources listed on both trendyTUTS and trendyPACKS + 6months of free updates.

    We have worked A LOT to create all of the resources listed on trendyPACKS.com (a couple of months) and we will continue to do so.

    Now think a little bit. Why do you call us “GREEDY ASSHOLE”? Because we have spent countless of hours to create all of this tutorials and resources? :|

  • Judith

    Awesome tutorial. I like the artistic outcome! Admin, I think you don’t have to lose your time with peoples like Rafael. I’ve checked your pack and you have some kick ass vectors over there! Keep up the great work!

  • Judith

    Awesome tutorial. I like the artistic outcome! Admin, I think you don’t have to lose your time with peoples like Rafael. I’ve checked your pack and you have some kick ass vectors over there! Keep up the great work!

  • felix

    Great tutorial, really enjoyed it. Once agian thank you for your time.

  • felix

    Great tutorial, really enjoyed it. Once agian thank you for your time.

  • http://knowledgecity.com Jae Xavier

    @admin

    Great job on responding to that guy. Some people just don’t realize the time and money invested into producing products and services of any type.

    I’m also the tutorial business and we invest a lot into our products and services.

    By the way, nice tutorial :)

  • http://knowledgecity.com Jae Xavier

    @admin

    Great job on responding to that guy. Some people just don’t realize the time and money invested into producing products and services of any type.

    I’m also the tutorial business and we invest a lot into our products and services.

    By the way, nice tutorial :)

  • vertic4l

    Nice Tut! Keep that good stuff up.

  • vertic4l

    Nice Tut! Keep that good stuff up.

  • http://trendytuts.com/premium-files/hand-drawn-vector-ornaments.html Hand Drawn Vector Ornaments « TrendyTuts – Premium Photoshop Tutorials

    [...] this pack you will find 12 hand drawn vector ornaments. We have used this pack to create a nice artistic website layout. With a little bit of imagination you can create some stunning designs with this pack. As you may [...]

  • DWORD

    For sure I am going to subscribe to this blog. This tutorial is great even for advanced photoshop users. The design is trendy, tutorial explains everything in great manner. Would be interesting to see the code too but nevertheless, great work! I hope that you will have the inspiration to make more great tutorials like these.

  • DWORD

    For sure I am going to subscribe to this blog. This tutorial is great even for advanced photoshop users. The design is trendy, tutorial explains everything in great manner. Would be interesting to see the code too but nevertheless, great work! I hope that you will have the inspiration to make more great tutorials like these.

  • http://www.fanofreymysterio.blogspot.com Rey Mysterio Rocks

    Wow….
    thanks forthe tutorial of a very catching web layout.

  • http://www.fanofreymysterio.blogspot.com Rey Mysterio Rocks

    Wow….
    thanks forthe tutorial of a very catching web layout.

  • http://twitter.com/nakulanand nakul spiraled

    Very nice

blog comments powered by Disqus