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.
Related posts: