Today, we are going to design the logo for the WordPress blog we are creating. As you might know, Project WordPress evolves around an actual blog we were asked to design. What we are also revealing today is where you can find the blog and see it in live action.

So far, we’ve covered the following parts in Project WordPress:

Part 1: How to install WordPress

Part 2: Eight dead essential WordPress Plugins

Part 3: 10+ recommended WordPress Plugins

Part 4: Creating your blog layout.

Part 5: Logo design

This is what we have after the last part (click on the image to enlarge):

…and do you want to see what we are going to create? Right, we knew it. We have to let it out.

Introducing a Blog

Okaaaaaay, here goes. The blog design we created is for a person who got into blogging and was looking for a nice and special WordPress theme. The blog was supposed to stick out from the rest. It had to look like her, and communicate within the same lines the content she writes does, and support her style. The blog is about women in business, and the blogger herself is is a business woman who is very successful as a private consultant.

In the past, she has worked for big companies and earned her spores there. A couple of years ago, she ventured into starting her own business as a consultant, which proved to be the right step to do, as she explained to us - and she is blogging about her exciting experiences right now, over at her blog for women in business.

Yeeees, we want to introduce her first before we give you the link! So this business woman is now writing on her blog - here comes the link - for women in business, and you are cordially invited to follow her on her ongoing quest to find the best way of life as a private business consultant, who not long ago met the love of her life. She blogs about balancing work and private life to get the best of both worlds. She is also very health oriented and likes to share some very tasty fruit drink recipes, dirty laundry, and the role of women in business, and much more. It is really worth a read. Please pay her a visit and kindly leave a comment on her blog if you like what she writes!

Oh, and yes, the blog’s name is Bunny got Blog. Here is a screenshot:


Now let’s cut to the chase and show you how we designed the logo. We’ll start with Illustrator and then move on to Photoshop to finish the design. In the following parts of Project WordPress, we’ll design the blog header and body, go into styling with CSS and coding with PHP.

Why design a website in Illustrator?

We anticipate that you might ask this question because this is a hot matter in web design. Photoshop, after all, is a pixel based application and Illustrator is a vector program. Websites are pixel based. Then we also have Fireworks, which combines the two.

While we don’t do as much in Fireworks, we tried both approaches (Illustrator and Photoshop) for web design, and came to find that the former is best not only for creating wireframes like we did in the last part of Project WordPress, but also creating styles and doing about 75% of all work. Then we take the piece to Photoshop where we polish the design and finish it off. We will show you how we do this in a minute.

There was a post over at Smashing Magazine about this exact topic. While the post was one of the shortest we ever read, and didn’t explain much, the discussion happening in the comments made up for that and there were people stating a variety of opinions. The Photohop party said that you can’t be pixel perfect in Illustrator. The Illustrator gang said that yes, you can, you just have to know how. Well, we agree with the latter and we’re now going to show you how to design a website in Illustrator.

Let’s create the logo.

Logo Design

Note: this tutorial is written for Adobe Illustrator CS3 for Windows, but of course, you can also follow if you have an earlier version, or even a different vector design application. If you are using Mac, Ctrl is Cmd and Alt is Opt.

The logo is always a very important part of the whole blog design. And that’s not only for blogs, of course. Naturally, we have to pay attention to executing the logo perfectly, and making it unique. While there are lots of things to know about identity design, we are not going to go into the complete process of researching the market and the business, sketching ideas on paper, using psychological findings in the design, and creating a whole Corporate Design. That would blow the scope of this tutorial. Instead, we are going to start at a point where all of this has been done already and focus on the execution.

This is how the logo looks.

The font has a boldly look, yet communicates a rather innocent and young approach. This is what Bunny had in mind - don’t be too serious, don’t be too marketingish, don’t be too modern, web 2.0, or slick. Be rather natural and have a wink in your eye.

Step 1: Illustrator

The typeface we used is Kleptocracy. It’s a free font. Download it here for either Mac or PC and install it on your computer. Fire up Adobe Illustrator, and open a new document.

• Type “Bunny got Blog” on the blank screen, using the font provided above:



• Hit Escape to finish editing, and hit Ctrl+Shift+O (the letter Oh). (Alternatively, you can also right-click, with the text still selected, and select Create Outlines. Alternative commands (menu usage - basically detours) are shown in italic text in this tutorial.) This converts the selected text to paths.
• Hit Ctrl+Shift+G to ungroup the single letters (Right-Click > Ungroup).
• Regroup each of the three words so that you end up with three groups.
• Pull the word “Blog” under “Bunny”, and align both words to the right using the Align Objects controls. If it is not active, you can find this tool palette by pressing Shift+7 (Window > Align):



• Downsize the word “got” until it fits right in the space between “Bunny” and “Blog”. Give it a little air to breathe.

This is how your canvas should look now:

We can already begin to see the vast outline of our finished logo design. Very vast.

Step 2

Now we need to do a little bit of “pixel work”. That means we zoom out and take a good look at the comp, then we zoom in and work a bit on it to make it professional. This involves, first of all, aligning the letters to each other to give the comp some balance and structure.

Right now, it doesn’t have that structure, as we can see in the following visualization.

The single letters have no point of reference. “Blog” is swimming under “Bunny” with no align or orientation (red), the space between the characters isn’t well kerned (blue). In order to make the logo appealing, easy on the eye and somewhat memorable, we need to correct that.

• Ungroup every letter by selecting all three words and hitting Ctrl-Shift-G (Right-Click > Ungroup)
• Zoom in to the “y” in Bunny. We will narrow the space between the “n” and “y” by selecting the former and hitting the right arrow on the keyboard once or twice. And one more time. Do this with the keyboard because you can see the changes directly. Make it a point to zoom out and look at it, or open a 2nd window with a smaller version (Window > New Window). Try to find the right proportion between positive and negative space.
• Once you think that you have the appropriate kerning for “ny”, use this little trick: Draw a small rectangle (M) that is exactly as wide as the negative space between the characters. You now have the kerning and can drag your little rectangle to the left, using it as an indicator to adjust the rest of the characters:





• Hold the Shift key while you drag the character to the right, it will lock the movement to one axis (here: horizontically).
• Repeat this for the other characters in the word “Bunny” until you are happy with the kerning. Use the red guide blocks rather as a general indicator than as an absolute rule. Keep in mind: it has to be harmonical and follow a rhythm. Check out the Rules of Composition in Design over at Nubloo’s Graphic Design Blog for a more in-depth description of this.
• Align the characters in “Blog” to “Bunny” to give the design some structure and stability.

Our logo mock-up should now look like this:

…and here’s the before-and-after:

Right, the changes are marginal, but that’s what makes the difference.

Step 3

The word “got” has got our attention now. What we did was equip it with a little swoosh (yes, maybe that’s a too fancy word for that) which prolongs the letter “g” a bit to the right. This adds some movement to the logo design.

• Zoom in deep, ungroup “got”, and deselect it. Drag down two horizontal guides from the ruler (Ctrl+R to see it), and position them according to the part of the character you want to prolong to the right:



• Draw a rectangle (M), keeping it in between the guides. Here’s a little trick you can use to align the rectangle perfectly, without having to be too precise with the mouse. Start drawing the rectangle in the upper half of the guides - just make it higher than 1/2 of the height:



• If it has no fill yet, fill the rectangle with black. Now, with the selection tool (V), select both the rectangle and the lower guide by dragging a selection box around the two (if you can’t select the guide, right-click on the canvas and deselect Lock Guides). Then simply align the rectangle to the guide (Vertical Align Bottom).

Then, deselect the selection and with the Selection Tool (V), click and drag the rectangle upwards a bit - not too high - holding Alt+Shift while you do so. Alt will duplicate the form, Shift will restrict the axis of the movement:

Now we can align the duplicated rectangle to the top guide.

Our two overlapping rectangles now have the perfect height, so now we just have to combine them to a single shape.

• Deselect everything and select only the two shapes.
• Open up the Pathfinder (Window > Pathfinder), if not yet open. Hold down the Alt key and click once on the first tool, Add to shape area. This makes a single shape out of the two rectangles:

Step 4

Now we need to adjust the length of the rectangle and give it a rounded corner at the bottom right.

• Pull out a new vertical guide from the ruler, and place it at the rightmost border of “got”:



• Select our rectangle and align it to the new vertical guide.
• If necessary, scale its left border back, so that it overlaps with the “g” again:



• Zoom in to the right border of the rectangle. As we see, the Pathfinder tool left a few unneeded anchor points when joining the two shapes. In order to get rid of them, select the Pen Tool (P) and delete the two redundant anchor points by clicking on them:

Now let’s make the rounded corner. For this step, we need to hide the guides first, as they would only be in the way - don’t just delete them, we’ll need them later.

• Right-click on the canvas and select Hide Guides.
• Get the Direct Selection Tool (A), and select the lower right anchor point of the rectangle. Drag it to the left, holding down the Shift key again, so that it stays on its axis:




• Get the Convert Anchor Point Tool by hitting Shift+C and dragging a handle (direction point) out to the right. Don’t drag too far; use the “t” above for reference:

Don’t be confused by the descriptive text in these screenshots getting bigger and bigger ;)

We now have our rounded corner. What else?

Step 5

Oh yes:

We need to remove that roundness, because the “g” loop has to surpass that part and go straight through into its long arm.

• We’ll use the Pen Tool (P) for this one. First, bring back the guides: right-click on the canvas and deselect Hide Guides.
• If we want to remove the “rounded” out of “rounded corner”, we need a reference point. So we drag a vertical guide out and position it like this (arrow):



• We can now lock our guides, but leave them visible. We will add an anchor point to the “g”, by selecting it (V) and, with the Pen Tool (P), clicking once on the path, right here:



• And now, we pull our newly created anchor down and to the right (A), until it sits right on top of the intersection of our guides:



• Using the Convert Anchor Point Tool (Shift+C), we simply take the existing handles of the anchor tool and, holding down Shift once again, align the left handle horizontically, and the right handle vertically (we hid the guides for better visibility):




• Now that we have a sharp corner, we only need to put the above anchor point in place. With A, drag it to the right and slightly to the top, so that the round path of the round belly part of “g” isn’t interrupted (the guides are visible again):



• And, again with Shift+C, drag the right handle down while you hold Shift, to align it vertically:

…et voilà, we now got “got”.

Zooming out, this is what we have now:

Ok. The next steps to finish our logo in Illustrator are quickly accomplished:

• Select both the long arm of the “g” and the “g” itself, and combine the two shapes to a single one by using the Pathfinder palette.
• Group the three characters of “got” with Ctrl+G.
• Check to see if “got” is aligned correctly and has the right size among the other two words “Bunny” and “Blog”. We scaled it up slightly.

So far, our logo design looks like this:

Now we only need to add some color and the thick border to the design.

Step 6

The border comes first. In order for the logo to look like a badge, and not like text with a border, we’ll use a few tricks.

• Group all elements of the logo into one group with Ctrl+G.
• Copy the selection (Ctrl+C) and paste it right on top of the original (Ctrl+F) (note that Ctrl+V pastes in the middle of the artboard, but Ctrl+F at the same position of the original).
• Immediately hit Ctrl+2 (Object > Lock > Selection) to lock the shape on top. This will be our original, we won’t change that.
• Click once on the shape again (V) to select the shape below the locked one.
• Hit Shift+X (Toolbar: Swap Fill and Stroke) to do just that.
• Change the color of the stroke to a light gray. This is only temporary, so that we can actually see something.
• Increase the weight of the stroke to 20px, and give it a round join (F10 to see the stroke palette, or Window > Stroke):

We now need to turn the stroke into a fill, and remove the holes in its surface.

• With the stroked path still selected, go to Object > Expand… and expand the path with the standard options.



• We now have lots of shapes, one per character. We don’t want that, so we combine all of them with the Pathfinder, holding down the Alt key while doing so:



• There are some holes in the form which we need to fill: Right-Click > Release Compund Path, then repeat combining the shapes with the Pathfinder.

That did the trick. Now we just need to prepare the design for Photoshop, where we will be adding some texture and other effects.We will add some color to the logo - to be more precise, the background gets a minor dark blue gradient and the text will be a solid white.

• Hit Ctrl+Alt+2 (Object > Unlock All) and select the inner text. Click once on the Gradient Palette. Now every letter will be filled with a gradient from white to black. We don’t want that, so what we need to do is tell Illustrator “hey, we want the entire text to be treated as one single shape”. How?



• We need one object instead of a grouped many, so we first ungroup them (twice because the words are goups themselves too), then we Make a Compound Path. Note that the right-click menu doesn’t show this option in this case, because the letters B, y, g, l, o are compound paths themselves (there is an enclosed negative space). So Illustrator only offers us to release the existing compund paths. A good idea, if you want to speed up the workflow, is creating a shortcut for this - for example, we use Ctrl+8 to make a compound path, and Ctrl+9 to release one.

So let’s add color:

• With the new compound path selected, fill it with white. Give the background shape a gradient from #009EE0 to #172983, using the above angle. We end up with this:

There you have it, we’re done in Illustrator. Save the file as a normal .AI file and let’s go to good old Adobe Photoshop.

Step 7: Photoshop

We will need some brushes to add texture to the design. Go to Ruslan Julbarissow’s website, where he shares quite a few great Photoshop brushes for free download. We will need the fractal light brushes for the logo - and for the header in the follow-up tutorial as well, so download the free brushes and install them in Photoshop.

Now open up the .AI file with our logo. An “Import PDF” dialog pops up - make sure you crop the image to Crop Box, check Anti-Aliased and set the resolution to 72 pixels per inch. If you were developing for print, this would be different. If you were developing for both print and web, this were different as well. But BunnygotBlog.com is a web-only identity, so we need 72 ppi.

Hit OK and Photoshop will open up our vector file as a rasterized version. Again, instead of opening it this way, we could have imported the logo as a smart object, but we don’t need that right now and that would be a subject for a further post. What we’re going to do is simply add a few effects to the existing design: some texture, using Photoshop brushes, and a drop shadow.

The texture comes first.

• Select your Brush Tool (B) and add your brand new Photoshop brushes to the brushes palette via the Preset Manager. Here’s a quick tutorial on how to install Photoshop brushes (also along with another free brush set, by the way). Select the brush of your choice; we need a distorted, yet not too crazy texture in this case.
• Create a new layer on top of the logo layer, name it “lite texture”.
• Pick #84d0f0 as your foreground color, that’s a cyan hue.
• Now click - don’t drag - with the brush a couple of times across the logo (make sure you’re in the right layer). Don’t overdo it, just add some subtle structure:



• Now we need to limit the texture to the logo’s borders. Now if you’re thinking “Erase tool”, think no further but instead, click once on the bottom layer thumbnail (the one with our logo) while holding Ctrl and then click on the little white circle in the grey box on the Layers palette (Add layer mask). The Ctrl-Click on a layer will select all of its pixels and we will simply transform that selection into a layer mask on the “lite texture” layer:



• Now we will just set the “lite texture” Layer mode to Multiply, reduce the Opacity to about 60%, and apply a Gaussian Blur (Filter > Blur > Gaussian Blur) to the texture with a radius of 2.2 pixels:



• Next, we will repeat the same technique to add some darker texture to the blue background. So: create a new layer on top of the “lite texture” one, name it “dark texture”, set its blending mode to Overlay, and apply the same layer mask to that layer. (Make sure to click out of the mask and back into the layer after it is set.) Select the light brush of your choice, make it use a very dark blue or purple (we used #0f1b5f), and click the brush a couple of times over the logo until you have something you are happy with.



• Now we just need some highlights. So we repeat the same as in the last step, only this time with the color white. Make the brush a lot smaller; we won’t use the paint bucket method but the scalpel. Apply some grunge looking texture to select areas on the edges and make it look a bit dirty and worn. This is our final logo design:

…there you go. The drop shadow is not a necessity but due to the nature of the blog and the overall design it was added.

Logo Design: Complete

Phew, that was a long one. And just for the logo… We hope that it was helpful to you and maybe you learned a few techniques here and there.

In the next part of Project WordPress, we will take the wireframe we created in WordPress Project Part 4 and using both Illustrator and Photoshop, we will create the blog design. After that, we’ll venture into coding with CSS and PHP - which means we will be formatting the blog layout to fit the design and then customizing the WordPress theme to our liking.

Jump over to BunnygotBlog.com if you want to see the live blog. While you’re there, read a bit through what Bunny has to say, she definitely knows what she’s talking about. You can also make her very happy if you leave her a little comment and say Hi :)

So what do you think about the logo? Do you find it appealing, do you think it fits Bunny’s blog and style? Tell us what you think!