In This Issue...

• Introduction
• Testing Times
• Fireworks for Illustration
• Design Spotlight
• What's New on SitePoint!
• Hot Forum Topics
• New Blog Entries

Add beautiful images to your website or blog for just $1

Fotolia.com offers designers a library of over 1.3 million professional royalty free images, perfect for blogs, websites, and printed materials. Prices start at just $1. Fotolia offers:

• Over 1.3 million professional images
  
• High quality images starting at just $1 – No subscriptions
  
• Free membership
  
• 100% satisfaction guarantee

Sign up for a free account today and get 3 free credits from Fotolia.

Fotolia.com – Simply the best deal for stock photos, Ever!

Introduction

Welcome to Design View #27.

Adobe Fireworks is alive and well! -- although I'm still getting used to calling it that.

For almost a year, many have been predicting it's imminent demise, but to their credit Adobe have steadfastly insisted it is still very much a 'required player' in the CS3 team. As we received our first look at the Firework 9.0 beta 3, I can confirm it breathes and is developing hansomely.

I admit to being a long-time Fireworks fan and currently use it for the majority of my graphics work. The addition of a few extra features (a blend tool would be the real kicker) would only increase that percentage.

While I don't expect we'll see the new version until well into 2007, at this stage there seem to have already been some nice developments, including improved 'auto shapes', smart symbol scaling and a new templating feature.

I'm very much looking forward to watching things develop over the next few months.

A Regular Quiz for Web Developers?

Yes, that's right. The other big news this week is the launch of a new dimension in blogs - a regular web developer quiz hosted by Django co-author and all-around nice geek, Jacob Kaplan-Moss.

The quiz is designed to test you across the entire gamut of web development topics, including but not limited to HTML, CSS, AJAX, SQL, XML, JSON and HTTP.

Of course, if you have your 'pet subjects' like me, you can ignore the hard questions and showboat on the easy ones.

I've seen some of the the questions and this should be a lot of fun.

Alex Walker
Editor
SitePoint Design View

Testing Times

According to Microsoft 'We heard you! ... and you wanted it easier and more secure' -- and mighty Internet Explorer 7 is here to deliver just that.

Unfortunately if you're a developer who has been thinking 'Hey, it's a beta, I don't need to support it yet', it's the real deal now so your life just got harder.

As always, browser testing is the where the sweat is, so here are the current options available for your IE testing pleasure.

1) VNC (Virtual Network Computing)

In a perfect world, VNC (or an equivalent) is still the most complete solution to testing your pages across multiple IE browsers.

If you haven't worked with VNC before, you'll need to set aside a separate PC (or virtual PC - see #5 below) for each alternate version of IE you wish to run, and each one of these computers needs the VNC server running on it.

Running the VNC viewer on your workstation allows you to access these alternate computers (anf their browsers) via a window.

The key drawbacks to this methods are:

• the requirement of additional OS licenses, computing power and workspace;
• VNC isn't the most user-friendly application ever.

Regardless, if you have the resources available, VNC is without question your most reliable option.

2) Tredosoft's IE Hacks

Tredosoft have two options available for the IE tester. For those not quite ready to overwrite their old IE6 install, they offer 'Standalone IE7' - a small app that juggles the registery to allow both IE's to co-exist on the same system.

For those who have already installed IE7, they provide 'Multiple IE' -- using a simliar trick to let IE6 live with your new IE7 install. In fact, this app allows you to run similtaneous instances of IE3 IE4.01 IE5 IE5.5 and IE6.

Both applications are provided free.

I've successfully run 'Standalone 7' for months now while others in the office are running 'Mulitple IE' with no great drama.

However, it's probably fair to say that this method tinkers with the very mind and soul of IE and, as such, the rendered results may not be 100% trustworthy. It's also worth noting that the technique isn't supported or even encouraged by Microsoft, so if things go 'boom' you're probably on your own.

In summary, I've had good results with Tredosof, but if it makes you at all nervous, steer clear.

3) Browsershots.org

Browsershots is currently the most comprehensive free browser testing solution available. Simply submit your URL of your test page and wait as your pages are generated. Apart from providing access to 11 different browsers, the service also allows developers to test different screen resolutions, plugin availablity, JavaScript reliance and color depth.

The service only has three possible drawbacks:

• Testers can't test live functionality - for example, the operation of forms, etc.
• Test pages must be online to be accessed.
• There is a queue, and waiting times can vary greatly. However at least a small fee can guarantee you a prompt turnaround.

All up, a very good service.

4) IE Web Renderer

The new kid on the block -- IE Web Renderer -- works similarly to Browsershots, albeit with fewer bells and whistles. Although it only offers IE6 and IE7 renders at this point in time, it does have one compelling advantage -- page renders are returned almost immediately.

On the downside, at this point in time IE Web Render only shows you the 'viewport', rather than your full page, like Browsershot does.

Still, this does provide a free, painless and relatively fast testing option. It may well continue to improve as it evolves over time.

Certainly worth a bookmark at the very least.

5) VMware

Last, but certainly not least, if you haven't recently checked out what VMware has to offer it could be time well spent. (Mac users can check out Parallels)

For those who are new to the idea, VMware makes it possible to create a 'virtual PC' inside your PC. You can then install another licenced operating system and an alternate browser onto this 'virtual PC'. They will both happily run in a window on your PC at the click of a button.

Running a 'virtual PC' will demand resources. If you plan to run more than one concurrently (which the software certainly allows) - a memory and hard disk upgrade might be in order.

If you think that sounds great, it gets better - since EMC acquired VMware a few months ago, the entry level products VMware Player and VMware Server have become 100% free.

Happy testing.

101 Photoshop Tips, Tricks & Techniques for Web Designers

by Corrie Haffly

"From SitePoint comes a new full-color, question & answer book on Photoshop."

• Create great looking animated GIFs for the web
• Work with text: style it, create special effects, and wrap it around 3D objects
• Make graphics for CSS rollover buttons
• Design an entire web site and easily switch between different versions
  
• Work smarter: automate your workflow with batch commands and actions

Download free chapters in PDF format today!

Fireworks for Illustration

Although Fireworks 9.0 won't raise it's head until next year, I thought we'd look at the current version with fresh eyes.

Since it's launch in the late 90's, Fireworks has been marketed as a 'web graphics application' -- a description that congers up images of an app designed to churn out the shiny buttons, tabs, panels and nick-nacks of a typical web layout. There's no doubt it performs that task very well.

However, whether by luck or good management, I believe Fireworks has evolved to become an exceptionally good illustration tool. In fact, over the past 18 months, Fireworks has been the primary drawing tool that I've used to prepare SitePoint's feature article illustrations. I admit I do occasionally still need Illustrator, but this is now mostly limited to images that require Pantone colors or shape blends. With any luck, version 9 will even address the blend issue.

Now I'm sure plenty of Fireworks users still revert back to Illustrator when they need to illustrate, so today I thought I might share three of the Fireworks-specific methods that I find handy and fast.

1) Coloring with Gradient Fills

Although Adobe Illustrator comes with basic radial and linear gradients, one of Fireworks' real strengths is the twelve useful 'canned' gradients it comes with (see right).

Ok, no argument that Illustrator's color meshes that can do almost anything (as Bert Monroy proves) but most of the time I don't need that level of complexity. Speed is the key.

While I've found Firework's 'waves' and 'satin' gradients fantastic for imitating organic textures like fabrics and foliage, the humble 'Contour' gradient is probably my trustiest brush.

The great strength of 'contour' as a gradient is that it will always hug the contours of the shape it's contained within. You'll find that applying a simple contour gradient comprising of two or three shades of pink gives a soft, 3D rendered effect in seconds.

I've seen people use 'Inner Glows' for a vaguely similar effect in Illustrator, but glows tend to be too even -- there's no way to offset their position relative to the shape they occupy (see left). You could also use a shape blend but again, that's much more complex.

In short, 'Contour' lets you mimic a simple light source hitting your 3d shape. I find judicious use of this method alone can give you rich, very finished looking icons and illustrations with very little effort required.

2) Rendering Shapes with Bevels

Although the bevels in Fireworks were no doubt designed with buttons and tabs in mind, they are actually a very effective way of giving your illustrations a more rendered finish.

Here I've applied a subtle rounded bevel to the ears, mouth and hair simply to fill their shapes out a little. The default bevel tends to be very hard-edged and laser-cut, but more often than not, illustrations require a softer, rounded bevel.

Here's a second example of how a handful of lines can take on a rich quality with the addition of a few bevels and a shadow. There are three clicks between the first and second image here.

Do remember to always use the 'live', editable filters in the Properties panel (lower right), rather than the filters in the filters menu (top), which will permanently alter your original image.

3) Rendering Shapes using Gradient Transparency

This is actually a variation of the first method, but instead of varying the color of our gradient, we're varying it's transparency.

Sometimes, particularly when drawing things like clothing or curtains, we require more than one gradient -- typically one for the fabric pattern and another to render the 3D shape of the object.

1. In the example at the left, you can see I've created two versions of the same shape. My bottom shape contains a chequered pattern. My overlapping shape contains another contour gradient. However I've set the lighter areas of the gradient to become transparent. The edges stay opaque dark purple.

2. When I overlay them, the pattern shows through the clear areas, while the edges look darker and more rounded.

3. The addition of a few details completes the effect.

I've only used 2 layers in this example but at other times I've used 4 or more to build up the effect I need.

Make no mistake -- like any technique, you'll still need to spend time employing a lot of trial and error to work out the finer points, but once you begin to develop a feel for using Fireworks this way, you'll see how fast it is to work with.

In reality, I'd probably need a full book to do justice to this topic, but hopefully this little demonstration might let you see Fireworks in a slightly different light.

Of course, if you're already a hardcore Fireworks junkie and have your own tricks, I'd love to hear about them.

Design Spotlight

Although I'd usually use this spot to point out great work being produced by designers in SitePoint's Design Contests, (which can be found in the SitePoint Marketplace) due to a significant spruce up, this time I'm highlighting the actual contests themselves.

The new interface to the design contests allows you to browse thumbnails of all entries similtaneously and provides dedicated feedback areas for every design and every designer -- improvements already very well received by contest holders and designers.

Other new features include:

• Gain greater control over contest for contest holders- change the title, details or any other fields at any time
• Open or close your contest whenever you wish (maximum 30 days)
• Choose to award multiple prizes per contest if you wish
• Set an automatic deadline for your contest

Take the new design contest system for test-drive if you get the chance.

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!