No ShrinkWrap Web2.0 Reviews

I’ve been listening to a lot of podcasts on a wide variety of topics lately, getting ideas for how faculty can integrate podcast creation into their own classes. One thing I’ve noticed is how polished and professional some podcasts sound – since I want our faculty to be able to produce professional-sounding media, I’ve been trying to identify specifically what separates the professional from the amateur. While many things seem to play a part in that professional sound, one consistent feature I can easily teach and replicate is the use of music. Some podcasts use only intro and outro music, others use music to indicate section breaks, and still others play constant, faint background music. However, all professional-sounding podcasts using music share one thing in common – ducking or fading music behind the voice track(s).

We’re promoting Audacity for basic audio recording and editing, so I looked into how to achieve ducking in Audacity. While there are several ways to duck or fade music, the most professional-sounding method involves the use of the envelope tool, which fades the volume of a track to a constant low level, then fades back to the original loud level. It’s pretty easy to use once you’ve gone through the steps; since video is much easier to follow than text-based documentation, I whipped up a screencast demonstrating the envelope tool, which I’ve embedded below. Tell me what you think.

As an aside, I also used this opportunity to play around with some alternative video upload services. Out of all the ones I tried, I liked Revver’s embedded video object the best. It’s interesting to see how some video services use more compression than others when transcoding the .avi I uploaded into .flv. Here’s the services I tried:

• Revver(embedded below)
  
  http://www.revver.com/video/629706/podcasting-howto-using-audacity-to-duck-music-behind-voice/
• YouTube
  http://www.youtube.com/watch?v=X8g9vtQ9-D0
• Viddler
  http://www.viddler.com/explore/charshman/videos/2/
• Vimeo
  http://www.vimeo.com/625755
• Teachertube
  http://www.teachertube.com/view_video.php?viewkey=a6c607d2fe43b43ba96f
• Sclipo
  http://sclipo.com/video/podcasting-howto-using-audacity-to-duck-music-behind-voice
• Blip.tv
  http://noshrinkwrap.blip.tv/#623953

Do you have a favorite video upload service I didn’t try? Tell me about it – I’d love to test it out.

Recently, I’ve been assisting instructors interested in offering podcasts to their students. Since many others write articles on podcasting basics, I won’t belabor those topics here (unless, of course, I get requests for it). Instead, I intend to share some tips on topics that I don’t see others covering, starting with building a music and sound effects catalog.

When used effectively, music and sound effects give podcasts a professional quality – introductory and “outtro” music, background music, pieces of music separating show segments, and sound effects all contribute to a podcast’s polish. In some cases, like the podcasts (or “netcasts”, as Leo likes to promote) offered by the TWiT network, music choice sets the mood for the show and helps establish a brand. However, it already takes so long to record and edit podcasts without adding additional audio that often people find they don’t have time to add that extra polish. With the right tools and resources, I’ve found I can collect and maintain an easily-searched database of podsafe audio, ready to drop in podcast episodes in minutes. Generally, the steps I’ve taken to build my podsafe catalog include:

1. Collect the music using Firefox and DownThemAll
2. Import music into MusikCube
3. Rate and tag songs as I listen to them
4. Prepare frequently-used songs with desired volume, fade and trim edits

After the jump, I’ll cover each step in depth.

Continue reading ‘Build and organize a podsafe music library’ »

I love using Wordpress. One of my favorite time-wasters has become flipping through newly-submitted Wordpress themes at places like Weblog Tools Collection (here’s a sample theme post) looking for that perfect theme for my blog. Unfortunately, when I made a list of style elements I liked, not one theme has all the elements I want. So, I started going through my list and decided to add my favorite style elements to any theme. First up – styled author comments.

Styling author comments with a unique look is a great way to allow readers to immediately tell the difference between readers’ comments and an author’s responses. Some popular blogs that style authors’ comments include:

TechCrunch: see the article on Mig33 for a recent example.

ReadWriteWeb: see their ’social graph’ article for a recent example.

Alex King’s blog: see his article on Google’s sharing service for a recent example.

I like the extra panache Alex King’s comments have with the gradient, so that’s what I’ll use.

First, while I’ll be showing how to edit your theme’s files to add custom author comment styles, you could do the same with a plugin like Jan Olsen’s Comment Highlighter plugin (which appears to have moved to Google Code). I personally have struggled with plugin compatibility problems (most of which, it seems, unfortunately stem from Google Sitemaps, one of my favorite plugins). To reduce the chance of conflicting plugins taking down the entire site, I started paring them down to just the necessities – in particular, I stopped using any plugin I could easily re-create with some code in the theme files. In my opinion, the five minutes it takes to copy my code between themes when changing is worth saving potentially hours’ worth of troubleshooting time. If you’d rather use a plugin, or don’t have access to edit your theme files, I’m sure Olsen’s plugin is a good one. Otherwise, make time for five minutes’ worth of easy editing and read on.

To begin, we’ll be editing two theme files: style.css and comments.php, which you’ll find in your /wp-content/themes/[theme name]/ directory. First, in comments.php, find the lines that read:

<?php foreach ($comments as $comment) : ?>
<li class=”<?php echo $oddcomment; ?>” id=”comment-<?php comment_ID() ?>”>

Modify the second line to add a unique style if both the comment author name and email address match a particular blog author’s information (make sure it matches what is listed in the user’s profile):

<li class=”<?php if ($comment->comment_author == ‘AUTHOR NAME GOES HERE‘ && $comment->comment_author_email == ‘AUTHOR EMAIL ADDRESS GOES HERE‘) echo ‘authcommenthighlight’; elseif ($comment->comment_author == ‘ANOTHER AUTHOR NAME GOES HERE‘ && $comment->comment_author_email == ‘ANOTHER AUTHOR EMAIL ADDRESS GOES HERE‘) echo ‘authcommenthighlight2′; else echo $oddcomment; ?>” id=”comment-<?php comment_ID() ?>”>

Now we need to add the styles “authcommenthighlight” and “authcommenthighlight2″ (or whatever you name them) to our theme. Since I’m currently the only author on this blog, I’ll just be adding “authcommenthighlight.” First, create your gradient image. I had the best luck making mine 12×48 pixels, and selected two colors from my theme. I used Photoshop to make the gradient, but you can use just about any photo editing software – for that matter, even Microsoft Word can create gradients. If you’re not sure how to create a gradient, here’s some sample tutorials: Photoshop, Paint Shop Pro, Paint.net and GIMP. Here’s what I ended up with, using the top header (#237AB2) and sidebar (#EEEEEE) colors:

Now, add the “authcommenthighlight” style to your style.css, setting the gradient image to repeat along the top of the comment and the background to match the bottom color of the gradient:

.authcommenthighlight {
background:#EEEEEE url(/images/grad.jpg) repeat-x;
}

To kick it up a notch, try modifying padding, margin, borders, font colors and other style elements. Get an overview of additional CSS elements you can modify at DevGuru and W3Schools.

Now you and your authors will each have your own unique comment style that separates your comments from visitors’ comments. Of course, there’s a downside to styling comments by matching author names and email addresses – if someone knows your username and email address, they can leave a comment that receives the unique style. I haven’t dug into the Wordpress hooks enough to know whether there’s a way to code around this problem – anyone know?

Anyone have different methods of adding unique styles to author comments? I’d love to hear them in the comments below.

Recently I designed a custom brochure for a construction company. The client wanted mostly images with very little text and a professional layout. Clearly, a template-based tri-fold brochure cranked out in Microsoft Publisher was not going to get the job done.

As a side note: I plan on using this and similar techniques to create custom PowerPoint slide backgrounds and theme elements. A PowerPoint presentation’s design should use little text and combine with lecture material to provide visual cues that help students remember key points. The overall look of a PowerPoint presentation can affect a lecture’s success – the more professional and targeted a presentation’s theme and graphical elements are, the more likely students will be engaged and pay attention to the visual cues.

For the client’s brochure, I decided to start with a custom, watermarked background – by choosing the right construction-looking picture and creating a background from it, I could bring the images on each page together for a cohesive presentation. Once I designed a custom background for the images, the rest of the brochure practically created itself.

Before I begin: while I used Photoshop to create these brochure pages, I’m sure other programs like Gimp can be used to reach the same results. Since I work with faculty and students, I’m always on the lookout for open-source (or at least freeware) that can replicate what I do in pay programs; if I find a way to replicate these results in Gimp, I’ll write an addendum.

First, here are the images I used to create one of the brochure pages:

And the final result:

Since the client is a construction company specializing in building natural rock walls, I wanted a background that depicted boulders but lacked a lot of detail – too much detail would draw focus away from the project photos. I liked the look of the pile of boulders above – it’s very rough and chaotic and has a lot of character and edges, but I couldn’t use the photo itself. I started by cropping the image down to just the pile of boulders and copied the result into a new image in its own layer.

For the watermark, I envisioned somehow dropping the detail in the photo, making it black-and-white, then finding a suitable background color. I found the Graphic Pen filter accomplished much of what I wanted – I made sure my active foreground color was black, then applied the filter with the following result (before and after comparison):

Next, I used the eyedropper tool to select a neutral rock color from the original boulder photo – in this case, I selected #d0b08a. I used the Paint Bucket tool to fill the background with the selected color, then used the Layers palette to drop the opacity of the watermark layer to 30% so the background color shows through (you can also modify layer transparency by using the menus – Layer > Layer Style > Blending Options):

The resulting watermark is a great backdrop to the client’s construction photos – relevant to the brochure material and stark enough to show necessary detail while soft enough to not draw too much attention:

Have any favorite watermark and PowerPoint tips? I’d love to hear them – leave me a comment below.