Apr 15th, 2007 by admin 2,995 Views
In this tutorial you will learn how to create professional web 2.0 design feed icons.
First of all you will need a basic feed icon. You can download one that I created, in PSD format here
now let’s start:
open the downloaded file with Photoshop
press F7 to open the “layer window” if it’s not already opened
double click “Layer 1″, select “Inner Glow” and insert values like in this image
now select “Gradient Overlay” and select “Blend mode - Exclusion”, opacity 100% and double-click on the “gradient” color bar
by changing the gradient colors you can obtain feed icons like these
now let’s add some more effects to these buttons:
after chosing the gradient colors you like, create a new layer
with the rectangular selection tool , select the upper half of the Icon
now fill the selection with white color
double-click on “Layer2″ in the layer window and in “Blending Options” select “Blend Mode - Overlay” and set an Opacity between 50-100%
select “Drop Shadow” and press “OK” to apply the changes
now you will have a crazy looking feed icon like this:
Posted in Photoshop Tutorials | 9 Comments
If you enjoyed this article, consider subscribing to the Full RSS
Related Articles
Create custom shapes from images - Photoshop tutorialHow to make a Web 2.0 Logo - Reflective Font Web 2.0 design - Photoshop TutorialWhat is RSS?Use Technorati Charts to target a Small Niche and get Huge Traffic - Blogging TipsThe reason I wrote a short post with the title “What is RSS?”
RSS feed
| Trackback URI
Thanks–I really had fun with this!
Glad to hear that you liked it
I love your 3D RSS lozenge. But, a lot of web users still don’t know what that logo represents. I adapted one rss icon by adding the letters RSS to the front and made that part of the reflection on my science site. Now, you might say, a lot of web users won’t know what RSS stands for either, but at least there’s chance that the curious will look it up and discover the wonders of newsfeeds; it’s especially important to add a “What is RSS?” explanatory link near the icon.
Keep up the good work.
db
Hi David,
thank you for this tip! I will add a “What is RSS” post soon
I will also think about adding the letters “RSS” to my feed button as soon as possible.
No problem. It’s worth a try, you’re not going to lose subscribers by adding that and might just gain a few. My Sciencebase site went from about 1800 average to 2600 average when I added a bigger RSS button and a proximal link to a “What’s RSS” page.
db
Hi David,
finally I did it
Nice one!
Can I just make one tiny additional suggestion. Redo the lozenge and apply the “RSS” with perspective so that it looks like it is on the surface, then use a blending mode (all in Photoshop, of course) to make it look smoother. Send me the original graphic and buy me a beer and I’ll do it for you.
Cheers
Dave
hmmm…this is something like “pay me and I’ll do it for you”. Anyway, I was quite tired yesterday and I did it in 5 minutes. I also noticed that I forgot to make the background grey…I will fix the image today, adding also a perspective effect to the RSS text
It’s not something “like” pay me and I’ll do it for you it is “exactly”. But, you did it yourself so no need to ply me with booze to get me to do it
Good luck
d