Easiest Way To Create A Blog Logo In Photoshop

by Karan Goel

As 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):

• 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.)

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

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:

• Create a new layer (Ctrl+Shift+N or Layer->New Layer->OK).

• Using Paint Bucket tool , fill the selection with white color:

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

• 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:

• Set the opacity of this layer to 32:

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

• 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:

Done!

One tip on saving your logo with a transparent background:

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:

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.