Create a cute, text based blog header

February 20, 2011 By Dawn Farias

Are you a blog designer or blogger that’s stuck in a rut for a new design? Well, here’s some real world inspiration to get your design juices flowing. I have been noticing cards, magazine covers, digiscrap kits and store signs using chunky, sans-serif fonts* that have a slightly lowered opacity* so that when the letters of the text are stacked you get a neat see-through effect.

*Sans-serif means there are no dangly things at the ends of the text’s stroke while opacity is a term used for the level of transparency that something has.

Open your program of choice and create a blank document for your blog header. I am working with a 900px by 200px document with a resolution of 72dpi. The background is filled with white to match the body of my test blog and the font color is set to gray. I then choose Arial Black as a nice, fat, chunky, sans-serif font to work with and type each separate letter of my blog title on it’s own layer. This will help me later when I want to move each letter around individually.

Next, I use a grid to line up each letter:

Now, each letter gets a color change. The color palette I’ve chosen is the Midnight Macarooms palette from Design Seeds.

The fun starts here! I crowd the letters together:

And lower the opacity of each to 85%:

I could be finished here once I align everything and save. However, I want to add a few more effects. The letters each get an outer stroke (or outline) in white of 1px, a slight drop shadow and some tilting.

Loaded up on a blog it looks like this:

I hope you enjoyed this tutorial. Please leave a comment if you try this on your own blog – we’d love to see your work.