Logo variations, font files, & brand colors

Logo & Branding Instructions Logo & Branding Instructions Logo variations, font files, & brand colors

**Video coming soon!**

Until then, the instructions are below.


Hello, everyone and welcome to The Weekend Website! My name is Kim Bultsma and I’ll be your educator for how to build your website.

In this video, we’ll dive into

  • Logo variations you’ll need
  • Gathering font files
  • How to get your brand colors

Let’s get started!

Logo variations

I recommend that every business has access to their original logo files, which are typically in a vector format, like .PDF, .SVG, .PNG, or .EPS file formats. Keep those original files in a folder marked “original logos” and always make a new copy when you need to make adjustments.

You’ll want to have 2 sizes of your logo for your website:

  1. The Favicon, which is what we call the brandmark of your logo. Think of it as an icon that shows up on your phone for apps or in your browser bar when you visit a website. Here is ours (show it). I recommend using a 500×500 pixel size for this, and save it as a .png so the background is transparent. If you don’t have Photoshop, you can use a free app like Pixlr (https://pixlr.com/x/).
  2. You’ll need a horizontal logo that you’ll use as your banner logo. The size of that can be 400×100 pixels, and you can create it the same way we did as your brandmark with Pixlr.

Once you’ve created these files, keep them in a folder you can easily find when we start working on the website during the live class.

Font files

Next, you’ll need to gather your font files. These are the fonts that are used in your logo that we can use on the website. Some fonts may not transfer over, but we can match them as closely as we can. If you don’t know your font names, contact your logo’s designer and ask for those files. You can also use free sites like https://www.myfonts.com/WhatTheFont/ to upload a logo file and see if the font(s) can be identified. 

Don’t get too upset if you can’t find the font files. We can typically work around this, but it’s a nice added bonus if you can!

Brand colors

Finally, you’ll want to get the color values of your logo so that we can use those colors throughout the website for buttons, headings, etc. Simply open your logo with Pixlr and click on the brush icon toward the bottom left. Click on the white Color and then you’ll see an eyedropper beneath it. Click on that and move your mouse over the different colors on your logo and click on them. You’ll see what’s called a HEX value show up that you’ll want to copy into a document, indicating what color it is. Repeat this process with all of your colors. Keep this document along with your logo and font files so you can easily access it on the first day of class.

That’s all for this section! Thanks for watching.