Stacey

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.

Posted by Stacey on 09/09/2011 | 28 comments

Comments

The Walk of Shame
Posted by The Walk of Shame on Sep 9 2011 6:38 PM
not ready yet, but looks like I'd like to take a shot at something different when the time comes. Thanks Stacey!:agree:
The Shambolic Fools
Posted by The Shambolic Fools on Sep 9 2011 7:14 PM
I used the custom design editor with some logo's etc that I knocked uip in photoshop. I really like the result. It's very easy to use, which is perfect for me because I am useless at these things... Richie
gabegibitz.com
Posted by gabegibitz.com on Sep 9 2011 8:04 PM
WebTreats is also an AMAZING site to find background images: http://webtreats.mysitemyway.com/ And it's all free. :)
WWW.QUIETSTORMBEATZ.COM
Posted by WWW.QUIETSTORMBEATZ.COM on Sep 9 2011 8:15 PM
great info Stacey, thought Flickr was just for posting personal pics, didn't know they had such a service. I will definitely be checking it out.
Tim Henry
Posted by Tim Henry on Sep 10 2011 1:13 AM
Thanx Stacey, that looks awesome...and FREE! I'l give it a go ASAP
Angel Siren
Posted by Angel Siren on Sep 10 2011 1:33 AM
check out my site, www.angelsiren.com I photoshoped it up
Phantomime
Posted by Phantomime on Sep 10 2011 2:14 AM
This is great, my header is basically our logo. Is that fine?
Sandy Harless Music
Posted by Sandy Harless Music on Sep 10 2011 2:34 AM
AngelSiren, your website looks amazing and music is awesome too.
Rezlow
Posted by Rezlow on Sep 10 2011 2:59 AM
we did ours using the custom editor also. Check it out :)
ATM MUSIK GROUP
Posted by ATM MUSIK GROUP on Sep 10 2011 3:06 AM
I have a quick question. What is the correct size for a header. I use photoshop to design mine, but when i upload it - it's either too big or small
AC Media Services
Posted by AC Media Services on Sep 10 2011 5:06 AM
[quote="ATMMUSIKGROUP"]I have a quick question. What is the correct size for a header. I use photoshop to design mine, but when i upload it - it's either too big or small[/quote] I make them like this: Horizontal: 13.333 inches Vertical: Usually 3 or 4 inches, but it depends on what you want as far as the height of your header design. Hope that helps :) Aviad Cohen AC Media Services info@acmediaservices.com www.acmediaservices.com Bandzoogle Client Page: www.acmediaservices.com/bandzoogle
Etare Neged
Posted by Etare Neged on Sep 11 2011 5:04 PM
What are the dimensions for a background image when using the custom editor?
AC Media Services
Posted by AC Media Services on Sep 12 2011 7:20 AM
[quote="Melanie"]@EtareNeged This will depend on the look you want to achieve and if you are using one large image, or a repeating pattern. Most screen sizes now are 1024px wide or 1280px wide so you can keep that in mind. I’m going to be posting about this with more detail, later in the week. For the header, menu and content areas, they will need to be 960px wide. Thanks![/quote] Melanie.....I agree! 960px wide (which is 13.333 inches as I mentioned earlier :) This was something I initially you guys early on, since I didn't know as well. Thanks for pointing it out to the peeps! Aviad Bandzoogle Client Page: www.acmediaservices.com/bandzoogle
Fronz Arp
Posted by Fronz Arp on Sep 13 2011 1:43 AM
Hi. This is a cool tutorial. I've been exploring the customization capabilities of Bandzoogle a lot and using my own graphics and things so good pointers here Does anyone have any pointers for the layout of "features" on the page? I find it a little chunky. There's no way to use a more flexible, layers style of coding is there? where the boxes are more movable? Anyway, please check out my page and let me know what you think. Pointers always welcome x
Angel Siren
Posted by Angel Siren on Sep 13 2011 2:41 AM
[quote="SandyHarless"]AngelSiren, your website looks amazing and music is awesome too.[/quote] Thanks I appreciate it :)
Abby Feferman Music
Posted by Abby Feferman Music on Sep 13 2011 5:45 PM
Great post! It has definitely helped me a lot! Thanks!! :)
Factura 22
Posted by Factura 22 on Sep 14 2011 6:55 PM
Let me know what you guys think of my site. I created the logo, but I want to add an image instead.
RiZion
Posted by RiZion on Sep 16 2011 1:28 PM
[quote="AngelSiren"]check out my site, www.angelsiren.com I photoshoped it up [/quote] Your site is Dope...
BubbleGumOrchestra
Posted by BubbleGumOrchestra on Sep 18 2011 9:43 PM
Thanks for the great info!
Juan Figueroa
Posted by Juan Figueroa on Sep 20 2011 8:19 AM
AWESOME POST! Im looking to make something custom myself...
Volytion
Posted by Volytion on Sep 22 2011 4:16 AM
I cant seem to get my header image to align evernly with the page.... Any Ideas?
Juan Figueroa
Posted by Juan Figueroa on Sep 23 2011 6:51 AM
[quote="benstewartonline"]Hi. This is a cool tutorial. I've been exploring the customization capabilities of Bandzoogle a lot and using my own graphics and things so good pointers here Does anyone have any pointers for the layout of "features" on the page? I find it a little chunky. There's no way to use a more flexible, layers style of coding is there? where the boxes are more movable? Anyway, please check out my page and let me know what you think. Pointers always welcome x[/quote] "TESSA HATES HER BODY" is crazy bro!!! I like this style of musica.... the site looks good as well... i think i might dabble with this.
Juan Figueroa
Posted by Juan Figueroa on Sep 23 2011 6:55 AM
[quote="Factura22"]Let me know what you guys think of my site. I created the logo, but I want to add an image instead.[/quote] Logo is crazy bro! i think i may purchase an iPad now that ive seen how you guys use it... i never looked at it as aiding me musically lol.... nice, relaxing sounds...
Juan Figueroa
Posted by Juan Figueroa on Sep 23 2011 6:59 AM
[quote="RiZiometry"] [quote="AngelSiren"]check out my site, www.angelsiren.com I photoshoped it up [/quote] Your site is Dope...[/quote] YOO!! wuts goodii?? im from the X as well bro... im feelin ur header, how the foto on the header changes on every page... official
Juan Figueroa
Posted by Juan Figueroa on Sep 23 2011 7:00 AM
[quote="Melanie"]@Volytion, try saving your header image at 960px wide (it's at 925px wide now). If you are still having issues, email us through your Help tab and I will take a look. thanks![/quote] Melanie, you're the S#!T..!!!
AC Media Services
Posted by AC Media Services on Sep 30 2011 3:54 PM
Is there a free or paid service that would allow us to have slide images that we can add to the header of our sites? I paid for SnackTools.com for other things I use (Flash Video Players) but it's hard to use their Banner options or others, because they require a download and it doesn't work with BZ and they told me that, since I asked them to do research. I think BZ is going to have a slide header option in the near future, so I will probably just wait till that happens. Aviad Cohen AC Media Services info@acmediaservices.com www.acmediaservices.com Bandzoogle Client Page: www.acmediaservices.com/bandzoogle
AC Media Services
Posted by AC Media Services on Sep 30 2011 4:05 PM
For example - what are they using to do this top header at Max Graham's site? http://www.maxgraham.com/ It's not flash. When I check the source - it doesn't show flash. Your response is appreciated, Aviad
"FROM NOTHING TO SOMETHING"
Posted by "FROM NOTHING TO SOMETHING" on Sep 30 2011 6:02 PM
[quote="acmediaservices"]For example - what are they using to do this top header at Max Graham's site? http://www.maxgraham.com/ It's not flash. When I check the source - it doesn't show flash. Your response is appreciated, Aviad[/quote] I am also wondering how they did that at the top of the page! There is another website that has a cool slider at the top of the page but they will not respond when you ask them how they did it. One day I guess I will figure it out!