Making the roll overs – Slicing the front page – Getting around an error message

I absolutely love the roll overs on this site. So I wanted to try to see if I could do something similar.
Roll overs -1
http://palace.co/

Roll overs -1-5
http://palace.co/

I experimented on a random picture. Here I used a Photo Filter to change the colour of the whole picture.
Roll overs

I needed to make sure the alignment was inside and that the corners were miter.
Roll overs1

I then drew a box shape. It took me a while but I achieved the look I wanted and I was happy.
Roll overs2

Here is how the roll overs look on the page. You can also see how I organise my roll over layers so I don’t get confused.
Roll overs2.5

When I’d done all the roll overs I could then start slicing up the pages.
untitled

Using the slice tool I sliced up all the buttons and the animation.
untitled1

I then sliced up the roll overs.
untitled2

I renamed the roll over slices so they will be easier to find later.
untitled3

I then tried to save for web. I borrowed my friends lap top for this as my PC doesn’t have enough RAM.
Screen Shot 2013-05-21 at 19.41.51
At this point an error popped up and I was unable to save for web.

Because I couldn’t save for web after I had sliced the page up for the roll overs I removed some of the frames from the gif as I had already saved this previously.
un 5

I renamed the slice of the gif after I had removed the frames so I could see which was the original.
un 6

Once I had renamed the slice I saved for web, I then opened the html file it produced in Dreamweaver. I clicked in the image I wanted to replace (the gif).
un 7

I then clicked the folder below to change the target file. I selected the original gif (not the one I saved second).
un 8
I then opened the file in Chrome and the animation worked fine.

Advertisements

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