Here are some banner designs made last year for the British Chinese Network who are a volunteer group in Manchester. These banners are used for their social networking page.

The client wanted individual banners for their various events and in different banner sizes. I designed the long rectangular banners first and then re-adjusted the graphics to fit in the tighter square dimension.

In illustrator, I used Clipping Mask Tool to make an image photo appear inside a shape, this was done by selecting the 2 objects, right clicking and choose ‘Make Clipping Mask’, also making sure the shape object is arranged above the image for the mask to work.

British Chinese Network | BCN – www.e-voice.org.uk/bcn

Tags: Banner, Illustrations.

I’ve just finished a project that I had been working on for about 4 weeks on and off, It’s a sample web page site for a made-up musical instrument company.

I wanted to create a site that was dynamic and interactive. My main focus was initially on the design of the website and a product brochure to follow, but I quickly realized I didn’t have any materials to work on and I didn’t want to use any existing product images due to copyright infringement, so I decided to use the 3D skills I have and quickly came up with a mock-up design in 3Ds Max, this took just over a day to model and render.

So after the RKHOS was born; I had something to build on and I used the rendered images to create a simple flash banner and the 3D model to create a short video ad. Premiere was used to edit the clips together and the audio was added in using a simulated piano software, since I don’t own a usb midi keyboard, I had to resort using the mouse to play the notes; hence the poorly played 1 note tunes.

For the brochure I used InDesign, I went for a vibrant dynamic look to add a bit more character and appeal to the pages. I used paragraph styles and columns to keep it clean and consistent looking. I exported it in pdf and swf format with the interactive page curl tool which is a cool feature in InDesign.

The design of the site had to be simple to navigate with all the information easily accessible but also include some sort of visual impact to give a nice user experience.

I had been learning a bit of JQuery in the early stages of the site design and found it to be a powerful yet fairly easy tool to use. I applied what I had learnt and used it on most of the dynamic parts of the site such as the faded transitions of the images and the tab menu buttons.

I used the fairly new HTML5 video and audio player functions to implement the media files into the site. First I had to convert my media files into the right compatible format for HTML5, for this I used Miro Video Converter which is a great simple to use open-source software.

I kept all the media files at an optimal file size to create a quick and smooth viewing experience with as little loading time as possible. The total file size for all the images is under 200KB which was well optimized but the problem I had was the video file is over 1MB which wasn’t ideal. So I did some research and found the preload=”none” function which tells it to start the video download only once it’s been activated.

The web page is quite media-rich in content and my aim had been to get it under 1mb in page size. I’ve tested the page loading site using some of the web tool sites and it calculated the web page size to be 532KB on one reading and 720KB on the other which was what I had hoped for and it’s all helped by the small preloading code.

I’ve tested the site on 5 of the main browsers and surprisingly I didn’t encounter any major compatibility issues, the JQuery script worked fine on all of the browsers which was great. I also checked on the older IE and it worked near perfect on all versions even on IE 6. HTML5 video and audio doesn’t work on IE 8 and lower but I have added an alternative hyperlink to the media files which shows up on the old versions. The drop down menu on the navigation also doesn’t work but the solution would be to create a separate page for each main category link.

I’m pleased with the final piece, it involved applying some of the things I had learnt in the past and also a few new things like HTML5 and JQuery which I think I’ll be using a lot more often now.

Tags: 3D, Banner, CSS, Flash, HTML, Indesign, Interactive, JQuery, Photoshop.

After a few suggestions made from viewers of this banner, the following are a number of changes in response from it and some of my own improvements:

01. Bingo ball redesigned into more standard appearance.

02. Added presence to the ball by additional soft white gradient.

03. Added glare for the effect of reflective surface.

04. Added night time for better visual.

05. Added transition from start to end for better continuity.

06. Added details to trees and umbrella for continuity overall.

07. Added reflection of bingo ball in the sea.

08. Added bingo ball drop sequence for nicer ending.*

09. Font changed on the text for better suitability to theme.*

10. Gradient colour changed on the sky for better visual.*

11. Longer scene with text set longer for easier readability.*

12. Redesigned Branding for better suitability to theme.*

(*own improvements)

*Update 02/08/2012 – Branding changed and colours altered*

Tags: Banner, Flash, Revised, Vector.

Another banner recently done in the wide skyscraper format (160×600) at 50kb file size.

The concept came about from wanting to create something that looked commercial and seasonal. Also the fact that I enjoyed creating the winter banner, I wanted to do something along the same line.

The tools used were mainly gradient fills with motion and shape tweening. The sparkle effects on the sand and sea were created with just a white stroke set with a custom stripple type.

The trickiest part was trying to make the numbers move convincingly. The method was warping it first using free-transform tool and then adding a hint of gradient and transparency to give it a better result.

The crucial part was getting the timing of the text to appear right, this was important visually and functionally as I wanted viewers to follow the sun move up and then lead them to the branding and the slogan.

This was another enjoyable piece of work to do and I think the outcome is a believable advert banner.

Tags: Banner, Flash, Vector.

I’ve created this flash banner during university as part of my 2nd year web module. It’s in a wide skyscraper banner format (160×600) at just over 100kb in file size.

Several types of tween were used to create the different elements of animation on the banner. Motion guide was applied to create a path for Santa Claus to move from side to side and on the snowflakes, Alpha was used to create transparency and a gradual fade.

While I was creating this piece I had considered how the viewer would observe the banner and where would the eyes be looking. The movement of Santa Claus will help draw the viewer to look from the top of the banner, across to the slogan in the centre and then at the bottom where the branding is located.

Since it is a banner that repeats itself continuously, I tried to put lots of small details in to keep it visually pleasing and interesting for long periods of viewing.

I think this commercial banner could be universally applied to most branding as it’s visually clean and simple. I’m very pleased with the end result as it’s subtle and yet interesting at the same time.

Tags: Banner, Flash, Vector.