Footfive Designs

Did you download a template, and you need to create a custom logo for it? Here is an easy way to use the templates colors, and create a matching logo.

Sometimes we are forced to use a premade template, though there is nothing wrong with this, we need to customize this template for our needs. The first object of business being the logo.

Most templates that you download should include the .psd files. But we aren’t going to need those. I will be making a logo for this Wordpress blog, Footfivedesigns, using the base template I got.

Starting Off

You’re going to want to apply your template to your blog, or upload it to your server, do whatever so that you can view your template in a web browser. We are going to take a screenshot of the template in the webbrowser, by pressing the “prt sc” key on your computer. This will take a screenshot of your template, now go into Photoshop. Go to file>New.

If you used the print screen correctly, the new document should have a full screen size, mine is 1024×768. Click okay, then press ctrl+v to paste your screenshot.

And this is how it should look in Photoshop

Now observe all the colors of the template. Which colors stand out, what colors are the different texts, what font styles are used, what colors stand out. I am going to pick 2 colors to use for my logo.

Zoom in to the top of your screenshot. I noticed the top links on the left, are 2 colors that look like they go great together. They reaccur throughout the template and are eye catching.

So using the dropper tool (press ‘I’ for shortcut), zoom in very close and select the grey color for your foreground, press ‘x’ to switch to your background, then select the orange. Here is what your colors should look like.

Now we are going to create the actual logo, using these 2 colors. Make a new document, and were going to estimate the size here. Were going to make our logo a transparent .png, that way it can inherite the background color of the template. So in reality, were just making some fancy text, and dropping it ontop of the old banner, to take its place.

A good way to estimate the size is using the screenshot image of the website, use the marqee tool and make a selection around the old logo, press ctrl+c, then make a new document. This document will give you a size, use that size, as your NEW logo size. Make sense?

I ended up creating a new document for the logo as 386×81px, with a transparent background. (this is important.)

Lets just straight up use an easy logo here, type the name of your website. Make one part of the logo text, your foreground color, and the other part, your background color. And this is the simple logo you will come up with, that will match your website. (BE SURE TO SAVE THIS AS a .PNG file or .GIF!)

Questions, post a comment and ask!