BlogMunch

How I design the new BlogMunch Logo? Part 2

In part one of this two part series, I show you how I come up with the typeface and accompanied image. Now, will be the rest of the journey till the final header you see now on BlogMunch.

Vector Magic

Using Vector Magic is simple enough. Choose a few options, and voila, vector image of the BlogMunch is out. The only problem I got is the Japanese character’s thin stroke, so processing on anything below "High" will lose details.

I love the result coming out of VectorMagic. On the original image, the caterpillar is too detailed. Now there is a "painting" quality to the caterpillar which I feels fits the logo better.

There are three options to export your vector image as. There are the Encapsulated Postscript (EPS), Scalable Vector Image (SVG) and Portable Network Graphics (PNG). Note both EPS and SVG are Vector image format and PNG is Bitmap format.

No knowing the difference then, I download all three formats. PNG being the bitmap format is ready to use immediately, provided you don’t need to scale the image.

EPS can be opened by Photoshop, but it act as like a bitmap, meaning no scaling up your image. SVG cannot be opened by Photoshop. So I have to find a Vector image editor.

Inkscape

Inkscape is a open source vector image editor that is comparable to its commercial counterparts, like Adobe Illustrator. I have not use a vector editor before Inkscape, so what I did below are from my own experiments. There WILL be better ways to edit a vector image with Inkscape.

This is not a full review of Inkscape, I am just gonna show you how I scale up my logo.

The main thing is the selection. There are two tools that can make a selection. There are the Select tool and the Path tool. Now, you will say, "Hi idiot, just use the select tool!" And you are right. But it is not that simple. When I was dragging to make a selection, it keeps moving the image.  And if you drag your selection square from outside the border, it just select the whole image without selecting the path.

Its so frustrating that I almost give up using Inkscape. But finally I got it.

You have got to double click on the image to select the image, THEN drag a selection from outside to select the path. See screenshot above. Now, you can upscale your image.

If this is the first time you see a vector image scale up, you’ll be very impress. Well, I’m VERY impressed.

(SVG scale up 600x)                                                  (PNG scale up 600x)

The contrast is not that great with this small screen shot. Click on each picture to get the full screenshot.

After I scale to my needed size, I will export to png for use in Photoshop.

The final product

For the background image for the header, I went to the free stock photo site Stock.XCHNG to search for suitable image. I use this:

I flip it vertical and horizontal. Then I cropped it to the final size of the header. Finally, I incorporate the BlogMunch Logo onto the background.

Now comes another difficulty that I have to overcome. How to take out the white background and make it transparent, so that it could fit into any background.

The most common way to do this would be to use the magic wand to select the background and then delete it. This will create a white halo around your logo when you put onto any non-white background.

I Google for more information. Some of the advanced methods requires masking which I am not familiar with.

Here’s what I do.

1. Magic wand the white background.
2. Color pick the correct yellow from the above image.
3. Fill the selected white portions with yellow.
4. Magic wand the yellow background with a slightly higher tolerance.
5. Invert selection and move the logo to header background.

If you look closely, you can still see a slight halo around the logo. But this is better than moving from the white background.

I would appreciate it if anyone who have a better and simpler method to have a transparent background without the halo, comment or email me to tell me. Thanks a lot.

Well, here is the final image. Please give your comments or critique my header, so that I can improve next time.

 

Will design another one when I have the time. Subscribe to the BlogMunch Feed to be the first to see it.

How I design the new BlogMunch Logo? Part 1

(Disclaimer: I find my newly designed logo vaguely familiar. It could be a logo I have seen somewhere. Yet I must say I design this myself over the weekend. If there is something similar anywhere in the universe, it is purely coincidence.)

I am a cheapskate. I don’t wish to spend money on stuff like logos and theme as the income for this blog is bare minimum. But I do want something different and unique for my blog, so I decided to design my own logo. The two inspirations and workflow of my logo design comes from Gary Simon and David Airey.

Message to convey

I would guess “unique” would be the keyword. I am quite sick of looking at Web 2.0 logos with reflections all over the place. The other thing I consider is printing. I would like to print my logo on a T-shirt, so that I can vainly wear them all over the place to promote BlogMunch.

I did not thought much about the color scheme, though I would prefer red or orange within the logo. David Airey would have recommend I sketch out some design ideas first on pen and paper. But I can’t draw to save my life, so on to the typeface.

Typeface

Next I open a word document to try out different typefaces I like. I did one for all capitals and one for all lowercase.

I mix and match the fonts. I am trying to separate the word “BlogMunch” into two entities. The recent trend is mixing CAPs and lowercase. Using different colors is also popular. But I want more than that, so I use the plus sign, dot and pipe as accessories.

The above are several examples I come up with. I choose the one on the top left as there is a classy feel to it. The two fonts used are and .

At this step, you might want to ask why I did not do this in Photoshop. There are two reasons.

1. It’s hard to list out all the fonts in Photoshop for comparison.
2. I am not that good in Photoshop. Navigating and Cut&paste within Word is easier.

The Logo

At first, I wanted to have a picture of a mouth as basis for the BlogMunch logo. But most of the pictures I find are quite disgusting (I pity a dentist who have to look at these everyday) and I can’t find a good way to integrate it with the letters.

The Caterpillar came about when I type “munch” into Flickr. There are very high quality pictures of caterpillars in Flickr. I download a few and try it out with the letters.

(credit: MrClean1982)

This picture of a black swallowtail munching is my final choice. The main reason being the caterpillar is isolated with a homogenous background, it is easier to select out the subject. Of course, the picture itself is amazing.

After trying different configurations, I settled on the caterpillar on top. The Japanese characters are there as a sudden inspiration to fill up the bottom half, as the logo is too top heavy. Guess what do the characters mean?

The next step will be to vectorize the logo.

So ends the first part of my journey to a new logo design. How do you like it so far?

Click here to go to “How I design the new BlogMunch Logo? Part2″

Technorati Tags: logo design, caterpillar, fonts

Subscribe to the BlogMunch Feed so that you don’t miss any post.