A Crash Course in Custom Designs
This week I'm going to give you all a crash course on how to create a high quality custom design, without any coding or expensive design software using our Custom Style Editor.
The key points highlighted in this post are:
- High quality header image
- Easy to read font
- Cohesive colours
Many sites, like www.Flickr.com, provide images that are available for public use, called Creative Commons licensing. Flickr, in particular, has a huge database of member photos that you can search by entering terms like "crowd" or "turn tables" and save to your computer for personal use. The first step is to find a nice high resolution image. Click this link to search for the style of image you'd like in Creative Commons at Flickr. In my example, I searched for Northern Lights:
When you find an image you like, make sure to download the large size. The larger the image, the higher the quality. Smaller images are low quality and will look "fuzzy" or pixelated when you use them as a header. Since the image you will downloaded is quite large, you can use our live header editor, and the zoom tool to select a detail of the image as your header.
Many images look more visually appealing when the focal point is cropped. There are many free photo editing websites that you can use to do just that, and for this example I'll use Picnik.com because it is free, and no registration required. Just go to www.picnik.com and upload your Flickr image. After your upload is complete, you can crop the image to control the height for your header. I like to add headers that aren't too tall because some visitors may miss content they have to scroll to see. Find the crop tool under Basic edits, and use the constraint boxes to select the part of the picture you'd like to use for your header, and click Apply (as seen here):
A lot of images have varying shades and colours which makes it difficult to find a font colour for your header text that is easy to read. I got around this issue by adding a square to the image with a colour block to put my text over. To do this, click Stickers, and click Basic Shapes. Add a square, and change the colour to match any other part of your design (like the colour you plan to use for text, background, or even draw a colour from the image for a cohesive design) Here, I chose the green from the sky. You can use the Fade toggle under Sticker properties (seen below) to made the square more transparent so the image shows through. Now you have a good background to let your header text show up nicely.
Next, we add text. Click the Text button, enter your band name in the upper left hand box that says Type Here and click Add to place text. Click Add, and use your cursor to place the text over the shape you just added. You can control the text colour in the Text Properties box, I would choose a high contrast colour so it is easier to read, and also a font that is not too busy. A good font can make or break your whole design, but that is a whole other help article! In this example I chose Hockey Life font in White. You can add as many text boxes as you like to your image to add a subtitle, tag line, or even when your band was established. When you are done click the Save & Share tab and click Save Photo. Here is your finished product:
Now, go to your custom style editor (click Design & Options > Change Site Style > Custom Styles), and click the Header control and Choose Header Image, and upload your new header. Use the Edit link to position the header, and control the height.
In the Page control, you can control the width of your page (text area) and you can also select from our preset backgrounds in the Page section. In one of our next posts, Melanie has covered a section on adding custom backgrounds for your website (and creating seamless backgrounds ), but for this article you can select one of our preset backgrounds in the Library tab, or select a colour. You'll notice that text may not show up that well on an image, or your background may be the same colour as your content font. You can change the font colour in the Font menu (again, I would recommend a high contrast option to your background. This is another opportunity to pull from one of the colours found in your header image to make the design more consistent) or you can add a content area background as seen below. Just as in the Picnik editor, you can set the fade (also called opacity) so that the page background image shows through. This is an option in your Content control, just set colour to On from the drop down menu, use the colour picker to select the appropriate shade and change the opacity:
Click Save when you are done editing, and here is the finished product:
Would you like to see more design tips? Please provide your comments or suggestions below, we love to hear from you! We'd also love to see what you have created with the custom style editor.
Follow Us
Comments