Designing a Jeweler’s Website in Photoshop

AD

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

Design-of-Photoshop

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.

Photoshop-tutorial-of-layout

Step 3

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

Tutorial-of-Photoshop

Step 4

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

Jewelry-Template

Step 5

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

Tutorial-of-Photoshop

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.

Photoshop-Tutorial-of-webdesign

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.

Jewelry-Template-in-Photoshop

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.

web-Layout-Tutorial

Step 9

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

Jewelry-Template-Tutorial

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.

Jewelry-Template-Tutorial-in-Photoshop

Step 11

Choose the Ellipse tool and draw the shape.

Jewelry-Template-Tutorial

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. ”

Photoshop-Jewelry-Layout-Tutorial

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.

Jewelry-Layout-Tutorial

Step 14

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

Photoshop-Jewelry-Layout

Step 15

Here’s a the final result of this area.

Ring

Nose pin

Ear Rings

Breslet

Necklace

Bangles

Photoshop-Jewelry-Layout-Tutorial

Step 16

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

Jewelry-Template-Tutorial

Step 17

We added some contact details, and done!

Photoshop-Tutorial-Template

Voila..!!

Cool, huh!

Photoshop-Layout-Tutorial

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
8 Comments on “Designing a Jeweler’s Website in Photoshop” Join The Discussion!
  1. web designers directory says:

    good tutorial, thanks for sharing

  2. Mikel says:

    Where is the HTML!!

    1. Tayyab says:

      Here’s the HTML tutorial:
      http://www.designzzz.com/easily-coding-jewelers-website-html5-css3/

  3. gowebsitetemplates.com says:

    this is really cool tut, thanks

    1. Jawad says:

      Thank you. :)

  4. Template Design says:

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

  5. designer rings says:

    Real clear website , regards for this post.

Comments are closed.

Copyrights © 2014 - Designzzz. All Rights Reserved