Web Design – Week 2.

This week has been devoted to learning to use dreamweaver to create a basic website layout. Either with tables or using freehand div tags. I think my website layout will use the freehand tags, as this seems to offer more flexibility.

We’ve also been looking at making rollover images, which may well be a technique that I use on the title page of my website.

I think I’d like some simple graphics as the buttons for my title page, and I’m taking the type of images seen on this website for inspiration. I created my own conical flasks using the line tools. For the icons which appear within each flask I then traced over some pictures I found online using the pencil tool. Once I’d gotten going this tracing technique didn’t take too long and appeared to produce quite a nice, simple icon.

I then decided to add some colour to the flasks and icons. Which proved to be quite trick as I’d never used Illustrator before this course! As such, it took me quite a while to figure out the intricacies of the live paint tool, but I think it was worth it. At first, I kept getting an error message whenever I tried to fill an area in (I was simply selecting the live paint tool and then clicking on the area I wanted to fill – as you would do in the programme Paint). So, I troubleshooted my problem online and found out that I needed to first select the entirety of the image that i wanted to fill in order to make a live paint group. After that I could simply click on the area I wanted to fill. Here is what I ended up with;

Screen Shot 2013-05-14 at 22.00.58

I tried adding these to a blank webpage in order to see how they looked, however, as I want them to be individual buttons that sit on a black background I’m finding it difficult to insert the images without a white background.

Update – Problem solved! I’ve found that actually the easiest way to import these images into my webpage is to copy them each into a blank Illustrator document and then ‘Save for Web’. They then come without any background.


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