Skeleton dance

This is a sort animated clip of a skeleton dancing. Basically I designed the skeleton in photoshop, dragged it over to After Effects and in there I used the parenting tool to stick all the differents lines together and used the rotation tool to move the lines. skeleton dance

Advertisements

Final layout

home page. (event 4)

1

page 1: (event 1)

2

page 2: (event 2)

3

page 3; (event 3)

4

hovering:

7 8

5 6wordpress hover increases in size

Layout

What we also learned, was how to place the grid into the middle of the webpage. So that when you increase or decrease the page size, the grid will still be centred.

Screen Shot 2015-10-19 at 12.28.26 PM

Designing grids and containers

In this exercise we designed grids and containers on photoshop and then we copied the CSS from photoshop onto Dreamweaver and applied some text to it. We copied the link from the type (which we found on the internet) and pasted it into the source code. Then we also had to copy the family-font (also given on the internet) and pasted it into the stylesheet.

Design on photshop:

design on photoshop

Applied into Dreamweaver:

Screen Shot 2015-10-19 at 12.19.35 PM
Source code
Stylesheet.
Stylesheet.

Designing grids and containers

In this exercise we designed grids and containers on photoshop and then we copied the CSS from photoshop onto Dreamweaver and applied some text to it. We copied the link from the type (which we found on the internet) and pasted it into the source code. Then we also had to copy the family-font (also given on the internet) and pasted it into the stylesheet.

Design on photshop:

design on photoshop

Applied into Dreamweaver:

Screen Shot 2015-10-19 at 12.19.35 PM
Source code
Stylesheet.
Stylesheet.

Final principle adding

  1. ‘Contrast – Expand ‘ – Anticipation. The blurriness makes you wait with anticipation
  2. ‘Thin – Fat’ – Squash and Stretch. This squashes, fat stretches.
  3. ‘Collect – Scatter’ – Staging – the word collect stands out.
  4. ‘In – Out’ – Follow through and overlapping.
  5. ‘Slow – Fast’ – Slow in, slow out
  6. ‘Straight – Bent’ – Straight ahead and pose to pose
  7. ‘Apart – Together’ – Arc
  8. ‘Far – Near’ – Secondary Action and Timing. Pose to pose.
  9. ‘Big – Small’ – Exaggeration
  10. ‘Disappear – Appear’ – Solid drawing
  11. ‘Rise – Fall’ – Appeal
  12. ‘Float – Sink’ – Timing, Arc

So more principles apply to more than one word. But these were my basic ideas for each word and its opposite.

Audio

The music i was aiming for was something happy and instrumental. So i found this amazing song on Youtube and thought it would fit perfectly. 🙂

Text in After Effects.

So instead of using Illustrator and dragging over the text into After Effects, I found a easier and faster doing this, by only using After Effects. So in After Effects you create a Text  > right click on it > change to shape paths > and then under contents you find your character paths. Good and great stuff.!!