Corel Painter 11’s learning curve may be a bit steep for new users but if you’re familiar with Corel Painter X (when the RealBristle tool was first released) you’ll have no problem adjusting to this version.

Functionality and User Friendliness:

Corel Painter 11 is easy to master if you’ve got at least a working knowledge of the previous versions but if you don’t, its worth learning. It’s available for both Mac (Intel-based only) and Windows and supports Vista. With the beta release of Windows 7 already out, Corel Painter 11 users need not worry as Corel has stated that they’ll offer any service pack upgrades, if necessary, from Vista to 7 free of charge.

Awesome Features:

In this version, Corel improved the color-recognition for files imported from Adobe – very important if you’re a photographer adding this program to your editing toolbox. Also, you can save color profiles for pretty much any kind of image format and Painter will remember the profile when you open that sort of file from then on.

The RealBristle tool, described in detail below is fantastic but Corel Painter 11 also lets you customize the digital canvases you’re working on with textures and grains unavailable anywhere else.

Features to Write Home About…

The RealBristle tool is definitely the standout feature of Corel Painter 11. Aside from allowing you to create an infinite possibility of tools that you probably couldn’t even get at the best brick-and-mortar art store, the application maps out the individual brush strokes by recognizing the pressure and speed applied on the stylus. So faster strokes mean thinner lines while slower, harder strokes mean broader strokes with more individual bristle marks. That, in addition to ‘tablet tilt’ – allowing you to control the width of brush strokes with the tilt of your pen – means you can replicate the feeling of brush to canvas without the mess.

The Mixing Feature on Corel Painter 11 (a virtual palette knife!)

Another feature I particularly liked was the “mixing” feature – a digital palette knife that allows you to mix colors on screen. It’s yet another tool on Painter 11 that bridges the gap between digital drawing and real-life drawing.

The Bottom Line:

If your livelihood comes from any kind of image creation – you’re a fine artist, illustrator, graphic artist, even a photographer – then you need this application. If you’re someone who enjoys playing around with digital drawing and can afford to $400 price tag, then by all means, go for it, but there are other more affordable alternatives. They’re just not as “non-digital” as Corel Painter.

Final Mentions:

It’s kind of silly to use Corel Painter without a tablet because you won’t get the full benefit of the RealBristle tool.

“This one goes to 11!”

(Sidenote: if you are looking for freeware photo editing software and you run Mac OS X or Linux, skip this article and check out Gimp.)

First and foremost, PhotoScape is a free and feature-rich alternative to paid photo-editing programs and it’s been downloaded over 6 million times (according to CNET) with an average review of 4 stars and it is highly recommended for beginners.  Those who are tried-and-true Photoshop fans may not love the interface but it’s worth a shot — it is free but it is not a heavy-duty editing app.

Functionality and User Friendliness:

Photoscape's Circular Navigator

One of the most noticeable things about PhotoScape is just how different its layout is from Photoshop.  Rather than the rectangular toolbars that you can open and close on command, you’ll find a circular navigator and tabs at the top of the screen.  Clicking through the tabs presents most, if not all, of the tools you’ll need. As for tools, you have plenty to choose from, including:

•    RAW Image support.
•    Standard features (red eye removal, contrast/lightness editing, etc).
•    Batch editing/batch printing.
•    Screen capture (a handy enough add-on).

What PhotoScape lacks in functionality, it makes up for in ease-of-use.  You won’t find layer support, nor will you be able to do any of the fancy things you can do with other programs but you can turn your not so-so snaps into frame-worthy shots with its retouching tools.  Some users have mentioned its lack of a Leveling/Straightening tool.  And, for a graphic editing software, it has clunky looking “old-school” icons circa Windows 1998.

Creating an animated GIF on Photoscape.

PhotoScape also supports animated GIF files (anigifs), which is pretty surprising for freeware.  It takes a little getting used to but PhotoScape has a pretty respectable “Help” menu that will allow you to learn how to use most of its tools adequately.

PhotoScape 3.3 is only available for Windows.  For comparable Mac-compatible programs, check out GIMP  (Here’s a review on it).

Bottom Line:

Probably not the best choice for very precise editing but great for quick fixes.  It’s easy to learn (intuitive, almost) and free.  Definitely worth a download to supplement your photo-editing tools.  Also look at GIMP and PhotoFiltre.

Final Mentions:

There’s not too much to be said about PhotoScape other than the fact that it is free and easy to use.  It lacks any “awesome features” — at least that I could see but if you’ve found something worthwhile, please write to me (or comment) and I’ll be sure to mention it!

Download at:  www.photoscape.org

Corel Paint Shop Pro (Windows Only)  

Corel’s Paint Shop Pro can (and has been) referred to as a poor man’s version of Photoshop (the real deal, not Elements) and with this new version, it may be worth giving it a shot.  Paint Shop Pro X2 includes more features (layers, for one) but is still maintains its ease of use.  A great program for someone just starting with digital photography but probably not for the hard-core Adobe fan.

Functionality and User Friendliness:

Paint Shop’s “all-in-one” deal definitely stands out as a “pro” — it combines full-fledged photo editing, painting, drawing, and image management into one convenient software package.  For those who are looking for basic retouching (think similar to iPhoto’s capabilities plus some), Paint Shop Pro is a great choice as it offers a good amount of “makeover tools” like:
•    red eye retouching
•    thinify (makes people look thinner, just as the name implies — some may find this a bit gimmicky but it’s a lot easier than trying to do it with Photoshop)
•    eye drop (think of it as virtual Visine — whitens the whites of the eyes)
•    blemish remover (a basic retouching tool)
•    suntan tool

For more heavy duty editing, Paint Shop Pro X2 also (finally!) supports layers, RAW editing (but only from a handful of cameras, so be sure to look yours up before buying), supports most Photoshop plugins, and lets you save your image in over 50 different formats.  Customizable toolbars and personalized workspaces that you can save, as well as effects and presets make it easier to jump back into your work.  You can also share those settings with others.  Paint Shop Pro also includes Corel Media One Plus, making it easy to showcase and share your photos.

Paint Shop Pro is only available for Windows XP and Vista.  For comparable Mac-compatible programs, check out Adobe Photoshop Elements as they both retail for about $99 USD.

Awesome Features:

▪    ExpressLab (see below for details)
▪    Integrated photo organizer.
▪    Web Tools (image slicing, mapping…)
▪    Fun special effects tools (Time Machine is a fun one: you can edit your photos to look like they were taken in the 1800’s or 1960, and anywhere in between.)
▪    One Step Photo Fix:  this feature auto adjusts brightness, colour, contrast, and sharpness in one click.  It doesn’t always do a great job but you can manually adjust things too.
▪    Easy sharing: one-click e-mailing and uploading (to the online photo-sharing site of your choice).

Features to Write Home About…

Express Lab:  I briefly mentioned this in the above section but I’ll mention it again because it was my favourite part of the program.  It’s basically a streamlined interface that lets you work with tools to quickly edit your photos.  Bonus: it’s really easy to use.

Context-Sensitive Help: in short, Corel’s learning center knows which tool you’re using and displays relevant help information.  It’s also got extensive online resources, forums, and phone support (for a fee).  The program is relatively easy to learn and with a little time and effort, not that hard to master.

Bottom Line:

If you’re a fan of Photoshop Elements but are looking for something new and with more heavy duty editing capabilities, or you’re familiar with Corel’s interface from other programs — this is a great choice for you.  Also good for editing newbies who need a “do-it-all” app for a small price.

Final Mentions:

Some tout Paint Shop Pro as a “graphic design” tool and although it has a lot of drawing and paint functions, I’d still consider it more of a graphic editing and photo editing software — for graphic design, I’m a big fan of Illustrator.

This tutorial requires intermediate knowledge of HTML/XHTML. It only requires basic knowledge of CSS. All of the properties I am using are being added to an embedded page style sheet, which is between the <head> tags in the document. You must use this to define header CSS: <style type=”text/css”> and </style>. Alternately, you can apply each declaration directly by using the style HTML attribute.

Converting an HTML table layout into a CSS tableless layout isn’t as hard as you might think. Setting aside positioning for a moment, each table cell will become a <div> tag, which is more commonly referred to as a layer.

Below is an image of a common table layout. This layout is very common to CSS as well.

<html><head><title>My Website</title></head>

<body>

<table border=”1″ width=”300″>

<tr><td colspan=”2″ height=”40″>header</td></tr>

<tr><td width=”80″>navigation</td> <td>content</td></tr>

<tr><td colspan=”2″ height=”40″>footer</td></tr>

</table>

</body>

</html>

Changing each cell into a layer is as simple as changing each “td” to “div.” The table and tr tags should be deleted along with any layout attributes (like align or width) from your former table cells. In order to style one layer in particular, designers typically give it an id attribute. In the CSS, ids begin with #. For the web page to meet W3C XHTML specifications, a particular id can only be used once per page. If you name something id=”cat” you aren’t allowed to use cat again.

The class attribute, on the other hand, can be used as many times as you want. Its purpose is to allow multiple elements to access a single style. In the CSS, classes begin with a period (.). I typically name my ids according to what layer they’re attached to, such as “navigation” or “header.” I name classes according to what’s being styled, like class=”emphasis” (for important sections of content) or class=”list” (for special list formatting).

After making modifications to the code, you end up with something like this:

<html><head><title>My Website</title></head>

<body>

<div id=”header”>header</div>

<div id=”navigation”>navigation</div>

<div id=”content”>content</div>

<div id=”footer”>footer</div>

</body>

</html>

Though it’s not necessary with a simple layout, you can also place a layer around all the others. It’s a little like a table tag to contain the layout. Usually, it’s just called “container.” I use it routinely because you never know when it will save you time in the end.

Now, for positioning…

This is the part that took me weeks to fully master. By default the layers are “stacked” on top of each other. This is called static positioning. They naturally span the entire width of the page but are, by default, only as high as the content inside. If there is no content then the height is zero. To keep track of the size and position of your layers, you may find it helpful to place a border around them by using border-width:1px; border-style:solid; border-color:red; You can also use the shortcut border property border (border:1px solid red;).

I consider the float property a member of the positioning category but it technically isn’t. Floats are used to shift layers to the left or the right of content inside of neighboring layers that are below it. The floated layer will ignore all non-floated layers so there will be overlap by default. Things like text or images will flow around a floated layer. Each layer is outlined in red in the image below. You can see that the content layer and the footer layer are partially overlapped by the navigation. It has the declaration float:left;.

<style type=”text/css”>

#header {height:40px;}

#navigation {width:80px; height:100px; float:left;}

#content {height:80px;}

#footer {height:40px;}

</style>

The property used to create a float is just “float.” Its possible values are left, right, none, or inherit (from a surrounding layer). All layers have a float value of none by default.

To force a layer to move out of the way, you use the clear property. Its values are left, right, both, none, or inherit. Like the float property, the default value is none. If you style the footer layer with clear:left; it will drop below the navigation layer. Clear:right; clears floats on the right side of a layer while clear:both; clears floats on both sides of a layer. Clear:both; is needed when you have two layers near each other that are floating in two different directions.

<style type=”text/css”>

#header {height:40px;}

#navigation {width:80px; height:100px; float:left;}

#content {height:80px;}

#footer {height:40px; clear:left;}

</style>

To create space between layers you use margin properties. There are four different settings: margin-left, margin-right, margin-top, margin-bottom. Alternately, you can use the single margin property that sets all four sides at once in a clockwise direction (top, right, bottom, left). The margin is always transparent. Valid values are any number positive or negative but you must remember to specify a measurement type. Pixels, or px, are most commonly used. Unfortunately, setting the margin doesn’t work on layers using clear:left;, clear:right;, or clear:both; on the side that’s touching the floated layer. This means it won’t work on the top edge of the footer. If you haven’t used a background color or a border on the footer, you can use padding on the top instead. You can see that the word “footer” has moved down a little. That’s the result of padding. If you have a background color or border, you will have to place a layer around the footer and add padding to it.

<style type=”text/css”>

#header {height:40px; margin-bottom:5px;}

#navigation {width:80px; height:100px; float:left;}

#content {height:80px; margin-left:5px;}

#footer {height:40px; margin-top:5px; padding-top:5px; clear:left;}

</style>

It doesn’t work the way you think it should on the content layer because of the overlap. It’s there, but on the far left. The right margin on the navigation layer isn’t visible.

There are two ways to get rid of the overlap while keeping the content on the right side of the navigation. One way is to also float the content layer to the left. The layers will then stop ignoring each other. Another way is to use a left margin on the content layer that is equal to the width of the navigation layer. This moves it out of the way. In order to have visible space between the two, width of the margin must be greater than the width of the navigation. If the navigation’s width is 80px then the left margin must be 81px or greater.

<style type=”text/css”>

#header {height:40px; margin-bottom:5px;}

#navigation {width:80px; height:100px; float:left;}

#content {height:80px; margin-left:85px;}

#footer {height:40px; padding-top:5px; clear:left;}

</style>

This is where a container layer would come in handy. The margin caused the content layer to expand beyond the width of the header and the footer, which is not something most people want. This happened because I have a specific width on the header, footer, and navigation. If I had a container around the entire thing then I could set the width on it instead. That would make it easier to control the layout. The red border around everything in the image below is the container.

<body>

<div id=”container”>

<div id=”header”>header</div>

<div id=”navigation”>navigation</div>

<div id=”content”>content</div>

<div id=”footer”>footer</div>

</div>

</body>

<style type=”text/css”>

#container {width:300px;}

#header {height:40px; margin-bottom:5px;}

#navigation {width:80px; height:100px; float:left;}

#content {height:80px; margin-left:85px;}

#footer {height:40px; padding-top:5px; clear:left;}

</style>

There are other ways to position layers but they’re not directly relevant to this topic so I’m not going to talk about them in much detail.

• • position:absolute; – All other layers ignore it and it ignores them. The positioning is set by using the top, bottom, left, and right properties. Top and bottom cancel each other out as does left and right.
• • position:fixed; – Like absolute positioning but it doesn’t scroll with the page.
• • position:relative; – These layers reserve space even when they don’t need it. It uses the same positioning properties as the other two. Relatively positioned layers can also be used to contain absolutely positioned layers.

What are the ‘Universal Principles’ … and how do they apply to the business of web design?

These are some of the principles that I have found to be true in all areas of life, business, web design, programming, eating, fighting .. whatever. They are:

• Simplicity
• Adaptability
• Persistence
• Balance
• Timing
• Luck

I’m not sure how much detail I need to give with regards to these principles .. so, I will give you a few examples and leave it to you guys to ask questions – if you are interested in more.

So let’s start with the principle of adaptability.

In web design, that means being flexible in terms of your skill set. Being able to learn new technology as it comes out to take advantage of it, while the competition is asleep. Adaptability also means being able to find different ways to approach a job so as to find the best way to accomplish it.

Simplicity means keeping your site design AND structure simple. Keeping the contracts between you and your clients simple and easy to understand.

… Unless you want to hide something from them!

Balance means keeping the site simple, but not too simple. Keeping the contract short, but not lacking in the details you need to have in there, to protect yourself and to educate your client about what he/she will be getting for their money.

Conclusion

In keeping with the principles of simplicity and another one of my principles not mentioned before: laziness, I will stop here with the examples. If you guys find this interesting let me know.

Stefan Mischook

www.killersites.com
www.killerphp.com

Using Web 2.0 for the Right Reasons

The term, Web 2.0, has become so common that it’s now almost one of those labels that everyone knows, but nobody knows the definition of. In fact, clients often ask me—with complete seriousness—if I can provide “Web 2.0 ” for their site. My reply is typically along the lines of “which function were you thinking of?” 

Their blank faces confirm my suspicion that they have no idea what Web 2.0 is, why they would want it, and what it may provide for them in terms of functionality their site needs. Sadly, many of my students have the same problem.

Many professional designers, it seems, suffer from the same drawback, evidenced by sites so jam-packed with useless widgets they make me long for the sites of the 90’s, with their far-simpler flashing banners and animated gifs.

What is Web 2.0?

In a nutshell, Web 2.0 is an approach to the internet characterized by the following mechanisms:

• facilitating communication, 
• collaboration,
• interoperability/interaction,
• information sharing. 

In other words, instead of a static HTML page with functionality that stops after the page loads, the functionality on a page with Web 2.0 continues. It essentially allows users to interact with the site’s page as they would a software program. Users can communicate to each other (and you), create content independently or collaboratively, and interact through mechanisms allowing the user to determine the look, feel or content of a page.

Functionality Before Style

Web 2.0 is not about style. This is one of the areas where many designers, and perhaps clients, get confused. Though trends in design have certainly changed in the past ten years (not unlike any other school of design: from cars to houses), Web 2.0 is about functionality, not looks.

I know many will agree with me. After all, the prolific use of rounded corners, narrow content areas that didn’t span the screen, transparency, etc. came into use about the same time as Web 2.0 functions did. Thus, it’s easy to relate the two. However, separating one from the other liberates the designer to focus on the two very different areas of a site: design and function.   

Common Uses of Web 2.0

Examples of Web 2.0 functionality abound. Some examples:

• Communication methods such as those in private messaging systems and “wall” systems (Facebook). 
• Collaboration mechanisms as seen in tools such as wikis and Google Docs. 
• Interoperability/interaction — functions that allow the user to change the site.
• Information sharing, aka user-generated content.

The two most overused categories, however, are interoperability/interaction, and information sharing and we’ll examine those in more detail.

Interoperability/interaction is easy to identify. These are any functions that put the power to change the website in the hands of the user. It is, perhaps, as easy as a slide show that the user can scroll through, a lightbox image gallery, or multimedia presentations that the user can start, stop or somehow modify. More complicated examples are evident in Yahoo’s MyYahoo! and iGoogle. Both allow users to include and exclude feeds, move modules around, change skins, etc. 

Information sharing, or user-generated content, is evident in any mechanism that allows users to upload information to the site. Commenting, photo galleries, real-time blogging, and any other way to facilitate allowing the user to create what’s on the site/page are included here.

These last two categories, perhaps because they’re either the easiest to insert on a site or because they have the flashiest presentations (the wow factor) are used in over-abundance all the time. 

An Incorrect Use of Web 2.0

I recently, for example browsed a site for a local Chamber of Commerce. The site was brand new and made by a large, local design company. While browsing the site I came across a gallery of photographs of the Chamber’s directors. No name was beneath the photo, it was just the photo. However, upon selecting the photo, a beautiful lightbox appeared in the middle of the screen. The lightbox dimmed the rest of the page and below the photo in the lightbox was the director’s name. However, the photo in the lightbox was the same size as the photo on the page.

So why use it? Why was it there? It provided little more information than the page itself did, so why did the designer use it and the client buy it?

It’s because the client wanted Web 2.0 and had no idea what Web 2.0 was, and the designer was either all too eager to charge extra for something flashy, or had no idea himself how to really use these functions.

And this last line is perhaps the point. While it’s great to understand, from a technical point of view, how to use these functions or how to make them, it is better to understand how they should be used on the client’s site. Or, even more to the point, it’s better to understand why to use them.

Think about the lightbox, for example. What does it do? 

• It provides a way to focus the user’s attention on a single image and send the rest of the page to a layer of inconsequentiality. 
• It provides more detail for an image. 
• It allows you to keep your page of information from being cluttered by large images and instead include only thumbnails. 
• It is a way to provide more written information about an image. If we wanted to display a product in a catalog, for example, a lightbox would be a great tool to use. We could have on the page small thumbnails with simple labels. If a user selects a thumbnail the lightbox appears, displaying the product from various angles in a much larger size and better resolution, and accompanied by a full description.

It was not designed to be used for one line of text below a photo the same size as the original.  

Ultimately though, Web 2.0 is about the user.  All of the utilities I point out put power into the user’s hands. For example, users needed a way to share galleries of photos with each other, so the solution was flickr, an online mechanism to do so. Users also wanted to share videos, the solution was YouTube. Likewise, users wanted to keep up with friends and family, so Facebook was created. In every instance the solution—a Web 2.0 solution—was created because the user wanted to do something.

So to ensure that they’re using it right, designers should start with the user’s wants and needs. Will the user want to respond to content? Then include a commenting feature. Will users want to communicate with each other? Then include a forum. Using Web 2.0 correctly becomes far simpler once this approach is taken.

There are, of course disadvantages. Knowing only HTML will no longer be enough. Designers will have to know HTML, CSS, PHP, and Javascript (especially their important libraries, like mootools and jquery). The payoff, though, is huge in terms of revenue and user satisfaction. Explain this to the client. Make them aware that something which is flashy but useless might actually drive users away instead of attracting them.

The web is changing at a breakneck pace. Already there are discussions about the next generation of web utilities. Some are even beginning to call them Web 3.0. As designers, we really need to be aware of the foundations and work our way up. Before too long, clients will be asking us to use this Web 3.0 functionality (whatever that may be). Before we do, however, we need to make sure both the client and ourselves understand the Web 2.0 functionality first.

So as a designer, how should you choose to use these tools? How do you respond to clients who ask about them? Do you go after the easy money and put widgets and gadgets in every corner you can possibly put them? Or do you step back and ask if your client really needs an RSS feed on the welcome page that never changes? As always, think about your design completely before you charge into it. Explain and educate your client about what you think he needs and why. If you can provide real rationale for the Web 2.0 tools you think he needs, you can probably get a better price for those tools. And that is, after all, one of the points, right?

iPhoto ‘09 Review

Part of Apple’s “iLife” package, and bundled with every Mac, iPhoto is more photo-management than photo editing.  iPhoto’s been around for some years now, but it’s not usually regarded as a powerful editing tool although Apple has improved its editing capabilities in this release.  Definitely a winner for those of you who are looking to organize tons of photos (with most formats supported, including RAW) and create albums, it’s not for photo pros that need hardcore editing.  The editing tools included (red eye remover, and so on) aren’t that good either, so you may need another editing program  (think Adobe Elements or similar) if you want to make your pictures as nice as can be!

Functionality and User Friendliness:

Probably one of the easiest applications to use, iPhoto is foolproof for those computer savvy and easy to le

arn for those who aren’t (yet).  If you’re already a user of Apple’s other iLife products, the interface will make you feel right at home.  It’ll automatically launch when your camera’s plugged in and in “Playback” mode and give you the choice to import all or some photos.  You can even name the album before the photos are imported.  Photos are organized in “Events”, and the events are named for their date until you rename them.  Events can be merged, moved around, and deleted (but bear in mind that deleting an event will delete the photos from your library, unlike deleting an “Album”, which will still leave your photos in the library).  You can add keywords too.

As for editing, iPhoto has some basic functions — red eye, the awful “Enhance” button (it usually makes the photo worse!), adjustment sliders for contrast, exposure, brightness, and so on and the ability to changeyour photo into black and white, sepia tone, amongst others.  

“Ok” Editing Features

• Changing photos from original to black and white, sepia tone, color enhanced, and so on.
• Better retouching tool than older versions (and for those who don’t want to move on to more powerful editing programs).  This one can now find edges.
• Adjustment sliders for saturation, brightness, contrast, exposure, amongst others.
• Skip the red eye tool.  Even manually (where you can adjust the size of the brush, it just seems to place random black blobs on people’s eyeballs!)

Awesome Features:

As mentioned above, iPhoto isn’t exactly known for it’s editing features but it does have some goodies.  My favorite editing tool is iPhoto’s “Retouch” tool, a simple version of Photoshop’s “Clone Stamp” tool — great for masking spots on faces with just the click of your mouse.  Also, iPhoto’s linked to other applications on your Mac, making e-mailing pictures, ordering prints (which come from Kodak’s Ofoto service), and ordering photo books.  As for compatibility, iPhoto can handle most formats and will even import any movies you’ve recorded on your digicam into the library, though they’ll open up in QuickTime when you try to play them.  

Other notable features include iPhoto’s sharing abilities with Flickr and Facebook.

Features to Write Home About:

So I wouldn’t necessarily write home about this feature, but it’s the one that’s being touted as the latest and greatest way to organize your photos using iPhoto.  The new “Places and Faces” feature in iPhoto ‘09 allows you to “tag” your photos according to a person’s face or a location.  Basically, you “train” iPhoto by identifying faces in your photos (let’s say you have lots of photos with certain people in them).  You’ve got to work with iPhoto a bit, approving or rejecting suggestions it makes.  But, after you ID and name some faces it’ll go through your library (at a rate of about 1 photoper second on the newer Macs) and identify the people in the photos.  You’ll have to help iPhoto out here by approving its suggested photos that are right, or rejecting the wrong ones.  This helps make iPhoto better at recognizing the people’s faces in the future.

The Places function is just as cool and way easier to use.  You’re basically tagging your photos and by working with Google Maps and Google’s “Local Search”, you’ve now interfaced your photos with a pretty dynamic map.  You can even view your map, full of little pins of all the places you’ve been (and clicking on the pin brings up photos from that location).  

The Bottom Line:

It’s free if you have a Mac so why not use it?  And if you don’t have a Mac you can’t use it anyways.  Great for managing and organizing your photos but you’ll likely need a better editor even for simple things (I like to banish red eye and whiten people’s teeth in my photos…iPhoto’s not too good with that!)

Final Mentions:

The iLife ‘09 Suite (which iPhoto is bundled with) is only $79 and it is a pretty cool package for that price — iPhoto, iMovie, Garageband, iDVD, iWeb, and iTunes (but that’s free anyways), are all included.

Other Resources:

iPhoto Faces and Places Info

iPhoto Video Tutorial List

There’s a pretty tired cliché used all the time that goes something like this:

“The journey of a thousand miles begins with a single step.”

Like all clichés, it’s true while at the same time a bit trivial. In the case of building websites, this particular cliché can help teach one of the most important lessons to learn. Let me try to put it in terms of what we do: it’s not how you end a project that gives you success as a web designer/developer; it’s how you begin it.

My students often have trouble with this uncomfortable truth when designing and creating their web sites. They usually want to jump right into a project and start designing it before they do anything else. But before I let them begin to even sketch out their ideas for a single page, I make them answer two key questions about their projects:

1. Who is my audience, and …

2. What purposes do I need to consider?

The answers to these questions, and not the design considerations, are what you need to focus on when you start a project. And, without carefully considering each question individually (and then together) I assure you that even the most dynamic of websites will ultimately fail.

For this article I’ll discuss each aspect in turn, and then combine the two to show you how attending more to these areas will give you a much easier design job in the end. I’ll also spend a little time talking about the economic aspects of this strategy, and how you can use it to increase revenue and lower your chances of spending hours designing a site the customer doesn’t even like.

Question 1: Who is going to be using this site, and what are they like?

The first and most basic consideration to make is about the audience or users of the site (I’ll just use ‘audience’ from now on as a general term). And I don’t mean your audience, but the audience of the website you’re about to make. You must both identify that potential audience and then identify the characteristics it possesses, affecting how they engage your site.

Start with your client: ask him or her to tell you who the customers are. There’s a good chance they’ll already have a fairly good understanding of the customer’s demographics—from their ages to their ethnicities. You can also simply think about the product, service, or organization that the site is being designed for. Do some simple Internet research to help you figure out as much as you can. Record all you can about the potential audience. 

Factours to think about include:

• age.
• education level.
• technological literacy.
• familiarity with the organization or product.

Next try to understand how these characteristics will affect the design of the site. For example, the age of the audience could determine what images you include or what references you make to popular culture. To highlight this point, look at www.Barbie.com, a site designed entirely for girls between the ages of 8-13. The site design would be completely inappropriate for an audience of older girls, an audience of boys, or an audience from a culture or country that knows nothing about Barbie (though, finding a locale knowing nothing about Barbie is sadly becoming difficult).

The next characteristic I list—education level—should seem pretty straightforward, but “technological literacy” may not. What I mean by this is the extent to which your audience is comfortable with and experienced at viewing websites and surfing the Internet. If your audience is “highly technologically literate,” you can be comfortable in assuming they’re familiar with many of the features of Web 2.0, like user forums or article comments and feedback (user-generated content). However, and I run into this all the time, there are those users who have no idea what a forum may be for or how to use one—and they’re said to have low technological literacy.

For each of your user’s characteristics there will be an associated effect on the design of your website. I always urge my students to first brainstorm about the characteristics of their audience, and then next to each characteristic, brainstorm the associated affect and how they can design for that affect.

In the case of technological literacy, the audiences’ level could determine what type of features your site includes. Does it have a high degree of interaction, expected by young people or those who spend much of their time online, or should the pages be static, and “safe” to reassure those unfamiliar or uncomfortable online? For each characteristic there will be a number of associated compensations you must make in the design, and knowing this at the beginning is a whole lot better than finding out about it after the site’s been deployed.

Question 2: What is the purpose of the site, and what are the users’ purposes for going to the site?

It doesn’t make a lot of sense, but people will often design a site that doesn’t necessarily reflect the site’s true purpose. An e-commerce site, for example, should have as its focus not only the product, but also the e-commerce mechanisms needed to carry out a transaction. Even if a site is displaying the store’s products in stunning galleries with comprehensive descriptions, detailed close-ups, and multiple views, all of these features will be for naught if a customer can’t figure out how to check out and pay for the products. Even worse are the e-commerce sites that simply “hide” the products from the customer to begin with.

The fault in such cases usually lies with the designer who spent too much time being creative and not enough time planning. Understanding the site’s true purpose and planning a design around that purpose will resolve potential conflicts between creativity and function.

On the flip side of this discussion are the users themselves: what do they want to do on the site? Do they want to learn about something, like a product or service, or do they want to purchase something? While seemingly related, these are two entirely different purposes. If users are browsing your site to gain knowledge about something, they’ll be turned off by pushy e-sales tactics, like incessant pop-ups and links leading them to purchase mechanisms. Instead, in this particular case, a more passive approach is called for.

Take for example a car company. While the company’s website has the primary purpose of selling their cars, the company understands customers go to the website to learn about the products, not buy the products. So instead of treating the site strictly as an e-commerce site, which overtly “push” their products, the car companies instead use their sites to disseminate information about their vehicles, and they do it in a way that makes customers more willing to buy it at the dealerships. To see what I’m talking about, look at Ford.com and CarMax.com. While Ford wants you to learn about their cars, CarMax just want you to buy them. Look at how different the approaches are, and you’ll instantly recognize the different purpose each site has, and the corresponding purpose the audiences for each site have.

To find out these purposes you again need to do research. Talk to your client first. Make sure that, not only do you understand what the client’s purpose for the site it, but that the client himself understands the purpose (they commonly won’t). If you can, the best way to understand the audience is to talk to potential members of that audience. Conduct surveys if possible to really make sure that you are designing this site to fulfill the goals—that is to meet the purposes—of both players: the client and the user.

Knowledge is Power

Sorry to use yet another tired cliché, but, tired as it is, it rings true. From a design perspective, answering the above questions will naturally lead to an easier job of creating the website. From the answers about the customer you will have a better sense of what images, colors and fonts to use. You will also understand better how you can organize the site to provide the user with an experience they will already be familiar with (necessary for increased usability). Your tone will be appropriate as will the language you use (derived from understanding cultural characteristics and education level). In essence, the design will have been narrowed down immensely.

At the same time, by understanding your audience, you will better understand why they may go to the site in the first place. From their, you match that against the purpose of the site itself. Although I’m sure Ford would love to sell cars online, as CarMax is capable of doing (though I’m sure rarely does), they adjust their own goals and make them as much as possible coalesce with the goals of the audience.

Ultimately, following the guidelines here will save or make you more money, and will definitely pay off in time dividends (and will probably cause you less frustration). Organization is always a key to success, but for some reason I’ve seen many a web designer throw organization out the window in favor of the instant gratification gained by the creative design process. And sometimes it works out, and the designer delivers a product that the client is happy with, that meets the audience’s purpose and compensates for their characteristics.

However, this rarely happens. Instead, the scenario usually unfolds like this: after spending a short amount of time with the client, the designer thinks she understands what the client wants, gives little if any thought to the audience or user, and creates a site based on a cool design that meets the designers presumed purpose. This, of course, fails miserably, is nothing like the site the client actually pictured or wanted, and is not useful at all to the audience.

The designer then has to sacrifice more time starting from scratch, learning the things she should have learned to begin with, and ends up with a site the client is happy with. By this time, however, the billable hour average has dropped to somewhere around $10.00 per hour because of all of the extra time the project has cost.

In some instances, you can also charge for the time you spend in these discussions. I bid recently against another company to build an enterprise-level content management system (and won). During the process I inadvertently ended up with a copy of the competitor’s cost sheet (a generic one, not for this specific project, so nothing unethical about it). The first phase of their design and development process is called the “Discovery” phase. 

Let me quote what happens in this crucial “Discovery” phase:

· Review current Web site and available documents.
· Company consultant, writer, designer and interactive strategist visit the organization (one day)
· Develop the discovery document with up to two rounds of revisions

So, before they set mouse to PhotoShop, before they set CSS to Notepad, they try to understand what they need to create. They do so by conducting online research and visiting the organization to talk to the client (for one whole day). Their cost for this is—and I swear I’m not making this up—$20,780.00!

Obviously things change with an enterprise-level project: the organization is bigger, the problems and solutions are more complex, the profile of the site is bigger, etc. I don’t expect many individual designer/developers to get that kind of money for the discovery phase of a small business’ web site design. But know these two things:

1. You’d be justified to charge something, and …

2. Even if you don’t charge anything overtly, include it implicitly in your price because the process creates a better product. Guaranteed.

About the author:

Clinton R. Lanier is an Assistant Professor of Technical Communication at New Mexico Tech, and the owner of Lanier Infomedia (http://www.lanier-infomedia.com), a web design/development and technical communication consulting company located in Las Cruces, NM, USA.

Functionality and User Friendliness:  

The first thing that stands out as soon as you open GIMP, is just how different its interface is to Photoshop’s.  Seasoned Photoshop users may have to get used to the multiple screens and the different tool placement, but you shouldn’t have a problem adapting over time.  If you’ve never used Photoshop before, you don’t have to worry about this as much.

GIMP has advanced color management tools, filters, useslayers and channels, and allows you to undo your history with the click of a button.  The program also has a pretty nifty “Align” tool that allows you to align a list of layers, paths, or guides with another object, a selection, or the image itself.  

Although GIMP has managed to stay competitive by offering more advanced tools, it is lacking in its advanced color scheme support (No CMYK) and as of right now, it only supports 8-bit per channel images (whereas Photoshop supports 8, 16, and 32).  The new version also offers beginner-friendly tools like automatic Red-Eye Correction (not available in previous versions) and guided color selectors and crop tools. 

If you’re set on the Photoshop interface, be sure to check out GIMPShop, a modified version of GIMP that has the familiar Photoshop layout.  In terms of compatibility, GIMP uses XCF format but can save to PSD formats as well as BMP, JPEG, GIF, TIFF, and PNG.  

GIMP is available for Linux, Windows, and Mac OS.

Awesome Features:  

• Nestable/dockable palettes keep your workspace streamlined and less cluttered.  
• Crop Tool Guides (Rule-of-thirds, Golden Rule, etc).
• Great selection of filters, especially for a free program.
• The color picker tool allows you to pick a color from anywhere in your desktop, not just a GIMP window.  (Saves the hassle of taking screenshots and importing the image into GIMP just to take a color sample!)

Features to Write Home About…

  Although it may take some getting used to, GIMP is        incredibly customizable using the “Preferences” section.  In  fact, this is where it may actually surpass Photoshop  (although recent Photoshop versions have become more  customizable as well).

  The Bottom Line:  

 Definitely try GIMP if you’re looking for something new (or  something free) to edit your photos.  The functionality and  customization options are great for a free program although  the multiple-window interface could take some getting used  to.

Final Mentions:  

If you’re a newbie to photo editing, you might find the “help” section lacking and there aren’t as many guided options available for GIMP as there are for Photoshop or the more affordable Photoshop Elements.  If you’ve tried GIMP in the past and didn’t like it, go into 2.6.5 with an open mind and remember, these developers don’t have the resources that Photoshop developers have and they still managed to churn out a kick-ass product.

If you want to download gimp, click here:  Download

I wanted to introduce you to a new contributor to the magazine, Clinton R. Lanier, a fellow educator who has agreed to share some of his practical web design knowledge with a series of articles. This is the first.

Thanks for reading,

Stefan Mischook

-

“I make everything in-house!”

As the owner of a web-design business, hearing this exclamation from competitors puts a smile on my face. As a web design instructor, however, I admonish my students for the same declaration.

I don’t know why so many web designers feel the need to try to make everything themselves. Maybe it’s the innate creativity flowing through their veins, or the fact that web design is a very artistic enterprise. Whatever the case, the philosophy that everything on a website should be proprietary costs designers time and money.

The reason is simple: reinventing the wheel—creating your own solution to a design problem instead of purchasing an already-made solution—does not give you the return on investment that you’d see by using a third party’s solution. This is true for every business, but especially so for web designers.

Here’s a simple case to illustrate this point. Let’s say you have a client that is going to pay you $2000.00 to design an e-commerce website with an online catalog, a shopping cart and a checkout mechanism. You could spend your own time to make this portion of the site, or you could purchase an off-the-shelf component.

Now imagine you find the component you need for $500.00 (companies like ecommercetemplates.com sell customizable solutions for as low as $149.00). Is it worth it to buy the product rather than make it yourself?

Well, now let’s say it would take you 20 hours to make the component yourself. If you do the math, you’re making $25.00 per hour to create the component you could otherwise buy for the $500.00. If you save yourself the 20 hours to work on or find another project, you could end up generating much more income in the long run through the volume of projects you’re able to complete.

The number of solutions available is enormous, and chances are you can quickly find just about anything you may need at a cost-effective price. The most numerous, perhaps are templates, which are usually available free or for a reduced cost by websites hoping to get you there to increase the number of page views for advertising revenue. Often the freebies require you keep the developer’s copyright logo at the bottom, but by spending a bit you can buy the right to erase their name and replace it with your own. Templates are especially smart to think about because they’re so easily modified, thus simple adjustments to the style sheets or the HTML pages will change the look dramatically.

It’s also a good idea to shop for and buy royalty free images. I’ve seen many designers—including, sadly, some of my own students—have to cough up money or pull down sites because they ripped images off of Google or some other place. Paying money to a third party for source images shuffles the copyright responsibility off to them, and you’ll have recourse if it turns out the image is copyrighted elsewhere. And like all other third-party solutions a primary rationale for buying royalty free images is to save you time (and therefore, money) and to additionally get a good quality product.

Not to pitch for anyone, but I personally use istockphotography.com for images that I’m confident won’t get me sued when I use them on sites. They also sell Flash videos, music and vector graphics. Like the templates, the products can be modified after you’ve purchased them. I’ve actually never used an image I’ve bought without first cropping or in some other way editing it. Thus, I’m pretty sure the image I finally end up with on my site won’t closely resemble images on other sites.

Speaking of Flash, there’s nothing I hate more than wasting time making a Flash intro movie or menu when I could be doing something else. I’m a bit biased against Flash, to be sure, but many customers want it, and for some reason there’s a belief by those same customers that Flash products justifiably add 25% to the cost. I won’t complain when the customers up-sell themselves, but like other components of a website I try to get around doing it myself. Websites like flashcomponents.net sell just about any Flash-oriented component you could want, including slideshows, menus or whole site templates: and when compared to the time it’d take you to create a custom component, they’re quite affordable.

To explain my disdain for Flash, let me just say that I’m not what you’d call a Flash expert: I’m more comfortable with other aspects of site design and development. This, though, brings up yet another point to support using third-party solutions. I’ve noticed in my own students that for some reason they seem to gravitate towards different aspects of design/development. I have on a team of developers right now an individual who is about the best PhotoShop mock-up person I’ve ever seen, and he’s definitely above-average on Flash. But, he’s nearly illiterate when it comes to PHP (and just, ‘okay’ on CSS). However, another member of the team is a whiz on PHP and CSS, but only passable with PhotoShop and Flash.

The lesson here is that you can’t be an expert in everything. Yet if you are going to design/develop websites professionally you are expected to be a “Jack of all trades.” And this, in addition to the time-savings (leading to a higher ROI for both time and money) and the customizability of third-party solutions, is the next most important reason to consider using what someone else has made. In any of the sites I’ve used for example purposes here the products are the result of people who are masters at that particular tool. I guarantee that PHP experts are not spending their time making Flash components, and vice versa.

Some designers think that perhaps taking this approach makes them appear more like an amateur and less like the professional they want to be. But consider this: many larger technology corporations use this same approach. While working for IBM years ago I witnessed them go through a dilemma. While they had the DB2 product—a great enterprise-sized database tool—they needed a dedicated, online storage manager. Their solution? Partner with Tivoli and co-develop the Tivoli Storage Manager in order to customize the features of both it and their own proprietary product. They took the same approach to Lotus and a whole host of other products (which they eventually purchased, but the point remains).

Perhaps a better example is that of Adobe. In his book, Sketching User Experience, Bill Buxton—a designer for Microsoft Corporation—points out that of all of the applications sold by Adobe, only two were created in-house. ONLY TWO!!! Aside from Illustrator and Acrobat, every other application Adobe puts its name on was created by another company and then bought by Adobe.

Thus, there’s no need to feel like relying on third-party solutions makes you less of a designer/developer. Instead, rest easy in the knowledge that doing so is actually the same strategy used by big industry.

Personally speaking, I take this approach when I develop sites. For example, I do much of my work with the open-source CMS, Joomla. The wonderful thing about Joomla is not that the main component is free or powerful, but that so many extensions have been written for this primary system that functionality and modification is made super-simple. With just a few small tweaks of already existing components, I can have an online gallery or an online catalog (or both). If I spent the time making from scratch what others have already created, I’d end up losing in the long run.

One caveat, however, must be discussed before closing. While using third-party solutions is a great business strategy, ethics demands you not mislead your clients. If they ask for, and you charge them for, from-the-ground-up customized solutions, well then you’re obligated to deliver the same. I’ve found most clients don’t care as long as you’re charging them an honest fee to begin with and the final product does what you’ve promised and they want.

Thus, embrace the third-party solution. Revel in the fact that you can with confidence promise clients just about anything under the sun on their website and then deliver quality, professional solutions you didn’t even have to make. The time-savings will lead to better revenue in the long run. And that, I guess, is the bottom line, right?

About the author:

Clinton R. Lanier is an Assistant Professor of Technical Communication at New Mexico Tech, and the owner of Lanier Infomedia (http://www.lanier-infomedia.com), a web design/development and technical communication consulting company located in Las Cruces, NM, USA.