New Branding + A Free Brand Board Template

Brandboard Template

If you’re a regular reader and you have an eye for design, you’ve probably noticed a few changes around the site. Previously, my site was built from WordPress’ Twenty Eleven theme. I’ve been working with Twenty Thirteen for a while now on clients’ sites, and have wanted to redesign my own using it. I’ve also grown a little tired of my old colour scheme, specifically the red portion, and I’ve grown very fond of blues and greens lately.

So, the other day when I had a spare moment, I decided that I would redesign. I came up with a new colour scheme with very similar colours minus the red, and changed the colours in my logo. I redesigned the site with very similar aesthetic, but just cleaned up a few smaller elements and added some new heading format to make posts easier to scan through. I also added a second menu – something that I’ve wanted to do for a while now.

White Corner Creative Brand Board

I also created a mood board for my site (something that I didn’t do the first time around) and created a new brand board. It just took a little bit of tweaking and now I’m truly in love with my brand and website. I also created a photoshop brand board template so you can create one for your own brand if you’re in need. You just need to subscribe to my newsletter to get access to the brand board template (as well as all of my other freebies and content upgrade). And below are also some instructions on how to use it. Enjoy!

Brand Board Template

Photoshop Instructions

Using this template in Photoshop is super easy, and it shouldn’t take you more than a few minutes to place all your content.

Step 1

Open the template in Photoshop. You also need to open the images you are going to use in your brand board – either in photoshop or any other program, or just online if you have them there. Then you just drag the images into your brand board photoshop document. This will create a new layer for each image.

Step 2

Next, in the layers panel, find the layer that you want to place the image in for. If you’re not sure which layer is which, you can show/hide the layer by clicking on the eye icon, and see what disappears.

Step 3

Next, we’re going to place the image in the area you want it to be in, for example, the Main Logo area at the very top. In the layers panel, drag your main logo image so that it’s the layer above the Main Logo box. Then, right click on the image layer, and click Create Clipping Mask. This will make it so that the image only shows through in the rectangular area. You can now move, edit, and resize the image within that area.

Step 4

If the image is smaller than the cutout area, this means that some of the grey will probably be showing through, and you don’t want that. So click on the layer with the grey rectangle, then click on the paint bucket tool, make the foreground colour white, and click on the rectangle. This will make the rectangle white so you can’t see it anymore.

Step 5

Then just repeat this for all the different areas. For the Colour Palette layer you just need to use the paint bucket tool to colour those rectangles in. The Graphics area can be used for icons like I did, or you could put images there that inspired your brand, or maybe textures that you’re going to use. You can change the title of that area by just double clicking on it in the layers panel.

If you have any questions or troubles using the template just comment below and I’ll try to help you out.

24 thoughts on “New Branding + A Free Brand Board Template”

  1. This is beautiful! Thanks for sharing;-)

    Can I ask you if the Babas font is the same that is called Babas Neue?

    What do you include in the graphics below in the board?

    Susanne

    1. Hey Susanne – thanks for reading! Bebas and Bebas Neue are essentially the same. Bebas seems to be just the bold typeface itself, while Bebas Neue has more variants like Book (thinner), Regular, Bold, etc.

      In the graphics at the bottom of the board I’ve included icons that I use throughout my site, but you can include anything from textures you us in your site, to patterns, to inspirational images.

  2. Oh, by the way…

    Does this mean that all you use for fonts is the Babas and the Open Sans Light? What about in the logo?

    Can you say a few words about the difference(connection between a logo and a header (not only for your design but webdesign in general?)

    Best wishes!

    1. I use variants of Open Sans and Bebas. They both have several different versions within the typeface themselves, like light, bold, regular, etc. In the logo I believe it is Bebas Neue Book that I used.

      I would say that, in general, you need to establish your logo first. Make it something that you love and that can work across many different platforms, situations, etc. For example you need your logo to work as a Facebook profile image as well as in print on a business card. It needs to be flexible. That’s why I recommend creating a few different variations of your logo ( You can see my post on it here – http://www.melissacarterdesign.com/why-one-logo-wont-work-for-you-and-your-brand/ ). I have a black and white version of my logo, a coloured version, and a translucent white version. I use them in various settings depending on what the project is and what the surrounding colours are. Once you have established your logo, you can then adjust it to look great as a header. Perhaps your logo on its own is simple and black and white (which is great) but maybe you decide that as a header it needs some colour, or it needs to be rearranged to be more horizontal. Your header is the digital embodiment of your logo. As long as people can look at your header and your logo and know that they are the same brand, you’re good to go. If you feel that your logo works as a header, that’s great! but don’t be afraid to adjust your logo to make it work for your site design.

  3. Hi Melissa! I just reread this post and I really like it;-) I would like to ask you which tools you use/ how you make a template like this in Photoshop? I would like to make something like it for other people to drag pictures over premade ‘shapes’ but I don’t know how to create the template. I am used to working in Photoshop but not an advanced user;-) Do you think you can say a few words on the process that will allow me to do something like this;-)?

    Kind regrads,

    Susanne

    1. Sure Susanne. It’s fairly simple – you just create the shapes you want people to be able to use in the template – one shape per layer. There should be no background on each layer, only the shape. Then when people follow the instructions of creating a clipping mask to that layer, the image will show up in that specific area only. When you finish your template, you want several different layers, one for each shape – then one layer on the top for the borders, and one for the numbers or template markings that people can hide once they’ve inserted their own content. Maybe I’ll make a tutorial on how to create templates in photoshop in the next little while to give a more in-depth explanation. Hope that helps!

      1. Thanks for your answer (and the ones on the other posts roday as well;-)

        A tutorial on this topic would be awesome!! In the meantime, your answer here made great sense (I know for sure when I start using it on my own, of course…;-)

    1. Hey Rick, if you sign up for my newsletter towards the end of the article you get access to the download of the photoshop file. Then you insert your images over the grey backgrounds using the steps provided.

      Unfortunately I only ever build my custom themes from basic WordPress themes such as Twenty Thirteen, so I can’t vouch for any of those.

    1. Hey Tiffany, sorry about that! I’ve emailed you a dropbox link to the brandboard template so you can download it from there. Let me know if you receive it okay!

Leave a Reply

Your email address will not be published. Required fields are marked *