Assignment 2: Motion based poster

In assignment 1, we were given a task to design a 1 Malaysia poster based on our understanding. This is what  I had design: 

In this post, I'll be explaining about the process in which I animate the poster so that it can be a motion based poster. Here's the tutorial:

1) Create a new document in flash, using the ActionScript3. 

2) Change the properties to 240 x 320 pixels with frame rate 17 per second. 

3) Open up library and drag the starry sky background onto the stage using the selection tool. By pushing Ctrl, drag the frame from 1 until frame 123. Name this layer as "starrysky".

4) Create a new layer, name it as "powstripe1". Drag the powstripe1 image from the library and place it slightly at the bottom right corner of the canvas. Go to Modify > Convert to Symbol > Movie Clip. Next, adjust the frame time by pushing Ctrl. I place mine at frame 7 until 15. Then, select frame 10 > right click > create motion tween. Drag the image by using the selection tool until it is placed at the top right corner of the canvas. Now, you will have the image moving from bottom to the top.

5) Create new layer and drag the pow1 image from the library using the selection tool and place it just above the "powstripe1" layer. Name this layer as "pow1". Adjust the frame by pushing Ctrl to frame 14 until 18. 

6) I apply the same technique used in 4-5 for the rest of my fireworks image by altering the frames slightly different for one another. (To create a real firework effect). 

7) Create a new layer and drag the image of lantern and candle from the library onto the stage. Rename the layer as "lantern n candle". Go to Modify > Convert to symbol > Movie Clip. Adjust the frame to 1 until 40 by pushing Ctrl. Next, by highlighting frame 40 go to Properties > Color Effect > Alpha. Change the Alpha to 100%. Then, highlight frame 1, go to Properties > Color Effect > Alpha. Change the Alpha to 0%. Now you will have the image slowly appearing until frame 40. To avoid the image from disappearing at frame 41, right click on frame 41 and insert keyframe here. Drag the frame from 41 to 123 to lengthen the span time. 

8) Create new layer and drag the ketupat stripe image from the library. Place the image above the stage. Rename the layer as "ketupatstripe". I apply the technique used in 4 to create a motion tween( add motion tween effect at frame 61). Adjust the frame to 40 until 123. 

9) Drag the image until it is placed at the middle of the stage. 

10) Create new layer and rename it as "fonts". Drag the font image from library and place it below the "ketupat stripe" layer. Adjust the frame span time from 42 to 61. Apply technique no 7 to this image (the Alpha is change at frame 42 with 0% and at frame 61 with 100%). To avoid the image from disappearing at frame 62, insert keyframe here and drag the span until frame 123.

11) Finally, create new layer, drag the ketupat stripe 2 from library and rename it. Apply technique no 4 to this image by adjusting the frame span from 97 to 123. Apply the motion tween effect at frame 109 and you're done.

Unfortunately, I can't upload .swf file into this blog, therefore I can't show you the final product. But I did send the final product to Madam Lydia (my lecturer) though. I just hope that she receive my file. That is all from me, thank you for reading. 

Copyrights:

1) Firework vector from the ForDesigner.com.

2) Other images are created by me in Adobe Photoshop by altering the original image. 

Sketch, Assignment 1: Typographical Poster

This is my sketch for the typographical poster. The final outcome might change. This is the early ideation after all. I pick this idea because whenever I think about 1 Malaysia, I always think that it is about uniting people in Malaysia to become one. I choose the icon/symbol as the theme.

New Semester (Trimester 3)

I'll be using this blog (the same blog I used in trimester 2) for the trimester 3 computer graphics project. We'll be learning Adobe Flash this sem, therefore there might be a couple of post regarding this particular software. I might not be able to update this blog regularly, but please stay tuned for some of my works.

Mozart " Eine kleine Nachtmusik" Allegro

E-wallpaper tutorial Part 3 (Final)

Here's the part 3: 

1) Open up the girl image. 

Double click on the lock icon on the layer and then select ok when a pop up appear. 

2) Use the pen tool  to trace the body of the girl, but stay far away from her hair.Once done, right click > make selection. Enter feather radius as 0 and check the anti - aliased box. Then click ok.

3) Select the Rectangular marquee tool > right click > select inverse. Press Ctrl + X to remove the background. 

4) Use the Magic Wand Tool to remove the background around the hair and feather. Then, select the Blur tool to soften the edges of the hair. The final product would look like this. 

5) Drag the girl into the big canvas and place it at the center. 

6) Drag the castle image

   

    and place it below the girl layer. Position the image at the left.

7) Drag the image with the boat 

and place it ontop of the castle layer.

8) Click the add layer mask while highlighting the boat layer. Choose the gradient tool, set the color from Black to white. Drag the pointer from the bottom of the castle until slightly at the upper image of the boat. You will have something like this.

9) Open up this texture 

and place it below the girl, but ontop of everything else. Set it to color dodge.

10) Create a new layer, place it under the castle layer and rename it as Blue. Select the Brush tool, pick a light blue color (#9ab2dc). With the opacity set at 100% and flow at 37%, color the white background underneath the eye. 

11) Create a new layer on top of the blue layer, rename it as pink and set the layer type to Soft Light. Choose a light pink color (#ce1dd4) with the flow of 24% and cover the blue a little bit.  

2) Open up this old looking texture 

and place it ontop of the girl. Set the layer type to Soft light. Erase the surrounding area that is covered by the texture, but leave the one that's covering the girl. 

13) Create a new layer and use the splatter brush to cover up the girl like this. (using various grey colors) 

14) Change the layer type to Color Dodge and you'll get something like this. 

 15) Next, open up this texture 

and place it horizontally, by covering up all the canvas. Set the layer type to Multiply. Erase the center of the canvas while leaving the border so that it'll look like this.

16) The last step is the fonts. I used the Chopinscript for the "Carnival of" and Adobe Caslon Pro for "VENICE". I use drop shaodw, outer glow and pattern overlay effects to get the vintage look. I made a few changes (resizing and putting a bit more color after a thought) and this is the final look for my e-wallpaper. 

End of e-wallpaper tutorial. 

PS: I hope my tutorial does makes sense. 

Disclaimer: I do not own any of these pictures. These pictures are copyright of their respective owner. (I would link back to them, but I've forgotten where I found them. Therefore, credits goes to their owner). 

Reference: http://www.eyesontutorials.com/articles/30/1/Constellations-Photo-Effects/Page1.html   (I've improvised  the tutorial to suit to my theme) 

E-wallpaper tutorial Part 2

Here's the part 2: 

1) Create a new canvas with the following setting: (I'm using 297 x 210 mm or 842 x 549 pixels with 72 resolution  (A4 size) ) 

2) Drag the eye layer into the new canvas. Press Ctrl + T and rotate it slightly to the right. Place it at the right top corner of the canvas. 

3) Open up the picture of this high grass 

 and by using the magic wand tool, delete the sky.

3) Press Ctrl + T and rotate it vertically. Place the grass above the eye layer. 

4) Go to filter > Blur > Motion blur. Change the angle to 32 and distance to 57 pixles. Then click ok. Next, duplicate this layer by pressing Ctrl + J. Go to Filter > Blur > Gaussian Blur. Place this duplicated layer under the original grass layer to give a somewhat blur effect. 

5) Open up the cloud image, 

drag into the canvas containing the eye n grass. Remove the sky by using Magic wand tool and place it below the eye. Use the Blur tool the smoothen up the cloud edges. Duplicate this layer, go to Filter >Bblur > Gaussian Blur. Merge these cloud image together. 

6) Duplicate the merge cloud image and place it along the eyes.

7) Open up this texture, 

and place it above all of the layers. Change the layer type to Overlay. Use the eraser tool to earse the part covering the eye and grass, but leave the part covering the clouds. You will get something like this: 

End of part 2.

E-wallpaper tutorial Part 1

Here's the part 1 of my e-wallpaper tutorial. This part will mainly shows how I changed the eyes to look fantasy like.

1) Open the eye image with photoshop.

2) Create new Layer, double click it and rename it as Green. Next, with the Green layer highlighted click on the brush tool and change brush color to bright green. 

I used the #01ff0d color for this.

3) Change the brush opacity to 71% and flow to 51%. Color the eye with this green and change the layer type to Overlay. 

4) Create new layer and apply the same step but this time, change the color to bright Red ( #ff0101) and change the layer type to Soft Light.

5) click onto the Eye layer and hide the Green and red layer by clicking the eye icon on the left of each layer. Go to Image > Adjustment > Selective Color. Choose the setting as below then click ok: 

6) Re-click the eye icon on both green & red layers to make it visible. 

7) Open this clock image and drag it into the eye image using the move tool.

8) Use the elliptical marquee tool and trace the clock face. Then right click > Select Inverse. Press Ctril + X to remove the outside of the clock. 

9) press Ctrl + T and start to resize the clock face so that it is almost the same size as the eye. 

10) Change the clock layer to Multiply. Using the eraser tool, earse the clock outside of the eye so that it will fit perfectly inside. 

11) Hold shift > click onto all the layer > right click > merge layers.

End of part 1.