While doing the visual on the other hand, I thought maybe I should start on the tutorials to do the technical. Since I thought of doing gif within a button. So I learned to do a gif using Photoshop as I never did it before from the tutorial below.
Probably will used back some of the sketches I did before as one of my medium (the hatched-styled layer drawing)
So I tried doing the gif thing in Edge. It didn't work. I followed everything given in the file (guide) but I can't make it work. Probably I'm missing something as it has no explanation much on it. I could click on the button but the gif can't be seen. Will have to find another method or probably another tutorial for me to understand better.
Then, I found a video on how to do animation in Edge. It was easy but the method wasn't really appropriate for animating (changing clip mask position, multiple keyframe and etc)
Since I do have some will be in gif or some will work in a button state, so I separate them in different layers ( different color paper = different layer). In the images that will have gif and animation, I planned on doing it in photoshop instead using the watercolor effect too. This can make it easier to animate and to save it as a gif. The background will be remained on the physical watercolor. This is just a rough.
I redraw the whole scene again and this time I labelled out which comes first or which is supposed to be added to the back.
Then I draw them in different colored paper so that it is easier to differentiate when I want to do the final product.
The overall of the layer done.
Got the sky watercolor tutorial but it doesn't go the exact same so I change a little in terms of the cloud movement. The tree I used the previous technique I learned before this.
Scene 1
The girl and the flower will be in the front. The size doesn't follow the position but it's okay for now as I just want to know which layer they are from. The hut is placed in the middle. The walking pavement will be added when it comes to the final product.
Scene 2
The rocking horse will be at the front. Next comes the slide then the monkey bar. Lastly, it will be the swing at the back (sorry size doesn't match). They are all in different layer as they all have their different functions.
Scene 3
It can be seen that the slide is connecting from the scene 2. This shall be the part where the kids are playing hide and seek.
Scene 4
The scene where the children go home. The slide is supposed to be facing the other side but here I just use the same one.
Scene 5
The bush as connector and this is when the mother and child is walking home. The pavement will be added in the final product as I just use what I have right now.
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.
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.
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:
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.
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.
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)
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.
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.
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.
