(For more resources on Plone, see here.)

Graphic design tools

Any serious skinner needs a graphic design tool with certain capabilities in order to take the design files and assemble them into a finished web site. In particular, layers and the ability to slice pieces of a design and export those pieces are essential. Layers allow a themer to hide pieces not needed in a finished CSS theme, such as text that will eventually become real HTML on a page. Slices, meanwhile, are the pieces of an overall design that are exported during the layer manipulation process. They are the images the end user eventually sees on the rendered page. This is different from cropping, which actually alters the size of the canvas; slices are just pieces of the overall design, cut with precision, exported, and then manipulated with CSS.

The most commonly used graphic design tools used for web design are Adobe® Photoshop®, Adobe® Fireworks® (formerly Macromedia) tool, and open source tools such as GIMP. It is not generally recommended to use tools such as Adobe® Illustrator®, Corel Draw and other vector-based packages. Web designs primarily use raster-based media, meaning that raster images are based on pixels and thus scale with loss of clarity. Conversely, vector-based images can be scaled infinitely without degrading, but are typically not appropriate for web design.

Adobe Photoshop

The most popular tool for processing image files is Adobe Photoshop. The files generated for designs are PSD, or Photoshop Document files. Adobe Photoshop meets the basic requirements of being able to manipulate the vector and raster images, layers, and slices, and offers a lot of additional functionality. The ability to control anti-aliasing and the quality and size of an exported image is essential in web design, and Adobe Photoshop (also, Adobe Fireworks) is quite powerful in this respect.

A quick look at the Layers panel illustrates how sections can be grouped together, moved, or be shown or hidden via the “eyeball” icon.

This show/hide functionality is very important. One situation where this becomes valuable is when you have a PSD file that indicates graphical buttons with text over them. For accessibility reasons, you may want to render the text as real HTML-rendered text, and not as an image. You need to be able to export the buttons in both their on and off states in order to get a proper rollover effect, and you need to hide the graphical text in order to do this.

One site that illustrates this concept is http://greenforall.org. Using Adobe Photoshop, the layers where the text appears on the top navigation were hidden, and just the background on/off images were imported. On the finished web site, the top menu used the background images and real rendered text.

The other core functionality that Adobe Photoshop offers is the ability to slice images and export them. The Copper River Watershed Project web site (http://www.copperriver.org) illustrates how slices might be used. The original Adobe Photoshop document is here:

If you look closely, you can see a few key slices: the “Go” button next to the search field has been sliced, as has the Tour Our Watershed map and the gradation on the top navigation, which will be tiled horizontally. Below the orange navigation is a long slice that spans from the left-hand shadow over to the right-hand shadow. This image can be used to tile the length of the page. Additionally, the entire Information For… box has been sliced; in this case, for the final implementation, the text overlaying this slice was hidden and replaced with rendered text. If you look at the finished web site, you can see how these slices were applied.

Photoshop provides a great deal of power, but in general, you may only use about 20% of the power it offers. You can visit http://adobe.com to see the tutorials on how to use the Adobe Photoshop effectively. Additionally, you may want to investigate Photoshop Elements; it doesn’t allow you to slice images for the Web, but for the current price of $139.99, it’s still a great tool for many web design activities: http://www.adobe.com/products/photoshopelwin.

Adobe Fireworks

At the time Macromedia was purchased by Adobe in 2005, the interface was a little clumsy at times, but it did have a basic implementation of layers and slices. Over the past few years, based on the demos available, it appears that the interface has seen some great improvements, though it does not have the same power or market share as Adobe Photoshop has. However, at nearly $400 less than Adobe Photoshop, it’s a great option.

According to the Adobe web site, “Adobe Fireworks CS4 software is used to rapidly prototype web sites and application interfaces and to create and optimize images for the Web more quickly and accurately. It is ideal for web designers, web developers, and visual designers.” It differs from Photoshop in that “Adobe Photoshop software is the industry standard for digital imaging, with a broad array of features and functionality used by photographers, graphic designers, web designers, and many other creative professionals. Fireworks is a much more focused tool, with the features for prototyping vectors and bitmaps for the web and application interfaces.” The real selling point here, though, is integration with Adobe Photoshop, as a design may be shared between multiple people, each using different graphical programs.

The ability to manipulate the vector and raster images is also important. Additionally, like Adobe Photoshop, Adobe Fireworks provides the ability to work with layers and slices, and preserves many of the settings in an Adobe Photoshop PSD file. It’s not as good at compositing and photo manipulation as Photoshop, but is a lot stronger with text, shapes, and final optimization. Selective JPEG optimization is also very handy, and allows you to heavily compress the portions of a JPEG while keeping text legible. Additionally, it’s great for generating image maps (not often used in Plone), rollovers, and other common tricks. Finally, it allows you to view your work with either Windows or Mac gamma. Gamma correction basically refers to the ability to correct for differences in how computers (and especially computer monitors) interpret color values. There are two factors here: the ability to predict what an image, say a photograph, will look like on another monitor and the ability to match the colors from different sources on a single page—Adobe Fireworks excels at both.

While Adobe Fireworks is not as feature-rich as Adobe Photoshop, it is still an extremely competent tool for slicing and exporting design elements at implementation time, not to mention more affordable.

GIMP

GIMP, also known as the GNU Image Manipulation Program, can be downloaded for free from http://www.gimp.org. It is a freely distributed program for such tasks as photo retouching, image composition and image authoring, and is covered by the GNU GPL license. According to the GIMP’s web site, it can be used as a simple paint program, an expert quality photo retouching program, an online batch processing system, a mass production image renderer, an image format converter, and more.

From the perspective of how it compares to the key aspects of Adobe Photoshop® and Adobe Fireworks®, it has full support of layers and channels, plug-ins that allow for the easy addition of new file formats (that is, it can read Adobe Photoshop or Adobe Fireworks files), and best of all, it is open source.

You can visit http://www.gimp.org/docs to download the user manual for the current release. GIMP also lists several user groups and resources at http://www.gimp.org/links that may be helpful. Even so, the latest releases are still quite recent, so development is still happening

For a free solution to the image processing needs, GIMP is an excellent choice, but weak in terms of the user interface and layer compatibility with Adobe Photoshop.

Browser add-ons and important notes

Now that you have sense of the tools that are available for manipulating design files and exporting the necessary images for building your web site, let’s look at how browsers affect the web site building process, either through add-on tools or through sheer bugginess.

It’s also worth mentioning that users should reference the A-List of popular browsers to see which browsers are still considered to be supported by web developers: http://developer.yahoo.com/yui/articles/gbs/index.html. This can help to ease the quality assurance load during web site testing.

Many of these A-List browsers come with browser-specific tools that allow you to inspect your web site to descry the CSS (Cascading Style Sheets) ID and class selectors, manipulate your CSS on-the-fly, optimize your site, explore color options, and more. We’ll look at the available options for three major browsers: Internet Explorer, Firefox, and Safari, but you should always be conscious of general browser penetration statistics so that you know which browsers are still in popular use: http://en.wikipedia.org/wiki/Usage_share_of_web_browsers.

Now, let’s get back to our key browsers.

Internet Explorer

From a themer’s perspective, Internet Explorer is the most finicky browser against which to implement, as older versions of Internet Explorer followed the W3C’s (World Wide Web Consortium’s) standards differently than many other popular browsers.

According to http://positioniseverything.net, a leading collector of browser fixes, “All browsers have CSS bugs, and IE leads the pack in this area, but that is not the end of the story. Microsoft has seen fit to engineer their browser to deliberately violate the standards in several critical ways. It might just be a misguided attempt to ‘make it simple’ for newbie coders, or it might be a cynical ploy to crush the competition, but in any case it creates huge headaches for those of us who desire to employ CSS positioning on our pages.” While this may be true, many fixes for Internet Explorer have been identified, and thankfully, IE6, one of the more problematic browsers in recent years, is finally becoming obsolete. It was replaced by IE7, which was a vast improvement, but still did not implement the W3C conventions for CSS faithfully. As of this writing, Internet Explorer 8 was released and showing signs of having finally made strides toward real compliance to W3C standards.

What this equates to is that web developers tend do their initial browser testing in browsers that are more compliant; that means doing most upfront testing in Firebug and Safari, and then rounding out the testing at the end against IE6, IE7, and IE8. Where possible, it’s also important to test against other major browsers and handheld media.

For testing against Internet Explorer, IE provides a tool called the Web Developer Toolbar for debugging. It is available for both IE6 and IE7 as an add-on and can be downloaded here: http://www.microsoft.com/downloads/details.aspx?FamilyId=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en. Web Developer Toolbar will no longer be the tool of choice for IE8, however, instead use the developer tools included with IE8.

To use the developer tools in IE8, press Shift+F12 or click the “Developer Tools” icon in the command bar to begin using the tool.

For IE6 and IE7, Web Developer Toolbar provides several features for exploring and understanding web pages. These features enable you to:

• Explore and modify the document object model (DOM) of a web page.
• Locate and select the specific elements on a web page.
• Selectively disable the Internet Explorer settings.
• View HTML object class names, IDs, and details such as link paths, tab index values, and access keys.
• Outline tables, table cells, images, or selected tags.
• Validate HTML, CSS, WAI, and RSS web feed links.
• Display image dimensions, file sizes, path information, and alternate (ALT) text.
• Immediately resize the browser window to a new resolution.
• Selectively clear the browser cache and saved cookies. Choose from all objects or those associated with a given domain.
• Display a fully-featured design ruler to help accurately align and measure objects on your pages.
• Find the style rules used to set specific style values on an element. Right clicking on a style rule will allow you to trace the rules to a specific CSS file, if one is found.
• View the formatted and syntax colored source of HTML and CSS.

The Developer Toolbar can be popped up within the Internet Explorer browser window or opened as a separate window.

If you are using a PC to test your sites, VMware, parallels, or a Windows emulator, you should download the Toolbar from http://go.microsoft.com/fwlink/?LinkId=125120, install it, and restart IE. You can then click the Developer Toolbar icon in the command bar to display or hide the Developer Toolbar. Alternately, you can open the View menu and then use the Explorer Bar menu. In Internet Explorer 7, open the Tools menu and then use Toolbars/Explorer Bars to display or hide the Developer Toolbar.

There are a few caveats here:

• The Developer Toolbar icon may not be visible by default. If you do not see it after restarting Internet Explorer, click the right-facing arrows at the end of the IE7 command bar to view all the available Toolbar buttons.
• Some menu items are unavailable (grayed out) when running Internet Explorer in Protected Mode on Windows Vista. To use those options, temporarily turn off Protected Mode or right-click the Internet Explorer icon in the Programs menu and choose Run as administrator.
• In IE6 or in IE7 with tabbed browsing off, using the validation links will navigate the current window to the validation page. To launch the validation links in a new window, open the Tools menu, click Internet Options, and uncheck Reuse windows for launching shortcuts in the Advanced tab, or use IE7 with tabbed browsing enabled.

Generally, you can use this tool by expanding the left side of the panel displayed to navigate through your site’s structure. It displays CSS IDs and classes in a hierarchical fashion. On the right-hand side, it displays the properties assigned to each of those IDs or classes. You can modify those by using the + icon in the center Attributes section to add a new property and using that to add to or alter the existing CSS.

As stated before, the left-hand pane allows you to expand and walk through the structure of your web site. When you refresh, unfortunately, the entire tree closes. To continue troubleshooting a specific element on the page, you must drill down to it again or use the “selector” tool. It’s somewhat clumsy, but it works and is invaluable when debugging web pages in Internet Explorer.