How to Design a Stylish Gallery Web Template in Photoshop

AD

When I started designing web layouts, it was quite hard. I felt the amount of creativity and imagination required for this type of job is just something I don’t have. But I have learned after a while that it is not difficult at all.

In fact, if you just follow some simple rules, this can be very easy. I’ll ask Tayyab to write an in-depth article describing the methodology of designing a website but for today, we’ll just make a simple, elegant, yet stylish looking web design.

This web design could also be used as a gallery page of any website. The rules are that I kept it dark, because this template uses a lot of images, and pictures look good on dark colors. I also kept the header small, the big the header is the less amount of content the visitor will be able to see, so small header is a good practice.

UPDATE

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!


Share on Facebook Share on Twitter Google+ Share Button Stumbleupon Share Button
Advertisement

Join the 98,750+ Subscribers

Subscribe and grab Free Ebook! Photoshop Crash Course!

We promise not to spam!

Further Related Readings

Jawad

I am a professional web designer, working as a tutorial writer here at Designzzz. I also have a crazy for Cars and Automobiles, that's why I have blog about them, Carunch.com; You can follow me on Twitter
All Articles by
10 Comments on “How to Design a Stylish Gallery Web Template in Photoshop” Join The Discussion!
  1. Mehboob Talukdar says:

    hey, your first tutorial is awesome man.
    Thanks.

  2. Litmusbranding says:

    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 says:

    @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 says:

    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 says:

      @ 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 says:

    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. Think360 Studio - Web Design Company India says:

    Just tried your tutorial, absolutely brilliant! Thank you so much for sharing it with us.

    1. Jawad says:

      @ Think360 Studio

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

  7. nouman malik says:

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

  8. anupom says:

    Cool tutorial

Comments are closed.

Copyrights © 2014 - Designzzz. All Rights Reserved