Wednesday, May 18, 2011

Musical Typography process...

Open Adobe Illustrator > pen tool > draw the shape of phone by using pen tool > go to fill > insert colour
Repeat the same step using the same tool > draw a drum and it's stick > filled colour



Start > programme > Audacity > file > import > audio or press ctrl + shift + I > select file > click the Selection Tool > drag the desired part > It is easier to edit when splited, use shortcut Ctrl+Alt+I or manually go to Edit > Split New > repeat the same step by selecting the last part of the music > Delete the middle part of the music by clicking the small 'x' icon next to the name of the music > Selection Tool > select the end of the first part of the music > Effect > Fade Out > select the second part of the music and Fade In, Effect > Fade In > repeat the same step to it does not sound awkward


Open Adobe Flash > file > new > select actionscript 3.0 > select ok >go to Properties > saiz > select Edit > dimension : 550 px (width) x 400 px (height) > press ok


properties > stage > choose coolour #FED402


File > import > import to stage or ctrl + R > select file > press open > the file will be automatically transfer to the 'library' > drag the file anywhere on the stage> once you draged, it will be disappeared but it will appear at the timeline


All the words will be converted into a symbol : select word > press ctrl + F8 on your keyboard > create new symbol will pop up > add name , type : movie clip, Folder : library root > press Ok > the symbol will appear at library


To create motion on your stage used keyframe on your timeline > select one point on the timeline > right click > insert keyframe > drag symbol to your stage > gray line will appear with a black dot > go to the next frame at the same layer repeat the same step > move the symbol at other place on the stage > press ok > the symbol will create motion


To create motion used motion tween : select one point > right click > insert keyframe > drag symbol to your stage > gray line will appear with a black dot > right click > click create motion tween > gray line will chance to blue line > select any point on the blue line > move your symbol > dotted line can be seen on your stage > small diamond shape will appear at the blue line > do the same step to create verity motion > press ok to play


Name all the symbol at timeline layer > double click > rename > press enter on keyboard > file > save as > select place > ok

Sunday, March 13, 2011

Assignment 2 - Motion Based Poster, the process

Well, unfortunately I forgot to print screen during the process of making this motion based poster, so, let see what I remember...

First of all, the size of the stage required for this project
is 320 by 240 px and the stage colour I used was
#006699.







Before beginning anything, I add frame by pressing F5. In the early stage, it does not matter where you put the frame. I can just add more later on. After adding the required frame, using the Text Tool, I type 'Boundaries of the' on the first layer outside the stage. I wanted to make the sentence to move into the stage later.
Next, right click on the sentence and choose Create Motion Tween and drag the sentence into the stage. This will make the sentence to move into the stage when it is animated.
I did the same method for each line of sentences where each line is in different layer.
After, by using the Selection Tool, select all of the sentences. Again using the motion tween, transform all of the selected layers by rotating them about 90° and ease them to the right. At the same time, enlarge the fonts using transform about 200%.
The white sentences also used the same method as the previous red sentences.
After all of the sentences aligned as desired, select all layers, right click and choose Break Apart after that choose Distribute To Layers. This allows me to move each of the letters in different layers.
First choose one of the separated letter and click motion tween. In stead of making the letter to move straight up, I decided to curve the motion. By using the Selection Tool, drag the motion path to make a curve.
I repeat the previous method for the rest of the red letters.
Continue after the final red letter, move the white letter the same way the red letters did before.
After the 'B' is moved, I made the 'L' follow the 'B' to make the letters look like a snake moving up.
Now for for the bird or the Parrot. According to my first assignment, I use a Parrot because it has 4 different colours which usually present in most flags, red, yellow, blue and white. I use Adobe Illustrator to draw the bird and both of it's wings. The bird as well as the wings are basically random letters clump together only the wings have 3 different colours. The body, right and left wings are drawn and saved in 3 different files to avoid overlapping.
Back to Adobe Flash. After I finished with the Illustrator, I imported the body, the right and the left wing into the library. Then drag the body, the right and the left wing on to the stage on a different layer. At the same time, I created another layer for the white typographic tail drawn in flash by using Text Tool.
I wanted to make the bird flying as the camera pans down. I just select the layer containing the body and the tail and motion tween them and drag them down until the all parts of the bird disappear from the stage, in this case, outside the stage.
For this part, I distorted the motion path by using the Subselection Tool to make the motion path curve even more. The Selection Tool can only produce an arch of motion path. By clicking the Orient To Path option under Rotation allows  the bird to move head first according to the motion path.
The white letters were motion tweened the same way as the bird did.
By selecting the desired frame, I transformed the bird, the right and the left wings as well as the letters by enlarging them to make them move as if if fly towards the screen.
For the final part of this motion based poster, I put my previous poster made in Adobe Illustrator, import them to library and drag it to the of center of the stage. At the same time, right click the image and choose motion tween. Select the 1st frame of the image's time frame and  change the alpha channel from 100% reduce it to 0%. After than select the 7th frame and change the alpha channel from 0% to 100%
I did the same method as the previous method to the white sentences. Finally, I click the last frame and open the action script and type 'stop();' to prevent the animation from looping.

Tuesday, March 1, 2011

Final sketch

I decided to do a parrot surrounded with typography...or at least the parrot is. But it took so long to adjust the font, spacing and the arrangement of the sentences, as in where to place them and what size should they all be.
Since I'm not allowed to use or copy other images, I draw the parrot(roughly...) standing on the globe with words in front of the parrot. I was planning to use the letters and arrange as well as colour them to create an image of the parrot and the globe.

Linking through Art

I was assigned to do a poster of '1 Malaysia' as the symbol of multiculturalism. Most of the ideas I came up were simple and have the BIG '1' in every sketches...but it hit me. Instead of doing the big '1' along with the colours of the flag, why not I do something else that have that particular colours.
So, I choose a Macaw, also known as Parrot. This species of parrot are brilliantly colourful. A Macaw usually has bright red, yellow, blue and green feathers.

Saturday, November 13, 2010

Haunting Finale (Final product)

Honestly, this is my first time editing and putting together various images to produce one different picture...I hope you like it and enjoy!

Halloween Wallpaper - part 2

I changed my mind about the cut sky...I found a brilliant lightning image on the internet last night.


And this is the result when combined with the previous images.
I put two pumpkin images. Yes, I substituted the black cat with one of the pumpkin. Then, remove the background using the 'Magnetic Lasso Tool'.







Zooming in to the pumpkin, there was this unwanted shadow casting on the pumpkin. By using the 'Clone Tool', clone a bit of the parts of the pumpkin, and cover up the shadow.





This is the result after cloning parts of the pumpkin.









The full view of the whole image...
And now it is ready to be Adjusted.








This was my first attempt in using 'Adjustment'.
It was not that Halloween-ish to me, so I kept on changing the colour using the 'Colour Mixer'.







I manage to mix this colour after almost half an hour changing the colours...









The previous one was a little dark, so, by enhancing the 'Brightness and Contrast', this what I came up with.







Finally, to add the text. Use the 'Text Tool' and drag while holding the left click to create a space for the text. For this wallpaper, I just use the normal greeting, "Happy Halloween"






I add various effects to the text to make it more interesting. To do text effect, double click on the text layer and a window should pop out.
First effect was the 'Drop shadow'. In the image, I adjusted the distance, spread and the size of the shadow.




The second effect was the 'Outer glow'. The editing was done automatically...








And lastly, the 'Gradient overlay'. On the gradient overlay, click the gradient bar and another pop out will appear. This is to change the colour or effect of the gradient. You can even click the small arrow near the 'Preset' to choose different colours or effects.
I set the colour on 'simple' and chose green. 




Before wrapping everything up, I reduce the opacity of the text layer to 50% to make it look ghostly~

Halloween Wallpaper - part 1


For this wallpaper, I started out with a white background, A4 size, landscape.

Then, go to 'file' and select 'place'. According to the sketches I made earlier, I move the image lower to give space for things to be included later on.

After confirming the position, it's time to remove that background from the image. In this case I use 'Polygonal Lasso Tool' which is easier than using 'Magnetic Lasso Tool' because the house have mostly straight line.






This is after the background was removed.











Create new layer for the plain background. I'm used to using shortcuts in creating layers which is situated on the right with red mark. That's the shortcuts to create new layer. After that I use paintbucket which I mark on the left and click on the white background to change colour.
I  had a second thought in using the broom image...I was wondering that the broom fly, cutting the sky open...

So I create another layer and by using the 'Pen tool', I draw out the opening.
After that, I place the broom at the tip of the point.

By using the same technique, select the 'Magnetic Lasso Tool' and follow the outline of the broom. Then delete it.