Learn To Create A Jewelry Style IOS Icon

Learn To Create A Jewelry Style IOS Icon

What We’ll Be Creating

Learn How To Create a 3D Jewelry IOS Icon

Resources Used In This Tutorial

Download The IOS Template

Lets get started. Download the IOS icon template from the resource list then open it up in photoshop. Once the PSD is open in photoshop locate a smart layer labelled “EDIT THIIS SMART OBJECT”.

Learn How To Create a 3D Jewelry IOS Icon

Once the smart object is open look inside of a folder called blue then delete the layer called “Lighting”, while your in the layers window also delete the layer “Inset”.

Learn How To Create a 3D Jewelry IOS Icon

Now load a selection around the top layer called “HIDE ME WHEN DONE”.

Tip

Load a selection around a layer by clicking the thumbnail inside of the layer whilst holding down the CTRL key on the keyboard.

Once the selection has been loaded select the “Gradient Fill” layer, right-click and select “Rasterize Layer” then hit the delete key.

Learn How To Create a 3D Jewelry IOS Icon

Drafting Out The Box

Select the “Rounded Rectangle Tool” (U) with a radius of “180 Pixles”.

Learn How To Create a 3D Jewelry IOS Icon

Re-create the blue square exactly as you see it, dragging a new rounded rectangle over the top.

Learn How To Create a 3D Jewelry IOS Icon

Once you’ve created a duplicate of the bottom rounded rectangle select the “Rectangle Tool” (U) then press “Subtract From Shape Layer” (-) from the tool bar at the top.

Learn How To Create a 3D Jewelry IOS Icon

Now drag the rectangle over the bottom rounded corners, you should see the bottom half of the shape disappear.

Learn How To Create a 3D Jewelry IOS Icon

Repeat the process explained above only this time making the part we cut off slightly bigger, all will be explained when the pieces are all in place.

Learn How To Create a 3D Jewelry IOS Icon

Create one more rounded rectangle like the image below, removing the piece specified.

Learn How To Create a 3D Jewelry IOS Icon

To understand what we’ve just created you need to compare the shapes to the original result of the icon. (Shown Below)

Learn How To Create a 3D Jewelry IOS Icon

Learn How To Create a 3D Jewelry IOS Icon

Adding The Texture To The Box

Download the fabric textures pack from the resources list and install them in photoshop.

Select the original rounded rectangle layer then add the following layer styles.

Learn How To Create a 3D Jewelry IOS Icon

Learn How To Create a 3D Jewelry IOS Icon

You should have something like this.

Learn How To Create a 3D Jewelry IOS Icon

To the 2nd rounded rectangle add the following layer styles.

Learn How To Create a 3D Jewelry IOS Icon

Learn How To Create a 3D Jewelry IOS Icon

Learn How To Create a 3D Jewelry IOS Icon

You should now have something like this.

Learn How To Create a 3D Jewelry IOS Icon

Add the following layer style to the 3rd rectangle layer.

Learn How To Create a 3D Jewelry IOS Icon

Now finally add the following layer styles to the last rectangle.

Learn How To Create a 3D Jewelry IOS Icon

Learn How To Create a 3D Jewelry IOS Icon

The jewelry box should now be drafted up and look something like this.

Learn How To Create a 3D Jewelry IOS Icon

Creating The Inside, Ready For The Rings

On new layer above the 3rd rectangle layer, draw out a black rectangle using the “Rectangle Tool” (U). Try and keep gap between the rectangle and edge of the box consistent so it doesn’t look out of place.

Learn How To Create a 3D Jewelry IOS Icon

Once the black rectangle is in place, load a selection around it.

Tip

Load a selection around a layer by clicking the thumbnail inside of the layer whilst holding down the CTRL key on the keyboard.

Once the selection has been loaded go to “Select > Modify > Contract”, contract the selection by around 10-12 pixels. Now download and open up the silk texture.

Copy (Ctrl + C) the silk texture to the clipboard then go to “Edit > Paste Special > Paste Into” (Alt + Shift + Ctrl + V). You should now be able to move the silky texture within the black rectangle. Press “Ctrl + T” for the “Free Transform Tool” then resize the texture so it just fits inside of the mask.

Learn How To Create a 3D Jewelry IOS Icon

Once your happy with the resize and position of the texture add the following layer styles to the texture layer.

Learn How To Create a 3D Jewelry IOS Icon

Learn How To Create a 3D Jewelry IOS Icon

Create a new “Levels Adjustment Layer” above the silk texture using the following settings.

Learn How To Create a 3D Jewelry IOS Icon

Learn How To Create a 3D Jewelry IOS Icon

You should have something like this.

Learn How To Create a 3D Jewelry IOS Icon

Creating The Jewelry Box Highlights

Select the “Ellipse Tool” (U) then drag out a narrow ellipse across the bottom where the edge of the box joins the inside of the box.

Learn How To Create a 3D Jewelry IOS Icon

Once the ellipse has been created go to “Filter > Blur > Guassian Blur” then use the following settings.

Learn How To Create a 3D Jewelry IOS Icon

Set the layers opacity level to 50% then add a layer mask to the layer. With the layer mask added select the “Gradient Tool” (G) with a reflected gradient, then drag the gradient from the middle outwards so the blurred shape blends in either side.

Learn How To Create a 3D Jewelry IOS Icon

If you find the layer is still to light then lower the opacity a bit more. If you find the guassian blur has made the shape to big press “Ctrl + T” and vertically resize the shape to suit.

Learn How To Create a 3D Jewelry IOS Icon

To finish off the bottom half of the box we need to add a bit of shading. Load a selection around your original rectangle.

Tip

Load a selection around a layer by clicking the thumbnail inside of the layer whilst holding down the CTRL key on the keyboard.

create a new layer above it the select the “Gradient Tool” (G) with a “Foreground to Transparent” gradient.

Learn How To Create a 3D Jewelry IOS Icon

Drag the gradient from the bottom of the box upwards until you have something like this.

Learn How To Create a 3D Jewelry IOS Icon

Creating The Jewelry Box Lid

Create a new layer underneath the 3rd rounded rectangle (Box Lid) we created, select the “Gradient Tool” (G) with a black to transparent gradient. Drag the gradient underneath the 3rd rectangle, make sure the layer is above the silk textured square.

Learn How To Create a 3D Jewelry IOS Icon

Do the same again only this time create the layer above the box lid layer (3rd Rectangle) dragging the gradient in the opposite direction.

Learn How To Create a 3D Jewelry IOS Icon

Load a selection around the top box lid layer (4th Rounded Rectangle), create a new layer above the box lid top layer (4th Rectangle) then drag the gradient in the selection in the opposite direction to the last gradient.

Learn How To Create a 3D Jewelry IOS Icon

Were now going to spruce up the lid of the jewelry box. Load a selection around the box lid layer (4th Rectangle).

Learn How To Create a 3D Jewelry IOS Icon

Set your foreground layer to the color white (#ffffff), create a new layer then go to “Edit > Stroke” and use the following settings.

Learn How To Create a 3D Jewelry IOS Icon

You should be left with something like this.

Learn How To Create a 3D Jewelry IOS Icon

Cut away the bottom half of the stroke by selecting the “Rectangular Marquee Tool” (M) then make a selection around the bottom half of the stroke and hit delete.

Learn How To Create a 3D Jewelry IOS Icon

Now go to “Filter > Blur > Guassian Blur” use the same settings as we did from when we did the bottom of the box. Once blurred add a layer mask to the layer and drag a gradient over the stroke. Lower the opacity if needed.

Learn How To Create a 3D Jewelry IOS Icon

Finally we need to create the shadow which would be cast by the lid being open. Using the “Rectangular Marquee Tool” (M) make a selection on a new layer underneath the box lid.

Learn How To Create a 3D Jewelry IOS Icon

Fill the selection withe color black (#000000) then go to “Filter > Blur > Guassian Blur” the rectangle by around 3-5 pixels. Once blurred lower the opacity to around 20%. You should have something like this.

Learn How To Create a 3D Jewelry IOS Icon

Adding The Rings

Download an appropriate set of rings alternatively you can create them yourself in illustrator. Remove the background from the rings then place them into the box.

Learn How To Create a 3D Jewelry IOS Icon

If your using adobe photoshop CS6 apply the “Oil Paint” filter by going to “Filter > Oil Paint”. If you don’t have CS6 don’t worry. The whole idea is to just smooth the reflections on the ring so it doesn’t look so realistic.

Learn How To Create a 3D Jewelry IOS Icon

Duplicate the rings layer then add a black color overlay to the layer. Drag the duplicated layer underneath the original then set the opacity to around 25%. Now go to “Edit > Transform > Distort”, select the top middle anchor and drag it down until you have something like this.

Learn How To Create a 3D Jewelry IOS Icon

Finally load a selection around the rings then drag a foreground to transparent gradient over the ring on a new layer.

Learn How To Create a 3D Jewelry IOS Icon

If you want to add a nice little twinkle effect using one of the brushes from the Bling Brush Pack noted below.

Learn How To Create a 3D Jewelry IOS Icon

Conclusion

Thanks for taking part in this tutorial, if you managed to finish this tutorial I’d love to see some of your results. Feel free to post them up on our Facebook Fan Page Or Tweet them via twitter @photoshop_plus.

Learn How To Create a 3D Jewelry IOS Icon

Purchase Psd Now

About the Author Wilma Hamlin

Wilma Hamlin is a creative designer & writer. She writes for Crayonify. Being a designer as well she use to create amazing designs using many tools. In her lesuire time she love to read books and tries to learn new designs.

Leave a Comment:

6 comments
Jon says

Ugliest icon ever made

Reply
Richard Carpenter says

Thanks for your feedback Jon, maybe you could explain your reasons why you think its the ugliest icon ever made.????

Reply
Vinny says

What Jon probably meant was the icon visually makes no sense at all. I understand you have a top and a bottom to the box, but after reading the tutorial and looking at the icon for a while, it still doesn’t make sense. Theres a top to the lid and a back to the lid and they both have the same shape, which gives it no depth, but the way the ring is cut off looks like there is supposed to be some depth.

Besides the icon visually not making sense, this tutorial is excellent. Great work!

Reply
Jack says

I think it’s a great tutorial. It’s not always about the outcome but about the tecniques you can take away from the tutorial. P.s commented from my iPad your looks awesome

Reply
jawwad says

This tutorial is excellent. Great work.

Reply
Christy Harper says

Awesome design thanks for sharing :)

Reply
Add Your Reply

Popular posts

css.php