Art, Design & Usability blog » Give your webjam a personality like no other.

 0 Comments- Add comment | Back to Design Blog Written on 11-Mar-2009 by Inactive user

Do you want your webjam to stand out from the crowd? Want to give it the edge over other’s websites? Well we cornered a top designer and asked them about setting up headers to give your site an extra bit of sparkle.

A standard header size on your webjam is 1000pixels (px) wide and 200px high. You can set the height in multiples of 25 between 100px and 300px. You don’t need many skills to turn the blank white background into a top class header. If you have photo editing software like Photoshop then that is a bonus. However, the template that we have set up can be run from paintbrush and that comes as standard on your computer.

header_guide1

Start by downloading your file from our site (see the bottom of this post) and opening it in your chosen platform. Save the document and go back to your internet browser. We’re going to use a designer’s best friend to make your site look the part.

Finding a Font

Visit www.dafont.com which is a font site with thousands of brilliant fonts for you to use. Have a look through these and find a couple that you like. Also take a look in the dingbat section where you will find some excellent resources to use as imagery on your header. In this example we are going to create an after school club site.

I’ve started by searching the ‘Kids’ section in the ‘Dingbats’ menu. I’ve chosen ‘Freaky’ and clicked download.

 freaky

For my font I have found an ideal typeface in ‘Cartoon’ called ‘King Education Centre’ again, I select download.

download

Adding your fonts to your font library

  1. Extract the zip files that you have just downloaded
  2. Open you font library and drag and drop using windows or choose ‘install font’ on a mac

Creating the header

Now go back to your header. The first thing you want to do is choose a colour and use the fill tool to colour the header.

 head-yell

Now using the type tool put in the title of your webjam using the font that you have just downloaded.

 head-title

Next to choose some pictures from your dingbats – they work in the same way as text, however a letter represents an image. Pick out a few and use them as you wish.

head-final

Save your file.

Now go back to your webjam and click ‘styles’ in the top bar and then ‘Customise style.’ Click on the ‘Change Image’ button and upload your header. Remember we set this up to work in 200px height so choose 200px in the height drop down.

That’s it, and your webjam is now unique and better still, it’s designed by you.

Take a look at the header I created here. And for those of you wondering I did create it using Paintbrush!

 

header 

 

Send to a friend

Comments

  • There are currently no comments for this post

You must be a member of the community to comment. Join the community or sign in if you are already a member.

 

Advertisements

Loading …
  • Server: web1.webjam.com
  • Total queries:
  • Serialization time: 313ms
  • Execution time: 359ms
  • XSLT time: $$$XSLT$$$ms