Designing a Jeweler’s Website in Photoshop

AD

http://blogs.cooperhealth.org/?option=Expenses-For-Business-Use-Of-Home Expenses For Business Use Of Home

Example Of No Deposit Binary Options Get 100 For Free

Valasholic13 V2 5 For Forex

Starting Out In Stock Trading

Step 1

Daily Forex Market

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

Comments
  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:
      http://www.designzzz.com/easily-coding-jewelers-website-html5-css3/

  2. gowebsitetemplates.com 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 © 2016 - Designzzz. All Rights Reserved