Nick Hodge's Blog

Distilling PDF into JPEG Photoshop 7.0’s scripting on Windows

Problem from a customer: they want to take a directory of PDFs and make mini JPEGs that are previews of the spreads.

So, out with the newest Adobe application on the block: Photoshop 7.0. Photoshop 7.0 has a major new addition: Scriptability. Using AppleScript on MacOS, VB (COM) scripting on Windows and Javascript on both platforms, you can write scripts that interact with Photoshop and other applications. For scripters, this is the holy grail. From my first days at Adobe, one of the gurus of AppleScripting Shane Stanley, hounded me about Photoshop scriptability. In Photoshop 7.0, we’ve finally delivered.

This version is an application written in Visual Basic. Using the Scripting Object (FileSystem object) and some UI classes to do the “watching” and directory selection, we look in a directory you nominate and place the resulting PDF and JPEGs into the destination directory.

You will need the Scripting plugin for Photoshop 7.0 Windows: Photoshop 7.0 Scripting Plugin 1.0.2a (Win)

And my compiled script, and source which are here:    Moonshine for Windows (ZIP)

Experimenting with “faux” transparency in the design. If this page were composed in SVG, it would be much easier. The wrapping to the right is also faked (using a table) and the Recent area has a background image in the table cells that blend from one colour to another. The image behind the main content area is in the CSS layer, and ghosted out in Photoshop prior to saving the JPEG. Its probably a little overboard, but interesting to see how far you can go.

Minor UI tweakage… the image inside the content area. Also: MSIE 4.5 Mac renders the page correctly (see yesterday’s note on content areas) whereas MSIE 5.x Mac does not. Also fixed. I am pleasantly surprised that it all works on a 1999-era browser. Last century.

The new design is almost fully implemented. I used Photoshop 7 and ImageReady 7 to create the base design. I used the CSS layer HTML export format from ImageReady to create the base layers. Heavy text editing and previewing in GoLive 6.0 made the process of refining (and learning) easier.

The inspiration for the current design came directly from Russell Brown and Nick Hodge in New Zealand. The west-coast beaches in the Waitakare Ranges of New Zealand are awe inspiring. Russell took the shot of myself near Lion Rock at Piha that sits on the front page.

I was in the bad habit of using HTML tables as the base construct of web pages. This is based on a historic comfort, a hesitation based on Netscape 4.x’s lack of full CSS1 let alone 2 compliance, the base export out of tools like GoLive and ImageReady producing tables and a general reluctance to persist with learning something new.

Things I learnt on this journey:

• CSS positioning and DIV layers result in smaller, more compact and easier to read HTML. Once you understand that you can nest the DIV layers, and that the positioning can be relative to the enclosing DIV layer (as a box), its easy to position elements. It would be cool if boxes expanded/shrank in relation to their parents to make it easier to implement layouts. This would then make it similar to the Java GridBag et al layout system.
• Implementing a few minor changes to colours and rollover styles was simple. Mungenet already used CSS for font/style type formatting to separate design from content. Adding DIV layers was as simple next step.
• Separating the content from the design also helped implement the new design. By placing the new template into the CMS, the implementation took seconds, not hours or days.
• I only had to add 3 lines to the mungenetengine PHP code to implement a new way of rendering image references for the inline CSS. 8 lines were commented out due to a bug in some regular expressions. No other deeper changes were needed to the code that worked for the previous table design.
• The site will not work in Netscape 4.7 or earlier. In fact, the previous version of Mungenet would not have worked with Netscape 4.7. As I use the br/ tag in its correct XHTML syntax form, Netscape’s parser doesn’t see this and ignores the tag. Some may call me browser elitist, but you need your head read if you are still using Netscape 4.7!
• Opera 6.x and Netscape 6.x interprets the CSS DIV positioning differently. For instance, the next/previous buttons in IE render at the top of the content DIV layer. In Netscape 6.x, they render at the bottom. Overall, rendered in Netscape 6.x this site looks ok, but Opera 6.x needs a little work.
• Whilst largely tested in IE6/NS6 on WindowsXP, I also tested this with Internet Explorer 5.1 on MacOS X. I notice in my logs the odd Internet Explorer 5.0 on Windows 98 passing this site. As Internet Explorer 5.0 MacOS 9 is one of the best and most complete CSS1/2 browser out there, I trust it works ok. Notice I didn’t use the word assume!
• I long for full PNG-24 support including the correct rendering of alpha channels in Internet Explorer. Using transparency as a part of design is something with InDesign 2.0 makes easy for print. Now we need a similar, standardised way in XHTML and PNG-24. Without resorting to Flash SWF or SVG.
• PNG-24 aside, its easy to get some interesting design effects by placing images as background elements of layers: see the navigation piece on the left hand side, and footer at the bottom of this page.

To investigate and complete:

• True W3C HTML conformance. This site presently doesn’t pass the full test due to some tagging issues. Whilst these do not effect the rendering in most popular browsers, I would like to ensure it passes.
• Conditional rendering of elements to permit PNG-24 to Netscape 6/Opera 6 and dumb, single bit transparency in GIFs for Internet Explorer
• Different CSS for Opera 6.0
• Clean up the external CSS and reduce size by removing unused elements and truly inheriting styles.
• Replacing tables that render the navigation pieces into CSS layers

The best resources I found on the web for understanding CSS positioning and layers:

The W3C on Cascading Style Sheets
Discussion at Webmaster World
The CSS Shark

If you are a HTML table jockey, I think its time to make the switch to CSS positioning and layers.