How To Make Logos & Banners For Your Website

This tutorial will explain in detail how to use our free website creator to make your own header logos and banners. Before we begin, you should upload one or more quality images you want to use to your Doodlekit image library. If you do not have any, you might consider purchasing some stock images or photos from some place like iStockPhoto or Shutterstock.

When you first login to your website, you will see a red 'quick edit' at the top of your page called "Header Image". Clicking this button will bring up the following dialog box:

Making A Logo

There are three types of header images you can create: Logo, Banner and Banner With Plates.

How To Make Logos

Making a logo is pretty easy with Doodlekit. After you select the 'logo' option, you will be asked to pick an image for your logo. You can pick an existing image from your image library, or upload one. Uploaded images are placed in your image library. After selecting the image you want, the image cropping tool will appear for that image (see below).

Making A Logo Online

Resize and move the crop area to capture the part of the image you want to use as your logo. If you want to use the whole image, just size the cropping tool to 100% of the width and height.

After cropping your logo out, a new dialog box will appear (see below). You now have the option to rotate, flip and resize your images. If you click the 'Add Another Image' button you can add another logo image. Having more than one image will create a slideshow.

Making Logos

Clicking on the 'resize' icon (the one with two arrows) allows you to resize your logo image. A dialog box will appear with a slidebar that will allow you to adjust the size (see below). Adjusting the size of one logo image adjust the size for all of them.

Make Your Logo

After picking all of your images you can tweak them even more by using the Advanced Design Tools. Go to:

Admin Tool --> Templates --> Advanced Design Tools --> Header (tab) --> Header Image --> Advanced.

Here you will find all sorts of options, ranging from borders, border colors, shadows, rounded corners, logo alignment, transparencies, and which side of the header to place your logo. You even have an option to 'tilt' your logo if you want.

Making Advanced Logos

When you make a logo online, it will look something like the image below. Note the title text in this example is on the right side of the logo with the logo aligned to the left of the header.

Make Logos

How To Make Banners

When you make banner images you do pretty much the same thing you do when making a logo. The only difference is that when it comes to cropping, the cropper will be set to 100% width of the image. You can still adjust the height  and move the cropper up and down, but the width cannot be adjusted. Also, you can not adjust the size of a banner like you can a logo.

How To Make Banners

Making Banners With Plates

Making a banner with plates has even more options. A 'plate' is what we call an image that overlays your banner. Below is an example of a banner plate image of some bamboo that overlays a header image. Plates overlay all images including slideshows.

Make Your Own Banner

The selected plate will show below the header image in your Advanced Design Tools. You can change the plate by clicking on the 'Change' button next to it. 

Make Banner

This will pull up a dialog box of all the plates we have to choose from. You can switch these out anytime you want.

How To Make Banner

Click on the 'Advanced' link to pull up plate advanced options. They are pretty similar to the logo options with the exception of one VERY IMPORTANT extra feature: 'Plate Color'. You have to pick a plate color for the plate to show up - be sure to do this!

Make Banner Online

In conclusion, learning how to make logos and banners for your website header is easy with Doodlekit. You can dive into the details of each as deep as you feel comfortable, without ever having to write one line of code. Enjoy!


Have more questions? Submit a request


Powered by Zendesk