RSS Icon Photoshop Tutorial - using Shapes for Scalability, to the MAX!
Need a need RSS Icon for your blog?
Here’s a nice short tutorial on how to make a unique and memorable RSS Icon by manipulating Shapes in Photoshop. This comes with the added bonus of allowing you to scale your RSS icon to fit your website!
If you’re lazy and would rather get your grubby hands on the finished product, I have posted up the PSD and various PNG RSS icons for you to download freely. Just check out this post!
However if you want to learn the techniques behind making this:
Then subscribe to my RSS feed and head on after the break! 
First, you’ll need to make a square canvas. Mine was 200×200px. Grab the Ellipse Tool, make sure Shape Layers is selected, and drag out a circle on your canvas - you’ll have to hold down Shift while dragging.
Great, you’ve got a circle! Now to spruce it up. Enter Blending Options and apply the following layer styles:
Of course, if you want an RSS Icon that’s not blue, just adjust the colours above to reflect your innermost desires.
You should end up with something that looks like this after applying the layer styles:
Now to make the highlight. Duplicate the circle layer, and make sure the Vector Mask is selected on the new layer.
To make the highlight, we want to create a wave that encompasses just the top part of the circle. Select the Pen Tool. If you’ve selected the Vector Mask like I’ve shown above, you should be able to choose Intersect Shape Area.
Using the pen tool, draw a pepsi-style wave.
Bring it up around and connect it to the starting point. Because you’ve chosen Intersect Shape Area, you’ll be left with a top wave that fits perfectly to your circle shape! Brilliant!
Now change the fill opacity of that new layer to 0% and add in this Gradient Overlay to make the highlight. Set the Blend Mode to Soft Light.
You should end up with something like this when you’re done!
Now to add in the RSS icon. Head on over to the next page to discover an easy way to do this using Photoshop’s pre-existing shapes!
Pages: 1 2
Similar Posts
- Free Scalable RSS Icons for your Blog!
- Calendar Icon Tutorial
- Free Web 2.0 Calendar Icons
- Your Favicon is Showing
- More Scrumptious Free Icons
[…] WRInitTime=(new Date()).getTime(); « Give Blood, Give Life, Give Design RSS Icon Photoshop Tutorial - using Shapes for Scalability, to the MAX! […]
RSS Icon Photoshop Tutorial - using Shapes for Scalability, to the MAX!…
Need a need RSS Icon for your blog? Here’s a nice short tutorial on how to make a unique and memorable RSS Icon by manipulating Shapes in Photoshop. This comes with the added bonus of allowing you to scale your RSS icon to fit your website….
Nice RSS feed icon, thanks for submitting it to tutorial-effect.net
[…] RSS Icon Photoshop Tutorial […]
Looks really nice. Thanks.
[…] http://mintyferret.com/photoshop/photoshop-rss-icon-tutorial […]
thank you! great idea to use more or only shapes, everything is much tidier.
I am trying to do it. I have just written post with ask “help me!” but finally I found when was mistake, my mistake. I think I will do it correctly, this time
Uffff.
Best wishes from Poland!
Sorry, I have to give up. I can’t create pepsi-style wave… I am trying, trying and I am still too weak with Pen Tool. I don’t unaderstand this second path above the circle? What is it for? Bye!
Hey Ula - keep at it! The wave is pretty tricky to make (I had to try a few times before I got something I liked).
The path above the circle is actually a continuation of the wave, not a separate path (the image cuts out a line on the right). Just the wave (line) won’t allow you to fill in the top with a gradient, you need to have a shape that covers the entire top.
Let me know if you still need some clarification and I’ll see what I can do! Try downloading the RSS Package as well, I believe I have the PSD files in there if you wanted to take a look.
YES, YES, YES. After 3 days I made my first RSS icon. I know it is not a great score (how long took it ot you?), but this is my first week with Photoshop. I am a little baby, but after this exercise I feel I grow up! Of course I made some stupid mistakes (”I do what they say, but it is not working!”). Now I am sure - advices are good written. I had to do something in my way, but the best is perseverance at striving to reach a goal.
Tanks for worm words and your readiness to help.
Haha, congrats Ula! Glad you got it in the end.
And it’s a great accomplishment to learn how to do this stuff after only one week - most of what I know how to do is self-taught and I think it took me a few months before I tried experimenting with shapes and things.
But it’s good that you figured out your own way as well, just keep on experimenting with the program and trying different things, you’ll be much more comfortable with it before long!
And thanks for visiting the site - I know I’ve been pretty bad in keeping it updating recently but I hope to get back here soon.
Nice tut, Minty!
[…] RSS Icon Photoshop Tutorial - using Shapes for Scalability, to the MAX! […]
[…] RSS Icon Photoshop Tutorial - using Shapes for Scalability, to the MAX! […]