Photoshop Timing and Flow

Photoshop Frame animation

goal: rich, emotive, and detailed. Your animations should make the viewer feel something (hopefully positive) and demonstrate a sense of timing and flow.

Animated Card – Level 1

Your goal is to complete and post 4 animated gifs.
The first will have 1 required animation.
The second will have 2 required animations. You may duplicate the style of the first but the second must act differently.
The third will have 3 required animations.- in a similar vein.
The fourth = four required.
An extra ADVANCED animation for each animated card is explained near the bottom of this post.

4 cards:   Winter - Spring- Summer - Autumn
The following tutorial is for Winter.

http://www.brighthub.com/multimedia/publishing/articles/95252.aspx

the updated version of the above link:

·         900 x900 pixel  with a Transparent background

·         Choose a dark colour and paint layer 1 then rename it “sky”

·         Create a new layer – rename it “snow”

·         Choose colour white and with the paint brush size “8” draw the top of the low sloping hills across the lower 1/3 of the sky – then paint below this line.

·         Create a new layer – rename it “hill”

·         Choose a darker white colour and with the paint brush draw a hill in the middle but not much higher than the snow. Draw from the bottom left side to the bottom right so you can paint below again

·         Drag the “hill” layer below the “snow” layer

·         Click on the snow layer, then create a new layer– rename it “trees”

·         Choose a darker green colour – with the paint brush draw a very large conifer tree – if you draw an outline make sure you paint it.

·         CTRL click on the thumbnail of the tree on the trees layer. The tree should highlight. Choose CTRL-T then shrink the tree to a reasonable size.

·         COPY and PLACE 25 trees of various sizes.  While the tree is highlighted and the MOVE tool is selected press ALT and drag/copy a new tree and place it on the snow. Trees in the distance tend be smaller. Use CTRL-T to shrink the tree size.  It may be wise to ZOOM in.

·         NOTE: To highlight a tree afterwards use the “MARQUEE” tool and move it with the “MOVE” tool. To UNHIGHLIGHT  press CTRL-D

·         Create a new layer – rename it “text”

·         Choose the TYPE tool – choose type size around 60pt and a nice bright colour. Type in your blog address. For example:  acssinfotech1415.blogspot.ca

·         Choose from the menu above – Type-Warp text-then choose a style.

·         Choose from the menu above- Layer- layer style- Bevel and Emboss – change size to 5. Click OK.

.         Create a new layer – rename it “winter”
·         Choose the TYPE tool - then vertical type tool- type "winter" and place in the lower right corner

·         Create a new layer – rename it “stars1”

·         Draw 10 stars a pale cream colour – draw 1 size and CLONE stamp it 4 times – then a second size and a third

·         When using the clone stamp – make its size large enough to cover the star then press the ALT key and click then stamp

·         Create a new layer – rename it “stars2” – 10 more stars

·         Create a new layer – rename it “stars3” – 10 more stars

·         Follow the tutorial under “Making the Stars Twinkle” –try changing the gradient when in OUTER GLOW to a different colour
·         When it comes to ANIMATION go to Window-Timeline then switch to ‘create frame animation’ then click on ‘Create Frame Animation’

·         With ‘stars1’ layer highlighted click on the ‘duplicate selected frames’ button in the timeline window.  Continue following the tutorial.
·         Make sure you choose “forever” in the timeline window.

·         Save for Web – post your image

The animations:Winter - snowy hill with trees and twinkling stars
Spring - A flower bed with growing Tulips or flowing clouds
Summer - a beach with either seagulls in the sky or crabs on the sand
Autumn - Deciduous trees with falling leaves.

ADVANCED
Try to add this: The following items will flow between the 4 animations you create.  The path they take will make perfect sense to the viewer. Position the 4 animations in a table such that the following objects appear to move between them. You will need to synchronize the four animations so they start and stop appropriately.

Keep these objects large - 2-3 cm (at least) or they get lost in the confusion.

Summer - beach ball or Frisbee
Spring - golf ball or baseball
Fall - soccer ball or football
Winter  - Hockey puck, snowball or curling rock

place in a 2x2 table
  ·         http://www.tablesgenerator.com/html_tables

·         Create a 2x2 (2 rows, 2 columns)

·         NOTE: checkbox – Do not Generate CSS

 

go to HTML in your NEW post

paste code - choose location- click on add image

Office dogs are allowed assuming they aren't evil and/or worgen. We also have an office ferret at times, and once had office mini-goats, but they were jerks so we returned them.

Need help in a contest

Here is a picture of my ugly garden

I need votes to win.

VOTE HERE