Jump to page content

Creating the Firesnake.net banner

Origin

On June 22nd (2006), I was talking with Mistress Melanie about her site, after noticing that her colourful WordPress-based blog had been replaced with her old site again, which was pretty monochromatic and unexciting to look at. She asked me, so you liked the colors from the wordpress? My reply: … hm, too brash and un-coordinated for me but the current choice is too grey, and I'd side with the colourful version I think. Your old PHPNuke site wasn't bad.

I was suggesting methods for designing a new scheme, and suddenly had an idea for a whole site design that would suit her: Tho I just thought, the front page could be red Pixelcritter one some sort of gold gothic art circle thing, black background, and mid grey boxes for text, but all aligned to the centre.

I set about producing a rough version of this in Photoshop, which I no longer have on file. However, the banner looked approximately like this:

I pulled apart an existing Windows wallpaper image of mine to gain the circular effect around Pixelcritter, but I decided that it was not especially satisfactory. Due to experiencing colour space problems (somehow I ended up in a combination CMYK/RGB image) the various shades of red and orange were not coming out correctly. As such, I cannot even be sure that the text is the colour I originally wanted.

The addition of Fire

It then occurred to me that the yellow ring I wanted could be fire. In the style of sheafs of wheat used in many seals, I thought about two jets of yellow flames surrounding the snake. I drew a picture of this in coloured pencil and scanned it in:

This looked good, and we both decided it was the design to use. But producing a high quality rendition of this design would not be easy. The ideal form would be a vector image but I have neither the skill nor the software to generate a digital form of the image. The only other reasonable approach would be to paint it and then scan it in, since only paint affords the necessary vividness and consistency of colour.

I was hoping someone else could paint the fire for us but it fell to me to execute the work, despite not having painted anything in some years. I spent approximately a day on it, from the initial pencil sketch of the flames through to completing the work.

It began life as a series of circles drawn with a compass on a sheet of my old A3 sketch pad, within which I sketched out some flames, roughly at first and then again in darker shade when I was content with the design. The colour was provided by acrylic paint. A series of illustrations of the process are shown below:

Acrylic paint, as you can see, is not only smooth and reflective, but leaves the paper just a little bit warped!

The final design

Shown above is the final design. The fire can now be seen behind Pixelcritter. I decided to use a purer shade of red for the text, as well as brighten up the colour of the snake itself. The original text used my Java Girl typeface, but to give the banner a more tailored and original style I tweaked the letters quite noticeably. This stage also involved reducing the Photoshop layer effects into regular layers to be substantially tweaked; this included reducing the undesirable aspects of the inner shadow, and limiting the range of the outer glow beyond the control of Photoshop 5. To leave the .net part more visible, it itself was tweaked substantially.

Smaller text was also used for the instance of the banner to be used on normal site pages, as well as for the blog subdomain heading. Since Java Girl is a bitmapped font at 16 and 36 pt only, the anti-aliasing had to be removed from the scaled down copies of the text.

Evaluation

Yes, they make you write these at school as part of the national institutionalised programme of juvenile torment, but one cannot help reviewing one’s work regardless. The overall effect of the design is certainly pleasing, at the full size anyway. The fiery nature is clear, and the colours bold and strong. There are two small weaknesses, however. The inner shadow of the text dulls it a little, and getting the right extent of the effect is quite tricky, balancing it between too dull, and too plain. I also find the flames of the fire to be too hard to make out. They look nice in the original artwork, but on a scaled-down image on the screen, they became too small and fine and the edges blur together.

At this stage, however, I am not going to re-paint them, and I doubt whether it would even be possible to have modified them if they were a vector image. With a vector image, however, you can monitor your progress at final image size as you go, giving you more chance to keep an eye on your work.

However, Mistress Melanie is most pleased with the outcome, and I don’t suppose anyone will be aware of the flaws. Being a stylised design gives you more leeway, and it can be reasonably interpreted as being a crest designed such that the shape of the flames is meant to be subtle. For now, I will just keep a mental note for the future. The GoddessofLooop however I am sure will be creating all of her own site graphics, although I do recall giving her a hand with the title design.