QUICK

START
GUIDE
Quick start guide with detailed instructions for using the
Toolkit and editing logos + graphics with Photoshop
 Getting Started

The Build My Brand Kit includes:

Build My Brand Brand Elements Epic Color Font Inspiration

Workbook Worksheet Schemes

Logo Kit Brand Elements Style Guide Social Media Kit

Starter Pack
Start Here: Build My Brand Workbook
The workbook is a great jumping off point for building your brand. It’s designed
to help you get crystal clear on your mission and vision so you can nail down
important things like your target audience, messaging/content, personality, style
and graphic elements, social media profiles, and blogging.

Brand Elements Worksheet View!

This is your brand elements headquarters, where you will document all of your
important brand deets including logo files, brand fonts + colors, social media
profiles, homepage message, About Page story and more. Use the checklist to
track which brand elements you have and which ones you still need.

To access the Brand Elements Worksheet, click here.

Epic Color Schemes

The Epic Color Schemes includes 14 color schemes with Hex codes and tips for
applying colors to your brand strategically, so that each color has its own job to
do. Use this for inspiration with your brand colors.

Font Inspiration Guide

This is a great resource of over 110 sans-serif, modern, script and handwritten fonts
you can use for your brand (96 free, 18 require a license). It also includes font tips
and font pairing examples for your website and social media.

Logo Kit
The Logos.psd file includes 10 done-for-you logos that you can customize to
create your own logo. Make sure you download and install each of the free fonts
on pages 4+5 before you use the template.

conversionminded.com © ConversionMinded 3
Brand Elements Starter Pack
BrandElements.psd includes various graphics and elements you can use for your
logo, website, social media and overall branding. You can easily paste any element
into the Logos.psd to replace the ones in there.

Style Guide
StyleGuide.psd is a visual template for documenting your brand’s global styles. Use
this to ensure consistency as you develop and grow your online presence.

Social Media Kit

Includes PSD templates for social media cover photos and share images, plus 14
additional photos to create your own images with. Make sure you download and
install Roboto (on the next page) before working with these.

Cover photo templates:

• Facebook
• Twitter
• LinkedIn
• Google+

Share image templates:

• Facebook
• Pinterest
• Instagram
• Twitter

conversionminded.com © ConversionMinded 4
Downloading + Installing Fonts
To edit Logos.psd, first download and install these free fonts:

GNUOLANE
http://www.1001freefonts.com/gnuolane.font

IKAROS SANS
https://befonts.com/ikaros-font.html

BROMELLO
https://befonts.com/bromello-font.html

ROBOTO
https://fonts.google.com/specimen/Roboto

BITTER
https://www.fontsquirrel.com/fonts/bitter

HENSA
https://www.behance.net/gallery/41089697/Hensa-Free-Brush-Script-Typeface

KARLA
https://www.fontsquirrel.com/fonts/karla

KING BASIL LITE

https://thehungryjpeg.com/freebie/44499-free-king-basil-lite-font/

LATO
https://fonts.google.com/specimen/Lato

conversionminded.com © ConversionMinded 5
PATHWAY GOTHIC ONE
https://fonts.google.com/specimen/Pathway+Gothic+One

LEAGUE GOTHIC
https://www.fontsquirrel.com/fonts/league-gothic

OSTRICH SANS
https://www.fontsquirrel.com/fonts/ostrich-sans

SOURCE SANS PRO

https://fonts.google.com/specimen/Source+Sans+Pro

SACRAMENTO
https://fonts.google.com/specimen/Sacramento

Photoshop Tips
Here’s a quick tutorial for editing Logos.psd. For even more Photoshop fun, I highly
recommend reading this tutorial on creating custom social media templates!

Working With Layers

Photoshop is all about layers, meaning that each individual element is on its own
layer. Type will be on one layer, a graphic will be on another layer, and even shapes
and circles/squares will have their own layer.

So instead of editing a text box by clicking directly on the canvas, you need to
select the layer from the Layer’s Palette first.

conversionminded.com © ConversionMinded 6
Layers are generally arranged into groups or “themes”. This makes it easy to track
and organize your work.

Logos.psd is an example of grouped layers. Each template is in its own layer group,
indicated by the folder icon. When you click the little arrow next to the icon, it will
open and you’ll see another set of layer groups for each logo variation.

To edit a logo variation, click the triangle next to the name and then you’ll see each
layer within the layer group. From here, just select a layer and you can start editing.

If the Layers palette isn’t visible, select Window > Layers and it will appear.

Pro Tip! I know I just said you can’t do this, but hey, you’re a Photoshop pro, right?
To access any layer directly from the canvas, select the Move tool (solid pointer at
the top of the Tools palette), then hold down the Control, Command + Option keys
(Alt on a PC) and click on the element.

The layer will automatically be highlighted and you can start editing. This is super
helpful when you have a gazillion layers and you’re not sure which layer your art is
on.

conversionminded.com © ConversionMinded 7
Editing Type
Select the type tool (“T” in the Tools palette) and click on the layer you want to edit.

Next, highlight the text you want to edit and start typing. You can also choose a
different font, size and color through the top palette.

Editing Colors
To edit the color of boxes, circles and lines, double click on layer (on the colored
box). The Color Picker window will appear. Select your new color and hit Ok!

conversionminded.com © ConversionMinded 8
Resizing Objects
If you want to resize elements other than text (graphics, borders, lines, circles),
select the layer or layer group and hold down the Command + T keys (Control + T
on a PC).

You’ll see four anchors appear. Drag the anchors while you hold down the Shift key
to retain the proportions.

Once you’re done, double click on the canvas to apply it.

Pro Tips: To resize more than one layer, hold down the Shift key and click on each
layer. If you make a mistake and need to revert back, select Command + Z. To revert
back another step, select Command, Z + Option (Alt on a PC).

conversionminded.com © ConversionMinded 9
Saving files
Once you’re happy with your new logos, the last step is to save them individually so
you can use them on your website, print, social media, and more:

Note: Skip Steps #1-3 if you are working with social media templates.

STEP 1) CREATE A NEW PHOTOSHOP DOCUMENT

Give your file a name, enter the size and enter 300 as the resolution. Make sure the
Background Contents are Transparent. Then save your new file.

To ensure the best quality for every application, save your logos at these sizes:

• Logo + submark: 1000 x 1000px

• Social media: 500 x 500px
• Favicon: 200 x 200px

conversionminded.com © ConversionMinded 10
STEP 2) COPY THE LAYER GROUP INTO THE NEW FILE

With the new file still open, go back to Logos.psd and right click the layer group you
want to save (place your mouse in the center of the layer group as you click).

Next, select Duplicate Group (or layer).

In the pop-up window, select your new file (in this case “My Logo 1000px”) as the
destination, then hit Ok.

conversionminded.com © ConversionMinded 11
STEP 3) RESIZE THE LOGO

Once the layer group is in your new file, you’ll want to scale it to fit the dimensions.

Don’t see your layer group? No worries! Most likely it’s hiding outside of the canvas.

When you duplicate a group into a new file, it places it in the exact same spot, so if
your original file is larger as in this case, it will place it outside of the canvas area. It’s
there!

To see it, just select Command T and Zoom Out (Command -) until you can see the
anchors. Then move the layer group into the center of your document.

To resize and fill the canvas, select the layer group and then select Command T.

Next, drag the anchors while you hold down the Shift + Option keys (Alt on PC).

Then double click in the canvas to apply it.

Pro tip: Toggle zoom in/out by holding the Command + or Command - keys.

conversionminded.com © ConversionMinded 12
STEP 4) SAVE YOUR NEW FILE

Woop woop! We’re just about finished. The last step is to save your file so you can
start using it (File > Save).

For Logos.psd, you’re going to save it as 2 file types:

1) PSD (a layered file to use as a master)

Select File > Save. Choose Photoshop as the file format and select your destination.

2) PNG (the file you’ll use for the web)

To save as a PNG, select File > Export > Export As… Make sure you select PNG-24
as the file type and check the Transparency and Convert to sRGB boxes.

Click Export All and save it where you like.

conversionminded.com © ConversionMinded 13
For social media templates, save it as these 2 file types:

1) PSD (a layered file to use as a template)

Select File > Save. Choose Photoshop as the file format and select your destination.

2) JPG (the file you’ll use for social media platforms)

To save as a JPG, select File > Export > Export As… Make sure you select JPEG High
as the Preset and check the Optimized and Convert to sRGB boxes.

Note: Saving as PNG and JPG file types will merge all of your layers into one, which
means you won’t be able to edit it. This is why you need the layered PSD file so you
always have an editable master/template.

Whew! You did it! Happy Photoshopping :)

conversionminded.com © ConversionMinded 14