Improving my Ilustrator Skills

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.

horse-flat-vector-blink

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.

horse-flat-vector-sprite-small

 

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.

How to create fast motion videos on your iPhone for family vacation updates

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:

Here’s how I did it

  1. Download Hyperlapse by Instagram on your iPhone
    1. 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.486943823_640

      hyperlapse
      Hyperlapse’s home page, recording and saving screens
  2. Use Hyperlapse to shoot some video.
    1. Even though there is built-in stabilization, it behooves you to try and keep the camera as steady as possible.
    2. 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.
    3. Once you finalize the video it is saved to your photo library for later use.
  3. Download iMovie on your iPhone

    at-the-core-imovie-hero_1
    iMovie app in edit mode
  4. Follow the instruction to start a new movie or trailer, and select “movie”
  5. Choose a theme (I usually just choose simple) and select “create”
  6. Follow the instruction to add “video, photos, or audio”
  7. Select one of your Hyperlapse videos from your library
    1. Tip: Pressing play will allow you to preview the video before adding it. The arrow pointing down will import it into your project.
  8. Drag and drop your movie clips in the order you want them to play
    1. 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.
  9. Add transitions between the clip by tapping the small square box in between each clip.IMG_9912
    1. 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.
    2. 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.
    3. 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.
  10. Edit the the duration of a clip
    1. 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.
  11. Speed up some “in between” clipsIMG_9914
    1. 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.
    2. Tap the clip to go into edit mode.
    3. choose the meter icon (directly to the right of the scissor icon.) You will then see a meter labeled 1X
    4. 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.
    5. 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

IMG_9913

  1. 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.
  2. Select a clip for editing (make sure the scissor tool is highlighted.)
  3. 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

  1. Select a clip for editing
  2. Select the large “T” (third icon to the right from the scissor.)
  3. Select a caption type
    1. 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.
    2. 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:

  1. Open a movie in iMovie (if you do not know how to do so read the tutorial above.)
  2. 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.)
    1. You will then see an circle arrow appear on the video. Once you see that remove your fingers from the screen.

IMG_9915

 

Here is a quick video of some of the features in practice, as described above.


Enjoy!

3 reasons why I’m bullish on extensions, plus a better scheduling app.

simplicity-b2b-content-marketingScheduling 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.

189171-bf657de80640275b84d3931444d6fafe-medium_jpgAn 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:

 

Checking_in____-_sean_shadmand_gmail_com_-_Gmail
Extension overlay

 

Checking_in____-_sean_shadmand_gmail_com_-_Gmail 2
Expanded overlay

 

Checking_in____-_sean_shadmand_gmail_com_-_Gmail 3
Select availability

 

Checking_in____-_sean_shadmand_gmail_com_-_Gmail 4
Available times copy and pasted

 

Assistant_to_-_Your_Personal_Scheduling_Assistant
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.

iOS 8 Features: Download the Beta and Get a Sneak Peek

If you can’t wait till this fall to download the final iOS 8 version to your phone checkout this pages easy to follow information on installing the beta (now at version 5) release. http://www.redmondpie.com/ios-8-beta-download-release-date-features-rumors-and-news-update/

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

IMG_6262.PNG

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.

No matter what happens to you – make good art

Great commencement speech from Neil Gaimen passed on to me by Isaac Mosquera. Lots of poetic insights…Have a looksee

If you don’t know how to do it pretend you are someone that knows how to do it and do it. – Neil Gaiman


https://www.youtube.com/watch?feature=player_embedded&v=ikAb-NYkseI

Amazing Animated Scrolling Sites: A web symphony in design

animationI 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)

Fishy

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.

 

Ikayzo

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.

 

Super Chemical

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.

 

CSSPiffle

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).

 

 

Bagigia

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: A Children's Book About Entrepreneurism

What is the book about?

Erec Makes a Fire is a story of how a group of kids stumble upon a cave covered in ancient wall 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 most 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 for something, 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 the parents reading it, that entrepenuerism 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 around how anyone can turn a will and an idea into a business. I have enjoyed telling that story, and giving tips on how 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 what else was I to do as an entrepreneur but to fill that void. Erec Makes a Fire is the first in a hopeful long 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: Fist, 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 therefor 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 that: that kids get more than you think.

Stickers
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 sothat 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 summer of 2013. There will be special gifts given out through KickStarter in addition to the books themselves to make thing 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 up 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
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.

Slides of Creative Process

Original Idea Draft
Original Idea Draft

Draft Rewrites
Draft Rewrites

Preliminary Sketches and Character Development
Preliminary Sketches and Character Development

Backdrop Scene Development Sketches
Backdrop Scene Development Sketches

Story Board Final Sketches
Story Board Final Sketches

Final Sketches Converted to Digital
Final Sketches Converted to Digital

Final Layout Colored for Publishing
Final Layout Colored for Publishing

The books as shown in Large Hardcover and Regular Sized Soft Cover

Erec Makes A Fire: A Children’s Book About Entrepreneurism

Erec Makes a Fire was successfully funded on Kickstarter! Thanks for all your support.

What is the book about?

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.

Stickers
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
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 😉

Slides of Creative Process

Original Idea Draft
Original Idea Draft

Draft Rewrites
Draft Rewrites

Preliminary Sketches and Character Development
Preliminary Sketches and Character Development

Backdrop Scene Development Sketches
Backdrop Scene Development Sketches

Story Board Final Sketches
Story Board Final Sketches

Final Sketches Converted to Digital
Final Sketches Converted to Digital

Final Layout Colored for Publishing
Final Layout Colored for Publishing
20130211-P1090359
Printed Proofed Books
Sticker (kids) Proofs
Sticker (kids) Proofs

Get in to the cheering section and like us at http://www.facebook.com/ErecMakesaFire, and subscribe to email updates as we neat the big release here (http://signup.erecmakesafire.com)!

My first iMovie: Demoing a product

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 gets into the continuous scroll promo page game

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.

https://www.facebook.com/about/timeline (2011-12-15)

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.