The need

Professional web developers have been aware of CSS sprites or CSS rollovers/hovers since 2004 (The rollover term is taken from JavaScript and the hover term is taken from CSS). They are the background graphics that change position based on mouse hover thus eliminating the need for JavaScript image swaps and image caching since the “mouse on” and “mouse off” are one image. I have been using sprites for years. It is a more tedious process than clicking Swap image on a DreamWeaver drop down menu, but it produces more accessible and more clean code. The most tedious part of creating CSS sprites for menu navigation is aligning the static (in-active) and hover (active) images. This script solves this problem by taking two images and merging them into one. I hope this increases your productivity and creates a more standards-compliant web.

There are online CSS sprite generators out there. My Photoshop script is not as remarkable as these 20 image sprites, but it’s much simpler, and you can assign a keyboard shortcut to it. Also, all my sites are designed in Illustrator which is a slightly different work flow than most. I find that Photoshop is an awful layout program.

Download CSSsprite.jsx

Installation

A JSX script is similar to a Photoshop plugin or an action, but are commands in Photoshop’s JavaScript based script interface. Download and copy this script within the Presets>>Scripts folder of your Photoshop application folder:

• OS-X: Macintosh HD/Applications/Adobe Photoshop CS3/Presets/Scripts/
• Windows: Program Files/Photoshop CS/Presets/Scripts

The Script will appear under File>>Scripts>>CSSsprite on the menu. You can assign a keyboard shortcut to this script. I prefer Control+Command+S. This shortcut fits well with the Save for Web shortcut, Command+Alt+Shift+S.

Usage

Open two files (and only two files) with the same height and width (if they are different sizes, the offset of your hover button state will not be half of the height). Select the non-hover background image, making it active–thus making the hover background image de-active. Run the script from the Scripts menu mentioned above. This will place the hover background image on the bottom of the sprite. This script does not support adding a third state to the sprite, but you could add a third and fourth state. To do this, first combine the third and fourth state, and then combine that image with the normal/hover sprite.

For your information: States for this script

The following is a list of Photoshop commands that are executed in this script:

• Convert Image Mode to RGB
• Make horizontal guide at 100% of canvas height
• Switch to inactive document (-1 in document array)
• “Duplicate Layer. . .” Layer Menu via right click
• Switch back to inactive document (+1 in document array)
• Double canvas size vertically
• Transform/Move top layer down (50% of canvas size)
• Zoom In (twice)

Result
This gives you a two-layered Photoshop file with second layer the CSS hover layer. Save the file as GIF, PNG, or JPEG using File>>Save for Web.

Notes
Adobe Photoshop JavaScript is the only cross-platform scripting language for Photoshop. This script was only tested Photoshop CS3 Extended (Mac). Our firm does not use Photoshop for web layout–only for image manipulation. We use Illustrator for layout.

I would like to thank the creators of ScriptingListenerJS and ActionToJavaScript.

You may be interested in this PhotoShop script that creates a sprite from all the images in a folder.

Change Full Size image width to match theme

The column width in WordPress’s default theme Kubrick is 500px. Therefore, the default (maximum) image size is 500px. The column width of the blog I am posting to is 614px. You can set a global variable to change this setting. Create if not already existing functions.php in your theme directory. Define your maximum media width (that is “Full Size” in the Gallery interface):

<?php
$content_width = 614;
?>

I’ve set mine to 614 pixels since that is the width of my div with the class “.entry” minus padding. If this does not work, some have solved this problem with $GLOBALS['content_width'] = 614; also. You can view this setting at a post at RachelSteely.com.

Default media to Full Size

I prefer to justify my media (align left and right) to the column width. To do this, set default selected size to “Full Size” by changing the code in /wp-admin/includes/media.php. Move the ‘checked’ radio attribute from Medium to Full Size.

Line 458:

" : '' ) . "<input type='radio' name='attachments[$post->ID][image-size]' id='image-size-medium-$post->ID' value='medium' checked='checked' />
<label for='image-size-medium-$post->ID'>" . __('Medium') . "</label>
<input type='radio' name='attachments[$post->ID][image-size]' id='image-size-full-$post->ID' value='full' />


change to

" : '' ) . "<input type='radio' name='attachments[$post->ID][image-size]' id='image-size-medium-$post->ID' value='medium' />
<label for='image-size-medium-$post->ID'>" . __('Medium') . "</label>
<input type='radio' name='attachments[$post->ID][image-size]' id='image-size-full-$post->ID' value='full' checked='checked' />

And that’s it! Happy uploading with the new and improved (and customized) WordPress media gallery.

There are many more shortcuts than these, but if you don?¢‚Ǩ‚Ñ¢t know these, you are not being as productive as you could be. I very, very much wish someone had forced me to learn the ?¢‚Ǩ?ìJKL?¢‚Ǩ¬ù+ ?¢‚Ǩ?ìIO?¢‚Ǩ¬ù + ?¢‚Ǩ?ìF9?¢‚Ǩ¬ù workflow when I was editing back in college.

Cueing/logging footage
I: Mark in
O: Mark out
J: Reverse (press repeatedly to increase speed)
K: Pause
L: Forward (press repeatedly to increase speed)
F9: Insert from Canvas to Timeline

Tools on Timeline
A: Arrow
H: Hand
B: Blade
N: Snapping
S: Slip
SS: Slide
R: Roll (single tracks)
RR: Roll (both tracks)
T: Select this track, from this point forward
TT: Select this track, from this point backward
TTT: Select all tracks from this point forward
Cmd+A: Select all tracks
P: Pen (Adjust sound and opacity on the Timeline Overlays (Opt+W))
M: Marker (I don?¢‚Ǩ‚Ñ¢t mark often though)

I used to log footage on paper and log clips via FCP?¢‚Ǩ‚Ñ¢s Log and Capture window, but with the price and size of hard drives these days. It?¢‚Ǩ‚Ñ¢s easier to capture all your footage–yes, just let it sit there and eat up your disk space. If you are short on space, then–at the end–use the File>>Media Manager.

So once you?¢‚Ǩ‚Ñ¢ve captured all your footage, add all the usable footage to a Sequence via the ?¢‚Ǩ?ìCueing/logging footage?¢‚Ǩ¬ù keyboard shortcuts listed above. You won?¢‚Ǩ‚Ñ¢t even need to use the mouse–which is always a great benefit. To start your actual timeline, duplicate the rough timeline and start moving your items around, if you need a certain cut, go back to your initial rough timeline and Copy (Cmd+C) and Paste (Cmd+V) it. If you have any additional tips to make an editor?¢‚Ǩ‚Ñ¢s life easier, please post them.

–Stephen M. James
www.smjdesign.com