How to import DVD Video into iMovie ‘08

First, why I needed to know this.

I have clients from time to time who have self produced videos on a DVD they would like to add to their websites, either progressively streaming off of their hosting server or through one of the myriad of video sharing sites (ala YouTube, Blip.TV, Vimeo etc.)

In the past, when we were a PC only web shop it frankly was easy.  Rip the VOB file you need as an AVI (with something as simple as Pinnacle), convert to FLV and that was it basically.

However on the MAC (Specifically MacBook Pro with Mac OS X 10.5.6) I found it a bit more of a challenge without investing in more apps for a purpose that doesn’t come up all that often.  Let’s face it, I’m cheap.  It shouldn’t be that hard.

Let me be clear, I’m not talking about commercial, copyrighted material. These are in-house production quality videos that my client,  XYZ company, shot of someone using their auger system, of making a cappuccino, or whatever.

That said, I found this solution in bits and pieces on a various forums  and was able to create my own work-flow that I will now share.

The Problem

Basically with DVD video you have files called VOB (video object files).  You may have several VOB files on the same disc if you have chapters of several smaller videos on the same disc.  OK, that said,  the problem is getting iMovie, let’s say, to recognize a VOB.  It won’t.  Hence you cannot import it. The image to the right show these files.  Notice the dark color of the files.  When you look at them in iMovie they will be grayed out, meaning they are not a valid file type for iMovie as such.

The Solution

The key then is simply getting the VOB file in a format iMovie will import.  It’s actually very simple.  You just need to make a disk image (.dmg).  Here’s how.

1. Insert your DVD
2. Open the Disk Utility (Applications/Utilities/Disk Utility)
3. Your DVD should show up in the upper left hand corner under yo other drives (HDD, any external, etc.)
4. Highlight it and choose New Image from the toolbar.
5. I used the default settings in the drop down and save it to the desktop (or wherever you choose)
6. Click SAVE.

Let Disk Utility chew on that a few minutes and presto-chango you have a disk image (.dmg) of your DVD.

Now, with iMovie open, you have to “mount” the disk image by double-clicking on the .dmg file (the disk image file) you created.

Next  iMovie’s IMPORT window will pop-up and you will notice that the disk image is recognized as ….a camera!  How about that.

Now choose IMPORT ALL and get to editing once it is in iMovie.  That’s it!

Assuming you know how to export, you’ll end up with a .M4V file that can be uploaded and let  YouTube, Vimeo, et al, do the rest.

One note: Occasionally  you may get errors when importing and from my experience this is most often because the disk I am working from is a bad/damaged copy.

Hope this is helpful in getting you going the right direction.

What business card are you?

Why be limited to 3.5" x 2" anymore? Click to enlarge.

It’s the hot App on Facebook these days, “What jet are you?”,”What song are you?”, “What drink are you?” and so on.

Seriously though, as a creative professional, “What business card are you?” .  With all our expertise in graphics and the availability of inexpensive laser printing options, we need to start thinking out of the box guys.

Last weekend, I was inspired by a website recommended via Twitter from @nsmithmorgan.  The website was a collection of 100 uniquely inspired business cards.

So, I was needing new cards and showed the site to my wife over breakfast last Saturday and she immediately said “You need a card that folds like your Mac”, and voile, this is what I got.

It’s not a photo, but several rectangles with various gradients of gray applied and a blue “screensaver” where  my main message is.  The nice thing is I had them printed at the local Office Max on their laser printer  and therefore had the option of only making about fifty to start with.  I already know what I want to change, so the next iteration will be different; grays lighter, font different and so on. At least there were no typos

I just thought in this age of Content Management, where I preach to clients the wonders of easily managed content in their website [a la WordPress, Joomla, et al], why should I get locked in to ordering 500 boring, 3.5 x 2 business cards.  Now I am inspired to develop several business card templates and change them up (using my standard logo consistently of course).

Enjoy your new found freedom and be yourself in your business card development.

Transparency to CSS Drop-Down Menus

This is really a very simple thing.  Ready?

(NOTE: Before you start tweaking your CSS file, make a copy you can revert to or look at in case something goes awry.  You should know that and probably do, but just over communicating that concept)

Let’s make sure we are on the same page.  Visit this site by clicking the image (right) and scroll over the blue nav bar (actually referred to in the CSS stylesheet as “subnav”).  What you will see is that the nav background in the drop-down menu is semi-transparent.  In other words you can see some of the page behind the nav menu as if the nav drop down was a colored gel sheet. First a medium blue then a dark gray on the roll-over.  This website also uses the same idea.

The CSS out of the box (common WordPress menu style with drop down) was a solid color and the code for the drop down menu looked like this (key is the “li ” called the selector):

For the subnav bar drop down:

#subnav li a:hover, #subnav li a:active {
background: #000066;
color: #FFFFFF;
display: block;
text-decoration: none;
margin: 0px 5px 0px 0px;
padding: 6px 13px 6px 13px;
}

#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #000066;
width: 150px;
float: none;
margin: 0px;
padding: 6px 10px 6px 10px;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

#subnav li li a:hover, #subnav li li a:active {
background: #006699;
margin: 0px;
padding: 6px 10px 6px 10px;
}

Note the property, “background”.  The two colors shown are a darker and lighter hue of blue.  But I wanted them to be semi-transparent just for the effect.  Kinda trendy these days.

By looking at the code just previous to this I discovered that the height of the subnav was coded to be 24 pixels.  Simple.  See below:

#subnavbar {
background: #003366;
width: 960px;
height: 24px;
color: #FFFFFF;
margin: 0px;
padding: 0px;
}

OK, so the detective work is done.  Now to make this semi-transparent.

So, next step is to create a transparent .PNG file in Fireworks, Photoshop, Illustrator, whatever you’re comfortable with. Make it, of course, 24 x 150 pixels?  No.  Well, yeah you could, but why?  Just make it the correct height (24px) and wide enough you can see it.  I made mine 10px wide.

For now,  just make your simple 10px X 24px rectangle.  I made mine blue (#006699) and changed the transparency to 80%. Save it with a unique name you can remember.  Then make a second one that is a darker (or lighter depending on your font colors).  I made the second one black (#000000) with 80% transparency so it actually looks kind of gray.  Again save.

Now go back to the same code as above and change it like so:

#subnav li a:hover, #subnav li a:active {
background-image:url(images/sunav_bkd_trans_rec.png);
color: #FFFFFF;
display: block;
text-decoration: none;
margin: 0px 5px 0px 0px;
padding: 6pEditx 13px 6px 13px;
}

#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background-image:url(images/sunav_bkd_trans_rec.png);
width: 150px;
float: none;
margin: 0px;
padding: 6px 10px 6px 10px;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

#subnav li li a:hover, #subnav li li a:active {
background-image:url(images/sunav_bkd_trans_gray.png);
margin: 0px;
padding: 6px 10px 6px 10px;
}

(NOTE: Depending on the menu style you may need to simply call the image via “background: url(images/yourimage.png);” On this website I had to use that.  So try that if “background-image :” doesn’t work)

You’re done!

Now upload the new CSS and two new .PNG image files and check out your fancy transparent menu in CSS.

Now that wasn’t hard, was it?

Of course your CSS file may be slightly different but not much.  That is the great thing about CSS: it is a standard and most items like drop downs are fairly consistent site to site.  Just gotta know what to look for and be willing to try this then try that.  Eventually it will be second nature.

Enjoy!

_____________________

(PS: Checked it in IE7, FF & Safari)