Designing a Jeweler’s Website in Photoshop


Its Friday and you have your Photoshop web design tutorial. Today I have quick one, you’ll be able to complete it within 2-3 hours if you are a beginner. The idea is to make a web design for a jeweler.

Jeweler’s site require dark backgrounds, sharp colors, quality stock photos and large size jewelry display. So we’ll keep these things in mind while designing this site.

As usual, today you are bringing you the photoshop tutorial, it’s downloadable PSD and HTML tutorial will follow in the upcoming week.

Step 1

A blank document, size of your choice, resolution 72. We do this every time :)


Step 2

We use two colors in background. The upper section which will contain featured area, is colored #363535 and the lower color is #1f1e1e and I added some noise here, this will be our main background. To do noise, click on Filter Menu> Noise> Add Noise. I used value of 4.


Step 3

In lower side of  background, I thought of adding a border so a diamond necklace is placed here with 15% opacity.


Step 4

Lets move towards the Logo. I choose the Ellipse Tool, drew the shape and fill with pink color.


Step 5

Now we fill this logo area using a gradient overlay. You can see the color values in the screenshot.


Step 6

And as the finishing touch, I added a diamond. Now remember that this is a dummy logo and you will most probably have a logo, I just made it to fill the space.


Step 7

Let move towards Navigation bar. I have broken a few designing rules here. I placed the logo in the center and I’m gonna add half of the menu in one side of the logo and the other half on the other side. Read on, you’ll understand. I drawn the Nav Bar background using Rectangle Tool.


Step 8

This is what I made as the final result. You can give the logo, a link to the main gallery page since that is the most prominent page of the site and every jeweler wants to highlight that link.


Step 9

After this we move towards featured area. Choose the rectangular too and draw the box.


Step 10

Add picture into the featured area and the use Clipping Mask to cut off the unnecessary parts. You just right click on any layer and click Create Clipping Mask.


Step 11

Choose the Ellipse tool and draw the shape.


Step 12

Below the featured area image, we have a little space, you can fill it with testimonials or something likewise, I just added a slogan type text “The finest jewelers in the town. ”


Step 13

Now comes the content area. Since this is a jeweler’s website, you will add pictures, and add them stylishly. I chose Ellipse Tool drawn some circles.


Step 14

Then I filled them with images using Clipping Masks. You just right click on a layer and click Create Clipping Mask.


Step 15

Here’s a the final result of this area.


Nose pin

Ear Rings





Step 16

We’ll keep it simple in the footer. We select a Rounded Rectangular Tool and draw the footer background with 60% opacity.


Step 17

We added some contact details, and done!



Cool, huh!


Further Related Readings

  1. Mikel January 18, 2012 at 3:11 pm

    Where is the HTML!!

    1. Tayyab January 21, 2012 at 12:46 am

      Here’s the HTML tutorial:

  2. March 19, 2012 at 9:32 am

    this is really cool tut, thanks

    1. Jawad March 19, 2012 at 9:35 am

      Thank you. :)

  3. Template Design March 31, 2012 at 12:34 am

    Wow awesome you have done such a great job here amazing ..Thanks for sharing this creative tut here with us ….

  4. designer rings June 5, 2012 at 1:10 pm

    Real clear website , regards for this post.

Comments are closed.

Copyrights © 2015 - Designzzz. All Rights Reserved