In This Issue...

• Introduction
• Using Filters in Fireworks
• Styling Images with the DOM
• What's New on SitePoint!
• Hot Forum Topics
• New Blog Entries

Host Unlimited Domains For $9.95 Per Month At HostGator!

• Host Unlimited Domain Names With All Accounts
  
• 24/7 Phone, Live Chat, and Email Support
  
• Easy to use Control Panel
  
• Tons of Preinstalled Scripts
  
• Shared, Reseller, and Dedicated Hosting
  

Introduction

Welcome to Design View #12 - the first birthday edition. Who would have thought I had 12 months of useful content?

I got a lot of positive feedback on the last issue from Fireworks users keen for more quick tutorials. I get the impression that a lot of developers who purchased 'Macromedia Studio 8' to get Flash and Dreamweaver are starting to look seriously into Fireworks. I've certainly been a fan for a long time now. I'll explain a few tricks in this issue of the Design View.

Secondly, we'll look at some of the interesting visual effects you can get by sprinkling a little DOM scripting onto your images.

Also, if you haven't checked out Corrie Haffly's latest feature article, give it a look-in. It's a comprehensive Photoshop and CSS tour de force!

Alex Walker
Editor
SitePoint Design View

Using Filters in Fireworks

I think it was the 'Page Curl Filter' that did the damage. All through the late 90s, Kai Krause (KPT) was a guru and this 'plug-in' was a legitimate and valuable tool.

But somewhere amidst a forest of page curl, fire and ice effects sprouting up on every Geocities site, the whole idea of plug-in graphics filters seemed to fall badly out of fashion. Now that there's some water under the bridge, maybe it's time for another look at this school of effects.

One of the issues I have with Fireworks is that it can look quite sterile. The bevels, glows and shadows that it generates can look as though they were created in a deep-space vacuum. While this can be useful, to my mind it often brands a lot of artwork immediately as a 'Fireworks design'.

Although you can access Photoshop's native filters in Fireworks (provided you have them), I've enjoyed very limited success using these filters in Fireworks. However, third party filters are, fortunately, another matter, and some of them allow you to generate some nice organic touches in your Fireworks artwork.

1). The Plugin: Cybia offer a range of really handy, quality freeware filters that work perfectly in Fireworks (and Photoshop and PSP, for that matter). Download Mezzy, pop it into your plugins folder, make sure your preferences point to the plugins folder, and restart Fireworks. You should see 'Cybia' in the filter menu.

2) The Original: Here's an abstract of our current feature article graphic. At this stage it's created entirely from vectors and uses a variety of bevels, channel effects and gradients to give it its shape and color.

It's nice, but a little too clean for my liking.

3) The Treatment: Next, I've made a copy of the original graphic. Learning to layer multiple channel effects is the key to getting rich results with Fireworks.

I've applied the Cybia Mezzy filter using the stock-standard 'Whiten' setting.

4) Overlay the Original: Next I've placed the treated copy directly over the original.

You'll notice that applying any of these filters converts the object to a bitmap, so make sure you scale your work BEFORE applying the filter.

5) Switch the channel: To finish the job simply switch the channel of the copy to 'Multiply'.

Think of the 'Multiply' channel as analogous to overlaying two copies of the same slide on a light table -- the highlights say relatively similar, but the darker areas really fill in.

As you can see, the final effect gives the graphic a rough, richer, almost pencil-rendered effect, and certainly takes its 'vectorishness' away. I've used it in an illustration here, but it could be equally effective in a logo, header or even icons.

I hope this gives you some ideas. Layering simple filters like these can certainly give you some really original effects.

But perhaps you'll still want to steer clear of that page curl effect, though...

Simple, fast and affordable Email and Postcard Marketing

Easily create and send HTML Emails and customized, full-color direct mail Postcard campaigns in minutes, right from your browser. No technical expertise needed!

• Free list building tools
• Hundreds of Templates to choose from
• Real-time campaign reporting
• No contracts or monthly fees

Take a FREE test drive today.

Styling Images with the DOM

The DOM is your friend. It can correct browser bugs, add site functionality and help you achieve presentation effects that simply are not possible with pure CSS.

If you're a long-time DV reader, you might remember us fixing the HR tag (here's an example), and only this week I was admiring some of Chris Campbell's DOM-powered handiwork in the design blog. Let's stick with that theme.

This week, we were handed a small challenge in an otherwise elegant little site design -- the presentation called for the all the 'content images' to have rounded corners.

In the past, there wasn't much choice. You made a nice framing template in Photoshop or Fireworks, dropped your picture behind it and exported your new image.

The problem with this is that, although the image itself is considered 'content', the rounded corners are a 'design whim' that's only relevant to the current look and feel. If the client decided that the next redesign should be a little more slick and hard-edged, we would need to either re-author every image, or just accept it -- not good choices.

So, what can we do? Not even CSS3 or Mozilla specific styles can offer us any help. This sounds like a job for... DOM-Man!

First we need to look at how we might accomplish the effect, forgetting (for now) about good markup.

Since images are foreground elements, we're going to need to float our corner images on top. Before we start, we'll need to wrap a DIV around each image -- this will give us a 'frame' on which to hang our absolutely-positioned corner graphics.

As you can see in the above diagram, the wrapping DIV is called '.wrapper' and needs to positioned relatively, and floated either left or right, to force it to tightly wrap the image.

div.wrapper {
position:relative;
float:left;}

Our four inner DIVs are set to 'position:absolute', which automatically brings them to the front of our image regardless of where they appear in the code. Each will have the same width and height (7x7px in this case), but different positions and background graphics, something like this:

div.wrapper div{  
position:absolute;
width: 7px;
height: 7px;
}

div.wrapper div.tl{
background:transparent url(tl.gif) 
top left no-repeat;
left:0;
top:0
}

div.wrapper div.tr{
background:transparent url(tl.gif) 
top right no-repeat;
right:0;
top:0
}...

You can work out what DIV.BL and DIV.BR would be. Stitch it all together, and it works nicely.

Now, that's all very nice but obviously we can't go around delicately wrapping each new image by hand, like little 'virtual sushi rolls'. No, we can delegate this menial task to the browser. If the browser can't handle it, it has failed and its owner is condemned to seeing square images! Ha HA!

Like our HR function, our script is a 'son' of Simon Willison's earlier Rounded Corners with DOM article. I'm going to run through it quickly here, but the source in the example is amply commented.

I've decided in this case to target only the images within a specified DIV -- 'DIV#content' -- but it wouldn't be hard to alter the script to target all images, or only those images with a certain class.

To start, we'll declare a new function (roundedImages), grab all the elements inside #content, then filter out everything but the images. They're waiting for us to use in an array call 'imgs[]'.

function roundedImages() {
var content =
document.getElementById
('content');
var imgs =
content.getElementsByTagName
('img');

Next, we start a loop to process our list of images. We create a brand new DIV, attach the 'wrapper' class to it, select the first image, and replace it (for now) with our new DIV.

 for (var i = 0; i < imgs.length; i++) {
 var wrapper =
document.createElement('div');
 wrapper.className = 'wrapper'; 

var original = imgs[i];
 original.parentNode.replaceChild
(wrapper, original); 

Now we'll need to fabricate our four corner DIVs and attach the appropriate classes to each. The code is fairly clean.

 var tl = document.createElement('div');
 tl.className =
'tl';
 var br = document.createElement('div');
 br.className =
'br';
 var tr = document.createElement('div');
 tr.className =
'tr';
 var bl = document.createElement('div');
 bl.className =
'bl';

Ok, we have our corner DIVs but they aren't actually in the document. We can use 'appendChild' to glue them into our wrapper DIV. To complete the loop, we glue our original image back into the wrapper; then we're ready to grab the next image.

 wrapper.appendChild(tl); 
 wrapper.appendChild(tr); 

wrapper.appendChild(bl); 
 wrapper.appendChild(br); 

wrapper.appendChild(original);
 }
}

Lastly, we simply have to run the function as the page loads.

window.onload = roundedImages;

And that's it. Pop it into your <head> with your CSS, and you're rounding with the best of 'em!

This is a first generation experiment and has some limitations. DIV.wrapper needs to be floated, so your images will appear to be floated too.

There also seems to be a bug in IE6 (No! Never!) that causes a 1px mis-alignment on the right and bottom sides of images with odd widths and heights. Totally bizarre. It appears to be a rounding error (no pun intended) and, at the moment, the best solution I have is to use even-numbered image dimensions. If you have better IE voodoo, I'd certainly love to hear it.

Otherwise, it seems to be quite solid. Certainly it's fast, degrades elegantly and there are endless potential variations on this simplest of themes.

Hope you have fun playing around with it.

Read the blog entry:

Web Design Blog: Pixel Perfect by Alex Walker Usability improvements using the DOM (5 comments)

That's all for this issue -- thanks for reading! I'll see you in a few weeks.

Alex Walker
design@sitepoint.com
Editor, The SitePoint Design View

Help Your Friends Out

People you care about can benefit from the wealth of information on new and maturing technologies available on the Internet. Help them learn how to do it by forwarding them this issue of the SitePoint Design View!