How to create your Logo

You can upload an image in .jpg, .gif, or .png format for your logo. However, we recommend uploading your logo as a .png. The following article will walk you through creating a PNG logo for your site.

What is a PNG?

A PNG, or Portable Network Graphic, is a bitmapped image format that employs lossless data compression created to replace the GIF file format. Basically, that means it is an ideal file format for creating images with transparent backgrounds for use in your clickbooq website.

Why would I want to use a PNG?

Because clickbooq allows you to create and design multiple layouts which can vary in background color and/or patterns, transparent PNGs are the ideal file format, as they can adapt from layout to layout without any additional image preparation.

For example, the image below shows an example of a transparent PNG logo. As you can see, the logo blends seamlessly with the gray color of the website.

And here we have a standard GIF logo which was created against a white background. The logo does not blend with the gray backgorund of the website.

In fact, no matter what color you change the Site Color to, a transparent PNG logo will always blend perfectly with it's underlying background color.

How do I create a transparent PNG logo?

First, consider the Site Template you are using, which determines the placement of your Logo and navigation menu. For example, if you are using the Moderna template, which has a left-hand navigation menu, try to create a logo that is not too wide so it can fit within the left hand menu. And if you are using a top-down menu, try to create a logo that is not too tall, so it doesn't push down the rest of your site content. If your logo is on the same line as the navigation menu, like the Flow template, your logo should not be so wide that it interferes with your navigation menu.

Create a new file in Photoshop at a similar size that you would like it to display on your site. We recommend that your logo be a minimum of 400px wide. 

Note: if you are concerned with how your logo will appear on 2x-resolution "Retina" displays, create a logo that is about 2x the size you want it to be, then decrease its size in the Design Editor once it has been uploaded.

Here is an example of a horizontal logo. The checkerboard pattern represents transparency in Photoshop.

Now, create your logo or import your existing logo and size it to fit within the image dimensions. If you are importing an existing logo, your logo should not have any background fill (it should allow the checkerboard pattern to show through the parts of your logo which should be transparent). If it does, you will need to recreate your logo, or remove the background fill.

Here, we've made a simple logotype using the Type(T) tool in Photoshop.

Important: For best results, crop your logo so that you are exporting only the logo image and not additional transparent areas outside of your logo. Use the Crop tool to crop your logo image edge-to-edge.

Once your logo or logotype has been created, you need to export it as a transparent PNG. From the File menu, select "Export > Save for Web" (note: your version of Photoshop may have different menu names).

Be sure to select the PNG-24 option from the Preset pulldown menu. This will automatically select the Transparency checkbox.

Click Save, and name your logo to save it to the location of your choosing.

You are now ready to upload your logo to the Design Editor > Header panel, where you can use it in your website design.

Once uploaded, you can adjust the size and position using the Padding settings.