Your logo is probably one of the most essential components of your store's brand. We're going to go in depth in to how to format your logo to be used on the web.
We have an in-depth blog post about designing a consignment logo and how to communicate effectively with a designer. If you are still in the design phase with your logo, check out that blog post first!
Fun tip, if you feel that converting your logo is too difficult for you, you can just import it as a JPG and change the background of your navigation and footer to match the background color of you logo. This effectively fakes having a transparent logo.
Requesting A Logo From Your Designer
If you have hired a designer, they should provide you with a file for use on the web. Typically it comes in a PNG, JPEG, or SVG. We strongly recommend using a PNG.
If you are requesting a file from your designer, this is exactly what I would tell them:
Hey *designer name*,
I need my logo formatted for my website. According to the company that hosts my site, they recommend a PNG with a transparent background. It should be 72dpi and no wider than 500px. Can you do this for me? Thank you!
Formatting Your Logo Yourself
If you have designed the logo yourself and need help formatting it, here are steps that need to be take. We're going to assume you do not have any professional tools such as Adobe Photoshop or Illustrator. To accomplish this, we're going to use a free online PNG creator tool.
First, we're going to make the background of our PNG transparent. If your file already has a transparent background, you can skip these steps.
Navigate to www.onlinepngtools.com
Click on the very first option to create a transparent PNG. If your logo is a JPG, you may need to quickly format it to a PNG first. With the third option over, "Convert JPG to PNG,"
Find the file on your computer with your logo and drag it into the PNG maker.
What the tool is designed to do is find the background color and erase it from the image. For example, if your logo has a green background, change the color picker to as close a green as you can get. The preview will show you what parts of your logo are erased. This is represented by the gray and white checkered background on the right hand side. You may have to tinker with this to get it right. You can also change the color localization with the "Match similar color tones" to a number percentage. This will take the color you've selected and any similar colors in your logo. In our example, our logo has a pure white background color so it's really good at finding and erasing the background color.
Once you feel like it has removed the background pretty well, save the file to your computer.
Next we need to resize it. In many cases, an image file is way too big for a logo. So we're going to shrink it down. This tutorial is also done on a windows computer. On Mac, the process is very similar. Just using Preview instead of Windows Photos.
Find your new PNG on your computer and open it. This should default to Windows Photos.
Verify that the background is now erased. You can do so by clicking "Edit & Create," and "Edit." If done properly, the background will appear dark gray as in the example below. You can cancel and go back.
In the upper right hand corner, select the ellipses (three dots) and select "Resize."
Select Define Custom Dimensions.
This will now show you the current size of your image in pixels. Depending on your file, it could be very small, or it could be thousands of pixels wide.
Make sure "Maintain Aspect Ratio" is checked. Change the horizontal pixel count to 250. This will automatically hold the proportions of you logo but shrink the overall size.
Save the resized copy to your computer.
Your logo is now appropriately sized and can be uploaded to the Ricochet web store!
Recommended Specs
Wide Logo
Export it as a PNG with a transparent background. The width should be between 250 and 500px.
Tall or Square Logo
Export it as a PNG with a transparent background. The height should be between 150 and 300px.
With square or tall logos, they can easily take up a lot of space on your visitors screens. A navigation for a website is typically meant to be more wide than tall. So if you have a really tall logo, it will feel really dominating over the rest of your content.