For my integrated project, I decided to do a trailer for a series of short animated cartoons I have posted on my YouTube page. The name of the series is Adventures of King Dice, and is based on a young couple who are having problems in their relationship because the girl's father disapproves of the relationship. The original videos were created in an online 3d animation software named Xtranormal.
The first step in my process was research. I went to YouTube.com and looked at over 20 trailers for different genres of movies including action, drama and comedy. Some of my observations included:
-The use of AfterEffects for opening sequences and also transitions.
-The use of soundtracks which set the mood for the trailer.
-The use of short and long video clips based on how fast-paced the action in the trailers was occuring.
-The use of typography especially use of fonts which were appropriate according to the type of movie.
The second step in my design process was to brainstorm how I wanted to approach the trailer. I viewed each of the movies in my mini-series and a plan start coming together. I then wrote down a brief plot/synopsis for my trailer.
Synopsis
The two main characters (King Dice and his girlfriend Patrissia) are in a conversation. Dice is complaining that she never visited him in prison, she replies that she has her doubts about whether or not he cares about her. The next scene involves Dice and Patrissia's father (a policeman), in an argument, with the dad telling Dice to stay away from his daughter. In the third scene, Patrissia's father is telling another policeman that he wants them to target Dice. The final scene involves Patrissia revealing to her father that she is pregnant for Dice. Various scenes from the series will be interwoven into the trailer.
The next step in my design process was to do a rough assembly of the clips I would be using in my trailer so that I could decide on an appropriate matching soundtrack, as well as come up with a color scheme for my AfterEffects components of the trailer. I opened a new project in Premiere Pro, then went through the various mini-movies and added the appropriate clips to a sequence. I then played these back while brainstorming what would be appropriate After Effects video as transitions between the main scenes. I decided to create four After Effects short clips which would each be four seconds long.
After Effects Work
Most of the trailers I viewed began with a short clip which advertised the studio which was responsible for the movie. I decided to make one of these of my own. I created a composition in AE 320x240 pxls. Created a background to which I added a ramp effect to get a gradient. I then inserted my text and animated it, then rendered out my intro clip.
The transitions clips I created invidually in Photoshop. Each was given a grunge background, different layer styles was given to the text layers. I then opened up the PS files in After Effects and animated the text layers so that they would come in from the side. I made them into 3d layers, then added a camera. I then animated the camera to pan upwards. Each of the transition videos were created to last four seconds each.
Refining the video edits
I inserted the transition videos which I had created in After Effects in their correct places in the timeline. I then went about editing out un-needed portions from the rough edit I had done earlier.
I then added some transitions to my sequence. Where the AE videos transitioned to my footage, I used a fade to black dissolve. I used a simple wipe effect to introduce each of the AE video clips.
Once I was satisfied with what I was left with, it was time to add sound.
Sound
I wanted a soundtrack which fit the mood and theme of the trailer. Since my series involved young people, I wanted something fairly hip and modern, and catchy, but also something which could catch some of the essence of the seriousness of a young couple struggling to maintain their relationship through adversity. I browsed my personal collection on instrumentals and hip-hop sounds, and came across Bonnie and Clyde by Jay-Z and Beyonce. I considered this to be the perfect song since it dealt with a similar theme, of a couple being there for each other despite trying circumstances.
Since the beginning of the trailer contains mostly dialogue, of a somber and serious nature I decided to just go with the instrumental of the song playing at a low level in the background. I inserted this audio on one of the audio tracks in Premiere Pro. Near the end of the trailer, in the segment which showed various scenes of conflicts between the characters, I removed the audio from the video clips, and instead used a clip of Jay-Z and Beyonce singing the hook of the song.
For dramatic effect, near the end I removed all other sound except the conversation between Patrissia and her father where she reveals her pregnancy to him. The end of the trailer is simply Jay-Z singing a line from the hook of the song.
One other audio effect I included was a page turn effect. This I added to introduce each of the AE video transition clips.
Rendering
I rendered out my video in the H.264 format, at a size of 320x240 pxls.
Wednesday, December 22, 2010
Friday, October 1, 2010
IPO curves in Blender
Today in MC35a we did some more work in 3d animation. The objectives for the lesson were:
-Distinguish between different types of keyframes.
-Identify the different properties than can be interpolated.
-Create cycles using IPO curves.
-Edit IPO curves
After listening to Mr.Bain's overview I learned that keyframes which can be created in blender include location keyframes, scale and rotation.
In order to view your IPO curves, one would have to go to animation view and the IPO curves will be displayed in a graph on the left side of the screen.
My first step was to create a shape to be animated. I selected the premade 'monkey' mesh. I animated it with location to the left, then added a rotation.
By clicking Ctrl + up arrow, I was able to see the full graph and name my graph so that it could be applied to a new object.
I named my graph monkeyRotate.
I then created a simple square mesh, then with it selected i went back to the full graph view and applied the graph to the new shape.
Delta Curves: these can be created to enable the ipo curves to be applied to different locations.
-Distinguish between different types of keyframes.
-Identify the different properties than can be interpolated.
-Create cycles using IPO curves.
-Edit IPO curves
After listening to Mr.Bain's overview I learned that keyframes which can be created in blender include location keyframes, scale and rotation.
In order to view your IPO curves, one would have to go to animation view and the IPO curves will be displayed in a graph on the left side of the screen.
My first step was to create a shape to be animated. I selected the premade 'monkey' mesh. I animated it with location to the left, then added a rotation.
By clicking Ctrl + up arrow, I was able to see the full graph and name my graph so that it could be applied to a new object.
I named my graph monkeyRotate.
I then created a simple square mesh, then with it selected i went back to the full graph view and applied the graph to the new shape.
Delta Curves: these can be created to enable the ipo curves to be applied to different locations.
Tuesday, June 1, 2010
Gloss Effect on text
Just a quickie. Got this tip from this brief tutorial here.
1. type text
2. add gradient
3. use pen tool to draw shape of gloss on a new layer
4. right click on shape and select fill path, choose white color
5. blend the new shape so that only the parts covering the text are visible
6. reduce the opacity of the new layer to between 10 and 15%
Simple example
1. type text
2. add gradient
3. use pen tool to draw shape of gloss on a new layer
4. right click on shape and select fill path, choose white color
5. blend the new shape so that only the parts covering the text are visible
6. reduce the opacity of the new layer to between 10 and 15%
Simple example
Wednesday, May 26, 2010
Random PS tips
Watching this training dvd Photoshop CS5: One on One Fundamentals by Deke Mclleland for Lynda.com.
Will be posting random useful tips I encounter.
Adjust brightness/contrast quickly and easily:
Go to image> adjustments > brightness/contrast.
Holding shift while scrubbing allows you to adjust by increments of 10.
When a value is selected, it can be adjusted using the up and down arrows on the keyboard.
*With two images open in side by side windows it is possible to drag both at once by holding down the shft+spc bar keys then dragging one image
Adjustment layers
Open an adjustment layer by opening up the adjustment layer panel and double-clicking on desired option.
To name adjustment layer when opening it, hold down alt then click on option within the adjustment layer panel.
Save an adjustment layer by saving the jpeg as a psd file.
If jpeg is needed for the save then you can save as a copy, by turning off layers in the save documents dialogue.
You can use the mask which comes with adjustment layers to select areas where the adjustment doesn't affect, example use the quick selection tool to select the area, then fill selection with black (alt+delete) to create this effect.
Possible to select portion of desired area then going to select > similar for automated selection.
The layer mask density can be adjusted in the masks panel.
*Here is a little before and after using a black and white adjustment layer with a mask to allow some areas to keep their color.
after
before
Using the histogram
Open up the histogram panel in Windows.
Click on corner of panel to open up the expanded view.
Making changes to the adjustment layers will simultaneously change the histogram. The objective is to have a balanced histogram as much as possible.
Adjusting the hue/saturation selectively
Open up a hue/saturation adjustment layer.
In the adjustment pane, select the color you would like to adjust the hue for.
Scrub the various channels to change the color.
It is also possible to choose the color target adjustment tool and scrub directly on the image to change the color of something specific eg clothing.
Making selections:
Pressing bkspace after selecting objects is a shortcut to bring up the content aware fill panel.
Fade fill is done following a content-aware fill by going to edit > fade fill.
To find exact center of image: select all (ctrl A) > select move tool > select show transform controls. Point will show up in the exact center, and ruler guidelines can be snapped to the images.
When using the elliptical marquee tool, draw circle from the center outwards by starting in the approximate center of the image, start the circle then hold down alt and drag.
To soften the edge of a selection, go to select > modify > feather.
Make a graduated selection by using the feather option. Select the region > go to select > modify > feather and choose a large radius depending on what extent you want the selection to be feathered.
After adding a new image to a document, you can match the color by going to Image > adjustments > match color.
Will be posting random useful tips I encounter.
Adjust brightness/contrast quickly and easily:
Go to image> adjustments > brightness/contrast.
Holding shift while scrubbing allows you to adjust by increments of 10.
When a value is selected, it can be adjusted using the up and down arrows on the keyboard.
*With two images open in side by side windows it is possible to drag both at once by holding down the shft+spc bar keys then dragging one image
Adjustment layers
Open an adjustment layer by opening up the adjustment layer panel and double-clicking on desired option.
To name adjustment layer when opening it, hold down alt then click on option within the adjustment layer panel.
Save an adjustment layer by saving the jpeg as a psd file.
If jpeg is needed for the save then you can save as a copy, by turning off layers in the save documents dialogue.
You can use the mask which comes with adjustment layers to select areas where the adjustment doesn't affect, example use the quick selection tool to select the area, then fill selection with black (alt+delete) to create this effect.
Possible to select portion of desired area then going to select > similar for automated selection.
The layer mask density can be adjusted in the masks panel.
*Here is a little before and after using a black and white adjustment layer with a mask to allow some areas to keep their color.
after
before
Using the histogram
Open up the histogram panel in Windows.
Click on corner of panel to open up the expanded view.
Making changes to the adjustment layers will simultaneously change the histogram. The objective is to have a balanced histogram as much as possible.
Adjusting the hue/saturation selectively
Open up a hue/saturation adjustment layer.
In the adjustment pane, select the color you would like to adjust the hue for.
Scrub the various channels to change the color.
It is also possible to choose the color target adjustment tool and scrub directly on the image to change the color of something specific eg clothing.
Making selections:
Pressing bkspace after selecting objects is a shortcut to bring up the content aware fill panel.
Fade fill is done following a content-aware fill by going to edit > fade fill.
To find exact center of image: select all (ctrl A) > select move tool > select show transform controls. Point will show up in the exact center, and ruler guidelines can be snapped to the images.
When using the elliptical marquee tool, draw circle from the center outwards by starting in the approximate center of the image, start the circle then hold down alt and drag.
To soften the edge of a selection, go to select > modify > feather.
Make a graduated selection by using the feather option. Select the region > go to select > modify > feather and choose a large radius depending on what extent you want the selection to be feathered.
After adding a new image to a document, you can match the color by going to Image > adjustments > match color.
Thursday, May 20, 2010
Text effects!!!!!
Yes I know its 1:34 am but I was playing around in PS and stumbled across this technique so I'm blogging about it quick before I fall asleep and completely forget how I achieved it!
So I've got this Alien Skin plug-in for PS, and one of my favourite features of this plug-in is that it allows you to use Extrude to create 3-d text. However, I have always been frustrated by the fact that I couldn't apply a gradient or pattern etc to a font that I wanted to extrude. Well low and behold, I just got this brilliant idea, tried it and it worked like a mu.....
Step 1: Type out the word(s) to be extruded.
Step 2: Duplicate the text layer.
Step 3: Apply the extrude filter to the duplicated text layer.
Step 4: Delete the duplicated layer.
Step 5: Move the original text layer over the layer with the extrude, use the keyboard arrow keys to make sure that they are perfectly aligned.
Step 6: Apply your choice of gradient overlay, pattern etc to the text layer.
Step 7: Once this is done, use the CTRL key to select the extrude layer and the text layer, and merge the two layers and voila b*tches!!! 3D text with a gradient on the type face!!
Here is my first example, it's not refined or color co-ordinated but it shows that this ish works!
A few minutes later after some tweaking....
Ok so I've been playing around a bit more. I find that sometimes the edges may not align perfectly as in the above example with my name. One solution to this I have tried and it works is to add a stroke to the text layer before merging the layers. This stroke should be the same color as the extrusion, this is easily accomplished using the color picker.
Here is a second, more refined example for y'all:
A whole 'nother level
Yup. I decided why not? More experimentation. Decided to try out this effect using a clipping mask. Wrote my text, dropped in my image, clipped that ish out, duplicated my text layer, added my extrusion, added a stroke to the text layer, merged all layers, added a drop shadow to the final product, and came up wit this son of a b-word!!
PS: Don't underestimate the usefulness of YOUTUBE!!!
Another effect I always wondered how to do was how to add a gradient or other effect to the extrustion itself. Well I Youtubed it and got an excellent tutorial here by IceFlow Studios.
Basically you type your text using a nice blocky font. then you hold Alt and then press the down and direction keyboard keys to copy the layer repeatedly. Then you merge all the copies, and place the original text layer over this layer. After that, you are free to add a gradient or other effect to the layer below. Here is a simple example:
So I've got this Alien Skin plug-in for PS, and one of my favourite features of this plug-in is that it allows you to use Extrude to create 3-d text. However, I have always been frustrated by the fact that I couldn't apply a gradient or pattern etc to a font that I wanted to extrude. Well low and behold, I just got this brilliant idea, tried it and it worked like a mu.....
Step 1: Type out the word(s) to be extruded.
Step 2: Duplicate the text layer.
Step 3: Apply the extrude filter to the duplicated text layer.
Step 4: Delete the duplicated layer.
Step 5: Move the original text layer over the layer with the extrude, use the keyboard arrow keys to make sure that they are perfectly aligned.
Step 6: Apply your choice of gradient overlay, pattern etc to the text layer.
Step 7: Once this is done, use the CTRL key to select the extrude layer and the text layer, and merge the two layers and voila b*tches!!! 3D text with a gradient on the type face!!
Here is my first example, it's not refined or color co-ordinated but it shows that this ish works!
A few minutes later after some tweaking....
Ok so I've been playing around a bit more. I find that sometimes the edges may not align perfectly as in the above example with my name. One solution to this I have tried and it works is to add a stroke to the text layer before merging the layers. This stroke should be the same color as the extrusion, this is easily accomplished using the color picker.
Here is a second, more refined example for y'all:
A whole 'nother level
Yup. I decided why not? More experimentation. Decided to try out this effect using a clipping mask. Wrote my text, dropped in my image, clipped that ish out, duplicated my text layer, added my extrusion, added a stroke to the text layer, merged all layers, added a drop shadow to the final product, and came up wit this son of a b-word!!
PS: Don't underestimate the usefulness of YOUTUBE!!!
Another effect I always wondered how to do was how to add a gradient or other effect to the extrustion itself. Well I Youtubed it and got an excellent tutorial here by IceFlow Studios.
Basically you type your text using a nice blocky font. then you hold Alt and then press the down and direction keyboard keys to copy the layer repeatedly. Then you merge all the copies, and place the original text layer over this layer. After that, you are free to add a gradient or other effect to the layer below. Here is a simple example:
A banner for my blog
So I'm here writing my final blog entries for MC25B and then I just realized that my blog doesn't even have a halfway-decent banner!! So I decided, why not make a quick banner and blog about the process, so here goes!
Laying the ground work
A quick check into the blogger layout section and I found out that the banner should be 692 pixels wide.
I've opened up Photoshop and created a document 692 px wide and 200 px tall.
Next I open up bridge to look for suitable vectors which could complement my design. I've come across a vector of a man holding an umbrella and surrounded by question marks, almost as if its raining questions. I think this should do just fine.
Next, I create a simple light blue background. The vector I open in Illustrator then copy and paste into Photoshop. I place one of these on the left, duplicate the layer and place the other on the right.
Type Effects
First I typed my text in the center of my document. The word Various on the top line I sized at 15 px and on the bottom line I typed the word Musings at a font size of 25 px. The font I am using is named Masterplan and I downloaded it for free from dafont.com
My next step was to apply a stroke. Instead of a solid stroke I applied a gradient stroke to my text layers.
Next I applied a drop shadow to both text layers with the spread on 100% and the blend mode on normal.
The final step of my type effects was to apply a warp to both layers.
Finishing touches
Some paints splashes were added to give a bit of flavour to the blog name.
Finally I added yet another vector, this time a post it with tape attached. On this note paper vector I wrote in Arial font: A Tech Blog by Chad Ambo
All that's left now is to save my banner and upload it to blogger! Before I do that though, here's a screen shot of it in Photoshop CS5.
Laying the ground work
A quick check into the blogger layout section and I found out that the banner should be 692 pixels wide.
I've opened up Photoshop and created a document 692 px wide and 200 px tall.
Next I open up bridge to look for suitable vectors which could complement my design. I've come across a vector of a man holding an umbrella and surrounded by question marks, almost as if its raining questions. I think this should do just fine.
Next, I create a simple light blue background. The vector I open in Illustrator then copy and paste into Photoshop. I place one of these on the left, duplicate the layer and place the other on the right.
Type Effects
First I typed my text in the center of my document. The word Various on the top line I sized at 15 px and on the bottom line I typed the word Musings at a font size of 25 px. The font I am using is named Masterplan and I downloaded it for free from dafont.com
My next step was to apply a stroke. Instead of a solid stroke I applied a gradient stroke to my text layers.
Next I applied a drop shadow to both text layers with the spread on 100% and the blend mode on normal.
The final step of my type effects was to apply a warp to both layers.
Finishing touches
Some paints splashes were added to give a bit of flavour to the blog name.
Finally I added yet another vector, this time a post it with tape attached. On this note paper vector I wrote in Arial font: A Tech Blog by Chad Ambo
All that's left now is to save my banner and upload it to blogger! Before I do that though, here's a screen shot of it in Photoshop CS5.
Subscribe to:
Posts (Atom)
