How to Design a Stylish Gallery Web Template in Photoshop

AD How To Draw Trend Lines On Forex Charts

10 Binary Options Straddle Strategy

Forex Distribution Density Banc De Binary Option Suspended

Grab your Free copy of this premium Layout PSD Now!

we’ll be publishing the PSD file of this Web Template within 2 days so stay tuned by Subscribing to our RSS or Following us on Twitter , meanwhile try to make a Photoshop Template yourself. This is my first tutorial here at Designzzz, hopefully you’ll like it.

Final Result

Tutorial of photoshop

Step 1

The obvious one, open a blank PSD file. This is the standard website size I am using with resolution of 72.

Photoshop Tutorial

Step 2

I’m using a texture as background. For that I selected Jeans Texture by NeverlandStock from DeviantArt. I painted this texture all over the background.

Tutorial of Template

Step 3

Now over that texture, I applied a layer with this color and lowered the opacity level so that the background could be somewhat visible. You can choose opacity value according to your texture. That is just to make the background dark, real dark and almost unnoticeable.

Photoshop Web Template

So far, we have made this.

Web Layout

Step 4

Now lets make a space for the navigation bar. For the background of navigation, I have added a solid black color in the area of navigation bar.

Template of Photoshop

Step 5

Now to add some style, we will create a gradient background for the navigation bar buttons. I used a radial type, you can see the example below.

Tip: Use the same color, one in a light shade and one in a dark shade, using completely different colors make the design look mediocre.

Template Tutorial

Step 6

After adding some text, we got this nice little elegant menu bar.

Designing Easy Layout

Step 7

Now I inserted a search bar, and some Social Media links. Of course also made a space for company logo, and this is the result we have reached.

Layout Design

Web Template Design

Step 8

Now we add some content. This is picture based layout, so we don’t need any place for text. If you need to add some description kind of text, you can do so by using a rollover code in JavaScript or some other coding method. I can’t give any advice in regards of programming, Ayaz, the owner of Designzzz takes care of that department, so if you need a coding advice, just comment and Ayaz will guide you.

After making a selection, where an image will be added, I put some shadow. See the image for visual example.

Designing Stylish Layout

Step 9

After adding the picture, I make a fill in a new layer which is about 15% of height of the picture and has an opacity of just 20%. But of course as I said, you should not follow the tutorial just as it is, make your own variations. That’s the best way of learning.

Stylish Layout

Step 10

I believe all websites do need a featured area, regardless of the fact whether they are a corporate website with seldom updates or a blog-like site with new content every day. Here in my template, I made this simple featured area that is made in the way, just the picture size is doubled.

Design Free Template

Step 11

Same actions here, added a layer, and some description heading to brief about the story/post.

Design Free Stylish Template

Step 12

Now after repeating these steps, this is what we got so far. The complete picture.

Free Web Template

Step 13

Let’s end with the lucky number 13. Sometimes designers don’t realize the significance of the footer. This is the finishing note of your design. This has to look good. At the same time, it should not look average, I made this footer which looks elegant, calm and sweet. As you can see, I reinserted Social Media links again, this is a very good practice and it helps a lot in making following readers.

Free Photoshop Layout Tutorial

Final Result

Tutorial of photoshop

As I said, this is my first tutorial, I’m hoping you like it. Do you have any ideas, suggestions, feedback or criticism? Hit me in the comments!

Grab your Free copy of this premium Layout PSD Now!

Further Related Readings

  1. Mehboob Talukdar May 3, 2011 at 12:42 am

    hey, your first tutorial is awesome man.

  2. Litmusbranding May 3, 2011 at 3:41 am

    Hi there,
    You have shared step by step, well explained tutorial. You did great job in form of tutorial and inspirational thought or message to designers.
    Thanks fro sharing

  3. Jawad May 3, 2011 at 4:59 am

    @Mehboob Talukdar, @Litmusbranding

    Thank you so much for your appreciation. You guys are being very kind on me, I personally feel this post is not my best, but your words mean a lot to me and I’m hoping to see you in my upcoming posts as well.

  4. Lyka Ricks May 3, 2011 at 5:30 am

    The result seems to be so polished and elegant. The design seems to be simple, smooth and sound. For me, it’s more catchy if the lay-outs are crafted simple, with neutral colors, it’s for all Ages and for all Eyes of Life.

    1. Jawad May 4, 2011 at 4:10 am

      @ Lyka Ricks
      Thank you so much as the saying goes wise men think alike, you think like me 🙂
      Seems like you are a designer yourself but if not you shuld be, you have the talent for it.
      hope to see you again my upcoming posts.
      Thanks again.

  5. Elin B May 5, 2011 at 4:41 am

    Great article and tutorial! Just what I’ve been looking for, I’m currently in the process of designing a website proposal for my university and have been looking for some good tips on how to do it using adobe software.

    So many thanks.

  6. Jawad May 7, 2011 at 3:05 am

    @ Think360 Studio

    Thanks for trying my tutorial and PSD file is also available at Free Premium Quality Web Gallery Template

  7. nouman malik May 25, 2011 at 4:40 pm

    i love this design thnxX i think you are a littel designer ;),,,,,

  8. anupom June 20, 2011 at 1:59 am

    Cool tutorial

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved