Tuesday, October 11, 2011

Free Stuff!

JavaScript 101
http://webteacher.com/javascript/


Awesome Free Quality Fonts:
Lost Type

More Free Fonts:
Practice Foundry

http://desizntech.info/2011/10/25-high-quality-free-fonts-you-may-not-have-known-about/

More Free Stuff:
WebDesign Ledger

Friday, September 30, 2011

Sketch of the Day

it is not we who produced this warmth, but it is through Him who gave His life for us.

Friday, September 16, 2011

Tips on Icon Building

So far I learned:

-Create icons by pixels not by vectors. When creating each individual icon with pixels, you can get the most crisp and clear when working with pixels versus creating it with vector and resizing it. Vectors will blur out the crisp lines when sizing it down to a small size.

-8x8, 16x16, 32x32, 48x48, 128x128, 256x256, 512x512.

-Use consistent lighting and perspectives.

-Use icon builder or favikon

Here are some good references:
http://turbomilk.com/blog/cookbook/icon_design/10_mistakes_in_icon_design/
http://www.firewheeldesign.com/sparkplug/2006/April/icon_design_bitmap_vs_vector.php

Thursday, September 8, 2011

Good Tutorials for Web Design

Glow Effect for hovering link:
http://www.impressivewebs.com/css3-transitions-without-hover/

Fun Bouncing Navigation Bar:
http://tympanus.net/codrops/2011/07/12/animated-text-and-icon-menu/

Good HTML5 Designed Websites:
http://www.webdesignersblog.net/inspiration/45-inspirational-examples-html5-websites/

Good Icon usage in Web:
http://webdesignledger.com/inspiration/20-excellent-examples-of-icon-usage-in-web-design

Top Wordpress Themes:
http://webdesignledger.com/freebies/best-free-wordpress-themes-of-2010

http://jqueryfordesigners.com/coda-slider-effect/

Golden Grid System:
http://goldengridsystem.com/

Beautiful Typography in Web Design:
http://webdesignledger.com/inspiration/25-examples-of-big-typography-in-web-design

Single Paged Web Portfolios
http://dzineblog.com/2011/09/42-awesome-single-page-portfolio-websites.html

Popup Bubbles (Jquery)
http://www.vegabit.com/jquery_bubble_popup_v2/#download

Jquery Tutorial
http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers

STRIKING WEB DESIGN!
http://sixrevisions.com/design-showcase-inspiration/strikingly-vibrant-web-designs-inspiration/

Wednesday, September 7, 2011

Flash CS5 Tips

You can make animations within animations. After turning an object into a symbol (movie clip), you can go INTO the symbol and make the animation. You can animate one MORE time by going INTO the symbol again (which would be symbol 2) and animate again. Like inception.

Shortcut Keys:
f5 - insert blank frame
f6 - insert keyframe
cmd + B - break apart (like ungrouping)
cmd + shift + d - distribute the separate parts to separate layers

when centering an object, cut (cmd x) and press cmd + 2, then cmd + 1, and paste.

Monday, August 22, 2011

I am unworthy to face You.


"Lord Jesus, I sin. Grant that I may never cease grieving because of it, never be content with myself, never think I can reach a point of perfection. Kill my envy, command my tongue, trample down self. Give me grace to be holy, kind, gentle, pure, peaceable, to live for Thee and not for self, to copy Thy words, acts, spirit, to be transformed into Thy likeness, to be consecrated wholly to Thee, to live entirely to Thy glory."

Tuesday, April 12, 2011

Wednesday, March 16, 2011

Amazingggg Animation

Animation done by Ryan Woodward.

Seriously, is this guy out of his freaking mind?!

Thought of You from Ryan J Woodward on Vimeo.

Tuesday, March 15, 2011

Design Inspirations of the Day

Here are some inspirations I found for web layouts AND graphic design. So freaking depressing looking at these amazing designers! AHHH

Grid Based Websites in general: http://grid-based.com/?

Awesome Sites:
http://derek-chan.com/
http://www.cnc-ltd.co.uk/
http://www.stillnessofthemind.com/
http://www.definitivestudio.co.uk/
http://www.establishednyc.com/main/index.php
http://secondandpark.com/


Tools:
http://wordpress.org/ <=quickpress (helps you layout websites)
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/

Sketch of the Day

it suddenly wasn't a sick day anymore

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

Thursday, January 20, 2011

Really Love This

Another amazing work done by Pascal Campion! So many words and feelings to describe in this! ahh!


I can't wait to come home to this one day.

Friday, January 14, 2011

Sketches of the Day

Nothing like relaxing at home and do some good ol drawing.

what i love waking up to... coffee.