Practice on watercolor

I tried watching a few more tutorials on the watercoloring method and also trying to find the best way to color to match the type of story.
                                      

I'm trying to make my reference more obvious by making the scene more realistic to the photos I have posted before. It doesn't seem like the exact replica but at least it still have the park view.

Here I try to use watercolor to draw two of the item needed in the scene. I'm still not very sure if I should draw them as one or individually. Thought about drawing them separately but then it will look kind of parallax. But, the idea is still in mind.

At the same time, I try poster color again. Feel like I didn't want to do on just watercolor because I would thought that watercolor can be quite messy. However after this, now I doubting my skill in this.

Reference from:

http://www.youtube.com/watch?v=Fv0eSWZ2C44

Watercolor trial on a random scene. Was suppose to be just cloud initially but colored wrongly.

Was looking through a few technique of coloring using watercolor and this technique is really awesome.

Learned from:

http://www.youtube.com/watch?v=A8TdJA1P-nY

Learned the technique of coloring a tree and use it for different object. Using this basic, I tried to draw a scene and maybe I might change the drawing style to something like this.

Learned from:

http://www.youtube.com/watch?v=LFMi4VA6O6I

Looking from the last sketch of the scene, should I do the story in a circular manner? Hmmm… I shall keep that in mind *note to self*

Color Testing

I'm trying different medium in case I can't find it suitable and also to see which is more convenient to me. Also, I took pictures regarding the park by my house.

                                     

Here could be suitable for the first scene, where I'm not really sure what to put in. However, I think this is quite suitable in a way that this is the entrance to the playground.

This could be when she is alone and is seen in the playground. I think this is suitable because it shows most of the play set of the playground. Of course, I would be adding more item if needed.

The three images above can be a reference for when the kids are playing hide and seek. With the trees there for the divider to the next scene.

For the part where the children walk home with their parents will be referenced from this.

Beginning watercolor testing as I'm not very good in it.

The scene is based from the last picture of the park above. Yeah sure, I changed a little as it would be a little empty in the middle.  I had to do it layers by layers to avoid the color from mixing in a way that I don't want it to be.

I tested the watercolor in another paper. I thought it could be a suitable place to test my coloring skill.  *I do not own the picture, it's from another source.

Next I tried poster color. It is not as a wet medium as watercolor and the color is brighter and thicker. I think it is neater to be painting in poster than in watercolor.

Here I sort of color the skin wrongly as the brown doesn't suit the peach color much. While at the bottom character I tried color pencil as it is a medium I'm much comfortable with. 

Trying to mix the colors using poster color. First one is mixed from the light > medium > dark. Second is medium > dark > light. The arrangement is sort of weird though but I was testing is more practical. Third is dark > medium > light. I think it is more suitable and the color mixed nicer compared to the other two.

May go for poster color for the characters while the background in watercolor. This is because water can get messy and the characters can be small at times hence the space given may not be enough for watercolor. It can also be messy. Maybe for the touch up, I could add in color pencils too.

Watercolor tutorial that I based my technique with:

                                           

http://www.youtube.com/watch?v=tSuL6RJGBU4

Schedule

This is a rough schedule on what I will (if remember) going to do. For the last few weeks I purposely I left it blank just in case I couldn't accomplished what I had to do before.

For now,

Character design (checked)

Storyboard (checked)

Start tutorial!

Since I am not very familiar with Adobe Edge, I thought maybe I should start again with the very basic step. Coincidently it have the click function I wanted to added it in.

I used back the character for my game design in the previous semester. 

Basically, I learn to control the next animation by adding a trigger (sym.stop();) and start play again in the action of the button (image to be click). That way, when I clicked on the princess, the text will animate into the screen.

A recording on how it turned out to be. I'm not really sure how to share the file here without using the html, wanted to export it as a movie file but I not sure if its possible. Will try to check it out again. For now, I could find it yet.

Tutorial from:

Starting from 12.52

http://www.youtube.com/watch?v=Jaq5OEp4-cE

Character design & page layout

Since I'm doing on the horizontal scrolling, I did the sketches of my pages on how I want it to look like in the final outcome. I sketched it in a horizontal script with dividers to indicate the different scene. It would look like the parallax scrolling but it is just more to animation to the next page with a button.

Try doing different poses for the girl using the character design I picked from the previous sketch. Yesterday we were told to try to localize our story if possible, though it was not my intention but I can try. Since my story is more to general so it is not possible to localize it, just change the clothing and the hair color should be okay.

I wrote down what I have to do while using the drawing reference from the previous sketch. In every divider, I try to make it link to the next scene so that it doesn't seem to be cut to the next page. In some poses the kids make and the playground scene uses some reference I found through google. Despite the reference, I am planning to use the park near my house as reference since the park I am doing is similar.  Thus, I will take the photo reference soon when I have the time.

The kids drawn outside the storyboard is the children's hiding pose and the pose after is found. For one of the kids (the boy nearest to the screen), I want to use his found pose as a link to the next page of the scene 3. The one in triangle will be the one animated (not sure if it's obvious as I draw the shape in a light stroke)

http://image.shutterstock.com/display_pic_with_logo/1031614/128748893/stock-photo-the-funfair-playground-illustration-for-the-children-128748893.jpg

I got the reference for the background of the park scene where I will add in the trees especially for the first scene.

http://www.illustrationsof.com/royalty-free-playground-clipart-illustration-1138936.jpg

Here I used the flowers and the kids pose for the kids after they are found in the hide and seek scene. The cheerful environment is very suitable especially when it involve children playing. Usually when we are found while playing hide and seek, we will feel satisfied and want to play again. So this is why I make the kids happy when found. I did thought of using a lower brightness / opacity on the kids while they are still hiding. Not sure if I should do a short animation when they are found, that is still in thought.

http://comps.canstockphoto.com/can-stock-photo_csp14795187.jpg

I wasn't sure how I wanted to do scene 4 as what I imagine was different. However I had to change before of the link of scene 3 & 4. So I searched for reference and I found this and I used this though it is a little different.

http://www.directoryofillustration.com/images/artistimages/images/6247_92842.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjND7nfQVYVfNPaPvt6fvli7iYnahF2d_34ZBoI-VDQ6eCowsfU3yZFxfkfwskz2MVKLcvuHZGpowLIbYrzrP11BjZE_mWmLLmxK4se5rwtlTouWogS2f5vrpqUOX1aAvtmKbEeeRBfo0o/s400/Mai+S+Kemble+watercolor+illustraion+5.jpg

Illustrations that might be helpful in terms for the color scheme and technique in using water color. The first image is shown water color mixed with color pencils, so I thought maybe it is worth the try.

Starting experiment!

After the presentation today, I would consider storybook to have a horizontal slide. Instead of just sliding, it will have an arrow to go to the next page and instead of of a totally different scene, the background (- or any visual) is connected to the next slide. This, is very similar to parallax scrolling except that it uses arrow instead of scrolling.

Examples of horizontal parallax and scrolling :

http://www.reverenddanger.com

http://www.gavincastleton.com/index2.htm

http://www.drugtreatment.com/#next

Since, we should start experimenting already, I started on the character design. I tried drawing the girl in four different ways from different inspirations and this is what I get:

From here, I would pick 2 & 3. Hence my character style would be the body of 2 and the face of 3 since I think it would be cuter that way. Besides, drawing small kids like that would be easier to color. 

For the color, I may consider physical watercolor painting while digital painting as an alternative. Before that, I would have to consider practicing my watercolor as it is not my forte in it. I will take this as a good opportunity and reason to learn this technique.

Finalized idea

I'm finalizing on doing an interactive storybook with my own storyline. Since some of the seniors had done this, I would like to make it more interactive then the simple gif in it. Some I will have to research more and also based on what I had in mind.

The story board of the story…

- animated text

The following is broken down into pages.

1. There was a pretty young girl who is always seen in a white and pink dress. She is sweet and cheerful.

 - Her hair and dress blows in the wind (gif)

2. Everyday, she is seen playing in the playground all by herself the whole day.

- tap on the playset to see her play

- animated background

3. Her favorite time of the day  would be in the evening where the other children would play around in the playground. Every time, she would play hide and seek with them as it is one of her favorite game. 

- Find the hiding children.

- When found, the children do a different pose.

4. When it is time to go, she would just wave goodbye to the kids. No one ever saw her leave the place ever since she has first seen here.

- The girl's hand wave (gif)

- moving side characters as they are going back home

5. As a young boy is walking with his mother, he told her that he had fun and made new friend. He talks about the girl and he was suddenly curious. He asked his mother, " Mom, why her mother is not there to pick her up?"

His mother just look at him and told her son, "That's because she can't go back home anymore".

- Background moves as if the character is walking (bg gif)

- characters move up and down

6. As the mother look back, it is revealed that the girl died a few days ago in a car accident near the playground.

- character turns to look back (gif)

-zoom out of the girl in the park to see the flowers outside the park.

Character References: 

http://blaine.org/jules/ramos_monca_55_lr..jpg

http://whattoreadtoyourkids.files.wordpress.com/2013/10/sophiessquashinset.jpg?w=300&h=187

http://blaine.org/jules/Spot%20172dpi1.jpg

http://www.awn.com/sites/default/files/image/featured/2918-little-matchgirl-matchless-watercolor-experiment_0.jpg

https://img1.etsystatic.com/014/0/7607560/il_340x270.436713979_mcpq.jpg

Overall reference:

http://www.axure.com/forum/6-x-tips-tricks-examples/4595-interactive-kids-storybook-worm-story-animation.html

http://www.wanderfulstorybooks.com/Storybook_Sampler

What inspires me most:

http://oakleighss.edublogs.org/2012/11/12/the-artifacts-new-interactive-storybook-app/

One of the most interactive storybook, The Artifacts by Slap Happy Larry.

One of the feature that I like most and would like to implement it into my storybook is the ending part of it. Where reader swipe (wipe) the screen and it changes into another scene. However, I am still searching for it.