Posted on

Video Redesign on WRP

Recently, I spent a fair amount of time re-organizing my films on WRP. I had a few goals:

1) Bring my site into the 21st Century, so quit using a js script to open a new window to display the movie.

So, how are all the cool kids doing it? YouTube and Vimeo. No thanks, color me old school and not into “insert your video site of choice that displays your video in horrendous quality along with bizillion ads.”

2) Have a common well-thought out format for all films AND forget about trying to create a reference movie that will check for access speed, QT version etc.

3) Add the ability for iPhones/Touch’s to be able to view the films.

First came DVcreators’ DVKitchen. Fantastic! It provided EVERYTHING I could possibly want… for about a day. It is a nice program and it provided a great starting point for what I wanted to do. I highly recommend looking at it. I’ll repeat… it is a GREAT starting point for a video site!

Now I had a nice way of showing my films; cross off #1.

DVKitchen showed me the value of spending a bit of time understanding your bit rate and film quality. One word, SampleLab. Thanks! (again). Using SampleLab as a starting point, I created multiple compression formats in Compressor. This allowed me to determine the ideal combination of film size and viewing quality. I was amazed at the difference between each film. (I’ll create a note regarding H.264 to help explain this one.) Cross off #2.

After much experimentation, with MakeRefMovie from Apple and Quicktime’s Export for the Web command, I decided that a reference movie wasn’t all that. Due to the my inherent difficulty with reference movies and the fact that iPhone-type devices love a vertical format, I decided to create a vertical-oriented iPhone-only website.

Cross off #3.

Posted on

Dropshadow, dropshadow

(think Moon shadow, moon shadow)

I wanted to make the site look just a weeeeee bit better. And a dropshadow on the images seemed to be the way to go.

Search the web… uhhhh, that isn’t easy.

Let’s see what Pixelmator can do… uhhhh, that isn’t any easier!

Sigh, let’s fire up Photoshop and flail away.

D’oh! My image is locked, why oh why! More searching… one of two solutions, double click on the layer then click OK or make sure the image is RGB not Indexed. Sigh. That was 30 minutes.

Ok, I think I understand… apply the layer Dropshadow to the image. NOPE! Ain’t happening. Maybe, just maybe I need to make sure my Canvas Size is bigger than my image. D’OH! Yes, that works and it looks quite nice, if I may say so myself.

So my work flow is this:

  1. Open the file and make sure it isn’t locked, either by double clicking on the layer or by ensuring its mode is RGB (as compared to Indexed)
  2. For a 160×120 image, make the Canvas Size about 20px greater on each side. For larger images, then a larger border will be required.
  3. Add a Dropshadow layer, then mess with the params until it looks like what you want. In this case, once I had my first one that looked good, I saved the Style as WRP (then just clicked on this Style for step 3 on subsequent photos).
  4. Flatten image
  5. Save as a new jpg

Voila! A much better looking site!

Posted on

It’s the little things

Whew!

Made some changes to the site in an effort to bring it into the 21st Century.
First, I added a drop shadow to all of the images. What a difference it makes!
Details on how in my next post.
Second, I wanted to make sure the tooltip for each image would say “Click on image to play film.” and each image would have a alt tag so it would validate correctly AND when the film played, I wanted to ensure the title in the shadowbox did NOT say “Click on image to play film!”
Details on this one; so Shadowbox has a title attribute; use it to show the title when it is being played. Use the href attribute title for the tooltip AND ensure you have an alt attribute for the img tag.

Like I said “whew!”

Posted on

I love it!

So I wanted to add a picture to my header… not a problem. BUT! Now the picture and my blog title were in conflict. Because the header photo was half dark and half light, any title color would look great on one side but not the other. Sigh.

Here’s where it got fun!

Using Safari 4’s Develop menu (enable using the Advanced Tab in Preferences), I used the Web Inspector to see if I could drop the title to just under the photo, oops, move it to the right, and make sure the Search widget lines up at the bottom, change the color, FINIS!

I love it! Update the CSS file with my desired changes and life is but dream!

Well except now I see I have to make just one more tweak…

Posted on

Hello world!

To begin… again.

Probably my 4th or 5th attempt at blogging. This time I want to take a different approach. I want to use this blog as a way of understanding video and OS X/Macs.

Let’s see what happens!