I wanted to create a website that presented information in a clear and easy to find fashion but that still showed my design abilities and personality. I liked the idea of making the background image the focal graphical element while layering the website information and interface over the top so that it can remain simple and easy to read.
To create the hummingbird design I converted the hummingbird itself to a vector illustration using Illustrator CS3 and the live trace tool. I then moved it over to Photoshop CS3 where I changed the hue / saturation so that it was the teal / orange colours and then added some depth and highlights with the burn tool. I also added in the long tail feathers by making paths with the pen tool.
Next I created the pink flowers and their stems and leaves. These are just simple paths created with the pen tool. Behind them I have used a mixture or leaf / flower brushes, gradient highlights and “dust” created with the dissolve blending mode.
I made the header look glassy in order to link the foreground with the background; so that the foreground content and background graphical elements were not completely removed from each other. I didn’t want the content to just be on top of the background.
There is still more that I want to do to the design of the website, such as adding some graphical elements to the background of the footer, but overall I am happy with how it has turned out so far.
February 23rd, 2008 at 11:44 am
Helen, just wanted to say I absolutely love your humming bird design - rich gorgeous colours and luscious lines.
The only negative is that I can’t see the whole of the art work in full.
February 26th, 2008 at 10:30 pm
Hi David, thanks for your comments.
I am hoping to complete the background image as a standalone piece sometime soon, maybe even as a wallpaper. So then you will be able to see all of it.