How to Make a Web 2.0 Feed Logo

Ads

web20-feed-logo.png

Recently I taught my readers How To Make a Glossy Web 2.0 Logo which was kind of appreciated a lot by everyone. I myself liked the idea of sharing my photoshop designing skills with everyone for the first time ever. I am not very good at making and writing design tutorials but whenever I come up with something creative I like sharing it with everyone and here is another piece of my creativity.

Make a Catchy Web 2.0 Feed Logo

This little tutorial is in a way related to the web 2.0 logo tutorial but has a different and more cooler output. Feed logos are very important for your blog as they prove to be instrumental in catching the eye of more readers and therefore it is a good chance that a catchy web 2.0 Feed logo will help you increase feed subscribers count on your blog.

Here we start with our tutorial:

  1. Open a blank document in Adobe Photoshop with a pixel dimension of 400 x 200 with the default settings and make sure you set the foreground color to #FC6F02
  2. Now pick the 'Rectangle Tool' and make a rectangle of suitable width and height that stretches horizontally. Right click on this layer and name it 'Subscribe' by clicking on the 'Layer Properties'. Then right click again on this layer again and click 'Rasterize Layer'.
  3. Open the 'Blending Options' for this layer and check the box near 'Outer Glow' thus giving it the following set of properties
  4. outer-glow-feed-logo.png
    Your logo should look something like this by now
    feed-logo-stage-1.png

  5. Select the 'Text Tool' and write the text 'Subscribe Now!'. Make sure the font-style is 'Trebuchet MS', the font-weight is 'Regular', the font-color is #FFFFFF the anti-aliasing is 'Smooth' and the font-size is comparable or around 30pt.
  6. Select the 'Subscribe' layer and using the 'Free Transform' tool adjust the rectangle such that it covers the text background completely. You get this output:
  7. feed-logo-stage-2.png

  8. Repeat the steps 2-5 to make a rectangle comparatively smaller in size to the one we made above and this time use the text 'syndicate' and position in such a way that it looks something like this:
  9. feed-logo-stage-3.png

  10. Use the 'Free Transform Tool' to expand the 'Subscribe' and 'Syndicate' layers horizontally on the left side. Then select the 'Elliptical Marquee Tool' and stretch across the upper half curvature of the 'Subscribe Now' layer.
  11. feed-logo-stage-4.png

  12. Make a new layer above your other layers and name it ‘gloss’. Fill this layer with ‘White’ color using the ‘Paint Bucket Tool’ within the portion which we just selected using the Elliptical Marquee Tool. Set the opacity of this layer to 30%
  13. feed-logo-stage-5.png

  14. Take a good looking open source feed logo with a transparent background and position it as shown to make your final logo. I used this one
  15. feed-logo-stage-6.png
    Here is your final logo
    feed-logo-stage-7.png

I hope the tutorial was fun for most of you :) Please share your views

  • http://www.cristianr.com CristianR

    Easy, fast, and nice result. Good work DJ !

  • http://www.benh.org/techblog Benedict Herold

    You’re becoming design expert as well. aren’t you? Good work!

  • http://www.tecfre.com kanak

    Wow! great DJ, finally i learnt this. I always used to try gradient for the glass effect and never got it right !! Finally this made me aware that the thing was very easy !! After reading this i tried with different different colors, Red and green, but those doesnt look as glossy as the orange color, but still, I am happy to learn this . Thanks for this tutorial :D

  • http://www.limedwater.com Lost

    WOW FLUSH!! great job ..great tutorial ill use it for my blog when its back up, great jobonce more i was sick of the old feed burner logo =(

  • http://jayadrathsingh.blogspot.com Jayadrathsingh

    Cool yaar. Gr8 and easy to understand tips 4 ppl. like me( less familiar with photoshop) thanks.

  • http://www.whoismadhur.com Madhur Kapoor

    Another great tutorial buddy , keep up the good work .

  • http://www.rishiraj.info Rishi

    Hey rocking tutorial dude, Can I use the one you made for my site?

    Anyways, these steps work in Paint.NET also easily! :D

  • http://www.bluejar.com GnomeyNewt

    Amazing. It looks so cool. I’m terrible at design, so these tips are great!

  • http://www.brownbaron.com/blog/ Brown Baron

    Fast and easy. Nicely done buddy.

  • http://www.sizzledcore.com Haris

    Thanks a lot for the tutorial. I’m still a beginner at Photoshop. This is going to help me a lot!

  • http://www.spice-and-tech.blogspot.com Cold Fire

    Wow! Awesome :D

  • http://www.bloggingtune.com Ramkarthik

    Thanks buddy. Good tutorial. I’m very poor in Photoshop. Maybe now I can try this. Ok let me try and create one for my domain blog.

  • http://www.sizlopedia.com Dj Flush

    Thanks to everyone of you who appreciated this tutorial.

    The image created is of course open-source and anyone can use it freely on his/her blog.

    I will be coming up with new and more interesting tutorials soon :)

  • http://www.shankarganesh.com Shankar Ganesh

    Wow I love it :) More Photoshop Tutorial plz :)

  • Mike

    It is not cool at all. It is total baby stuff.

    I know you won’t post my comment. but your tutorial sucks.

  • http://www.sizlopedia.com Dj Flush

    Mike Thanks a lot for your negative comment. I indeed decided to publish this comment even though you did not like the tutorial.

    Criticism is always welcome my friend.