Tutorials

posts displayed by category

Photography Tutorials

A Formula for Light Painting in the World Around You

Being a fan of finding new creative outlets, this past year I’ve taken up a new hobby; photography. It’s been interesting to explore the ways you can leverage a camera to go beyond the every day subject matter of landscapes and people, and light painting is a way to use the real world as a canvas to draw on. If you’re unfamiliar with the term, light painting is a unique way of capturing shapes, expressions, or drawn pictures using light as a paintbrush and your camera as the canvas.

light1Light painting done on an idle streetcar in San Francisco. Taken with the Fuji X-E1 | Fujinon 14mm f2.8 | 30s exposure

36,589 total views, 2 views today

Posted on October 20, 2014 by Sarah · 2 comments Read More
Blog Design Tutorials

Makin’ Artstuffs

I don’t usually get sick. I’ve started biking around the city in an attempt to get my body moving more, and it seems the “fresh” San Francisco air has caused me to come down with a terrible cold. Go figure.

The benefit of illness is it forces me to stay indoors and gives me an opportunity to pay attention to hobbies I otherwise tend to neglect. Illustrator took care of me, taking my mind of the rapidly growing pile of Kleenex on my floor. Date night with AI, here’s the result.

her

108,498 total views, 16 views today

Posted on March 16, 2014 by Sarah · 1 comment Read More
bannerScrub
Tutorials Web Love

Create Click and Touch Draggable Scrubbers with Edge Animate CC

Ever want to control your timeline animations in Animate with a scrubber? Here’s the sample to do so! Download the below files to learn how to create draggable scrubbers (both horizontal and vertical) so you can drag to control the timeline of symbols in Edge Animate CC. Use this technique to create scrubbable timelines, infographics, guide your audience through a story or anything else you can think of. These samples work for both touch and mouse events so they’re mobile and desktop friendly.

144,387 total views, 7 views today

Posted on November 8, 2013 by Sarah · 39 comments Read More
Tutorials Web Love

Create Scale-to-Fit Projects with Adobe Edge Animate

Update: Thanks for all your feedback guys — this tutorial is now a shipping feature in Edge Animate CC (3.0)! Learn more about the new features on YouTube or just go get it from creative.adobe.com

In this tutorial I’ll show you how to create scale-to-fit compositions with Adobe Edge Animate which keep their aspect ratio on resize.

See the live sample

Download the sample files

Enjoy!

Update: You guys have been asking how to make this script respond to height, and one of our awesome Animate forum users wrote up the solution (thanks jkuo1!)

1,025,649 total views, 91 views today

Posted on April 8, 2013 by Sarah · 98 comments Read More
splash
Tutorials Web Love

Create Responsively with Animate and Reflow

We live in a world of responsive design, and animation can play a meaningful and fun role on your website. Edge Animate and Edge Reflow give you the best of both worlds; easy-to-create responsive designs with RF and percentage-based interactive animations with AN. In this tutorial I’ll show you how you can take a responsive Animate composition and easily merge it with your Reflow preview files.

53,604 total views, 2 views today

Posted on April 3, 2013 by Sarah · 5 comments Read More
Tutorials Web Love

Animated Progress Bars with CSS3

Here is a fun demonstration on how you can create your own responsive, animated progress bars using nothing but pure CSS3. No images were harmed in the making of this tutorial. Resize your browser window to see the sample resize.

The below examples are supported on IE10+, Firefox, Opera and Safari.

257,446 total views, 16 views today

Posted on March 24, 2013 by Sarah · 7 comments Read More
Tutorials Web Love

What’s in a Filter?

CSS built-in filters (available by default in webkit browsers) are a powerful introduction to the CSS spec, which bring eye-catching visual effects to the web. Backed by hardware acceleration, filters provide a fast and simple way to style your content. But how do they work? Think of filters as post-processing step similar to how you would edit effects in Photoshop. The browser takes a snapshot of the page, grabs the pixel data, styles your elements, and then serves it back to you with the filter effect intact.

126,563 total views, 7 views today

Posted on March 9, 2013 by Sarah · 19 comments Read More