Categories: "Design Engineering"

Skin an Old Site with New Colors

Many times, the existing HTML site cannot be abandoned quickly, but updating the colors can help reinvigorate the pages.

If the code has alot of inline colors and styles, automating the recoloring makes it possible to preserve the existing investment, but still apply new colors.

Change image colors with Jasc Paint Shop Pro

To take the colors from one image and apply them to another, the following approach yields the best results:

  1. Open the two images
  2. Set the focus to the target color set and save the palette. Colors > Save Palette. You may have to convert the source image to a .gif for this to work.
  3. Set the focus on the image to be recolored and load the saved palette. Colors > Load Palette

Bear in mind that if you have alot of images, you may want to pursue batch processing, either through the GUI, macros, workspace, or command line options.

This approach will probably work for any powerful image editing software, however, its success is dependent on the images and colors involved. Not all images can easily be recolored.

Image color change notes / FAQ

Why doesn’t the page output the recolored image? Security, server load, tuning (fuzz factor may need adjusting), time constraints, architecture. It is unlikely the tool will ever execute the commands to recolor the images, however, it will probably be implemented with an SOA architecture, which would allow more efficient execution.

Can I have a copy of the code? Not yet. See reasons posted for robots.design code, in this blog.

My image didn’t get colored the way I would have liked. Development continues.

Why are the uploaded images resized to thumbnails? To limit the number of colors involved. This greatly speeds processing.

Some of the convert commands look redundant or even as if they will collide Development continues.

What is ImageMagick? http://imagemagick.org

Will batch processing be implemented in the future? Probably. See earlier note about SOA.

Apply the colors of one image to another

This is the beginning of code that will change the colors of one image to reflect the colors of another.

eZ publish sitestyle color mapping

robots.design was used on the eZ publish Website Interface to recolor the CSS.

Steps

  1. Copied a static version of the eZ Web Interface files. The demonstration does not require a full installation of eZ.
  2. Made a backup of the .css files
  3. Used the first set of sed commands, but didn’t like the results
  4. Used the second set of sed commands
  5. Tinted bg.jpg, the background image, with Jasc Paint Shop Pro
  6. Changed background color of body to white
  7. Changed background color of usermenu to light brown

Observations

  • The design relies heavily on images. This is a disadvantage when using robots.design, because it can be difficult to recolor the images. It is important to remember the objective of robots.design is to replace the mechanical task of updating the CSS, it can’t redesign the images site. The tool is intended to help a person reskin or redesign the site. This link: http://www.wirehopper.com/eZ/eZ_files/images/images.htm lists the images, with their dimensions, to help a designer select those that should be updated.
  • There are eight CSS files. In this case, robots.design allowed them to be modified very quickly and accurately. Adjustments were made manually (steps 5 and 6 above) using Firebug to identify the CSS file.
  • The impact of robots.design can be subtle. It does a good job recoloring the CSS, and it is easy to forget how long it can take to the same work manually, and without missing anything. For a large eZ publish site, with many content classes, this can be tremendous timesaver.

Conclusion

Prior to choosing robots.design as a design tool for eZ webin, it would be better to create a greyscale version of the eZ web interface images. This would allow the images to support a wide range of colors. Another option would be to develop a custom skin.

Opportunities

A very real possibility would be to integrate a tool similar to robots.design into eZ. It is a simple, mechanical substitution process, the image processing software required is usually installed on the server with eZ, and it is an extremely cost-effective way to update the CSS files. It would fit well under the design settings.