Enormouschicken Logo
Web Graphics Portfolio
Over the past two years I have taken the opportunity, both in my part-time job and during my spare time, to work on the creation of web graphics - such as buttons, bars and icons. This section presents a cross-section of my efforts along with brief descriptions of their purpose.
COMIT Bradford Disclaimer: COMIT has its own in-house web designer and as such the website layout is the responsibility of one of my colleagues.
COMIT Forum graphic COMIT forum graphic Two COMIT forum graphics I adapted from existing graphics. The one on the left indicates new posts, the one on the right no new posts. Both icons were created using Adobe Illustrator and Adobe Photoshop.
COMIT Favourites icon A 32x32 pixel icon that will appear in a person's favourites list so that they can easily recognise the COMIT site link. The icon was created in Illustrator to provide clarity on the 'C' and modified with a blend in Photoshop.
A very small version of the COMIT logo (shape modified for clarity) to be used on the COMIT forum. I decided to change the shape as the existing logo (see logos section) did not adequately compress to the desired size.
COMIT icon
Further COMIT project work can be found in the logos and other sections.
Positive Images Disclaimer: Positive Images has its own in-house web designer and as such the website layout is the responsibility of one of my colleagues.
Positive Image Profile Gel Tabs Three different tabs in three different states used on a set of profiles. Click here to view the graphics in situ.

The top one is the 'mouse over' state, the centre the 'normal' state and the darker one is the 'mouse down' state. The images are pre-cached as one file and a pixel range specified when the state changes - this keeps the file size down. All three were created in Photoshop.

Puzzle Wedge Icon Icon designed to attract user attention to the Positive Images puzzle page - it represents a Trivial PursuitTM wedged pie. I created it flat in Illustrator, used the program's 3D effect to make it appear a little more solid, imported it into Photoshop and applied some highlights using layer blends.
Positive Images Forum Topic Icon
Posting icon used on the Positive Images forum to determine whether or not a message has been posted recently. It was created solely in Photoshop.
Glass Button Glass Button Glass Button Glass Button Glass Button Glass Button Glass Button Glass Button Glass Button Glass Button Glass Button Glass Button
A number of glass buttons designed to be used as part of a mastermind type puzzle that is being developed for the Positive Images site. They were created in Photoshop using radial gradient fills for the main button and transparent resized gradient fills for the highlight effect.
Two different bars designed for the original incarnation of the Positive Images site.

The Positive Role Models sidebar (left) has been scaled down for this portfolio, but hopefully you can still make out the well known faces it contains. In creating the sidebar, I had to consider the spacing of the role models carefully, providing a mix of men and women and examples of role models from different ethnic and religious backgrounds.

The images were taken from various photographs of the role models, edited in Photoshop to remove background detail, feathered and set to overlay on an orange background to match the Positive Images site colours.

Positive Images Sidebar
Positive Images Topbar
With this collage of Bradford landmarks, I once again took the required elements from existing photos. However, instead of simply overlaying them on the background, I arranged them (in Photoshop) in such a way that they would appear to blend into each other at the edges. The image can be viewed in situ by clicking here.
Further Positive Images work can be found in the logos and other sections.
The Whoniverse Disclaimer: The Whoniverse website is run by Stephen Gray. Site content and layout are decided by him.
Example buttons from the main site navbar. I created a rectangular gel button in Photoshop and used that as the base for ten site navigation buttons. The text for each button was then added onto the base component. The red at the corners helps the button image blend into the navbar. Click here to view the images (and others) in situ. The second button has a transparent white overlay - hover over the third button to see the effect this has when used as a rollover.
Whoniverse Homepage Button
Whoniverse Homepage Button Rollover
Whoniverse Rollover Effect
Whoniverse Forum Button Whoniverse Forum Icon Whoniverse Forum Button Several examples of buttons and icons created for the Whoniverse forum. Button backgrounds were created from scratch in Photoshop, text added and icon graphics either drawn in or modified from other sources. They grey corners on the 'reply' & 'locked' buttons helps to blend them into the forum background.

Designing for icons this small is sometimes a difficult task when you consider that the text must be legible and often fit alongside other graphics within limited pixel dimensions.

Whoniverse Forum Icon
Whoniverse Forum Button Whoniverse Forum Button
Whoniverse Forum Button Whoniverse Forum Button
Whoniverse Forum Icon
Whoniverse Forum Button Whoniverse Forum Button
Whoniverse Forum Icon
Whoniverse Forum Button Whoniverse Forum Button
Whoniverse Forum Icon
Whoniverse Forum Button Whoniverse Forum Button
Further Whoniverse work can be found in the logos section.
All original material on this site is copyright © Thomas Hey 2005 unless stated otherwise. Please ask me before reproducing any of my content.