Desizn Tech logo
  • Home
  • Freebies
  • Showcase
  • Tutorial
  • Photography

Create A Metal Style Icon in Photoshop

Posted September 18, 2012 & filed under Tutorial

Metal, polished and Apple’s iCloud type icons are popular now. Last week we released a metal social media icon set. In this post, we will be sharing the steps of creating metal icon in Photoshop.

Here is the quick preview of finished item.

Finishted Version

Here are the resources you need to download.

  • Vector Social Media Icon
  • Rough Texture (Attached in PSD)

Step 1:

Create a new document in Photoshop 450 x 450 with white background.

Create New Document

Step 2:

Select ellipse tool from the shape menu.

Ellipse Tool

Step 3:

Draw an ellipse shape as shown on the picture. Make sure you have selected “shape layers” options from top bar.

Draw Ellipse

Step 4:

Add Gradient from layer palette.  Click on bottom “fx” icon from Layer palette.

Add Gradient

Click to edit the Gradient map

Edit Gradient

Edit Color like the screenshot below. This will create the metal reflection background.

Edit Colors

Step 5:

Apply following drop shadow effect from layer style

Drop Shadow Settings

Apply the following inner shadow effect from layer style

Inner Shadow Settings

Apply following Bevel & Emboss effect from layer style

Bevel & Emboss Settings

Step 6:

Load pattern in pattern library.

Load Pattern

Step 7:

Duplicate Layer from Layer Menu > Duplicate Layer. Right Click on duplicate layer and press Clear Layer Style.

Clear Layer Style

Add Pattern overlay by click on bottom “fx” icon from Layer Palette or Going to Layer>Layer Style> Pattern Overlay.

Select your loaded pattern from pattern and change blend mode to multiply.

Apply Pattern Overlay

Select pattern layer and set opacity to 45% and fill opacity to 0%

Set Opacity

Step 8:

Now, add the vector icon on top of  all the layer and change the color to #737474 or any color you would like.

Twitter

Apply following drop shadow effect from layer style

Drop Shadow Effect

Apply following inner shadow effect from layer style

Inner Shadow Effect

Apply following Inner Glow effect from layer style

Inner Glow Effect

That’s it. You are almost done now. Change the fill layer opacity to 30% from the layer palette.

Fill Opacity

If you followed all the steps correctly you should something like following image

Finishted Version

Feel free to experiment and let us know if you have any question.

Download
More about rebirthpixel

About the author

Rebirth Pixel is passionate about designing user experiences that actively engage and delight customers, resulting in a memorable, positive interaction. You can follow Rebirth Pixel on twitter: @rebirthpixel and visit on behance.

Tags: appl, design, icon, tutorial


Related posts:
  • Create a Twitter Icon in Six Easy Steps Using Photoshop
  • Designing Print Based Flyer in Photoshop
  • Create a Wooden Background Website Layout in Photoshop
  • How to Create Repeating Stripe Patterns in Photoshop
  • How to Create Your Own Fractal-Style Design Using Photoshop

Comments

Due to a high number of spam comments on site we have disabled comment system at desizntech.info. In a few days comments will be available again after we delete spam.

Cheap Tablet PC

Stay Connected

rss twitter facebook google pinterest
Get free updates in your inbox!

Subscribe via rss

Our Supporters

  • Cloud Storage
  • Dedicated Server
  • Modern Furniture
  • Online Business Printing
  • Online Backup
  • Logo Design
  • Wow Gold
  • Web Hosting UK
  • Secure and protect your business with SiteLock.
  • Festklänningar
  • Blogroll

    AnimHut
    Designmodo – Web Design
    Design Superhero
    Inspireyourway
    iBrandStudio
    OurTuts
    Skyje
    TextureQualityPro
    Stock Images
    Vector Pack
    365icon
    TexTuts
    • About
    • Contact
    • Contribute
    • Privacy Policy

    Copyright © 2008-2013 Desizn Tech

    Theme by Kawsar Ali.