Design insights & tutorials.

Create a Glossy RSS Feed Icon using Photoshop

glossy_web20_rss_feed_icon

In this tutorial you will learn how to create a glossy TV style RSS feed icon using the basic Photoshop functions like, Layer Styles, Layer Masks and Filters.

Take a look at the image we will be creating in this tutorial.

Step 1

Create a new document with 500px by 378px canvas. Set the background color to white. Create new layer, name it ‘frame’. Then select the rounded rectangle tool (U) from the toolbar and draw a 240px by 193px rectangle with 5px radius. Fill it with light grey (#dbdfe3).

Step 2

Select the ‘frame’ layer. Then go to Layer > Layer Style > Gradient Overlay. Now apply the following layer styles.


After applying the layer styles it should be look like this.

Step 3

Copy the ‘frame’ layer (ctrl+J). Name it ‘gradient’. Then, go to Layer > Layer Styles > Gradient Overlay. Apply the following layer styles.


Click ‘Add Layer Mask’ at the bottom of the layers palette. Then select the gradient tool (G). Select black to white and draw a down to up gradient on the frame.

Now it should look like this.

Step 4

We have to give the frame a 3d look. So, copy the ‘frame’ layer, name it ‘frame_back’ and place it under the ‘frame’ layer. Now press the up arrow key three times.


Go to Layer > Layer Style > Inner Shadow. Give it the following layer styles.


After that, it should look like this.

Step 5

Let’s add the screen. Create a new layer, name it ‘screen’. Select the rectangular marquee tool (M) from the toolbar and draw a rectangle with 219px by 152px. Fill it with dark orange (#e9691c). Place it on the frame as in the image below.

Then, Select the ‘screen’ layer and go to Layer > Layer Style > Inner Shadow. Apply the following layer styles.

Gradient Overlay

Stroke

Now it should look like this.

Step 6

To make it stylish, add a glow in the screen. Create a new layer, name it ‘glow’. Select the elliptical marquee tool (M) from the toolbar and draw a 127px by 127px circle. Fill it with light yellow (#fccd28).

Now go to Filter > Blur > Gaussian Blur. Set the radius to 38 pixels.

Now Control+click on the ‘screen’ layer thumbnail and click ‘Add layer Mask’ at the bottom of the layers palette.

Step 7

Now we have to add the RSS symbol. Create a new layer, name it ‘symbol’. Select the elliptical marquee tool from the toolbar. Draw a 24px by 24px circle. Fill it with white.

Now go to Layer > Layer Style > Drop shadow. Apply the following layer styles.

Gradient Overlay

Stroke

Step 8

We don’t have to draw the elliptical lines with pen tool, there’s an another process. Create a new layer, name it ‘s1’. Select the elliptical marquee tool. Draw a circle of 159px by 159px.

Fill it with a white.

Now right-click on the circle. And select ‘Transform Selection’.

Now make it smaller.

Now press ENTER. Then press DELETE.

Select the rectangular marquee tool. Select the half of the circle and press delete.

Delete the lower half in the same process.

Now deselect the selection and go to Layer > Layer Style > Drop Shadow and apply the following layer styles.

Gradient Overlay

Stroke

Create another line in the same process and apply the same layer styles. Then it will look like this.

Step 9

Let’s give a reflection to the screen to make it glossy. Create a new layer, name it ‘reflection’ and select the pen tool and make a shape like this.

Fill it with white. Mask it with the ‘screen’ layer.

After that, reduce its opacity to 7%

Step 10

Now add a button on the frame. Create a new layer name it ‘button’. Select the elliptical marquee tool and draw a 13px by 13px circle. Fill it with white.

Now add the following layer styles.

Stroke

Step 11

Now we have to draw the support. Create a new layer, name it support. Select the rectangular marquee tool and draw a rectangle of 68px by 44px. Fill it with light black.

Now apply the following layer styles.



Step 12

Create a new layer, name it ‘floor’ and select the rounded rectangle tool and draw a shape with 3px radius.

Then press Control+T, select skew and make it like this.

Fill it with white. And apply the following layer styles.

Stroke



Now create a new layer and select the rounded rectangle tool and draw a shape with 5px radius. Fill it with black.

Then delete the upper half of the shape. Place it under the ‘floor’ layer.

After that, apply the following layer styles.

Gradient Overlay


Now it should look like this.

Step 13

The last step is adding the shadow. Create a new layer, name it ‘shadow’. Select the elliptical marquee tool and draw a shape like this. Fill it with black.

Then go to Filter > Blur > Gaussian Blur. Set it to 30.8 pixels. Set the opacity to 70%.

Then decrease the height of this layer (Ctrl + T) to reduce its height.

This is the final image.

Download the PSD of the files used in this tutorial: Glossy RSS feed icon PSD (576).

About the Author, Dibakar Jana

He is a 22 year old Web/Graphic/Flash Designer and Blogger from Calcutta ("Kolkata"), India, Founder and Chief Editor of DJDesignerLab, a blog for designers, also runs DJDesignFuture, a web design freelancing group. Follow him on Twitter@djdesignerlab and join him on Facebook.
Discover More by Dibakar Jana

Discussion

We want to hear what you have to say. Do you agree? Do you have a better way to approach the topic? Let the community know by joining the discussion.

  • Simon H.

    Neat, well detailed. Good job sir!

  • DefunktOne

    Nice one. Simple and clean.

  • Vibe Tutorials

    Great tutorial, I was thinking of making a tutorial about this.

  • Jay

    Hope you guys realize that the file in the DL is not the file for this tutorial.

    It's cleanliness.psd inside the Glossy-RSS-icon-PSD.zip file

  • Djdesignerlab

    Hi,

    I have sent the actual psd file to the admin. I think they have uploaded the wrong file. Sorry for the inconvenience.

  • Adam

    Hey guys, sorry for the mix up with the files. Fixing it now!

  • Adam

    Alright, should be fixed now, sorry everyone.

  • http://www.photoshopclippingpath.us Photoshop Clipping Path

    Really nice work and I like how you showed the process.

  • Asassin Creed

    Awesome,truly simple yet handy tut.Good work

  • Mukherjee1978

    Neat and clean tutorial,i like this tutorial

  • http://www.wastewatersystem.net Will

    You can call me a noob when it comes to photoshop editing. The step-by-step explanation which you provided here in details really help a lot.

  • http://warstwy.com Duma

    Very sexy tutorial. Thanks

  • http://www.photoshopclippingpath.us Photoshop Clipping Path

    Thanks for sharing this wonderful post

  • http://griyamobilkita.webs.com sewa mobil

    Nice article, thanks for sharing.

  • jeevaji

    blosemmmmmm nice to learnnnnn keep it u…

  • jeevaji

    blossommmmmm nice to learnnnnn keep it u…

  • Download60s

    Photoshop tutorial, from beginner to advanced. Including Photoshop text effect tutorials, photo manipulation tutorials, give you joomla templates,joomla extensions,wordPress theme,web templates,
    if you think i make a spam please remove this comment.
    thanks.. find more best tutorials here http://download60s.com

  • http://www.clippingimages.com/ Clippingimages

    i really love this work..this one is awesome.. :)

  • http://instatuts.com Rufino

    WOW!the instruction is very detailed. I haven’t tried using gradient overlay before, I never expected thats its cool to use it. Let me try this and hope it will work for me.

  • http://www.digiturksimdi.com digiturk

    Really nice work and I like how you showed the process..
    Thanks..

  • http://www.ghdhairbuy.com/ GHD Hair Straighteners

    Neat, well detailed. Good job sir!

  • GHD Hair Straightener

    Hope you guys realize that the file in the DL is not the file for this tutorial.

    It’s cleanliness.psd inside the Glossy-RSS-icon-PSD.zip file

  • http://www.digiturksimdi.com Digitürk

    Simple and clean… Yes. Thanks.

  • 17

    good,thank you

  • http://www.katskinner.com Kat Skinner

    Thanks for the tutorial, it was really helpful. I have just started learning how to make icons, etc in photoshop, and this really contributed to my knowledge. Thanks again. 

  • http://www.drmustafaerarslan.net/ panax

     I am showing animations off the internet for my section