Pinterest Stumbleupon Whatsapp
Ads by Google

1As a logo designer, I am frequently asked to make a logo for blog owners. Mostly, blogs have this Web 2.0 styling which is a simple design, eye-friendly, three-color scheme and WordPress powered websites.

If you paid attention to their logos, you can see what they have in common: glossy, reflected (often) and light-colored text. Actually it doesn’t take a real gifted artist to create such a logo, so in this tutorial, I’m going to show you how to create a nice-looking, simple, eye-candy logo for your blog in Photoshop.

Thus, before dropping me an email ordering a logo for your blog, try it yourself (hell, am I losing my money here?) just to find out that you can’t make it better than me.

  • Open Adobe Photoshop and create a new document (Ctrl+N or File->New). Set width and height to 400 and 100 pixels respectively. Make resolution 72 pixels/inch, leave the background as white. Note: these size and resolution settings are only web-friendly. For printing, use a higher resolution (like 300 pixels/inch).
  • Using the Type tool, choose a clear, rounded font like Arial, set the size to 60 and type some text (i.e. your blog’s title). Set the color to sky-blue (hex code: #0099cc):

create logo in photoshop

  • Right-click on your text layer, select Blending options and set as shown on screenshots below:

(Drop Shadow: Structure: Blend Mode – Multiply, Opacity- 61%, Angle – 120, Distance – 5, Spread – 0, Size – 5;
Stroke: Structure: Size – 3, Position – Outside, Blend Mode – Normal.)

Ads by Google

create logo in photoshop

make logo on photoshop

  • Click OK. Here’s what you must have came up with:

5

Almost done. In the next step, we will add a glossy effect to the text.

  • Ctrl+click on your text layer to choose the text only:

make site logo on photoshop

  • Create a new layer (Ctrl+Shift+N or Layer->New Layer->OK).
  • Using Paint Bucket tool 7, fill the selection with white color:

8

  • Deselect (Ctrl+D) and with the Elliptical Marquee tool 9 make a selection as below:

10

  • Now we need to invert the selection. For that, press Ctrl+Shift+I or right-click over the selection and choose Select Inverse. Press Delete and deselect:

11

  • Set the opacity of this layer to 32:

12

  • Take a look at your now-glossy blog title:

13

  • Let’s add some keywords under the title. Using the same font, size 12 and light-grey color (hex code: #b0b0b0), type something like I did “Internet. Life. Future.” (I don’t know why, just from the top of my head, you use yours of course) just under the main text:

14

Done!

One tip on saving your logo with a transparent background:

15 Hide the Background layer by clicking the eye icon on it’s left. Go to File->Save for Web & Devices (it may be “Save for Web“, depending on your Photoshop version, I use CS4) or press Ctrl+Alt+Shift+S. In the upper right corner of the pop-up window you will see presets as shown on the screenshot:

16

Choose PNG-24, check the Transparency checkbox and click Save. Now you can use it on any background in your web design.

As you can see, with a little knowledge, you can create a simple logo for your blog in Photoshop, while waiting for the designer to finish his job on your unique logotype.

I hope you find this a simple and easy tutorial. Any suggestions, ideas and questions are welcome – please feel free to leave them here in the comments.

  1. Joepet Macariola
    March 30, 2016 at 4:39 am

    I really like it!! Excellent tutorial!!!

  2. Tips Photoshop
    December 20, 2009 at 9:00 am

    very nice and cool.. thanks :)

  3. Himanshu
    December 1, 2009 at 10:55 am

    Thanks very much , I have just made a new logo with the help of your tutorial and soon going to use it on my own blog.

  4. Linda Mirano
    November 27, 2009 at 12:11 pm

    I am not much of a guy who thinks in so deeply about web design but I think your post had some valid points in it. Like designers are forced to design stuff within the limited code available and not go beyond it, their innovation is somewhat limited but still I think Web Design won't die! I agree that Amazon and other some big sites won't have a blog but now a days it's very important to have some sort of option available so people can quickly communicate their thoughts. I think Amazon if wants to shift it to that, they can get a customized CMS for themselves.

  5. Thiwa
    November 19, 2009 at 12:30 am

    Great...Thank For Share This.

  6. business logo design
    November 16, 2009 at 1:02 am

    Excellent tutorial.
    This is very useful.
    Thanks.
    Keep posting.

  7. Paula from Affiliate Blog Online
    November 10, 2009 at 5:42 am

    Thanks so much for this tutorial. I have always done my own blog logos but I am not that great when it comes to text. I will add this to my favorites.

  8. theboomroasted
    November 9, 2009 at 10:32 pm

    @whizkid and deralaand: I've found that inkscape is a great tool for doing things such as this. it's a free alternative to adobe illustrator and i love it. some people don't... i dunno you should try it out. its a free vector graphics program and theres tons of tutorials on it (including a lot on text and logos) at http://inkscapetutorials.wordpress.com/ and around the web. im not sure about its compatibility with linux though, you would have to check

  9. Monica Dickey
    November 9, 2009 at 6:24 pm

    Cool thanks! I was wondering about easy ways to jazz up text and I can definitely see how to expand on the concepts here for other text fills etc. Nice.

  10. Alex
    November 9, 2009 at 3:25 pm

    Hey this is an awesome tutorial! I did it with CS4 so obviously the steps were a little different ;) you should probably say which photoshop this is for.

  11. deralaand
    November 9, 2009 at 3:12 pm

    I have to agree with whizkid. It would be a bit more makeuseful for those of us without the Photo$hop. Especially looking from a Linux perspective.

  12. kibastos
    November 9, 2009 at 1:25 pm

    Oh, thank you very much! Good tutorial))

  13. whizkid
    November 9, 2009 at 8:40 am

    Would have loved to see this article using some of the popular freeware applications like GIMP or photo.net. It's easier to download & try out the above that way.

    • Alex
      November 9, 2009 at 4:37 pm

      here is a quick video tutorial I made...

      sorry i went really quickly

      oh this is for GIMP

      gowerpowered.com/video

  14. Paul Bozzay
    November 9, 2009 at 7:22 am

    Excellent article.. I'm definitely going to use this!

Leave a Reply

Your email address will not be published. Required fields are marked *