Friday, June 25, 2010
Blog Design from a Juice Label
I was inspired this week by a bunch of vintage soda bottle labels found on iDiy. I love the vintage type treatments, the color palette, and the illustrations. I thought they'd make a fun combination for a blog design.
For this design recipe you'll need:
•A fresh color palette with teal blue, sunshine yellow, spring green, cherry red, & a little black.
•A juicy script font. I chose Lobster- available for free.
•A strong serif font. I used ChunkFive- also free.
•A dash of a slim sans serif font. I used Cantarell- free again!
•Some vintage label shapes available free from Cathe Holden
•A vintage fruit illustration available free from The Graphics Fairy
•A few lines drawn in your editing program.
A blog design like this is broken up into four main parts. The template or code, the background, the header, & the blog elements. Whatever blog platform you use, you should be able to tweak the recipe to fit your own blog.
The first thing is the template- the empty shell of your blog. This recipe would fit for any style blog but I set this one up for a three column blog with the main content in the center and two sidebars. There are lots of tutorials floating around the web on how to customize a template so I won't go into it here. If you use blogger- check out this Squidoo page with some simple tips on how to customize your template. If you use Wordpress check out this custom theme generator.
Next up, now that you have your template set is the background. I used the teal blue color from the color palette. There isn't a pattern or anything in this background so you could just specify that you want the teal color as your background. You can check out a Hexadecimal color chart for help finding the perfect color for your background. You also should check out the CSS of your blog and match the fonts and colors of the post header, links, and other items to your new color palette.
Next, create your header image. I created this one in illustrator, but you could do it photoshop or other image editing program just as easily. Just open a new document to the size you want your header to be. Import and layer or draw the boxes, lines, text, & fruit images until you have your perfect design. I started with a yellow background and layered my lines and text and images centered on the main body of the blog. Use your inspiration juice bottle labels as a guide to see where you could add extra fonts or lines or image. Use the text sizing on the labels as a guide and vary the sizes of each of your text elements so your blog name stands out first. Export or save for the web as a gif, jpg, or png file to use as your header.
Side note on the fruit image above: After I downloaded it, I created a vector file from the image and deleted the extra lines and letters. Alternately, you could take it into an image editing software and erase the background, letters, and lines you don't want in your header. Save it as a transparent png file and you can import it to the top on your other header elements.
Finally, the other blog elements. This is where you get to pull the design into the rest of the blog. I used the vintage labels down one sidebar. They could be filled with text or images and used as links to pages, posts, buttons, or whatever you need. I used the script font as a sub-header image on the other sidebar to break up the text. Finally, I created a post footer out of the lines to continue that element into the body of the blog.
That's it! A blog design from a juice bottle label. Enjoy!