Since authoring Erec Makes a Fire I’ve become quite familiar with Illustrator. Though Lain took care of drawing all the characters and objects I spent months of man hours reworking the layout, extending the scenery and modifying his artwork based on reader feedback to keep up with each iteration of the story. That being said, creating an illustration from scratch is VERY different than editing one already made.
Motivated by new concepts I’m working on (such as books, apps, and websites), I wanted to bridge the gap between my offline art skills with that of my digital to be more self-reliant when original artwork is needed. I wanted to take the more directed “deliberate practice” approach to learning this new skill and decided to post what I am creating for critique.
I really like the flat UI look, so my goal is to get to a point where I can replicate that look and feel – at least to some reasonable degree.
I needed a horse for an intro scene I was putting together for an app I was building, so I figured it was a good time to crack open Illustrator and give it a shot. Here is the first version. Sadly, this took me many hours to create. Much of the time was learning how to manipulate the tools, but even more came from the constant iterating (or resolving in art speak) to something I can be happy with.
I thought the tail was too boring, but I also didn’t want to over complicate the simplistic nature of the illustration. After another few hours of trial and error I came up with the final horse below. I got a bit carried away in the fun and ended up creating a sprite that walks a bit, then turns to look at the viewer and blink.
If you have any useful tips, or feedback to improve the horse, please let me know.
I really enjoyed working in this medium and look forward to continuing to lear more about it.
On our trips to locations around the world our family and friends want a way to get an idea for what we are up to. Like most people, we post pictures to Facebook that try and capture the essence of our trip but video is so much better at truly capturing the 3-dimensional realities of what we experience.
Now, with tools like Hyperlapse and iMovie on iOS, you can create a video that summarize an entire site in a timely way for both the creator and viewer.
Here is an example of a video of our trip to Cappadocia I created entirely on my iPhone:
Not only does hyperlapse allow you to capture a sped up versions of your video, but it adds a layer of stabilization so to reduces camera shake.
Hyperlapse’s home page, recording and saving screens
Use Hyperlapse to shoot some video.
Even though there is built-in stabilization, it behooves you to try and keep the camera as steady as possible.
I often save my video at “2x.” Half the size (in time and memory) as a regular video and, as you will see when we edit in iMovie, you get a wider range of fast-forward-play options.
Once you finalize the video it is saved to your photo library for later use.
Follow the instruction to start a new movie or trailer, and select “movie”
Choose a theme (I usually just choose simple) and select “create”
Follow the instruction to add “video, photos, or audio”
Select one of your Hyperlapse videos from your library
Tip: Pressing play will allow you to preview the video before adding it. The arrow pointing down will import it into your project.
Drag and drop your movie clips in the order you want them to play
Tip: Taping a clip once selects it for editing. If there is a yellow border on the clip, you are in edit mode. If you want to move the clip, tap outside the clip so it is no longer highlighted and then tap-and-hold the clip until it is draggable.
Add transitions between the clip by tapping the small square box in between each clip.
Tip: If a clip is too short the transition options will be grayed out. You must have at least enough time in a clip to allow a transition to complete in order to select it.
Tip: Some transition have multiple modes. After choosing a transition by tapping it, tap the transition again to get the different variant. Eg, fade to black or fade to white.
Tip: This is one of the places choosing a theme in the “create project” options will have an outcome. See the “theme” transition. That will change based on the theme you chose. Tap the gear icon in the bottom right of the application to change the theme after a project is created.
Edit the the duration of a clip
Once a clip is selected, and highlighted with the yellow border, you can drag the ends of the clip to shorten or elongate the duration of the clip.
Speed up some “in between” clips
Some clips will still run a bit slow due to things like how long it took you to walk to the end of a block or to pan 360 degrees. You can speed up segments of these clips to move the video along.
Tap the clip to go into edit mode.
choose the meter icon (directly to the right of the scissor icon.) You will then see a meter labeled 1X
Drag the knob on the meter to the right to speed up the clip. You can move it to a max of 2X (which is why saving the clip as 2X allows you a range of 2X to 4X which.) There are ways around it I will go into later.
If you only want to speed up a segment slice the clip into more segments (explained below) and speed them up without transitions at their ends.
The functionality of iMovie is limited. Most of the effects you will create work off of the duration of each clip in your project. Therefor, you can manipulate your effects by slicing your clips to suit your needs.
How to slice a clip
Scrub (meaning, slide the white line A.K.A the video head) over the moment in the clip you would like to split into two.
Select a clip for editing (make sure the scissor tool is highlighted.)
Choose “split”
Now you have two clips for the same scene. As long as there is no transition there will be no visual result on the video due to the “split” you just made. Like I mentioned before, you are merely using the split to tell the effects we are about to add when to start and end. Eg, the titles and captions.
Adding a Caption or Title
Select a clip for editing
Select the large “T” (third icon to the right from the scissor.)
Select a caption type
In order to edit the text for a caption or title you will need to tap the video player, above the film section of the application.
Tip: After choosing a theme, extra options will display above the edit tray such as “Center”, “Opening” etc. These will position some titles, as well as change the format for others. Play around with them all to get a feel for the options you have.
By now you should have a video. To get a smooth video will take practice but now you will have all the tools and tips to do so 🙂
To save the clip as a video you can post to Facebook, go to the movie listing (if you are editing a movie project now you will need to tap the back arrow at the top of the application.) There you will have options to save the film to your library.
Tip: If you want to speed things up or make more advanced transitions you can save the edited video to your library and then create a new project with that saved video. You will than be able to speed segments up by another 2X or add transition to clips that may have been too short in your original movie.
Before we go, here’s a bonus tip …
How to rotate movies
I originally stumbled onto using iMovie when I accidently recorded a video vertically and needed to rotate it. Here’s how to rotate movies:
Open a movie in iMovie (if you do not know how to do so read the tutorial above.)
Pinch the movie preview viewer (the area above the clips and play head line) with two fingers and rotate them (like screwing off the top of a bottle.)
You will then see an circle arrow appear on the video. Once you see that remove your fingers from the screen.
Here is a quick video of some of the features in practice, as described above.
Scheduling time to meet with someone is one of those things that’s just hard enough to be annoying, but probably not complex enough to need a whole new tool to simplify it. It’s one of those problems that makes for a perfect example of how-to, or how-not-to, create a great product.
Often in the product world we find a problem we want to solve and end up creating a far more complex system to solve it; one in which the user has to change usage patterns or require ramp up time. As a result, minor problems and annoyances (like scheduling meetings) don’t get dramatic improvements because the cost v. benefit v. ramp-up never quite get to a point in which the user is willing to change their habits to gain the benefits from a new tool. “I’ll just send an email” or “I’ll just use a spreadsheet” can kill the potential for “robust” products. And rightly so, email and spreadsheets are comfortable, versatile and already understood between groups.
That’s why I have been bullish on extensions, especially the Google Chrome ones.
The good ones are able to find a balance between:
A lack of ramp-up time.
An integration into the tools and workflows I already use.
No requirement for other parties to have the platform in order to use it.
An example of a great extension I was introduced to recently is Assistant.to. Assistant.to is a Chrome extension that links to your Google Calendar and extends your Google Email composer so you can easily drop-in potential appointment/meeting times as text and links in your email. There was no setup, all the interaction happens within the GMail composer, and the form factor works in a way that needs no additional explanation or signups for the receiver.
It is a must have tool for sure! Here are some screenshots of the workflow:
Extension overlay
Expanded overlay
Select availability
Available times copy and pasted
Meeting confirmed
As a note,another great extensions I’ve been using lately is the one Grammerly.com that allows great inline writting corrections and tools.
If you are a bit weary but still curious on what’s coming here are a few sneak peak looks on features being released:
In an attempt to decrease the “easter egg”-ness that is iOS feature a helpful tips app will come pre-installed giving you information weekly on what features exist that you can take advantage of in the new OS.
Voice activated Siri so you don’t need your hands to get beamed up to the mothership, – or boil the perfect egg:
Countdown timer for your camera. Take selfies to the next level without needing a fantastic-four-like elastic arm.
Quicker access to your contacts by double-clicking your home button:
There is also the ability to set up a Family sharing plan for your iCloud images – but I don’t know if I will be turning it on just yet as it is unclear just how it will work and how everyone in the group will be charged for the service. Still playing 🙂
Oh and I am sure everyone is aware of the new health features in the app. A bit on the interface and how it will work: You basically give access (much like notifications) to different apps so they can pull information you (or other apps) set such as age, steps, calories like so:
I’ll let you know if more cool things pop up 🙂
Like this new interface for attaching photos to SMS
It turns out that this has been around since iOS 7 but just happened to find it now… You can flick up
To three apps closed in the background at the same time.
I am a big fan of creative and captivating site design. One way of telling your story through your website’s design is by using animates scrolling effects. How they work is the viewer controls the animation and presentation through the amount the scroll wheel has been moved. Every pixel scrolled triggers a movent to some aspect or object on the web page. In many cases the web designer makes a sort of symphony with the multitude of events being moved and morphed on the page. You can see some past blog posts of mine on animated scrolling website designs here.
Here are some more recent orchestrations of stories being told in that fashion below. For this blog I am including video screen captures with the screenshots of the site as some of the sites in my older blog posts have since disapeared and there is no longer a way to see how they animated in the past. Live and learn 😉
(Note: Click the titles of each site to visit their webpage)
I really liked the use of paper like textures on the site. It makes it feel like a book or pamphlet has exploded into life. I also really liked how they put a whole slew of characters and objects into motion without making the site feel cluttered or confusing. This site is a super rich scrolling experience.
Your really gonna like this one. Not only are the graphics smooth, but they capture a great affect and time-period quite elegantly. The concept of having a single machine traverse and change as it scrolls through the deeper pages within it, while also tying it into the story being told is exceptionally well done.
It was the subtle animations created in the background that really caught my eye on this one. There wasn’t as many objects in motion in the foreground as the others, but the scenery chosen to be animated did a good job supplementing the site instead of going heavy on the scroll animations being the star of the show. It looks like these guys put up a new version of the site quite a bit so check out the video, but makes sure you check out the site as well as they may already have a new one out by the time you read this.
A good use of foreground and background in the scrolling animation. Also a great demo of their product offerings, and I like that it is their “pitch deck” (Something given to clients or investors which is usually done in a power point or pdf).
I really give credit to this site. It is a site for a leather bag which could easily have been made into a static site like others in their space. They do a great job display the bag using a 3d rotation, and also do a cute tie in between the scroll and the bag by using a zipper as the scroll progress bar at the bottom of the screen.
You can find more here: http://favbulous.com/post/983/23-stunning-parallax-scroll-websites-you-have-to-know
Erec Makes a Fire is a story of how a group of kids stumble upon a cave covered in ancient writings depicting the story of how a unique young cave boy (Erec) accidentally created his first great invention, fire. The story shows how, even in the simplest of times, one is able to form a business, sell a product, and create a success. The book is written to subtly embed one of the most fundamental parts of business in a child’s mind: leveraging an opportunity when finding demand in your community and providing a supply for it. Even before cash, computers, technology, LLC formation or business entities, business and entrepreneurs thrived through observation and invention, and they still do so today. This story helps teach youngsters, and remind their parents, that entrepreneurism is all around us and to keep an eye out for one’s own personal “fire” opportunity.
Why did I write the book?
As a person who loves the world of entrepreneurism, I also love telling a story about how anyone can turn a will or idea into a business. I have enjoyed telling that story, and giving tips on how to do it best, for a number of years through various mediums such as interviews in print, in person, and on TV. Now that more and more of my close friends are having kids I want to share that passion and story through a form that their kids can benefit from. I noticed there wasn’t much out there in the world of children’s books that took business concepts and simplified them into stories kids could love, as well as learn from. So, what else was I to do as an entrepreneur but to fill that void. Erec Makes a Fire is the first in a hopeful series of books that builds a foundation of business mindedness in our children.
Beliefs that inspired
Two major beliefs of mine contributed greatly to the creation of this story: First, immersion is a great key to early developmental learning, and secondly, kids are extremely capable of learning and understanding complex concepts early on, especially when it is told through story and analogy.
In regards to immersion, I believe that even if a child does not understand a concept introduced to them directly, being surrounded by that concept will help them become more comfortable with the subject matter as they mature. This makes the principles taught far less foreign to them, and therefore more easily consumed when they grow up, as compared to those learning the same concepts for the first time later in life.
I also believe that children can grasp complex concepts, like supply and demand or finance, far earlier in their lives than is generally taught today. I have always been amazed at how kids pick up core concepts so deeply. Yet, adults at times “protect them” from complicated concepts for worry of it going over their heads. Supply and demand can have complexities within – yes, but the basics are – well – basic and building stories around those concepts can most definitely be consumed by children. Look how well they understand other stories we give them, like ones around “how to share”, a concept that I find many adults still struggling to grasp. I remember sitting with adults during dinners as a kid while they talked to one another about their businesses around me. Over time and many family diners a grew more familiar with many of the things they talked about while still being a child. Although I was unable to articulate my perspectives on the subjects at the time I mades notes to remind myself that one day, when I got older, I would remember this: kids get more than you think.
Sticker Collection Available Through KickStarter
Erec Makes a Fire is a new kind of children’s book that immerses young people in concepts they should be given the chance to understand early in life so that they can have a foundation for understanding it more deeply as they grow up. As such the company under which the book is created is called “Small People. Big Ideas. LLC”
How and When Can I get it?
The first few copies will be made available as gifted items through a fundraising drive on KickStarter. I have my initial proofs and prototypes complete. Based on how much I can raise through KickStarter I am shooting to making it available by the spring of 2015. There will be special gifts given out through KickStarter in addition to the books themselves to make things more interesting, such as: signed copies; custom printed copies; packages including digital, print version and stickers; as well as custom designs where our artist injects a characterization of your child into a character in the book! Books will be made available through softcovers, hardcovers, and ebooks.
About Kick Starter:
KickStarter is a crowd funding platform that allows projects to get funded before they start. It is a great way to start a business or project and works perfectly with the Erec Makes A Fire book as the funds are only released if the book gets enough demand. The simplest way to think of KickStarter is this: think of those PBS drives on TV, the “If you pledge more than $50 you get this free tote bag” type of promotions. For a project like mine my gift will be an early copy of the book and other creative unique offers mentioned above that only funders will be able to receive. You can read more about KickStarter here: http://www.kickstarter.com/help/faq/kickstarter%20basics#Kick
Erg: Erec’s first customer as a Sticker
Why Did you Spell “Erec” with an “e” instead of an “i” ?
The names of the book are witten with some historical significance in mind. Homo Erectus and Homo Ergaster are the scientific names for the two homonids believed to be around during the time period fire was discovered. So, the characters names in the book take each half of each of those names: Erec, and his friend Tus are the first two characters introduced. Followed by his first two customers Erg and Aster. Just in case though, we made sure Eric Makes a Fire works too 😉
Here is a vid of the Android demo. It is my first iMovie project so it’s a bit rough around the edges, ut to be honest it was kind of fun to do.
I’m looking forward to making the iOS one, or for any feature for that matter, and taking what i’ve learned to improve.
Some tips, lessons learned that I wish I did.:
– Take you finger away from the shot after every action, it makes it way easier to cut up
– Shoot it side ways so the stage is not taller than wide
– tape the phone down and mount your camera so it doesnt move throught the shot. again, better cutting chances.
make a short movie first and play with all the transitions, and effects and themes. Cut up your movie and add each clip to the stage and add some text and transitions again. Then add some music. I would have saved allot of time on the final if I had known what I know afte the final was made, but by te end of the real movie i was to tired to go back and start over.
Facebook has embraced the continuous scrolling, animated-esque homepage style. Like I mentioned in my other posts about this style of website (animated scroll sites), the format reduced the closing doors effect that clicking around a site can create. You bring the user into a story and prevents the message from being broken up. The single stream of consciousness keep a user curious to see what comes next. Combine the scroll with the hit-the-bottom-to-load-more-content system the potential for great workflows is there. Im really liking these design patterns, and they keep getting better. I wouldn’t be surprised if this style of website becomes the standard in the next year.
You are introduced to the homepage with a video. A pretty good one at that.
Clicking a button on the bottom quickly scrolls to a new section, so whether you start by scrolling or you are more of a clickster you are taken cre of. And both actions quickly teach you how to interact with ethe site.
As you scroll, the section headers rise to the top and stay there. (much like the other sites I have blogged about, and possibly started form the ios table header design pattern). ALso becoming a standard is the button navigation animates to sync up with where you are scrolled to in the website.
I was oddly propelled to click on an ad today, brought to me by the makers of the Smart Car. It was a pretty, clean, well made site. I scrolled up and down to see if anything would catch my eye, and strangely enough something did.
Some time ago I made a post about the coolness of sites I see that take advantage of telling their story, not through pages navigated to by the standard point-and-click, but by animating the home page based on the amount of scroll a user applys to the site. (You can find the post on cool scrolling animated sites here )
Some people have done a poor job of creating well balanced sitethat not only tells a good story, but does in a animated way that tells the story better than it otherwise could be told. And done smooth enough that the coolness, or story, isn’t hindered by the latency and choppyness of the meium.
Well This smart car ad page did just that. And without futher adu, here are some screeen shots and the link to the smart car ad site (2011-12-4).
It begins with a simple page, that focuses all the users attention to the car, and its size.
As you begin scrolling the colors of the sites changes and the a different smart car is presented.
Notice the menu on the right site, letting you know where you are in the story. The white cricle tells you what part of the story you are currently in, and what is coming up next. Notice the blending from one “page” to the next as you scroll. Notice how you find you self scrolling more and more, and digest a few tid bits of knowladge thatyou would ohter wise not have gained behidn a barier of clicks. Well done. 🙂
Sean Shadmand 