Tuesday, February 15, 2011

Photoshop Tips of the Day

Creating patterns for a background:

-create or import a pattern to a fairly small document (measured by pixels) into photoshop.
-go up to edit>define pattern>and label it
-if you want to paste the pattern go to edit>fill>pattern

To make the pattern more dynamic you would need to to look as if its going diagonally down:
-go to filter>offset>and set the horizontal and vertical to half of each dimension.
-then follow above steps and blahblah

cmd+shift+J = makes new layer based on selection

Layer > New Layer Based Slice: it makes a slice exactly cropped onto the size of the layer
-you wanna do this for the images on the website
-then save for web & devices, and the whole image will split according to the slices
-on the next dialogue box, make sure you only save SELECTED slices

Friday, February 11, 2011

After Effects Tips of the Day

Change the timing of an animation:

-Under the "position" key frame, click the GRAPH and move around the keyframe points (which changes the "dots" of the tracking) to change the speed of the animation.


Animating Your Frames:
-Make sure your frames (in any picture format) is numerically ordered and LABELED with similar titles.
-If importing multiple files, AE can import all the frames at once. (file>import>multiple files)
-When all frames are imported, AE sets the frames to 30 fps, to slow it down (ctrl click on folder, and change timing). Its better just to manually drag them in (so they are spread out).

*Note: when your files are dragged into the composition, they are stacked. The purple band represents the length of time the object is ON screen. You can adjust the length of the band FOR EACH object. The shorter the band, the shorter the presence, and vice versa.

 

*Trimming Composition by work area:
use the orange band to bring down the whole length of the animation by right clicking and press "trim to work area"

Rendering animation to a movie:
Click Composition > Add to Render Queue.
-On the bottom panel where timeline is, there is a render panel.
-This panel allows you to ouput the animation into a file format  
-Click Render Settings to change settings like fps
-Click Output Module to change video codec.
-Finally, click RENDER to finalize

Masking:
you can select an object, then make a mask with a pen tool. you can totally adjust size, movement, blur, feathering, etcetc.


Thursday, February 10, 2011

Don't Call me Ariel!


HELVETICA FTW!


 *quick illustrator tip: use glyphs for cheap and easy vectors

Tuesday, February 8, 2011

Dreamweaver Tips of the Day

When opening Dreamweaver, make sure its made to create a SITE. Without this, your life will be harder! Dw does a good job in setting and laying out everything for you as you create the site.


before you start working, under preferences check NEST so you can make divs in divs


previewing using temp file is a great way to preview your site without saving

The RIGHT PANEL:
-CSS: you can add new rules to the structure of your site. its like being able to change the behavior of how some of your elements read
    -making custom behaviors is under CLASS

-FILES: you can change and move around files in this panel and itll SHIFT it accordingly in the overall site

DIVISIONS:
-this creates the MAIN box of the website. dont use tables/frames, thats old school.

TAG - is an actual element in HTML (i.e body, p, h1, a)
CLASS - custom tag that you want to assign for a specific behavior. Automatically assigns you a "." to consider it as a class.
ID - works like a class, but only one time use
COMPOUND - takes  two tag  and combines it to create a specific behavior for those two tags.

NESTING:
-You can create divs within divs (called nesting), this makes it easier to organize/separate elements in the site. if you happen to make a div OUTSIDE a div, the behavior of the position will change. this is how you make it so all divs behave the same (like they are ONE entity):


for the sake of nesting:



Sunday, February 6, 2011

Friday, February 4, 2011

Logo Practice

Ehh was bored so I decided to practice on my logo creation process. I just re-arranged a bunch of circles around until I found some interesting compositions.







12 Principles of Animation

Frank Thomas & Ollie Johnston's 12 Principles of Animation:

Frank and Ollie, two veteran Disney animators detailed twelve motion graphic processes which have become fundamental principles in storytelling animation. These principles are described in great detail in their classic book, The Illusion of Life: Disney Animation (Hyperion: New York, 1981).

Principle #1:
Squash & Stretch - when ball bounces, ball has a squash effect right on the bounce, and a stretch right as it comes back up. This effect adds fluidity.

Principle #2:
Anticipation - pretend a ball is about to launch into the air. what anticipation does is having the ball squash before launching.

Principle #3:
Staging -

Principle #4:
Straight Ahead & Pose to Pose

Principle #5:
Follow Through & Overlapping Action - When coming to a sudden stop, the bobbing effect adds fluidity in motion.

Principle #6:
Slow in & Slow out - having a little delay when a ball is in the air after bouncing, without this effect the ball would look to mechanical.

Principle #7:
Arc - having an arc if ball bounces across

Principle #8:
Secondary Action - think of objects that are effected by the main object in motion.

Principle #9:
Exaggeration

Principle #12:
Appeal

After Effects Tips of the Day

How to create a ball bounce:


1) Make the circle shape in photoshop and make sure its tightly cropped. Save it in PSD format because AE has no problem reading that file format

2) In After Effects, create new composition on left window by clicking film strip icon.

3) Double click that same empty panel on the left and import the PSD file. Then drag and drop the ball to the composition (black screen to the right).

4) Place the ball wherever and on the bottom panel, click the arrow to drop down the menu  on the composition and click the CLOCK on POSITION (because we want the key frame to affect the MOVEMENT of the ball).

5) Theres a little yellow dot that appears to the timeline, so drag it to wherever FRAME/SECOND you want the animation to start. This allows you to drag the ball to the desired position and what it does it creates a dotted line (called tweening).

6) Adjust the dotted lines and bezel handle to however you want the ball to animate.

**to add a realistic bounce, you would need to change the scale as the ball HITS the floor so it will look SQUASH. You would need to add two key frames BEFORE and AFTER the bounce key frame. The BEFORE and AFTER key frames are the original shape of the ball and the MIDDLE would be the squashed.

HOTKEYS:

key frames:
s - scale
r - rotation
p - position

u - toggles all key frames