it’s crawling with idiot

November 4, 2008

So with this website I wanted it to basically be some of my artwork that happened to be a website as well. I don’t have much knowledge of anything more than HTML and the odd bit of Javascript so I can’t do anything really really high-tech – I’m mostly self-taught too, so I have a feeling any actual web designer looking at my work processes would be cringing in pain at my hamfisted Dreamweaver efforts. Anyway, my first thought was to create some kind of image map navigation. However with this there’s the worry of it taking 27895792 years to load everything, so I decided to see whether slicing the image up and saving each section as an individual gif might save a bit on loading times.

I decided to use some of my favourite characters for the navigation: Ningg, Belper The Friendly Robot Helper, Tsugmlx and The Jam Monster. I then used the same menu headings I’d had on my website before, but with the addition of a shop, for when (if ever) I get to print these t-shirts to sell.

navimage

I then decided that if I was slicing things up I could use this to create some fun little rollover bits, that changed when you moused over, just to make things interesting, so I saved a new version with a few things changed:

navrollover

Luckily Photoshop is very good at the whole slicing things up and making them into a website thing so I divided things up in a way that left the areas I wanted to rollover/image map nicely intact. Here’s a grab of a design for the gallery (which I’ll talk about in my next post) all sliced up:

sliceyslicey

Then, by Saving for Web, Photoshop turns it into an HTML table of .gif images that I can fiddle about with in Dreamweaver.

indexindreamweaver

Speechy bubbles become linky links yaye! Note the mouseover/mouseout behaviours on that image map.

Advertisements

One Response to “it’s crawling with idiot”

  1. […] a bit of practice designing this when I first came with the concept I showed in the interim crit (this thing here) but I decided to change it a teeny tiny bit, not least to get rid of the big sign that said […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: