Veerle's blog

Finally we’re off for the third part of our CSS tutorial. Lesson 1, 2 are still available on my blog for those who haven’t been following from the beginning. This will be our last design part, after this it will be “slice and dice” time and the beginning of the XHTML and CSS conversion. Here are some details of the final result:

I chose for the pink green buttons, maybe a bit girly I know but I like the combination of the prink with the green.

Today we will create the entire template design. You'll get some tips and advice on how to create a header background, how add a finishing touch like ornaments, and a few resources on where to find those special Dingbats or ornamental fonts.

Creating the header background

In part I and II we created our buttons and chose our colors. Now it's time to look for a picture that contains the colors of your preferred color pallet to create the header background. If you look at my color pallet you see that we have green and pink. I decide to use only the very flashy fluorescent pink for the little accents (like the bullets in the navigation) and a darker cherry for my banner combined with pink and a little green accent in our icon.

When looking in my iPhoto collection I came across this picture (taken at Ibiza btw). Since the red of the flower is a bit too red I changed it to a more suitable pinkish color. I used Adjustments >Hue/Saturation (control + u Win, command + u for Mac), chose "Reds" (to change only the red color in my picture) from the Edit popup menu and set the Hue to +24.

Next step is choosing a nice detail that contains some suitable colors that might create an interesting effect. This will all become clear in the next step when we will be adding our filter effect. Creating this special background header will ask some creativity and it will need some experimenting until you get what you like. This is the part of the picture I think could be nice experimenting with.

The picture is of course reduced here, I started from a bigger image (1600x1200px). I added one of my favorites filters on it Filter > Artistic > Paint Daubs. In Photoshop CS it's really fun playing around with the Artistic filters since you not only get to see a live preview of the result, you also have an overview of all the possible effects shown by little thumbnail image. This makes it easy to play around until you have the effect you want. Here is my result:

This image is blended into my cherry colored background. As finishing touch I drew some lines (paths) using the Pen tool. I command (Mac)/control (Win) clicked the layer and used the Brush tool to color the border of my selection pink and I faded it a bit by using an Opacity of 30 for that layer. Then I duplicated this layer, flipped it a bit, rotated it etc. then again duplicate it etc.

Download a QuickTime movie to see how this is done.

I added a little ornament on the right (created with the font Tamuz). We will get back on the ornaments later on, but this is the result so far:

The title of our blog template

The title of your blog is something personal and I kind of like it when it has a little icon or logo. After all you want you blog to be something special, something recognizable, something you can associate yourself with etc. For this tutorial I chose a cactus, but to be honest further then the fact that I love cactuses it has little extra meaning. But my choice is also because this little icon suits perfectly in the design and the color scheme I chose. And finally, the font I used for my title is Bon Guia. Here is the final header:

Some links to get you started:

• Minion Ornaments, Tamuz, Klunder Script Kreatures, Big Cheese from Emigre
• Adobe ornamental fonts (like Woodtype Ornaments or Poetica Ornaments)
• a list of free Dingbats fonts

The final result

Further from the header and the buttons we haven't got any big challenges to solve. Let's implement all this together in one page and see what the final result is. The final touches are of course as important as the rest so don't forget to add a little icon or ornament. In my template I used a green Minion Ornament next to the title and I created little exit link icons for my favorite links. This doesn't look bad, hope yours look even better at the end and hopefully you had some fun creating it! Don't hesitate to sent us a url to share the result ;-)

Go to the next part of this tutorial.