How to Design a Stylish Gallery Web Template in Photoshop

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

Step 1

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

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.

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.

So far, we have made this.

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.

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.

Step 6

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

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.

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.

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.

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.

Step 11

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

Step 12

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

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.

Final Result

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!