Branding

One of the major benefits that came with the Shore theme that I purchased was that it came with essentially a drag and drop, do-it-yourself branding editor. I could instantly and painlessly upload images that would be automatically integrated into the site. These images would be used as the logo in the navigation and also as the favicon for the website. The builder is really self-explanatory, clear and helpful. It offers you a list of things to upload and exactly what size and format would be best. Giving you two sizes for each object so that retina devices and standard devices would both be covered. This took such a major headache out of building the site and also really helped to create a strong brand identity/consistency. This is the branding builder included with the Shore theme:

As you can see there are step by step instructions and exact measurements to look out for. It tells you where and when each asset will be displayed and gives you recommended file formats. It is really helpful and like I said previously great for brand identity.

I used Illustrator to create all the assets and made up a neat little trick to make it a quick and painless exercise. I started by creating two art boards (Illustrators equivalent to canvases). I used the first one to create the logo/retina logo. That was pretty straight forward. However, as you can see there are a myriad of sizes required for the favicons and mobile icons (there are more favicon sizes requested further down the page I just couldn't get the screenshot low enough to get them in as well). This presented a lengthy and potentially not exact problem. I envisioned it being difficult to get all the variously sized favicons to look exactly identical. Then I came up with a method.

I started by selecting the Art Board tool down on the left hand side (it's the one highlighted 3 above the magnifying glass near the bottom):

I then selected the second art board which I had made at the exact size of the smallest favicon I required after creating the favicon as I wanted it and exporting it at that size:

Then if you look at the top of the screenshot you can see X, Y, W and H values. These are X and Y for position and then Width and Height. So all I had to do was unlike the link feature between the W & H values and adjust them to be the exact size of the next largest favicon I needed to produce:

Once the art board was re-sized I simply grabbed both the background and the letter N whilst holing shift. I could then use the bounding box to scale them. Whilst scaling from one of the corners I held shift to keep everything in proportion and held alt to make the scale occur from the centre. This meant I could avoid having to re-position the graphic each time and made it easier to get to fill the art board each time. Once I had done that I could export it at that size:

I exported them all out as PNG files just as the theme suggested I do. I had to make sure that at the bottom of the dialogue box I ticked the "Use Artboards" option and then selected "Range" and typed the number 2. This makes sure that I am only exporting the second art board each time. Once I had done that I was given another dialogue box:

It is important here that I make sure that the resolution is set to "Screen (72 ppi)". This is the resolution that screens commonly use to display everything and is the accepted standard. As a result it is also the resolution that I created the document in. If I had accidentally chosen another, higher resolution it would have the effect of scaling up the image a few times rendering it useless for that particular favicon. Keeping it at 72ppi ensures that the final exported image remains exactly the intended size.

Once exported I could then upload it and fill the branding sheet appropriately. As I mentioned this is a hugely helpful feature and after discovering this handy quick tip for resizing the favicon and quickly re-exporting it, it flew by.