The need

Professional web developers have been aware of CSS sprites or CSS rollovers/hovers since 2004 (The rollover term is taken JavaScript and 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.

The premise of my presentation was to show an overview of the process between layout in Illustrator and PhotoShop to coding in HTML and CSS. I find that web design is often segmented between the coders and graphic designers. I propose that the best outcome can come from bridging that gap. I do this in my daily workplace and try to show tips and techniques for others to bridge that gap. The time slot was only a half hour, so I could not go into coding detail, but only point to tutorials via links.

You can view the Graphic Web Design and Cascading Style Sheets PowerPoint (431KB) or view the presentation in HTML. Some support images and all sites discussed can be found on Delicious (theses are notated by “{link}” within the presentation).

One of my co-workers warned that I needed to completely remove CS3 preferences, plists, and all those other files that OS-X applications install but never remove!!! I finally found this Adobe Support page, Remove CS3 prerelease software (Creative Suite and individual applications). I figured that it would remove release software, too. I believe that it does, but be sure you know what you doing when you use it. This script runs from the terminal, so it mainly a UNIX shell script that deletes folders and files.

I am now back to Illustrator 13.0.0 instead of 13.0.2, but only after more than six hours of uninstalling and re-installing Adobe Creative Suite !

There are three steps that Photoshop takes in saving a file: Generating Full Resolution Composite, Preparing to Save, and Writing Photoshop Format. When dealing with files approaching the 2GB limit, you can quicken the ?¢‚Ǩ?ìGenerating Full Resolution Composite?¢‚Ǩ¬ù and the ?¢‚Ǩ?ìPreparing to Save?¢‚Ǩ¬ù step by hiding all the layers (Alt+click one layer?¢‚Ǩ‚Ñ¢s visibility icon will hide all other layers on the PC). The documents will still take a few minutes to save, but some time will be shaved off the beginning of the save.

If there is one layer or more (adjustment, bitmap, vector, or text) and the “Maximize Compatibility” feature is turned on, Photoshop saves two copies of the same image. One is flattened (Full Resolution Composite) and the other is in layers. If you deselect the ?¢‚Ǩ?ìMaximize Compatibility?¢‚Ǩ¬ù feature, this might even reduce your file size by half, and eliminates the reason to hide all the layers for ?¢‚Ǩ?ìFull Resolution Composite.?¢‚Ǩ¬ù

–Stephen M. James
www.smjdesign.com