Submit Your Article
Home Articles News Tutorials Videos Add An Article
Topics: Design Photoshop Programming PHP CSS Java Database Web Development Javascript Ajax
– Close + Open

Find Out More About DevWebPro!

Sign up for the newsletter


» Terms & Conditions

Welcome to the New DevWebPro!

DevWebPro Includes:
  Hundreds Of Tutorials   Developer News
  Unique Gadget Videos   Tons of Topics to Discuss
  Expert Advice   We Will Publish Your Articles

Glossy RSS Button

Monday, November 10th, 2008
Text: Decrease Font Size Increase Font Size | Print Print Article | Share: Delicious Digg StumbleUpon Post to Twitter Post to Facebook

In this tutorial learn how to create a shinny RSS feed button for your website. And also some other great glossy buttons.

First step is to create a circle base using the Ellipse Tool. Make it however big you need it to look good on your site. It doesn’t matter what color either because we will be changing that next.

Now open the Blending Option on the layer and apply these effects.

It should look like this when you are done.

Next we need to make the inner circle, so using the Ellipse Tool again create another circle but a little bit smaller.

Again add some Blending Options like I did below.

It should look like this when you are done.

Now add the RSS symbol to the picture. You can make one by tracing the outline with the pen tool or you can find the shape online.

Add these effects to the symbol to make it really shine.

It should look like this when you are done.

Also lets add a reflection by duplicating the symbol layer and clearing the layer properties. The go to (Edit>Transform>Flip Vertically). Move down to where the edges meet up then lower the opacity down to 15%. Now take the eraser tool with a soft brush and delete the bottom half.

Next we are going to add the glossy effect to the button. We do this by selecting the outside circle. You can use the magic wand tool to select the outside white space then hit (CTRL+SHIFT+I) to inverse the selection.

Now using the Elliptical Selection tool hold the ALT key and remove an inner circle to leave a crescent shape selection.

Create a new layer on top and use the gradient tool with a white to transparent linear gradient. Start in the upper left corner and drag diagonally across to the button stopping before you get to the outer ring.

One last step you can add a drop shadow to the bottom circle for more depth. And that’s it you now have a glossy RSS button. Here are some other buttons you could make too!

~Jordan~

Topics: , , ,

Leave a Comment

DevWebPro is an iEntry Network ® publication - © 1998-2010 All Rights Reserved