Devine Design
 

CSS3 animation example: Volcano

Posted on : 01-10-2012 | By : ptah | In : Icons, Illustration, Motion design, Portfolio

0

This animation was constructed by creating an illustration of a volcano in Adobe Illustrator. I then created the sprite offset in Illustrator so that my artwork resembled an ‘old school’ 35mm film strip of 8 frames. I worked out the CSS3 animation properties on paper.

CSS3 animation example: Teaching resource icon

Posted on : 01-10-2012 | By : ptah | In : Icons, Illustration, Motion design, Portfolio

0

 

This animation was constructed by creating a vector shape in Adobe Illustrator and saving as an .ai file. Next the file was imported into Adobe After Effects, rendered to 3d space with some lighting added to create the gradient and shadow. I exported my After Effects file as a .psd sequence: 6fps. The .psd files were zipped, and uploaded to an online sprite generator where I was able to manipulate my graphics into a single sprite and save out as a jpg file along with the relevant css code for presenting my animation.

Media player

Posted on : 30-03-2012 | By : ptah | In : Graphics, Icons, Illustration, Interactive, Portfolio

0

This media player will also have an audio and mobile variant.

This media player will also have an audio and mobile variant.

Bio-Ops icons

Posted on : 13-09-2011 | By : ptah | In : Graphics, Icons, Illustration

0


ispot-icons

Religious Heritage Icons

Posted on : 13-09-2011 | By : ptah | In : Graphics, Icons, Illustration

0

religious

OU-RAP: Functions

Posted on : 13-09-2011 | By : ptah | In : Graphics, Icons

0

functions-32

OU-RAP: Linking

Posted on : 13-09-2011 | By : ptah | In : Graphics, Icons

0

linking-32

OU-RAP: Learning

Posted on : 13-09-2011 | By : ptah | In : Graphics, Icons

0

learning-32

OU-RAP: Help and Information

Posted on : 13-09-2011 | By : ptah | In : Graphics, Icons

0

help-32

OU-RAP: Applications

Posted on : 13-09-2011 | By : ptah | In : Graphics, Icons

0

applications-32