IMPORTANT: This guide applies only to websites hosted on our Legacy (pre-2015) Flash-based system. Click here to view articles for our current platform.
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, decide which Navigation orientation you will be creating the logo for: Left-hand or Top-Down. Left-Hand Navigations allow for logos up to 136x136px (WxH) in size, while Top-Down allows for 390x50px in size.
Next, you can download an existing logo template from the Support Site, or simply create a new image in Photoshop in the dimensions noted above.
Here is an example of the Top-Down logo template. 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.
Once your logo or logotype has been created, you need to export it as a transparent PNG. From the File menu, select "Save for Web".
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 the location of your choosing.
You are now ready to upload your logo to the Logos section of Layout & Style, where you can use it in your website design.