Design View

Introduction

Alex Walker Welcome to Design View #52.

While Bob Geldof might have had a point about not liking Mondays, they're sure rosier when you arrive at work to shiny new boxes. The Adobe Creative Suite 4 Master Collection hit my desk earlier this week.

Master Collection While the packaging was a little underwhelming -- muted silvers and charcoals -- that buzz of loading up the new suite for the first time was still satisfying.

There's a huge amount I could talk about, but in this issue I'll be focusing specifically on the new Photoshop release and what new tricks it's added to its repertoire.

Later, Matty will show Coda users (sorry, Mac only) how they can integrate the SitePoint HTML and SitePoint CSS references directly into the editor view.

Enjoy,

Alex Walker
Editor
SitePoint Design View

HostGator eats up the Competition with their newly priced plans!

Hostgator Webhosting Whether you are a web designer, or a small site owner; HostGator offers a web hosting plan to fit your needs. With their Hatchling Plan starting at $4.95 ranging to their Reseller Plans and Dedicated Servers you will definitely have room to grow.

Host Unlimited sites on our Baby Plan!

Disk Space: 600 GB
Bandwidth: 6,000 GB

Along with superior support and a features like instant backups, 99.9% Uptime plus an all new 45 day money back guarantee you will be glad you chose HostGator.

Sign Up Now and Receive $9.94 OFF!
Coupon: SITEPOINT

Summary

Introduction
Three New Tricks You Can Only Do in Photoshop CS4: Part I
Three New Tricks You Can Only Do in Photoshop CS4: Part II
Adding the SitePoint References to Coda
Latest Tutorials
Hot Discussions
New Blogs

Three New Tricks You Can Only Do in Photoshop CS4: Part I

I have to admit it crossed my mind. The new Photoshop arrived and I found myself thinking: "Ah, come on, the old bird must be into her twelfth version by now. That's like 125 in dog years, isn't it? Surely after all this time the well has run dry and she has nought but gimmicks and parlor tricks to try to lure me in this time?"

While that may have been how I went in, I'm pleased to report she still has the ability to surprise and please.

Let's take a closer look.

Content Aware Image Resizing

This is a nice story for Adobe. In August, 2007 there was a ripple of excitement through the graphics community when Shai Avidan and Ariel Shamir demonstrated a new mathematical approach to image resizing—dubbed Content Aware Image Resizing (CAIR). Adobe were quick to recognize the opportunity and immediately added Shai to the Photoshop team.

However, finding a good idea and integrating it into a Goliath-like Photoshop are quite different things, and many a "gee whiz, ain't that cool" idea has been warehoused when it all became too hard to make it work in the big wide world.

Thankfully that hasn't happened with CAIR, and Adobe have shown some commendable adaptability in the smooth integration of CAIR technology into Photoshop CS4.

If you missed the initial talk on CAIR, it's a fascinating concept. Traditional image-scaling methods stretch and compress all parts of the image equally, with scant regard for the image content.

As the example below shows, this gives you nasty and very noticeable image distortion in all but the smallest resizes.

CAIR takes a smarter approach. As the name suggests, Content Aware Image Resizing analyzes the content of your image and then limits all image adjustment to the areas of least visual importance.

For instance, in the example below you can see the application is making its biggest changes to the more nondescript parts of the wall and doors, leaving the important compositional elements (Obama, the switches and bins) virtually untouched.

Adobe's implementation of CAIR is very slick. While some early versions relied on the user cutting marks to protect detail, Photoshop CS4 generally gives you a great result by simply switching on the "Protect Skin Tones" option.

In short, this is one of those rare occasions where you have a new feature that has a serious wow factor and is seriously useful from day one. It's a while since I can remember generating a crowd at my desk while demo-ing a new Adobe feature, but CAIR was able to do that.

While it's true that some images will lend themselves to CAIR more than others, I think this is genuinely a killer feature for almost any regular Photoshop user.

Adjustment Layers

I know, Adjustments layers are nothing new, but they've become more powerful and easier to control in CS4.

The first thing you'll notice is that they've been given their own dedicated palette, giving you a fast, one-button click method to apply levels, curves, saturations, and color balances, amongst other adjustments.

Clicking a button launches a hidden control subpanel for the adjustment, rather than the traditional popup dialog. This felt a bit weird to me. I suspect you adapt to it quickly, but I can't think of another place where they handle the UI this way (the graphic below illustrates this idea).

Now, obviously curves have been around forever, but the way they can be applied here is new and, I think, rather cool -- the On-screen Adjustment Tool. Let's look at a quick example of it in action.

To use it, you simple apply a curves adjustment layer and click the small hand button, top left of the Curves palette. As you hover over your image you'll see the eyedropper cursor, which shows you where that part of the image falls on the curve line.

Big deal, right? It's always done that. But try clicking on a specific part of the image you would like to brighten (in the example, the walls) and dragging straight upwards. You'll see those tones immediately lighten and you'll see your curve line reflect that adjustment in real time.

In our example, due to the previous action, the candles have lost some of their brightness. To bring those highlights back, we can target them by simply clicking directly on them and dragging down. Again, the curve reflects your adjustment. Now, if you're already a whiz with curves, you might not see great appeal in this tool. After all, there are other ways to achieve the same result -- as long as you know what you're doing. However, if you're a visual thinker who has perhaps found it difficult to equate what's happening in the graph to what's happening in your image, this is a great connector. Working directly on the image certainly feels more natural to me.

---Continued Below---

Exclusive first look at the all new Campaign Monitor

We've been lucky enough to give you, Design View subscribers, an exclusive first look at the new version of our email marketing software, Campaign Monitor. If you do any email marketing for yourself or your clients, then you need to see this. Here are a few of the highlights:

Create sub-accounts for your clients so they can send their own newsletters.
Set your own marked-up prices and let your clients pay, then earn a profit.
Re-brand it to look like your own software.

The new version goes live in 2 weeks, but all SitePoint readers get an exclusive first look at our just launched mini site.

Three New Tricks You Can Only Do in Photoshop CS4: Part II

3D Painting

Okay, yes there was 3D in CS3 but let's be honest: it wasn't hugely useful, was it? You jumped out into a separate applet to use a limited set of tools. It was a passable imitation of 3D at best. The new 3D implementation definitely raises the bar significantly.

Firstly, there is no jumping out of the application—all 3D manipulations are performed in the main workspace, side-by-side with the 2D tools. You can open a 3D file directly in Photoshop (U3D, 3DS, OBJ, DAE, and KMZ) or add a 3D layer to an existing project.

Secondly, the new model controls are a big improvement. While the toolbar now contains 3D Rotate, 3D Move and 3D Scale Tools, Adobe have also added a nice 3D Axis tool that overlays your model, allowing you to orientate it without leaving the workspace.

But perhaps most impressive of all is the way Adobe have been able to make their 2D tools operate on 3D surfaces. Grab your Brush Tool, set a color, and start painting. Paint diffusion rates and angles are all controllable.

It doesn't end with flat color either. Switch the Paint Mode and you can paint with Bumps, Glossiness, Opacity, Shininess, Self-illumination, and Reflectivity.

You can even use the Merge Down option in the Layers palette to apply a 2D image (say, a logo) to your 3D object. That's pretty nifty in my book.

In reality, the new 3D tools in Photoshop probably deserve a dedicated article; however, I think it suffices to say that as of CS4, 3D is a fully-fledged Photoshop citizen, rather than a tacked-on afterthought.

Summary

It's always difficult making the call as to when to upgrade an expensive application like Photoshop—especially if you're shelling it out of your own pocket, rather than your boss's. No doubt your current version worked yesterday and will continue to do so tomorrow.

However, if the question of upgrading is on your mind, with the addition of features like CAIR, there are probably more compelling reasons to take the plunge this time than there's been for a any of the past two or three versions.

Adding the SitePoint References to Coda

Mac users will no doubt be aware of Coda, the popular text editor for building web pages from scratch.

One reason Coda is so popular is because it brings the workflow for building a web page into a single window -- you can browse, edit, preview, upload and change permissions on your files, all from the one application. For designers who get frustrated at having five different applications open to perform all of these tasks, Coda is a godsend.

There's one other task that you can perform from within Coda, and that's look up reference information. By default, the collection of reference books available is minimal, but you can extend this collection by adding what we believe are the best reference books available -- the SitePoint HTML and CSS References.

The SitePoint Reference books in Coda

Here's how to do it (with a hat tip to Jon Hicks who documented this first):

1) Click the Books tab (Command-6), and select the + button at the bottom to add a new book.

2) In the dialog window that appears, enter the following information (we'll use the SitePoint CSS Reference in this example, but just substitute "css" with "html" to add the SitePoint HTML Reference):

Book Title: SitePoint CSS
Book URL: http://reference.sitepoint.com/css/
Use For Mode: CSS
Search URL: http://reference.sitepoint.com/css/*

3) Next, drag an image of this book onto the Cover Image area. We've created a couple of images that you can use for this purpose, available for download here:

HTML Reference Cover Image (JPG, 92 KB)
CSS Reference Cover Image (JPG, 92 KB)

4) Click OK, and your book will appear in Coda!

The beauty of having this reference information within Coda (apart from the syntax information and live examples) is that you can check browser compatibility for an HTML tag or CSS property using the browser compatibility charts listed in the online reference.

We have grand plans to provide similar integration of our reference material for other editing tools. Our aim is to make this reference material available to as many web designers and developers as possible -- stay tuned for a very exciting announcement on this front soon!

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

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

SitePoint Design View

Introduction

HostGator eats up the Competition with their newly priced plans!