Various Musings

Adventures of King Dice Trailer design process

2010-12-22T14:27:00.000-08:00

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.

IPO curves in Blender

2010-10-01T13:15:00.000-07:00

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.

Gloss Effect on text

2010-06-01T11:49:00.000-07:00

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

Random PS tips

2010-05-26T08:07:00.000-07:00

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.

Text effects!!!!!

2010-05-20T22:45:00.000-07:00

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:

A banner for my blog

2010-05-20T11:58:00.000-07:00

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.

Creating my website photo gallery

2010-05-20T10:07:00.000-07:00

In my last post, I explained how I created the Flash design on the homepage of the DSAJ website. In this post, I focus on creating my website gallery which was more challenging and way more time consuming than I initially expected it to be.

My gallery made use of a Jquery lightbox which I obtained from this site. Fortunately, this free lightbox came as a download pack which included all the elements necessary for implementation including sample images, css and html files and of course the jquery scripts.

Preparing images in Photoscape

I started using Photoscape to crop and resize images last summer while I was working for Dominicanewsonline.com. Each image had to be resized twice, and since I was initially dealing with over 50 images this was painstaking, tedious and time-consuming. The thumbnails images were resized to 250x250 px while the larger images were sized down to a width of about 600 pixels.

Implementing the Jquery Gallery

In my website I had two images folders. One folder carried my images such as the banner and GIFs displaying text which I used for image replacements. The other folder I named galleryImages and this folder contained all the thumbnail and larger pictures to be used for my gallery page.

Using dreamweaver, I linked to the jquery scripts and the lightbox CSS in my head of my gallery HTML, as seen in the picture below. Initially there was some conflict, but this was resolved by going into the lightbox.js file and ensuring that it was calling images from the galleryimages folder instead of the images folder which was the original setting.

*linking to the jquery in my gallery html document

I then followed to the letter the installation instructions found on the How to Use section on the web page the lightbox was downloaded from. This resulted in my gallery html source code looking like this:

To get the images to work with the lightbox, the main requirement was to include the code rel=lighbox in the link to the images.

Image Replacements

Two instances of image replacement was carried out on my gallery page to name the gallery. I created transparent GIFs in Photoshop and then placed them as background image behind the text they were replacing. I then used CSS to do a text indent and indented the texts to -10000 pixels so that they moved off the screen.

*image replacement in my main.css

*images used for image replacement:

Getting my ish online

The simplest step but also the most time consuming. I used the file manager system on webs.com. Unfortunately because I was using a free account, I had to add each image individually so this took quite a bit of time.

I also had to upload all of the jquery scripts in their js. folder, the lightbox css, my gallery html etc. In the end though, I had this working gallery which I am pretty proud of!

Flash Catalyst CS5

2010-05-20T06:00:00.000-07:00

In order to build my website for my final assignment for MC25B I used several of the CS5 applications including Dreamweaver, Photoshop, Illustrator and the spanking new Adobe Flash Catalyst CS5. This application allows you to convert your designs from Photoshop and Illustrator into interactive web content quickly by doing the actionscript for the user behind the scenes. You can find out more about Flash Catalyst CS5 here.

While I'm familiar with Flash Professional, the interface for Catalyst is completely different so I went to the Adobe website and watched a few tutorials on how to use the program. Eventually I came across this straightforward demonstration of use of Catalyst which I used to guide me to create the flash seen on the home page of my DSAJ website.

In this blog post I will recap the steps I took to create my DSAJ website flash.

Starting in Photoshop

I opened a document in Photoshop which was the exact size that I needed the Flash to be to fit into the designated space on my home page.

In order to move elements around in Catalysts from a PSD file, they need to be on their own layer.
Most of my design elements came from my vector library.

Using Bridge to browse for appropriate elements, I then opened the ones I selected in Illustrator, selected them individually and copied and pasted these on separate layers in Photoshop.

I also downloaded the Dominican and Jamaican flags using Google image search. I encountered a problem here because both files were GIFs and I was unable to drag and drop them into my PSD. This problem I solved by selecting them with the rectangular marquee tool, then switching to the move tool in PS and then dragging the selection into my PSD.

Once I had my images I added my text, selecting the Pricedown font becuase I think it best suited the typographic look I was aiming for. I added contrast to my text by giving the word Dominica the green color of the Dominican flag (using the eye-dropper tool), and gave the word Jamaica the yellow color taken from the Jamaican flag. Each word was placed on its own layer to allow me to move them around in Catalyst.

Moving over to Catalyst

Flash Catalyst allows you to add a PSD or AI file to work from, and all the individual layers will be available in the application for manipulation.

I imported my PSD into Catalyst however I quickly noticed that my text came out very jagged. This vexing problem was eventually only resolved by importing my text as non-editable images instead of as editable text which is the default option.

*screenshot from Catalyst with my PSD document opened

In Catalyst, states is the term used to describe the different stages of the Flash that the viewer will eventually see. I named the state with the unadjusted document end.

I then moved the elements on the various layers to different positions on the outside of the document so that they would come in from different directions. This state i named start.

I then used the timeline panel and for synchronized each element to transition from the start state to end state in one second, and for the elements to follow each other in one second intervals instead of all coming in at the same time.

I changed the start state to the default state so that in a browser this would be what the viewer saw first.

The next step was to add the interaction. Using the panel below I selected add Interaction > On application start > Play transition to state > End.

*interaction panel

The final step was to publish my Flash for deployment to my website. I went to File > Publish to SWF/ Air. I then chose the directory I wanted it published to, and keeping the default options I selected Publish.

Moving my flash into Dreamweaver

This was the simplest step. I simply selected my main content div in code view of my website in Dreamweaver where I wanted to place the flash.
Then I copied the code from the html document document which is automatically published together with the SWF, and pasted it into my website html, and voila....'Flash-ism'!!

Conclusion
Flash Catalyst does not eliminate the need for Flash Professional, however many of the things which were unwieldy and time-consuming in Professional is now a breeze in Catalyst. I have obtained a training DVD on Flash Catalyst from Lynda.com which I plan to follow during the summer to learn about the full potential of Catalyst.

Design Typography

2010-05-01T12:01:00.001-07:00

Today I downloaded and read through two very informative e-books; The Non-designers Design Book by Robin Williams, and Art Design in Photoshop by Steve Caplin. I decided to read up on design and specifically typography before I started my design for my DSAJ website, which is the final project for MC25B. Each book contained unique and useful information, and I will just highlight some of this here.

Non-designers Design Book

The typography section of this book was very interesting. Some excerpts:

Art design in Photoshop

This book had some good information about what NOT to do in typography. For example:

Both of these books also have tutorials, I plan on trying out one now, and according to how it goes I might blog about it.

Customizing a Campaign monitor template

2010-04-14T18:47:00.000-07:00

I have just finished customizing a newsletter for JamGrub as part of my Electronic Publishing course.

So this mini-project wasn't for MC25B, but the stuff I was doing definitely required me to call upon my multimedia skills. To customize the template, I was required to make use of Illustrator (replacement vector images), Photoshop (prepare and save these images for the web properly) and Dreamweaver ( to do the image replacement, adjust CSS, add information and links to the HTML)

The template was downloaded from the site http://www.campaignmonitor.com/templates.

I downloaded template 7. It came as a zip file which I unzipped, and found that the folder contained an HTML file with the CSS contained in the head, stock images, and the PSD file which was used to design the template.

I replaced the stock images with images of my own. These replacement images were taken from the blog posts, and resized using Photoscape.

I then deleted the stock images which came with the templates and made the changes to the html file so that the newsletter would call my new images instead.

A bit more complicated was replacing some of the design elements of the newsletter such as separators. I used Photoshop to open documents the same size as the already existing ones, copied and pasted vector images from Illstrator to Photoshop, and then using the save for web dialogue in PS, I saved these as PNGs with transparency. I then changed the HTML to call the new images.

Once I had the design and images customized, I had to input text which I simply copied and pasted from the blog posts. I also inserted the URLs to the individual pages of the site which could be accessed by clicking 'Read more' after the introductory passage of each story in the newsletter.

Here is a before and after of the template

BEFORE:

After:

More Photoshop shortcuts etc

2010-04-05T07:53:00.000-07:00

Easter weekend, nothing else to do than watch Lynda.com training videos. What a life.

Been jumping from one to the other, started two Joomla dvds and never finished, browsed through a wordpress dvd, and now i've decided to go through this Photoshop CS4 Essential training dvd. I know most of this stuff but what I'm learning is some real cool keyboard shortcuts I had no idea existed. So I'm going to record them here otherwise I'll forget them in a day or two.

Scrolling through blend modes:
Select the layer you want to blend.
Select the move tool.
Hold down shift and then use the + and - to toggle the blend modes.

Adjusting opacity
Select the layer
Choose move tool
Use numbers on keyboard 1-9 to adjust opacity.

Working with masks
Make a selection on the image to be masked at edge
Go to the masks tab above layers panel to adjust the density etc of the masks.

Cropping
Possible to hide the cropped out part of image rather than delete by selecting delete in crop options.
Going to Image>reveal all, will show content that was hidden if cropped this way.
Selection tools can be used to select a part of an image to be cropped as well.

Straighten an image by cropping
Choose the ruler tool which is behind eye dropper tool.
Click on horizon, and drag to select it.
Go to image>image rotation>arbitrary.
Click OK to rotate image.
Use crop tool to select portion that is straight.
*Photoshop can do this automatically for several images on one layer. Go to File>Automate>Crop and straighten photos.

Transforming images
Control + t on image allows it to be transformed.
Hold down control to distort image.
Hold down ctrl+alt to skewer image
Hold down ctrl+alt+shift to change perspective.
Warp image by choosing warp option (top right of screen).

Smart objects
Convert image by right clicking on name of the layer in the layers panel and selectiong convert to Smart Object.

Content aware scaling
Select this feature by going to Edit>content aware scaling.
Choose 'protect skin tones' icon to protect someone's face while scaling.
To protect complete subject, select the person using selection tool eg magic wand > go to select menu and save the selection> Deselect the selection(ctrl+d) > go to channels panel to view the alpha mask which was created> before scaling, uncheck protect skin tone> go to protect and choose the alpha which was created> click the check mark to commit to the scale> remove extra area of canvas by going to image menu and choosing trim the transparent pixels.

Adjusting type
To select text and hide highlight over selected area: ctrl+h.
To align text on separate layers: use ctrl to select both layers> select the move tool> choose appropriate align eg align left edges.
To alter size of text from the center while constraining the proportions: holt alt+shift while dragging from a corner point.

Layer styles
While in drop shadow dialogue, click on the image and drag to adjust the shadow.
Hold down alt and drag to copy style from one layer to the other.
Save a style by selecting styled layer, and go to styles panel and select new style.

***Adjust hardness or softness of brush by holding shift and hitting left bracket.

Combining similar images with change in subject.
Open the images in bridge and select both by ctrl-clicking.
In PS, go to tools>PS>Load files into PS layers
Align images in PS by going to edit>auto align layers and then choose auto.
Create layer mask on top layer.
Use brush to remove subject on top layer and reveal same subject below.

**Pressing alt+0169 gives copywright sign in bridge

Some typography shortcuts in PS

Slideshare

2010-03-15T08:24:00.001-07:00

INCREDIBLE SHOTS!

View more presentations from Barren Owl.

Adding a customized horizontal navigation bar

2010-02-08T13:20:00.000-08:00

I used two internet resources, namely http://www.albinoblacksheep.com and http://www.exploding-boy.com/images/cssmenus/menus.html to guide with creating my navigation bar. I also used tabsgenerator.com and Photoshop to create the tabs.

Creating the tabs

My first step was to create my two tabs, using tabsgenerator.com.

I created two tabs of identical size and saved them to the desktop. I then opened the tabs in Photoshop. With the left tab open, I increased the canvas size 100% by going to Image>Canvas size and increased the height by 100%.

RIP Patti-ann

2010-02-05T02:04:00.001-08:00

Steps taken:

1. Layer one: pattern overlay with damask pattern. Adjusted the saturation to get a bluish effect.

2. Added a layer of white fill with a reduced opacity to get the fog-like effect over the pattern.

3. Used the pen tool to extract both images from the original photographs.

4. Applied adjustment layer to background photo to convert to B&W.

5. Added background photo on new layer and reduced the opacity a bit.

6. Added the foreground image and resized using shift and dragging corners.

7. Added text. Overlay technique which was planned didn't look satisfactory. Selected a fancier text then added an outline style to the text layer.

8. Used soft brush to creat vignette effect

Combining images in PS and a few shortcuts

2010-02-04T05:31:00.000-08:00

Just watched this very useful tutorial on Youtube about blending/combining images in Photoshop.

Step 1: Find the images to be combined in Bridge.
Step 2: Arrange the images as you require them to be in your design.
Step 3: Select the layer of the image you want to work on.
Step 4: On that layer, create a layer mask
Step 5: Select the gradient tool, and choose first default gradient; foreground to background.
Step 6: Draw a gradient from a point in the image to the exact edge where the image meets the adjoining image.

*Here is a basic example where I merged this cityscape to a photo of a woman.

Photoshop shortcuts

Just some random shortcuts from watching a ton of tutorials. I'm gone be a Photoshop boss b4 all is said and done believe that.

select our entire photo. Go up to the Select menu at the top of the screen and choose All at the very top of the list, or use the keyboard shortcut Ctrl+A
To remove the selection outline, either go back up to the Select menu and choose Deselect or use the keyboard shortcut Ctrl+D
grab the Brush Tool, so either select the Brush Tool from the Tools palette or press the letter B on your keyboard to access it with the shortcut
holding down the Alt/Option key as we click on the New Layer icon, we tell Photoshop to pop open the New Layer dialog box for us before the layer is added
press the letter D on your keyboard which resets the Foreground and Background colors to their defaults
I've gone ahead and made a copy of the original Background layer (by pressing Ctrl+J (Win)
I'm going to quickly grab my Lasso tool from the Tools palette. I could also press L on my keyboard to select it.
• Shift = Add To Selection
• Alt (Win) / Option (Mac) = Subtract From Selection
• Shift+Alt (Win) / Shift+Option (Mac) = Intersect With Selection

Should be Flashing but I'm Photoshopping

2010-02-04T05:22:00.000-08:00

Still dealing with the loss of Patti-Ann. Anyway I've decided to make my own tribute to her, multi-media style. So I'm going to add some photoshop effects to pictures of her posted on FB.

Will be blogging my progress as I go along. I got my inspiration for this actually from viewing wallpapers of my favourite NBA player Kevin Durant. My final product should have a patterned background, a sketched version of Patti as a background pic, then a full color image of her in the foreground, along with some text, not sure what text yet.

I've started already, just figured out from playing around how to do a cool effect with my text. I put the pattern as the background, next layer a white fill on 57% opacity, then a text layer.

For the text layer, I changed the blend mode to overlay, and voila, I got an effect that my text became basically see through exposing the pattern on the first layer. Freakin cool!

I'll be back either updating this post or makin a new one as i progress.

mc25b feb 01

2010-02-01T12:30:00.001-08:00

Today we're doing CSS and i'm trying my best to keep up because when u fall behind its difficult to catch up again. here is the html to a horizontal list I've done.

Making horizontal list

hope this works

i'm cheating

this is taking too long

To learn HTML

To show off

to impress Mr. Bain

I used htmldog.com and http://www.albinoblacksheep.com/livedesign/ to help. OK so I realized that when I posted my html, it actually displayed the information as it would show in the browser

Website building process

2009-12-28T09:40:00.000-08:00

Website building process
Building this website was a major challenge. I went through several drafts and designs in Adobe Photoshop, basically trying to recreate and modify already existing websites.
Eventually, I decided to abandon stressing over the design and just focus on mastering the technical skills, especially of converting Photoshop images to html. This proved to be quite a challenge as well.
I then resorted to some online tutorials, and succeeded in building a four page website based mainly on html coding. This included a home page, with links for my portfolio work in Adobe Photoshop, Illustrator and a few examples of photography. I also added a page that could be used to contact me.
The next challenge was to upload the site to Weebly. I soon realized that in the absence of CSS the site would not display. I went back to the trusty tutorials and added some CSS to my site and tried uploading again.
Still no luck. I also built a website from scratch in Dreamweaver and uploaded it using FTP.

tutorial marathon

2009-11-06T06:36:00.000-08:00

Tutorial Marathon on Youtube

Series: You suck at Photoshop

Episode 1

-Selection then copy and paste is quick way to get image from one document to the next.
-flip image by going to edit-transform......
-distort image by going to edit- transform.....
-warp image by going to edit-transform....
-do a color overlay on an image by goin to layer effects..change opacity to ur preference

Episode 2
- fill an area by using the selection tool. manipulate opacity to ur taste. use eraser tool to smooth edges.

Episode 3
- Manual cloning is possible by simply using the selection tool to select an area, the copying the area. the area can then be dragged and dropped unto another area.

Episode 4
- can use paths to change background from picture. go to path, select make a new path, and use pen tool to draw the path
-to start a second path on same object, select make a new path like when you are making a new layer.
-once you have your paths, select each path, right click and select make selection. in the case of the ring in the tutorial, you select subtract from selection for second path.
-once this is done, go back to layers, choose the layer the image is on and select add layer mask.

Episode 5
- selecting the color range can be used to remove the background from a photograph.
*with a white background, magic wand tool is great for removing the white sections.
-to select color range, go to select, color range and use eye drop tool to select the color you would like to remove.
-increase fuzziness based on preview to get your color selection just right.
-once color range is selected simply press delete.
*go to select inverse if what you want to delete is the inverse of the color range.

Episode 6
-distort people's features by going to filter and liquify.
-adjust the size of the brush and then play around.

Episode 7
-patch tool can be used to remove wrinkles by simple drawing a selection around area to be patched and draggin to an area of better skin to replace it with.
-can then go to edit, fade patch selection to play around with the fade so that it is more realistic.
-go to image-adjust levels to change lighting to soften or harden features.

Episode 8
-3d layers ish... will get back to this one sometime

Episode 9
-some curves ish...don't have time for it now either

Episode 10
- vanishing point. interesting but i don't see the use for it yet.

typography

2009-11-01T15:44:00.000-08:00

About to start this typography assignment. In order to get a decent grade from Mr. Bain I'm goin to try to try to include at least 3 of these techniques:
● Substitute Letters
● Words that imitate sounds or actions
● Letterforms can be made from images
● Work with typographs (logos or symbols made from type)
● Use cliché's for building on ideas
● use contrast (size, color etc...)

this gave me a ton of trouble in illustrator

2009-10-30T11:52:00.000-07:00

When (if) i can find the time i need to really come back and master this in illustrator.

Drawing with the Pen tool

Draw straight line segments with the Pen tool

The simplest path you can draw with the Pen tool is a straight line, made by clicking the Pen tool to create two anchor points. By continuing to click, you create a path made of straight line segments connected by corner points.

Clicking Pen tool creates straight segments.

Select the Pen tool.
Position the Pen tool where you want the straight segment to begin, and click to define the first anchor point (do not drag).
Note: The first segment you draw will not be visible until you click a second anchor point. (Select the Rubber Band option in Photoshop to preview path segments.) Also, if direction lines appear, you’ve accidentally dragged the Pen tool; choose Edit > Undo, and click again.
Click again where you want the segment to end (Shift-click to constrain the angle of the segment to a multiple of 45°).
Continue clicking to set anchor points for additional straight segments.
The last anchor point you add always appears as a solid square, indicating that it is selected. Previously defined anchor points become hollow, and deselected, as you add more anchor points.
Complete the path by doing one of the following:
- To close the path, position the Pen tool over the first (hollow) anchor point. A small circle appears next to the Pen tool pointer when it is positioned correctly. Click or drag to close the path.
  
  Note: To close a path in InDesign, you can also select the object and choose Object > Paths > Close Path.
- To leave the path open, Ctrl-click (Windows) or Command-click (Mac OS) anywhere away from all objects.
  
  To leave the path open, you can also select a different tool, or choose Select > Deselect in Illustrator or Edit > Deselect All in InDesign.

Draw curves with the Pen tool

You create a curve by adding an anchor point where a curve changes direction, and dragging the direction lines that shape the curve. The length and slope of the direction lines determine the shape of the curve.

Curves are easier to edit and your system can display and print them faster if you draw them using as few anchor points as possible. Using too many points can also introduce unwanted bumps in a curve. Instead, draw widely spaced anchor points, and practice shaping curves by adjusting the length and angles of the direction lines.

Select the Pen tool.
Position the Pen tool where you want the curve to begin, and hold down the mouse button.
The first anchor point appears, and the Pen tool pointer changes to an arrowhead. (In Photoshop, the pointer changes only after you’ve started dragging.)
Drag to set the slope of the curve segment you’re creating, and then release the mouse button.
In general, extend the direction line about one third of the distance to the next anchor point you plan to draw. (You can adjust one or both sides of the direction line later.)

Hold down the Shift key to constrain the tool to multiples of 45°.

Drawing the first point in a curve

A.
Positioning Pen tool
B.
Starting to drag (mouse button pressed)
C.
Dragging to extend direction lines
Position the Pen tool where you want the curve segment to end, and do one of the following:
- To create a C‑shaped curve, drag in a direction opposite to the previous direction line. Then release the mouse button.
  
  Drawing the second point in a curve
  
  A.
  Starting to drag second smooth point
  B.
  Dragging away from previous direction line, creating a C curve
  C.
  Result after releasing mouse button
- To create an S‑shaped curve, drag in the same direction as the previous direction line. Then release the mouse button.
  
  Drawing an S curve
  
  A.
  Starting to drag new smooth point
  B.
  Dragging in same direction as previous direction line, creating an S curve
  C.
  Result after releasing mouse button
- (Photoshop only) To change the direction of the curve sharply, release the mouse button, and then Alt-drag (Windows) or Option-drag (Mac OS) the direction point in the direction of the curve. Release the Alt (Windows) or Option (Mac OS) key and the mouse button, reposition the pointer where you want the segment to end, and drag in the opposite direction to complete the curve segment.
Continue dragging the Pen tool from different locations to create a series of smooth curves. Note that you are placing anchor points at the beginning and end of each curve, not at the tip of the curve.
Alt-drag (Windows) or Option-drag (Mac OS) direction lines to break out the direction lines of an anchor point.
Complete the path by doing one of the following:
- To close the path, position the Pen tool over the first (hollow) anchor point. A small circle appears next to the Pen tool pointer when it is positioned correctly. Click or drag to close the path.
  
  Note: To close a path in InDesign, you can also select the object and choose Object > Paths > Close Path.
- To leave the path open, Ctrl-click (Windows) or Command-click (Mac OS) anywhere away from all objects.
  
  To leave the path open, you can also select a different tool, or choose Select > Deselect in Illustrator or Edit > Deselect All in InDesign.

For a video on using the Pen tool in Illustrator, see www.adobe.com/go/vid0037.

Reposition anchor points as you draw

After you click to create an anchor point, keep the mouse button pressed down, hold down the spacebar, and drag to reposition the anchor point.

Finish drawing a path

Complete a path in one of the following ways:

To close a path, position the Pen tool over the first (hollow) anchor point. A small circle appears next to the Pen tool pointer when it is positioned correctly. Click or drag to close the path.

Note: To close a path in InDesign, you can also select the object and choose Object > Paths > Close Path.
To leave a path open, Ctrl-click (Windows) or Command-click (Mac OS) anywhere away from all objects.

To leave the path open, you can also select a different tool, or choose Select > Deselect in Illustrator or Edit > Deselect All in InDesign.

Draw straight lines followed by curves

Using the Pen tool, click corner points in two locations to create a straight segment.
Position the Pen tool over the selected endpoint. In Illustrator and InDesign, a convert-point icon appears next to the Pen tool when it is positioned correctly (In Photoshop, a small diagonal line, or slash, appears next to the Pen tool). To set the slope of the curved segment you’ll create next, click the anchor point, and drag the direction line that appears.
Drawing a straight segment followed by a curved segment (part 1)

A.
Straight segment completed
B.
Positioning Pen tool over endpoint (the Convert Point icon appears only in Illustrator and InDesign)
C.
Dragging direction point
Position the pen where you want the next anchor point; then click (and drag, if desired) the new anchor point to complete the curve.
Drawing a straight segment followed by a curved segment (part 2)

A.
Positioning Pen tool
B.
Dragging direction line
C.
New curve segment completed

Draw curves followed by straight lines

Using the Pen tool, drag to create the first smooth point of the curved segment, and release the mouse button.
Reposition the Pen tool where you want the curved segment to end, drag to complete the curve, and release the mouse button.
Drawing a curved segment followed by a straight segment (part 1)

A.
First smooth point of curved segment completed and Pen tool positioned over endpoint
B.
Dragging to complete the curve
Position the Pen tool over the selected endpoint. A convert-point icon appears next to the Pen tool when it is positioned correctly. Click the anchor point to convert the smooth point to a corner point.
Reposition the Pen tool where you want the straight segment to end, and click to complete the straight segment.
Drawing a curved segment followed by a straight segment (part 2)

C.
Positioning Pen tool over existing endpoint
D.
Clicking endpoint
E.
Clicking next corner point

Draw two curved segments connected by a corner

Using the Pen tool, drag to create the first smooth point of a curved segment.
Reposition the Pen tool and drag to create a curve with a second smooth point; then press and hold Alt (Windows) or Option (Mac OS) and drag the direction line toward its opposing end to set the slope of the next curve. Release the key and the mouse button.
This process converts the smooth point to a corner point by splitting the direction lines.
Reposition the Pen tool where you want the second curved segment to end, and drag a new smooth point to complete the second curved segment.

Drawing two curves

A.: Dragging a new smooth point
B.: Pressing Alt/Option to split direction lines while dragging, and swinging direction line up
C.: Result after repositioning and dragging a third time

from illustrator to photoshop

2009-10-30T11:44:00.000-07:00

Time to turn my attention to Mr. Bain's photoshop assignment.

This morning I did the tutorial instructing how to use the healing brush tool. I took a photo of the best rapper alive (lil wayne if you're living under a rock) and I edited out a couple of his facial tattoos.

I had never used this took before because my limited experience with photoshop was really focused on making flyers.

I'm about to go watch a ton of tutorials on youtube now, with photoshop running so I can try out the stuff as I go along. Stuff I plan to view tutorials about include:

Scaling Images
○ Saving Files in various formats
○ Cropping
○ Brightening and Darkening
○ Rotating
○ Sharpening

Then I'm going to read up on blending layers, the gestalt theory and golden mean. Basically I have A LOT of catching up to do.

My next entry will probably be after I'm finished doing the typography assignment.

PS. It feels good to be spending all day on a laptop again.

new laptop

2009-10-28T16:05:00.000-07:00

So I've finally got another laptop. Core 2 duo, 4 gigs of Ram and a 320 gb hard drive. So now i'm going to try to do five weeks worth of assignments in a week so i can start back attending multimedia tutorials.

Today i did a illustrator assignment to recreate a cartoon character, develop a background scene and a jamaican character that fits the scene.

Unfortunately, i'd already forgotten how to do a ton of stuff in illustrator so it took way more time than it should have. i had to go dig up the tutorials to remember how to make proper curved lines and to adjust point. eventually i finished and i think it looks ight.

i won't be able to perfect any of the assignments bcuz of time constraint i'm just going to do them and submit and hopefully mc25a doesn't bring down my GPA too much. i'll be gettin an A nxt semester for sure

multimedia class 14 sep 09

2009-09-14T14:08:00.000-07:00

Still tryin to get used to this Mac thing and it's making me feel computer illiterate.

Anyway stuff I learned today in illustrator:
- How to add anchor points.
- Using live trace.
- Copying and pasting a design.
- Resizing designs by holding shift.
- Combining designs.

Gestalt principles I need to explore more.

Designing challenges:
Getting inspiration can be a challenge, especially when I'm assigned to combine two things which are unrelated.
I think the process to get around this is to have a plan, try to visualize what I want to do then start it. Changes and adjustments will then be made after I see how the image looks.

Adventures of King Dice!

2009-05-19T22:01:00.000-07:00

Its 1:13 a.m while I'm writing (typing) this so let me be brief! Some of you have read my blog posts before. Welcome back. If you haven't then u're probably here after watching one of the episodes!! This is my blog where I'm basically goin to be makin fun of serious things which happen in D/a, with a few serious issues thrown in for the party poopers amongst y'all readers.

Feedback on the series would be much appreciated peeps. I created it with the intention of displaying only on my blog, then decided to distribute on caivideos.ning.com/ instead cuz I could get a built-in Dominican audience there.

I'll be posting new stuff on my blog at least once a week, most likely at the same time I release new episodes. Meanwhile, check out my older entries such as my favourite, Top Six Reasons why we need Paros! (vagrants). Comments on all posts are welcome!!!

Peace out peeps, Je suis fatigue.'

P.S.

King Dice if you're reading this I'm not bad-minding you like some of your fans seem to think! I'm actually a fan myself. I mean yeah some jokes are at your expense cuz dats how comedy is but the series really shows the struggles young men go through in D/A with politicians,money,women and the law.

Should condom dispensers be placed in Dominican High Schools and at State College?

2009-04-04T20:34:00.000-07:00

Let me start by making a confession. I’d never personally seen a condom dispenser before arriving at UWI, where I spotted one prominently mounted next to a water fountain. Condom dispensers are not that common in Dominica (are there even any?)......

I do recall though, reading in our local newspapers sordid stories of janitors finding students engaged in freaky sex in the bathrooms at State College. And we all know of high school students who start doing it from as early as 1st form, in various places @ school or the nearby bushes! The song “Have you ever” by MFR had to have gotten its inspiration somewhere!

Students having sex is a reality. So should condom dispensers be placed in the high schools and State College of Dominica? I’ve broken it down into a few Pros and Cons.

PROS
-Not all students (especially females!) have the courage to go to stores to buy condoms and face the nosy store clerks(who may even know their parents!) Dispensers=more privacy
- Condoms in dispensers are usually cheaper than those at a store. Not having the money could be one reason why young people don’t use condoms all the time.
- Unprotected sex often occurs spontaneously. It wasn’t planned so no one thought to bring a "rubber". Dispensers close by make it possible to get protection even in such situations.

CONS
-Religious nutjobs who preach abstinence only would point out (quite validly actually) that this will likely encourage more students to have sex, by sending a message that its OK to do it once they ‘wrap it up.’
-There’s no certainty that students will actually make use of it. When you’re young and naive its easy to believe that pregnancy or getting an STD would never happen to you, until it does.
-I’ve known of persons who carried away entire payphones to steal the coins(smh). The opportunity to steal money and a boatload of condoms might be too hard to resist for some!

What do you think? Should condom dispensers be placed in our schools?

Check out this hilarious commercial which has over 15 million views on YouTube!!

Top Six Reasons why we need Paros(vagrants)

2009-04-03T10:11:00.000-07:00

So I was reading this story on DominicaNewsOnline(whose photo i'm using btw) about the vagrants the police have stopped from washing buses on the public bus stop in Roseau. It made me think, what would life be like without your friendly neighbourhood Paro??

So here goes, my Top Six Reasons why we need paros:

1. Blatant Exploitation. Who else can you get to weed your yard in blistering hot sun, clean your drain, trim yourhedges, discard that rusty old stove,all while stinking your lazy pet dog to life, for less money than you spent the last time you bought a 2 piece combo at KFC?

2. Entertainment. On a boring, dreary Sunday afternoon , with nothing good showing on TV, a swear-fest between two paros might be just what u need for some good old-fashioned comic relief! Tip: feel free to record it on your camera phone for future reference.

3. Special Services. Feel like eating mango but its not mango season? Like making cherry juice from your hated neighbour's tree? Need some crabs for Creole Day but don't have the license? Or maybe you need something simple done, like cow sh*%t dumped in the car of your cobus? Who you gonna call? A paro!

4. Standpipe car wash. Need your car washed in fast forward? Call a paro..Tip: I would recommend though that its just an outside wash if it's not your regular paro. They've been known to pocket stuff accidentally. It's freakin' amazing what they can fit into their pockets too. Real Houdini ish....i'm telling you.....

5. Reality check. Feel like your life is falling apart? Relationship drama got you down? Financial Stress? Overworked? Take a look at a paro and realize, things are not as bad as they seem!

6. Nose checker. OK so you're watching Slumdog Millionaire on dvd while cooking, your rice gets burned to a crisp, but you didn't smell a thing! Your love interest asks if you like their new perfume/ cologne but you honestly can't tell the difference...... Want to know if your nose is still working? Get a paro!

So there you go folks, was planning to go to top ten but i've got UWI assignments staring at me menacingly over here...

Feel free to add your own reasons why we need paros. And if u're feeling my blog post the link to a friend!

MFR vs Triple K

2009-03-31T21:36:00.000-07:00

Over here in Jamaica where dancehall culture rules, its all about Gaza or Gullyside. Wondering what I'm talking about? Not much of a dancehall fan are you? It's ok I'll break it down for you, Kartel Or Mavado....Back home in Dominica,Lent is coming to a close and its back to the Bouyon. Right now, the current competition for top band is undisputably between the MFR band out of Possy and Triple K International.

Being from Possy I'm rooting for the home team. But other than my bold-faced bias there are valid reasons why MFR is the hottest band in D/A right now:

1. They're young and hungry. Mr.Benji and Co of Triple K have obviously become complacent, feeling like they have 'made it.' I've been to too many jams where Triple K feel like they need to take two hours to set up. The MFR dudes are still riding the wave of adrenaline that comes with establishing a bigger fanbase with every 'siwo' they perform at.

2. Their sound is fresh. The Triple K songs just sound played out. No one really wants to hear songs like "Scissors" anymore. We're quite willing to dance to "Have you ever" or getting our inner child on with "Blah Blah Blah"

3. It's a worldwide recession people, MFR is more relevant with songs like this:

To be fair, this song by Triple K is pretty hot too!

Caribs in Dominica

2009-03-31T12:43:00.000-07:00

A few days ago one of my professors asked me what different ethnic groups lived in Dominica. I replied mostly blacks but there are a few Caribs as well. His eyes nearly popped out of his head!!

Its only then that I realized that many Jamaicans and probably alot of other Caribbean people are not aware that we still have Caribs living in Dominica.

So yes. There are still Caribs. No, they don't still practice cannibalism (another lecturer actually asked this question...smh)

Yes. They go to school and get educated like other Dominicans. No, they don't still walk around half-naked....

Don't believe me, non-Dominicans?.... check out the video!

Friends to lovers

2009-03-19T12:57:00.000-07:00

Recently a friend of mine told me that he was going to ask this female friend of his to enter into a relationship with him. My advice was to tell him that he should probably try to figure out if she feels the same way before he pops the question. But he went right ahead, and ended up going down in flames. Now he tells me that the friendship is awkward and strained since she rejected him.

Anyone with similar experiences? I think that sometimes girls get comfortable with guys who are just their friends and even start acting "couple-ish." The dudes get confused and mistake friendship with intimacy...How can a guy really tell the difference? Sometimes the girl is actually harbouring a crush and scared of telling the guy. Or both persons don't want to risk ruining the relationship......

Friends to lovers.....Is it a good idea?

Check out one of my favourite songs from when Usher was Usher; Lovers and Friends Remix

Chris Brown and Rihanna

2009-03-18T09:42:00.000-07:00

This is a hot button issue right here...
We've all heard the stories/rumours and seen the pic of Rihanna looking like she was on the losing end of a UFC cage match.(if u're just back from a trip to Mars and haven't seen the pic click here:http://rihannabeatingphoto.com/img/rihanna_beating.jpeg)

Questions we should ask ourselves:

Are there any circumstances under which Rihanna actually deserved it?
Is that really the way Chris B had to go about resolving the issues?
Why did Rihanna go back to him initially?
Would we care if they weren't two celebrities?
Should the public just mind their own dayum business?

I wonder....

Even Oprah put in her two cents!

Various Musings

Adventures of King Dice Trailer design process

IPO curves in Blender

Gloss Effect on text

Random PS tips

Text effects!!!!!

A banner for my blog

Creating my website photo gallery

Flash Catalyst CS5

Design Typography

Customizing a Campaign monitor template

More Photoshop shortcuts etc

Slideshare

Adding a customized horizontal navigation bar

RIP Patti-ann

Combining images in PS and a few shortcuts

Should be Flashing but I'm Photoshopping

mc25b feb 01

hope this works

i'm cheating

Website building process

tutorial marathon

typography

this gave me a ton of trouble in illustrator

Drawing with the Pen tool

Contents [Hide]

Draw straight line segments with the Pen tool

Draw curves with the Pen tool

Reposition anchor points as you draw

Finish drawing a path

Draw straight lines followed by curves

Draw curves followed by straight lines

Draw two curved segments connected by a corner

Draw straight line segments with the Pen tool

Draw curves with the Pen tool

Reposition anchor points as you draw

Finish drawing a path

Draw straight lines followed by curves

Draw curves followed by straight lines

Draw two curved segments connected by a corner

from illustrator to photoshop

new laptop

multimedia class 14 sep 09

Adventures of King Dice!

Should condom dispensers be placed in Dominican High Schools and at State College?

Top Six Reasons why we need Paros(vagrants)

MFR vs Triple K

Caribs in Dominica

Friends to lovers

Chris Brown and Rihanna