In this video, explore how to create the "jelly effect." This effect uses two effects to give the appearance of icons separating from each other as though they were jelly.
- [Instructor] In this exercise, we're going to create…an effect that inevitably has people asking you,…"How did you do that?"…The effect is the Jelly effect.…You've most likely seen it on wearables…like the Apple watches, and mobile and web screens.…And you can also see it here at this site.…So I'm just going to pop up my browser over here,…and there's the jelly effect.…You notice how the icons come out…and they look like jelly.…Here's the thing.…It is surprisingly easy to create.…
So to get yourself started, open the 03 Jelly file…in your chapter download.…So just going to pop back over to After Effects…and let's get going.…The artwork you're looking at was created in Illustrator…and imported into After Effects as a comp.…That's the comp that retained the layer styles.…If you look at the layers, you'll see the icons are placed…above the respective backgrounds.…Okay so there's the icon.…The like icon see.…And there is the like background,…and it's in a layer called BG.…
Just keep an eye on this one 'cause…we're going to be using it in a second.…
- Prototyping motion
- Using the Graph Editor
- Working with shapes and masks
- Supporting tap, press, and swipe gestures
- Handling pinch and spread gestures
- Designing patterns
- Making navigation, buttons, and breadcrumbs
- Creating progress bars
- Working with modals, menus, and cards
- Zooming content
- Making a floating action button
- Handling text input and cursors
Skill Level Beginner
Modular UX Design with Photoshopwith Jesse Freeman48m 8s Advanced
1. Microinteraction Fundamentals
2. The Common Gestures
3. Design Patterns
Next steps1m 21s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.