Agencies send me PSD files at work and ask for them in return; design blogs are full of Photoshop tips, tutorials and templates; other designers request the Photoshop files that they assume I must have used to build elements.

It’s almost like being a second-class citizen. It’s like the only tool a truly professional designer would dream of using is Photoshop—the software equivalent of choosing a Mac over a PC.

Yet Photoshop is not the only option. I’ve used Fireworks for many years now and find it to be by far the easiest and fastest way to get ideas out of my head and into pixels on the screen.

Let me be clear: I am in no way dismissing Photoshop or those who choose to use it. I use it for plenty of tasks. Personal preference is the most important factor when selecting your tools, and if your preference is Photoshop, then that’s what you should use.

Photoshop is a wonderful program, but its tool set is vast—it is used for a huge range of applications, from photo manipulation and illustration to 3-D modeling.

For most web design tasks, you would have no need for the majority of Photoshop’s features—indeed you might never know they exist. Fireworks, on the other hand, was designed from the ground up to deal with the visual side of web design, and all its tools and workflows were built with this in mind.

The following are some of my favorite things and reasons why Fireworks is my primary design tool:

1. Pixel-Perfect Control

As far as I’m concerned, this is Fireworks’ killer feature. Want a 300 x 100 pixel rectangle? Just type in the values, and there it is—no messing with rulers, guides or measuring tools. Want to move it? Just click and drag, regardless of the layer you have selected—no hunting through nested layers and groups to find the right one.

Best yet, to give a rectangle rounded corners, just stick another value in a box, and boom: sorted! This may sound like an insignificant feature, and I know Photoshop does rounded rectangles, too, but in Fireworks you can specify the exact radius of the corners in pixels or a percentage and change these values whenever you like. If you resize the rectangle, then the corners maintain their proportions instead of stretching or compressing.

Fireworks is essentially object-based, which makes manipulating the elements in a design easy. You can see the pixel dimensions of an object or group of objects just by selecting them. Everything can be changed on the fly with absolute accuracy, so if something’s not quite right, you can tweak it until it is. This is so unlike the guessworkneeded  by Photoshop (“Let’s try this… No, that’s not right… Undo and try again.”).

In web design, where a single pixel error can ruin a layout, Fireworks provides a level of precision that makes setting up a design in certain dimensions and moving elements within it around as easy as possible.

2. The Web Layer

The web layer combines image slicing, output file-type selection and optimization in a coherent and intuitive way. In fact, it might be the only contact that a lot of designers have with Fireworks; it’s an alternative to Photoshop’s slicing and export options or—from the pre-CS3 days—ImageReady.

There’s more to it than slicing, though. You can also set up links and roll-overs, and then output functional HTML straight from Fireworks; it’s not the cleanest code in the world, and you probably wouldn’t use it in a finished project, but for rapid prototyping or setting up a working mock-up, it’s a dream. By using the web layer in tandem with the Pages panel, you can create a working mock-up of an entire website without using any other applications.

3. Gradients

Everyone loves a nice gradient. Even for the strong-willed, these are something of a fiddle in Photoshop—but they are incredibly simple to apply and edit in Fireworks.

Control handles let you pull a gradient around inside an object, and you can manipulate gradients in more ways than Photoshop allows. This is a great example of something that Photoshop can do but that Fireworks makes faster, simpler and more intuitive.

4. The Learning Curve

For a newcomer to online design, Photoshop has to be one of the more daunting programs they will encounter.

Finding your way around and working out how to do something relatively simple can be difficult. While Fireworks is by no means a doddle, it is a lot easier to grasp.

Its tool set focuses on tasks specific to web design, and new users will find themselves creating usable work a lot sooner than they would in Photoshop.

5. Vector Tools

Fireworks has a comprehensive set of tools for editing vector graphics, which it allows you to do quite well alongside bitmap images. For most tasks, there’s no need to fire up Illustrator or whatever vector editor you use, thus saving time and effort.

Fireworks also offers a range of vector-based smart objects for ordinary shapes, polygons and stars, as well as things like cubes, cogwheels, flow charts and speech bubbles—each with various control handles that let you fiddle to your heart’s content.

Fireworks is fundamentally a web design tool, though, so everything is rendered in 72 DPI, including vectors (which normally disregard resolution). What you see on the document canvas is exactly what is exported, so you have absolute control over the final appearance of web graphics produced from vector sources—right down to the anti-aliasing on edges.

6. Pages, Symbols and Styles

Fireworks’ Pages let you set up multiple layouts in the same document in a far more effective way than Photoshop’s layers. One Fireworks document can contain several pages, each of which contains its own set of layers. This allows you to mock up various page layouts in just one document and keep all related assets together (instead of spread out over a bunch of PSDs).

Symbols allow you to build a library of commonly used assets that can be dropped into a document when needed: company logos, buttons—any design element that you use repeatedly and need easy access to. Edit a symbol, and the changes are reflected wherever that symbol appears in your design—much like symbols in Flash.

Styles let you make universal changes across pages in a document. It’s basically CSS for Fireworks: make a change to a style, and all elements with that style will update accordingly (stroke and fill colors, fonts, effects, whatever). It’s great for trying out different color palettes or implementing those inevitable last-minute changes to a design.

When combined, these three features massively streamline and simplify the design process.

7. Price

It’s way cheaper than Photoshop!

Conclusion

I’m not saying that Fireworks does it all; there are many tasks for which you are better off using Photoshop or a dedicated vector editor. Similarly, I’m sure I could get better at using Photoshop as a web design tool; then I might not find it quite so annoying.

I don’t use Fireworks exclusively—I switch back and forth as needed—but it’s definitely my main tool.

Ultimately, there’s nothing that Fireworks can do that Photoshop can’t, but it can do a lot of things more efficiently, and it allows me to design websites faster and more easily.

As I said, it all boils down to personal preference, but if that little yellow “Fw” icon is sitting in your Start menu or dock, unclicked and unloved, I encourage you to give it a try and experiment a little. You might find that you like it.

Written by Russell McGovern, a web designer from London. You can follow him on Twitter.

Is anyone else out there a Fireworks devotee? Are there any Photoshop users who might want to give its little brother a go? Or should I just pack it up and put in more practice time with Photoshop?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: H0Oa9C

Often passed over for its more popular sibling, the linear gradient tool, angle gradients create clockwise blends of color around the point a user clicks.

The angle gradients create clockwise blends of color around the point a user clicks.

Most people stop there. But when combined with other techniques and some creativity, the angled gradient has some surprising uses.

Have you overlooked it? Look again…

How it works

Angle, radial and diamond gradients joined Photoshop when Adobe published version 5.0 in 1998. Like all types of gradients, angles rely on how the user clicks and drags. In this case, the direction one drags creates a line on which the “ends” of the gradient lie. The colors in a gradient flow around the point at which the user clicks.

Above, three AGs show how different colors and angles create different results. The third example has no well-defined line because both of the “end” colors use the same blue. Red, found in the middle of the gradient, is most evident in the opposite direction that the user dragged.

Above, the middle gray appears at the top of the image—far from where the user moved their cursor—while the start and end colors line up in the direction that the user dragged. Other gradient options including opacity blend mode work the same for all gradient types.

Creating radial highlights and shadows

Although festive bunting is common for any celebration, red, white and blue bunting is synonymous with Fourth of July celebrations. Above, pleats are created with an AG that lies on top of the bullseye-like stripes. The gradient layer is set to 80% opacity, Soft Light mode, to let it create highlights and shadows without ruining the colors beneath.

Notice that the “white” stripes and stars aren’t really white. Light grey ensures that the gradient’s light areas have some impact throughout the bunting.

The gradient’s center is a focal point

The fine point at the center of an angle gradient is one of its hallmarks. Since people are naturally drawn to the sharp, in-focus parts of an image, the center should be placed wherever attention is necessary.

Above, the center of the gradient was deliberately set behind “b,” the word’s only ascender. Alternatives to the right put the gradient’s center above, below or to the far right of the word. This draws some attention away from the word itself.

How to draw attention without being ignored

Angle gradients don’t always have to be obvious. Paradoxically, many gradients are most useful when they’re least evident. For example:

Above, angle gradients recreate murky light seen from under water. But the first things people see are the letterforms. Careful layout helps these gradients set the tone, not steal the show. Here’s how it works.

1. Type is set and appropriate colors are chosen.
2. Two angle gradients are set on the layer above the text.
3. Notice that none of the gradients’ centers overlap the text. Avoiding these focal points is crucial to keeping attention on the text, not the gradients.
4. The gradients are clipped to the text (Layer > Create Clipping Mask) and their blend mode is set to Overlay. Experimenting with color and other blend modes will create more (or less) subtle combinations.

Specular highlights and metallic textures

As a trend, the metallic look comes and goes. Simple linear gradients make them easy, but a pair of angle gradients make them pop.

The sheen above doesn’t look typical because it isn’t. Two angle gradients reinforce each other along a reflective stripe that neither could create alone.

Several techniques make it work. First, a gradient begins deliberately outside of the document. The gradient layer is duplicated (Layer > Duplicate Layer ) and flipped (Edit > Transform > Rotate 180°). With both layers’ blend modes set to Overlay, the result is a sheet of polished steel not easily replicated with a stock effect.

Double—or more—any angle gradient with Curves

The Curves control (Image > Adjustments > Curves) is a great way to play with any kind of gradient. The more complicated a curve becomes, the more features a gradient gains.

Above, two types of curves begin to alter an otherwise straightforward angle gradient. This technique can be applied more than once to the same image for increasing complexity.

Above, from left to right, an “arch” curve is reapplied to the original angle gradient to create many spokes. Understanding that a gradient, angle or otherwise, is just a tool opens up many new possibilities.

“That’s not what gradients are for”

Often, seemingly limited tools are the most surprising—if they’re used as one tool in a set. Straight dotted lines are easy to create with the Marquee tool. Circles are trickier, unless you use an angle gradient.

Above, dashed lines with nice, even curves don’t require vector paths or exotic plugins. Although the image begins as a many-stepped angle gradient, applying Threshold (Image > Adjustments > Threshold) turns shades of grey to black and white. Using a lower or higher threshold level results in fewer or more dashes.

As a tool, angle gradients are surprisingly versatile. A good way to discover new uses is to ask “what if?” For example, what would happen if we applied these dashed-line steps to a square instead of a circle? How about a star? What if the gradient wasn’t centered?

Thinking outside the icon

In spite of its simplistic icon, the angle gradient tool is useful in some cases. Still, it’s a tool, not a solution; a foundation, not a trick. The ability to see beyond the obvious takes practice, but the reward is to take “what good is it?” as a challenge, not a snub.

Written exclusively for WDD by Ben Gremillion. Ben is a freelance web designer who solves communication problems with better design.

Have you found any creative uses for a little-used Photoshop tool? Share your ideas in the comments below.

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: H0Oa9C

Editing tones in an image—not just grays and not always photos—can do more than fix highlights and shadows.

Curves can be used to edit photos, masks, graphics and even hues. But using it requires a little know-how and imagination.

Read on for more details about what Photoshop curves are, as well as how to use them properly for your designs.

As usual, feel free to leave us your comments at the end of this post.

Making Tonal Adjustments

Curves is found near the top of the Image → Adjustments menu. Its most obvious use is to adjust contrast in an image, and it is intuitive enough that most users need to study it only for a minute or so before catching on.

Above: Drag a point on the curve line up to make the image brighter and down to make it darker. But what does that mean?

Curves uses a grid that shows before and after. The horizontal axis indicates original tones, and the vertical axis indicates how they will change. A diagonal line bisects the grid. Dragging points away from the diagonal line will brighten or darken highlights and shadows depending on where the change happens.

Above, the curve turns shadows into bright highlights, muddies mid-tones and turns the original white point into middle gray. The further the curve moves away from the diagonal line, the more extreme the change will be. It also means that the angle of the curve changes the image’s contrast in a given range of tones.

Above, blue denotes which tones most of the pixels use. Red denotes the slope.

1. Most of the tones are just to the left of mid-gray, so creating a steep angle in that area would give most of the image more contrast.
2. The opposite—giving the mid-tones a flat slope—lowers the contrast.
3. Creating a steep slope away from the popular tones creates extreme contrast: many shadows, some highlights and few mid-tones.

Choose Tones to Change With Curves

Unlike Levels, Curves allows changes to a select range of tones. Not only can shadows, mid-tones and highlights be changed, they can be changed independently.

Two variations on the photo above show how Curves can affect different areas. In the center photo, pixels brighter than 50% are all brightened. But only the highest highlights—and darkest shadows—are brightened in the right-most image.

To add a point to the Curves line, simply click the line. To remove a point, drag it off the grid.

The Curves control isn’t limited to photos. For example, the logo below has a subtle texture—but what if “subtle” isn’t the right look?

Above, a change in Curves brings out the texture in the disc and amplifies the sheen on the bolt. Knowing that Curves can be used beyond fixing tones and can be used in photos is the first step to grasping its hidden features.

Playing With Color

The Curves control hides many features in plain sight. One of these is the ability to color-correct (or cross-process) any digital image.

Above: with a drop-down menu above the grid, the user can edit one channel (red, green or blue in RGB images) at a time.

The photo above was given a color cast by warming its shadows and cooling its highlights. Specifically, red is removed from the shadows but added to the highlights, and vice versa for blue and green.

A grayscale version of the same photo becomes a duotone when we use Curves to adjusts its channels. Above, extra red and green warm the highlights and mid-tones, while the shadows take on a bluish tinge. In Curves, channels often don’t require major changes to alter an image dramatically.

Improving Selections

Selections and masks in Photoshop aren’t simply on-or-off features, but rather a range of values—much like a gradient. And masks, like gradients, can be manipulated with Curves.

We want to screen the red image behind the black text but leave details at the edges. We start by adding a mask to the photo with the layer (above). A layer mask controls the layer’s opacity without erasing its pixels.

With a reflected gradient, the mask hides the center of the photo. In layer mask terms, light means more visible and dark means less visible.

We make the gradient “shallow” using Curves. If white areas of a mask are visible and black areas are invisible, then the gray is somewhat hidden.

The result (above) is a photo that is screened behind text but still visible at the edges. However, the text is still difficult to read.

Every time Curves opens, it looks at the mask anew. Above, we lower the white point to make the mask darker and thus less visible.

The result is a gently screened photo that fades into the text (above).

Secrets of the Curves Control

Curves is full of shortcuts and hidden features. Here are a few useful tidbits:

Still, the fundamentals haven’t changed since Photoshop 1.0 first arrived on the scene. Many possibilities arise from this simple control.

Written exclusively for Webdesigner Depot by Ben Gremillion. Ben is a freelance writer and designer who solves communication problems with better design.

Do you use Photoshop’s curves in you designs? What for and how they impact your design?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: H0Oa9C

Semitransparent shapes can be very useful when creating repeated geometric “textures” of color and form.

They’re easy to create, fun to play with and best of all, they can be uniquely yours.

In searching for interesting patterns, designers sometimes pass over basic shapes in favor of more complex geometrics. But simpler is often better.

The trick is to pay attention more to how shapes interact than to how a shape looks on its own.

The concepts are simple:

1. As translucent shapes overlap, they create new shapes.
2. Complex patterns emerge from apparently simple origins; and just like in a poem (a haiku, for example), there’s room for variation within the prescribed form.

Unfortunately, it’s easier to make a mess than a purposeful design. The trick is to identify which subtle changes might have consequences later.

One Origin, Many Destinations

When creating patterns that use opacity or blend modes, starting simple is best.

The pattern above was created with one circle in one layer. Here’s the process:

1. Set a circle (colored #4184de in this diagram) to 50% opacity.
2. Hold down the Option (Mac) or Alt (Windows) key while using Photoshop’s Move tool. The layer will be copied as the cursor drags. Their combined opacity will darken in the places where they overlap.
3. Option + drag (Mac) or Alt + drag (Windows) both circles down and to the left—far enough to leave a white gap between each of the copies.

When repeated, a pattern appears.

Patterns emerge from the way shapes overlap as well as from the shapes themselves. Clarity comes from simplicity: a pattern that begins simply looks better in the end. The circle in our last example can be used to create many patterns, including these:

Each of these patterns was created with the same size of blue circles. Incredible variations in texture are possible with the simplest of changes; position, opacity and blend mode were the only changes made in the examples above. But “simple” doesn’t always mean “easy.”

Blend Modes

For pattern-making, 5 of Photoshop’s 25 blend modes stand out: normal, soft light, hard light, overlay and difference.

When people think of complicated layer blends, “normal” rarely springs to mind, but its straightforward nature makes it the easiest to work with. “Normal” mode is the default setting, and it mainly has to do with the opacity settings of the layers. The colors of shapes and backgrounds blend according to their strengths. Normal could also be called the “blending” blend for its tendency to find average colors between the subject (a circle in the example above) and the items below it.

Hard light multiplies shadows and screens highlights. Layers set to “Hard Light,” as in the diagram above, tend to tint everything underneath, which amplifies their original hue and saturation. If the layer contains dark colors, the layers below tend to get darker, and vice versa.

Soft light screens highlights and multiplies shadows without changing the blend color’s luminosity. It works best when the underlying colors are neutral or have low saturation. Layers set to “Soft Light” have little impact against black and white, as shown above, but work well over pale blue and gray.

Overlay strengthens colors below a layer and changes hues to match its own. Layers set to “Overlay” (example above) are brighter than when in “Soft Light” mode but still don’t affect rich black and pure white.

Difference is the least predictable blend mode. Layers in this mode generally invert tones in the layers below: lights become darks and darks become lights. Hues, however, become their opposite on the 360° color wheel: reds become cyans, greens become magentas and blues become yellows. The effect will vary depending on the colors and shades below whichever layer is set to “Difference” mode.

Above, a layer set to “Difference” mode over a white background completely inverts its colors. The same layer over a 50% gray background changes its hues 90° and muddies its tones. Over black, the “Difference” layer appears to have stayed the same.

Here’s how they work.

Pattern-Making, Step By Step

As a simple example, we’ll create a pattern based on circles. Regardless of shape, there are four steps: create a shape on a layer, give it a certain opacity and blend mode, experiment with a few copies, and mass-produce the pattern.

Step 1
Create a vector object with the Ellipse tool. Set the layer’s blend mode to “Hard Light.” Although any size and color will do, this example uses a 134×134-pixel circle, colored #575fdf. An image size of 600×600 pixels is a good place to start.

Step 2
Duplicate the layer with Command + J (Mac) or Control + J (Windows) or Layer → Duplicate Layer. Drag the copied layer to the right, to half of the circle’s width. Alternatively, hold down the Option key (Mac) or Alt key (Windows) while using the Move tool. This will duplicate the layer as you drag.

Make at least two copies. In this example, each new layer touches the center of the previous layer. As a result, the other layers will barely touch one another.

Step 3
Select the first two layers and drag down the width of one-half circle. This is the same principle as step two, but down instead of to the right. When all layers share the same color, opacity and blend mode, you can create a repeating pattern simply by duplicating the layers in any order—or any direction.

Step 4
Repeat as desired.

Initial Decisions Affect the Outcome

The beginning is critical when creating patterns, because duplicating layers amplifies mistakes. The more copied layers there are, the more tedious fixing problems will be.

For example, let’s say you decide to change every layer’s opacity from 50% to 30%. That’s one change per layer—and you can expect dozens, if not hundreds, of layers in a reasonably sized pattern. And what a change a few percent can make!

Each pattern above uses the same blend mode (”Difference”), same shape, same color and same placement, but different opacity. If you don’t want to create an action, then you’ll have to change the blend modes and opacities one layer at a time. Photoshop has a few shortcuts to expedite the changes:

• When the Move tool or any selection tool is active, the numbers 0 to 9 changes a layer’s opacity. Type 1 for 10% opacity, 4 for 40% opacity, etc. Typing 0 sets the layer’s opacity to 100%. This shortcut for both Mac and Windows works on just one layer at a time.
• When the Move tool or any selection tool is active, you can quickly change a layer’s blend mode with these key combinations:
  

  Mac	Windows	Blend mode
  Option + Shift + N	Alt + Shift + N	Normal
  Option + Shift + H	Alt + Shift + H	Hard Light
  Option + Shift + S	Alt + Shift + S	Soft Light
  Option + Shift + O	Alt + Shift + O	Overlay
  Option + Shift + E	Alt + Shift + E	Difference

• Duplicate any single layer with Command + J (Mac) or Control + J (Windows).

Possibilities

“Keep it simple” isn’t just a refrain: it’s a requirement. These examples were all created with the same shape, one or two colors and blend mode changes. Yet the variations seem unlimited:

Written exclusively for Webdesigner Depot by Ben Gremillion. Ben is a freelance web designer who solves communication problems with better design.

All of these examples use circles. Just imagine what you could do with triangles or trapezoids. Why not give it a go and link to your creations in the comments section below?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: H0Oa9C

They give content a relationship to the physical world, a sense of place and a reality that people can relate to.

Unfortunately, simulating physical textures isn’t as simple as shooting a photo or running a few Photoshop filters.

One has to blend random noise and recognizable patterns, striving for similarities rather than pure repetition.

Here, we’ll discuss what gives textures an organic quality, and we’ll look at techniques for creating and applying natural-looking textures and seamless tiles.

Sense of Touch via Sight

A “texture” is the surface of a physical substance or object. Like sight, our sense of touch helps us understand objects. Rough, smooth, slick and crumbly are textures and tell someone what an object is made of, where it has been and if it is related to something else.

On the web, a person’s sense of touch is limited to their input device. But not all websites need to “feel” the same. Based on their experience from handling everyday objects, people associate certain appearances with certain textures. In digital art, one could say that texture is how something “feels” to one’s eyes.

While modern image editors make texture creation easy, not every texture is a surefire winner. Creating a natural-looking texture is a tricky task that mixes pattern, chaos and usage to create character.

Natural Textures Have a Measure of Randomness

Many textures fall between two extremes: regular patterns and random noise. Pattern-based textures make no apologies for looking artificial. They can be made up of a known symbol or text, and they always have a predictable arrangement.

Above, samples of tiled patterns.

At the other extreme, noise-based textures embody random static. They’re easy to create—Photoshop has its own “Add Noise” filter—and easy to tile because they lack any features that look odd when cut off.

Above, samples of noisy textures.

Natural-looking textures sit somewhere between regular patterns and random noise.

Above, a range of textures mix patterns and noise to varying degrees.

While nothing is wrong with either extreme, many good textures have characteristics of both. In natural-looking textures, seams are absent or hard to spot, and we can’t identify any patterns in repeated tiles. Their look is as distinct and effective as any regular pattern, but less blatant.

“Organic” textures have the right combination of noise and pattern.

Rational Chaos, Orderly Noise

In the context of texture, “noise” refers to irregular variations in a group of pixels. Film grain, low-light artifacts and dithering are three common types of noise that, desirable or not, are often found in complex images.

Texture noise is what makes natural surfaces look natural. But it’s not simply static. Rather, texture noise balances chaos and order.

Above, a single geometric shape repeated many times creates a pattern. On the left, the shape varies only in placement: the rows aren’t quite even.

The other shots show changes in the shape’s angle, density and size. Textures made from these variations in shape would appear more chaotic—but all of the textures would retain the original’s unique character, because the variations are based on the same basic shape.

Of course, the result still looks artificial. Obvious repetitions in noise-based textures ruin the effect because people are very good at recognizing patterns. Textures in the real world have variation in shape, color and depth.

Above, real-world textures show both noise and repetition. Burlap, pink granite and wax paper have their own “regular irregular” patterns, but each is still distinct from the others.

• With its predictable horizontal and vertical lines, burlap is the most regular. But the lines aren’t perfect. Slight variations in tone and direction keep the pattern from looking artificial.
• The pockmarks in the granite aren’t evenly distributed. Seeing the unevenness up close is hard. The characteristic becomes more apparent when seen over a wide area.
• The wax paper has both the least contrast and the least personality. A few clumps of dark shades keep it from being random noise.

Every texture has certain features—whether pockmarks, streaks, spots or rills—that make it unique. Variations in these characteristics make it work.

Above, a metallic texture incorporates overlapping ragged-edged shapes in no particular order, but it retains its distinct character. (Texture courtesy The Design Mag.)

Depth and Contrast Range from Murmurs to Screams

A key variable of any natural texture is depth. The “bumpiness” of a texture provides a sense of tactility more than color or size. But depth also adds contrast, which attracts attention and might degrade legibility.

A screaming texture in the background will raise the volume of the content itself. At what point is it too loud? That depends on the strength of the content and the disposition of the audience.

If a loud texture fits the subject matter, then it contributes to the mood. But if it interferes with readability, then you’ve got a problem.

Which of the writings above is easiest to read? Which texture best reflects the message in the writing? There may be more than one right answer, but there’s only one guideline: when mixing textures and content, especially textual content, ensure that the edges of the content remain visible.

Speaking of edges, for extra realism, pay attention to where the texture ends. Slimy or gritty textures, for example, need not end in a perfect line. Instead, let them ooze or crumble into the next surface. The trick is to think of everything on the page as a surface with texture, even if it’s a plain solid color.

Textures That Become Apparent With Light Sources

Not every texture needs deep cracks to look tangible. Consider glossy paint. Without ridges or bumps, its slick enamel feel comes from its sheen.

The textures above show how the surface of an object doesn’t have to be rough. They may not work as repeating tiles, but sheen, reflection and translucency provide visual clues about what an object might feel like in the real world.

The Sweet Spot Between Character and File Size

A common problem with any natural texture is how to repeat it. When people spot repetition, any illusion of reality is destroyed. The easiest solution is to use larger—and thus fewer—tiles. With more variation, spotting repetition becomes harder.

As shown above, the wider the tiles, the lower the chance that people will spot repetition. Unfortunately, wider tiles also make for larger files, which slow down page loading. For many people, a hovering loading sign kills the mood as much as seeing a tile’s edge.

Another solution is to make the shapes in the individual tile smaller.

As we see, repetition of finer textures has less of a chance of being spotted. But the finer the texture, the less character you can give it. The finest texture would be pure noise—but that doesn’t help you. Natural textures always evoke a known surface.

To sum up, natural textures should:

• Have enough personality that they’re not just random noise. This means that shapes, or “clumps” of pixels, should be similar but not identical.
• Have enough personality that a scene or mood is established but not so much that users are distracted from the content. This means that no distinct “clumps” or other characteristics should stand out when viewed from afar.
• Be random enough to avoid repetition. The texture’s characteristics must not form a pattern that people could spot without focusing.

How do we do all of this?

Creating Textures in Photoshop

Many programs enable designers to create their own natural textures. And the web has no shortage of downloadable textures. Creating your own texture can be a rewarding, non-copyright-violating experience that contributes to a truly unique design.

1. Create a new Photoshop document with a white background. For this example we’ll make it 600 x 300 pixels.

2. Fill the background with black.

3. Draw random white strokes pointed in the same general direction. In this example, we’re using a simple hard-edged brush. Different brush tips will create different results.

4. Use the smudge tool to smear the strokes into random blurry edges. A fuzzy-edged tip (with a hardness lower than 30) works best. However distorted the texture becomes, the best results will have many shades of gray.

5. Go to Filter > Noise > Add Noise, and add static according to your taste. Then Filter > Other > High Pass. Together, these add more gray tones (vital for step 6) and a bit of grit.

6. Create a Gradient Map layer. This special layer applies color to underlying layers based on their tone. Unlike normal gradients, which color in pixels based on location, gradient maps color in highlights, midtones and shadows. Use low-saturated colors, especially green, brown and blue, to simulate the colors of nature.

Above, the result of applying a brown and yellow gradient map.

7. Crop an interesting part of the texture. Try not to use more than half of the entire image. We’ll use the rest shortly.

8. Important: Save the cropped tile as a separate file. You’ll need the original file later.

The details shown here are deliberately large to demonstrate the technique, but the result isn’t bad for a texture. Here’s how the process works in general:

• Any size you feel appropriate will do. Larger tiles will have more realistic traits but be larger in file size. Always start much larger than you need, because the edges of a texture that was made from scratch will rarely match the edges of the canvas.
• Create a series of marks with the same tool or tools. The essence of a texture is established by picking a similar technique or two and using them many times.
• Add a little chaos with Photoshop filters.
• Add color: gradient maps to emphasize depth, and spots of random color for splatters. Use low-saturated colors, especially green, brown and blue, to simulate the colors of nature.

Make Tiles Seamless

Natural-looking or not, most textures and patterns should be seamless. That is, visitors shouldn’t be able to see the edges of the repeating tile. How do we do this? The tile itself provides the solution.

9. Above, the image is split along the blue and red lines. Because pixels along the split already match, moving them to either side ensures that the left and right edges will match. Of course, the problem still exists, but it’s easier to fix.

10. This square tile comes from a larger image. Above, the tile’s split is filled in with material from the full image. Repeat step 8 to fix the horizontal seam (at the top and bottom of the image).

The Final Property

The simple texture created above has a glaring flaw: because it was designed to demonstrate the process, its characteristics repeat too frequently.

A natural texture’s characteristics are usually less than one-tenth of the whole tile. That is, for a tile measuring 500 x 100 pixels, the largest wrinkle, rill or other mark would measure 50 x 10 pixels or less.

Well-crafted textures require one more feature: time. Short of downloading a freebie, you have to take time to develop and refine a great texture. But don’t think of it as a chore. It’s part of the process, naturally.

Written exclusively for Webdesigner Depot by Ben Gremillion. Ben is a freelance web designer who solves communication problems with better design.

How do you create natural-looking textures? Share your ideas in the comments below.

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: H0Oa9C

You can catch the official launch online here, however, if you can’t wait, we’ll be revealing all the juicy details before the official launch… right now!

The Adobe team kindly invited us to an exclusive sneak peak demo of Creative Suite 5 and they also provided us with a pre-release copy for this review.

In this post, we’ll be sharing some of the highlights of each application in this exciting new release, with some detailed info on the new applications. We’ll also discuss whether we think CS5 is worth upgrading to or not.

That being said, get ready to be amazed… there are tons of new features to get excited about in this release.

Overview

There are five editions of Creative Suite 5: Web Premium, Production Premium, Design Standard, Design Premium and the Master Collection. Adobe decided to drop Web Standard as web developers seemed to mainly purchase the Premium version.

Photoshop, Premiere and After Effects in CS5 are available as 64 bit (including both Windows and Mac). This will dramatically increase performance across these products.

Creative Suite 5 introduces over 250 new features. There are all-new versions of fourteen point products (all products except Acrobat Pro), and there’s a brand new product called Flash Catalyst, which is included in all of the editions except Design Standard.

Flash Builder 4 (previously Flex Builder) is now also bundled with the Design Premium and Master Collection editions.

Adobe is also introducing CS Live, a collection of online services that work within the CS5 applications. The services are designed to help you speed up your productivity and make it easy to collaborate with others on your projects.

Click for larger image

Adobe has centered this release around the fact that with CS5 you can create amazing work, and deliver it virtually anywhere across all types of media, furthering the reach and impact of your creations.

CS LIVE

In addition to its regular applications and the new Flash Catalyst, Adobe is also introducing four new online services to accelerate workflow and to make collaboration with others more efficient and more professional. Here are the services and their main features:

Adobe CS Review
With CS Review, you can complete a creative review in three simple steps. First, you create a review from within Photoshop, Illustrator, InDesign, or Adobe Premiere Pro. Second, with just a few clicks, you share the review online with clients or colleagues. Third, you view reviewers’ comments right in the desktop application from which you initiated the review—directly in the context of your work.

Acrobat.com
ONLINE WORKSPACES: No need for email anymore, as you can now set up a central online Workspace where your team can access documents, layouts and artwork.
ADOBE CONNECT NOW: Meet live over the web with your team or clients and share your screen with anyone.
ADOBE BUZZWORD: An online word processor where you can co-author copy for use in InDesign layouts as well as proposals, reports and any other docs.

Adobe BrowserLab
See how your web pages will appear in different browsers and operating systems. BrowserLab works by taking screenshots of your web pages in different browsers, and then displaying them directly in the BrowserLab window. You can preview a page in a single browser or compare the page in two browsers side by side as well as overlay options such as onion skin.

SiteCatalyst NetAverages
The service gives you insight into the latest Internet usage trends on browsers, operating systems, and more. Includes up-to-date aggregate data on critical factors that affect your designs, such as browser type, operating system, mobile device profiles, and screen resolutions.

Adobe Story
As a screenwriting tool, Adobe Story enables you and your colleagues to write and edit scripts online or offline from virtually any location. To help you organize your work and manage your projects, Adobe Story displays all your scripts, character biographies, reference links, and free-form documents in one place.

Flash Catalyst

The addition of Adobe Flash Catalyst CS5 seems to be an attempt by Adobe to bring designers back to Flash. As Flash evolved from an animation tool to software that creates rich Internet applications, many designers have complained about its increased complexity. This product seems to take things back to basics.

So what is Flash Catalyst? Using a very intuitive UI, it helps designers publish SWF files or Adobe AIR applications without writing any code. The project files can then be delivered to developers to add further functionality using Adobe Flash Builder, bypassing the need for designers to get involved in any coding.

You basically start your project by designing in Photoshop, Illustrator, or Fireworks and then import your artwork into Flash Catalyst where you use menu commands to convert individual elements into functional interactive components such as buttons, sliders, and scrollbars. Flash Catalyst will write all the code for you in the background while saving the file in Flash Builder’s FXP format, ready to hand over to developers.

Is Flash Catalyst perhaps a way for Adobe to pull designers away from code based technologies such as HTML5, Ajax and jQuery?

The struggle between Adobe and Apple is well known with Apple’s reluctance to include Flash on the iPhone and iPad. As powerful as HTML5 can be, the power of Flash is undeniable and this product may cause a revival of Flash among designers, which could eventually force Apple to switch gears.

I believe that this is highly unlikely, however, a lot can be said about a strong determined group of designers who may just have enough collaborative power to force Apple to change direction. The suggestive name ‘Catalyst’ may be hinting at just that. As of today, Apple is the only mobile platform developer that does not support Flash.

Should you upgrade?

Ultimately, the decision of upgrading or not depends largely on your individual needs. However, in my opinion, the Creative Suite features enough groundbreaking features to force an upgrade at this time.

If that’s not enough, the power of the new online services alone (CS Live) would be worth an upgrade as this can really help streamline your workflow and save you tons of time.

I have listed the most relevant new features of each product below to give you a better idea of what the Creative Suite looks and feels like.

What’s New in Adobe Photoshop CS5

Photoshop CS5 redefines image editing with a strong focus on photography. With 20 years under its belt Photoshop has continued to evolve and with CS5, it brings not only evolutionary incremental changes, but what I believe are revolutionary new features that everyone is sure to use every day.

If you haven’t yet seen some sneak peaks of the new Photoshop features, such as Content Aware Fill and Puppet Warp, I’m sure your jaw will drop as you see it and wonder: “how did they do this?”

I was amazed by some of these features and thought that these things always seem to work well with the ideal photos used in the demos, but not in real life examples. But this is simply not the case here. After playing with some of these features in CS5, Photoshop delivers a remarkable job worthy of praise.

1. Complex selections made easier
Removing backgrounds has just become a whole lot easier. You can now make very accurate masks and selections much faster. The always tricky task of selecting hair is now a breeze using the refine radius and erase refinement tools.

2. Content-Aware Fill
This is probably the most exciting new feature in Photoshop CS5. Using this tool, image elements can easily be removed by having them automatically painted over with background details that are intelligently matched from the original image using a proximity match.

It’s super accurate and really feels magical beyond belief. This tool will probably become one of the most used tools in Photoshop from now on, with designers wondering how they ever managed without it.

3. HDR Pro and HDR Toning
Using multiple exposures of an image, you can combine them into a single high dynamic range (HDR) photo that keeps the full tonal range of a scene. With CS5, you get more control over the merging process and more power over the styling. The resulting images can be photo-realistic to highly surreal. This is a big improvement on HDR content merging in Photoshop CS4, which was not too good.

4. Mixer brush
The Mixer Brush lets you define multiple colors on a single tip, and then mix and blend them with the underlying hues on your canvas (similar to having a wet canvas), achieving creative results that rival traditional painting media.

Mixer Brush settings provide extensive control over the wetness of the canvas, the load rate to add paint to the brush, the mixing rate between brush and canvas colors, the angle of the brush and whether the brush is refilled, cleaned, or both after each paint stroke.

In the example below, you can start from a sketch (top), and use the new Mixer Brush and Bristle Tips to layer on colors to create a painting (bottom).

5. Puppet warp
Well, this one can truly be described as ‘magical’ as it’s simply unbelievable. The ‘puppet warp’ tool makes it possible to push and pull different elements of an image. In the image below, you can simply place ‘pins’ along the area you want to move and then simply move it in any direction.

6. State-of-the-art raw image processing
The Adobe Camera Raw 6 plug-on, which supports 275 camera models, provides you with excellent conversion of raw files. Remove noise with the new luminance and color noise reduction tools, achieve better quality sharpening, automatically correct common lens aberrations, and creatively apply new styles of vignettes and film-like grain. See the left example for the original photo and the right example after noise removal.

7. Automatic lens correction
This feature allows you to correct common lens-based errors: geometric distortion, chromatic aberration, and vignetting. Images are corrected with the Lens correction filter. Some lens profiles are included with the installation and there will also be a tool available at Adobe Labs to make your own custom lens profiles.

8. Dozens of workflow improvements
These are some of the improvements that Adobe implemented based on user feedback:

• Default value for Shadows/Highlights changed from 50% to 35%
• The ability to move a selection while the active layer is hidden
• A Neutral Density option is now available from the Gradient Picker presets menu.
• An on/off option for trackpad gesture support on Mac and in Microsoft Windows 7
• A new layer command for deleting all empty layers via scripts
• A Straighten button on the Ruler tool options bar
• A Close All Open Images Without Saving option
• A Save As option for always defaulting to the folder to which you last saved an image
• The ability to drag and drop a file onto an open Photoshop document to create a new layer
• Multiple improvements in Lens Correction filter options
• A new Cache Tile Size control in the Performance section of the Preferences dialog box
• Zoom in and out with the new scrubby zoom tool
• Presets for setting Cache Tile Size and Cache Levels simultaneously
• The ability to use keystrokes to set values in the Adjustments panel text fields
• Performance increases of up to 50% when importing OBJ files
• Sample colors faster using the new on screen color ring built into the eyedropper tool
• Customizable default values for Layer styles The Green/Magenta slider found in the updated Lens Correction filter dialog box provides great control over the manual correction of Chromatic Aberration. You can now simultaneously adjust the opacity of multiple layers.
• New creative resources, including actions, tools, presets, brushes, swatches, shapes, gradients, styles, and tool presets
• Window and Door shapes added to list of meshes that can be created from a layer
• An option for changing the opacity of multiple selected layers
• The ability to create a mask from the transparent areas of a layer
• Pick colors faster using the new on-screen color HUD
• Print settings saved with the image file, allowing one-button printing with user-selected values
• Selecting a printer automatically lists the profiles installed for that printer at the top of the profile list
• Printer-specific profiles are selected automatically when choosing a printer
• Customized print settings can be recorded as part of a Photoshop Action
• An overlay grid can be displayed when using the Crop tool
• Layer groups can be nested more than five levels deep
• New Paste Outside and Paste Inside commands, along with the previously existing Paste In Place option, are included in a new Edit > Paste Special menu

9. 3D extrusions with Adobe Repoussé (Photoshop CS5 Extended only)
You can now easily convert 2D artwork into 3D objects. This is great to extrude text for logos, for example, or 3D artwork.

10. Enhanced 3D realism (Photoshop CS5 Extended only)
Photoshop CS5 Extended comes loaded with a library of presets that you can use to enhance your 3D creations. You can also download more material, create your own or edit existing materials.

11. Better media management and Web Gallery integration with Adobe Bridge CS5 and direct access with Mini Bridge
You can now manage your content more efficiently with the new and updated features in Bridge CS5 software, with your assets being always available in Mini Bridge (a panelized version of Bridge), providing image access and management from within Photoshop CS5.

12. Easier interface management with the new Workspace Switcher and Live Workspaces
New Live Workspaces auto-save any changes you make to a task-specific workspace, so that if you switch to a different workspace and then back again during an editing session, your panels remain exactly where you left them.

What’s New in Adobe Illustrator CS5

Take advantage of exceptional new drawing tools to work in accurate 1-, 2-, and 3-point perspective. Control stroke width using finely adjustable width handles, and paint natural textures with a realistic new brush.

You can now build shapes by dragging your cursor to quickly combine, edit, and fill objects.

Multiple artboards can now be named, organized, and viewed more easily. Drawing behind and inside other objects is made easier with automatic masking and layer control.

Join paths with one keystroke, and use 9-slice scaling for better precision when scaling symbols.

1. Multiple artboards enhancements
Work on up to 100 artboards of varying sizes in one file, organized and viewed the way you want — overlapping or on a grid. Quickly add, delete, reorder, and name. Save, export, and print artboards independently or together.

2. Variable-width strokes. Arrowheads and dashes
Adjust stroke width interactively using new width handles. Precisely position arrowheads and symmetrically align dashes. Control stretch at any point when scaling art brushes on a path, and see how patterns behave beautifully at corners.

3. Art and pattern brush control
Define how art brushes scale along a path, choosing areas to stretch and areas to keep in proportion. Apply them to a path and get clean results, even at tight bends, corners, and uneven joins.

4. Shapebuilder Tool
Intuitively combine, edit, and fill shapes directly on your artboard. Drag your cursor across overlapping shapes and paths to create new objects and add color without accessing multiple tools and panels. Quickly unite, exclude, trim, and more.

5. Drawing in perspective
New grids enable drawing accurate scenes and objects that need the look of perspective. It’s now easy to create realistic depth on a 2D surface without needing to build horizon lines and guides from scratch.

6. Even more drawing enhancements
Work faster with everyday tools. Draw behind, disregarding stacking order. Draw or place an image inside, instantly creating a clipping mask. Join paths with one keystroke, see ruler origins at the upper left, and scale symbols with nine- slice control.

7. Natural painting with the Bristle Brush
Achieve the look of watercolors and other natural paint media with characteristics of a real brush, thanks to control over bristle length, density, stiffness, and opacity.

8. Tools for web and interaction design
Illustrator artwork for the web can now be quickly brought to life using the new Flash Catalyst CS5, whereby interactive experiences can be designed in Illustrator with actions added in Flash Catalyst, without writing any code.

9. Crisp graphics for web and mobile devices
Create vector objects precisely on the file’s pixel grid for delivering pixel-aligned artwork. Generate clean, sharp raster graphics by turning on Align To Pixel Grid and using text anti-aliasing options individual text frames.

10. Roundtrip Editing with Adobe Flash Catalyst
Take Illustrator designs into Flash Catalyst and create interactive experiences without writing code. Round‐trip editing allows you to perfect your vector art in Illustrator while preserving the structure and interactivity you added in Flash Catalyst.

What’s New in Adobe InDesign CS5

InDesign CS5 lets you bring your documents to life with pages that include interactivity, motion, video, and sound, without sacrificing control over typography or design.

Built-in creative tools and an intuitive design environment let you create stunning page layouts faster and more efficiently, allowing you to deliver a broad range of documents for print, online, and mobile devices.

New collaboration tools, production features, and interactive abilities help you to complete the most complex projects quickly and accurately and to connect your audience to your projects in innovative and memorable ways.

1. Access project assets easily through the Mini Bridge panel
Bring the power of Adobe Bridge CS5 directly into InDesign with the new integrated Mini Bridge panel, giving you quick access to your Bridge Favorites and image previews without leaving InDesign.

2. Streamline object selection and editing
Convenient new ways to select and edit frames, frame content, and even frame corners.

3. Add image information automatically with Live Captions
Easily create dynamic captions from a file’s metadata.

4. Combine different page sizes in one document
Streamline production by including gatefolds, smaller-size inserts, and other nonstandard page dimensions within the same document.

5. Manage page items with more control using the all-new Layers panel
Expand top-level layers to reveal a sublayer for each object, similar to functionality in Photoshop and Illustrator.

6. Format text to span across or split into columns on the fly
Reduce frame clutter and streamline layout tasks with these two oft-requested paragraph-formatting features.

7. Manage text edits with Track Changes
Enable the new Track Changes feature in any InDesign story to identify each user’s added, deleted, or revised text.

8. Speed up production by exporting PDF in the background
Export static PDF files without interrupting production tasks.

9. Interactive animated documents without writing code
Use the new Animation panel to apply motion presets and customize settings; preview the results before exporting to SWF.

10. Create multi-state objects that respond to reader’s actions
Make any image, text frame, or other object or group appear, hide, or change its look in response to clicks and rollovers.

11. Manage FLV and MP3 files with the Media panel
Preview and place FLV files, choose poster images and video controller skins, and set time-code markers so that button actions can navigate to specific points in a video.

12. Export to SWF
Exporting your project as a SWF file for playback in Adobe Flash Player.

What’s New in Adobe Dreamweaver CS5

Creative professionals can jump-start the design process with updated CSS starter layouts and leverage enhanced CSS features for increased control and creative flexibility.

With the expanded and more powerful Live View, designers can use the CSS Styles panel to create and edit CSS without writing code.

Simplifying the page design and testing process, Dreamweaver CS5 can visually display the CSS box model, allowing designers to interact with the code, or quickly toggle CSS properties on and off, with no separate browser-based utilities required.

1. Simplified site setup
Get up and running faster by allowing Dreamweaver CS5 to prompt you when it needs additional site-specific information.

2 Enhanced CSS starter layouts
With a simplified structure, the new CSS Layouts provide a solid, standards-compliant basis on which you can build your own pages.

3. Support for PHP-based content management systems
Go beyond static HTML and build your websites on third-party content management systems. Render your pages in Live View and test individual states of your applications.

4. Custom and site-specific code hinting
If you’re a developer focused primarily on writing JavaScript or PHP code, leverage the expanded custom code-hinting for your chosen framework, either
throughout the application or on a site-by-site basis.

5. Comprehensive CSS support
Reduce the need for third-party browser-based tools to visualize the CSS box model or to troubleshoot CSS issues by remaining within the Dreamweaver CS5 environment during the entire development process.

6. Integration with Adobe BrowserLab
Test your pages in multiple browsers in Adobe BrowserLab, a new CS Live online service. View actual states of dynamic pages and applications whether deployed on the web or in local development.

What’s New in Adobe Flash CS5

A powerful new text engine, expanded support for mobile and consumer devices, and enhanced coding tools are among the new features in Flash Professional CS5.

Offering integration with Photoshop, Illustrator, InDesign, and After Effects, and creating a design workflow that extends the potential of your interactive content across media formats, Flash Professional CS5 integrates support of Adobe Flash Player, Adobe AIR, and mobile authoring, allowing you to easily and consistently deliver interactive content, advertising, and video virtually anywhere.

1. New text engine
Set and edit text with brand new capabilities including print-quality layout features and bidirectional language support. Discuss how text elements imported from InDesign via XFL maintain fidelity.

2. XML-based FLA source files
Save uncompressed projects that appear like regular folders, allowing you to easily swap out assets and work collaboratively with others.

3. Easy and powerful coding
Use code snippets to add a variety of interactive elements and attributes to your projects with ease, and use code hinting to write ActionScript code with more efficiency and precision. Integrate directly with Flash Builder for authoring, debugging, and testing.

4. Spring for Bones
Add lifelike animation properties to your projects.

5. Video improvements
Quickly and easily incorporate video, and make the video content more meaningful by tying it into your content with cue points.

6. New Deco drawing tools
Quickly add graphical elements to your projects.

7. Distribute content virtually anywhere
Use the included Packager for iPhone preview (also included in the Adobe AIR SDK) to publish your ActionScript 3.0 content as AIR applications for iPhone.

New Product: Flash Catalyst CS5

Adobe Flash Catalyst CS5 software is an approachable new interaction design tool that lets you transform static artwork from Adobe Photoshop, Illustrator, and Fireworks into fully interactive projects without writing code.

You can publish as SWF or Adobe AIR files, collaborate with developers who use Adobe Flash Builder software, and leverage the expressiveness, reach, and consistency of the Adobe Flash Platform.

Flash Catalyst is built with the designer in mind, combining an intuitive user interface and toolset that will feel familiar—similar to Photoshop, Illustrator, and Fireworks—with the expressiveness, consistency, and reach of Adobe Flash technology. The result: a feature-rich interaction design tool you can successfully use to publish SWF files without writing code.

1. Fully customizable components
Transform static content from Illustrator into functional interactive components with virtually any custom appearance.

2. Powerful layout tools
Use familiar tools and functions to adjust the layout of your design without having to learn or adapt to a new interface.

3. Roundtrip editing
Use Illustrator and Photoshop to adjust the appearance of interactive components, without damaging interactions or project structure.

4. Pages and states
Explore how basic concepts such as pages and states form the structure of interactive projects and components.

5. Smooth animated transitions
Easily define interactions that control how your content behaves when users interact with it. Use the Timelines panel to effortlessly create professional transition effects that glide smoothly across the screen.

6. Video and dynamic media
Wow your audience and incorporate high-quality video content into your project as easily as you would add artwork or a photograph.

7. Design-time data
Design and preview functional data lists and dynamically driven content by using mock data that simulates database connectivity.

8. Publish to SWF and AIR
Publish your interactive project as a finished SWF file or as a cross-platform desktop application via Adobe AIR.

9. Flash Builder integration
Open your Flash Catalyst project directly in Flash Builder and see how developers can get right to work on extending functionality while preserving the integrity of the design and interactions.

What’s New in Adobe Fireworks CS5

Improved performance, more precise control over the pixel placement of design elements, and a streamlined, accelerated workflow. Jump-start mobile projects with the correct specifications using device profiles in Adobe Device Central.

Import assets from Photoshop or Illustrator and export to PDF, HTML, CSS, or Adobe AIR.

Export your Fireworks designs in FXG format to Flash Catalyst CS5, where you can add interactivity.

1. Feature refinements
Get more work done in fewer steps. Based on feedback from users, Adobe focused this version of Fireworks on refining existing features in order to accelerate and streamline your design workflow. For example, now you can constrain object proportions, edit gradients, and adjust stroke alignment directly from the Properties panel. Also, enjoy higher quality and greater control of gradients, thanks to improved fidelity of gradients imported from Photoshop and Illustrator, a Gradient Dither feature for smoother gradients even with tighter compression settings, and a new control for swapping gradient stops.

2. UI responsiveness and performance
From launching Fireworks to opening panels to viewing context-sensitive information in the Properties panel, now you can work more smoothly, quickly, and confidently without interruption.

3. Cross-product integration
Enjoy improved mobile design workflows, including emulating your interactive designs, thanks to new integration with Adobe Device Central. Craft advanced user interfaces and interactive content using convenient workflows between Fireworks and the new Flash Catalyst CS5.

4. Document templates
Get a jump start on web, mobile, and application designs with professionally created templates included with Fireworks. Create your own design templates to reuse and share with others.

5. Type enhancements
Control and format text more easily with the enhanced capabilities of the Adobe text engine. Many new typographic features and enhancements are now part of Fireworks CS5.

6. Pixel-perfect precision
Produce designs more accurately and efficiently. Enhanced pixel precision helps ensure your designs look crisp and clean on virtually any device. Use the Snap To Pixel command to sharpen blurred edges or strokes on straight-edged vectors.

7. Vector tool enhancements
Create complex and editable vector shapes more easily with new Compound Shape tools. Quickly group multiple vector shapes as you draw, and apply nondestructive path effects such as Punch or Union.

8. Extensibility
Customize your workflows using simple JavaScript commands for batch processing.

What’s New in After Effects CS5

New native 64-bit support lets you tap more of your computer’s power to work efficiently with complex HD, 2K, and 4K projects.

Plus, innovative features—from the revolutionary new Roto Brush to dozens of subtle but important changes that streamline your workflow—enable you to create amazing motion graphics and blockbuster visual effects and deliver your work to the widest possible variety of screens.

With After Effects CS5, you can take advantage of all available RAM and processor cores to quickly craft complex 3D scenes and camera moves, work on large frames, and preview long, deeply layered composites.

1. Native 64-bit OS application
Benefit from the numerous advantages of working with a 64-bit application, including the ability to fully use all of your computer’s available memory.

2. Roto Brush
Isolate foreground and background elements in a fraction of the time of conventional rotoscoping.

3. AVC-Intra support plus expanded RED camera support
Import footage using the new AVC-Intra 50 and AVC-Intra 100 codecs, plus take advantage of expanded support for footage from RED cameras.

4. mocha for After Effects CS5 plus mocha shape
Track, mask, and perfect difficult composites with this powerful, greatly enhanced 2.5D planar motion tracker. Import shapes from mocha into After Effects using the mocha shape plug-in.

5. Auto-keyframe mode
Animate quickly by setting starting keyframes automatically.

6. Color Finesse 3 LE
Enjoy an enhanced color correction workflow with the new features in Color Finesse 3 LE

7. Color LUT support
Easily manage consistent color in your workflow by applying industry- standard color look-up tables (LUTs).

8. Digieffects FreeForm
Manipulate 2D layers into almost any shape using this popular 3D mesh warp plug-in.

9. Dozens of other enhancements
Benefit from dozens of customer-requested refinements that yield big productivity gains and smoother workflows.

10. Work with collaborative online services
Learn how to collaborate more efficiently using new Adobe CS Live online services for video professionals.

What’s New in Adobe Premiere CS5

The centerpiece of this exciting release, the Mercury Playback Engine lets yoeu work dramatically faster, even when editing complex timelines at high resolutions such as HD and 4K.

Industry-leading support for native tapeless workflows makes it possible to acquire video assets faster and with more flexibility, and expanded native format support helps ensure efficient, high-quality results with the latest formats, including RED R3D, XDCAM HD 50, AVCCAM, and AVC-Intra, as well as DSLR camera video formats.

Adobe Story, a new CS Live online service which is available separately, can accelerate production by turning your scripts into metadata-rich assets that can be used to create shot lists automatically in OnLocation.

1. Preproduction and on-set workflows
Develop and transform scripts into production-ready projects through integration with Adobe Story, a new CS Live online service*. Take advantage of the new script-to-screen workflow to accelerate on-set production, use OnLocation to import and log footage shot with tapeless cameras, and mark In and Out points in your OnLocation clips to form a preliminary rough cut when you bring them into Adobe Premiere Pro.

2. Editing workflows with Adobe Premiere Pro CS5
Accelerate performance with the new native 64-bit Mercury Playback Engine. Play back and scrub through a complex, effects-heavy sequence. Use new editing enhancements and Ultra, the new high-performance keyer, to refine a mixed-format timeline that includes RED R3D, XDCAM EX, AVC-Intra, and DVCPROHD footage, as well as 1920×1080 video shot with a Canon 5D Mark II DSLR camera. Unparalleled integration with other Adobe creative suite software and the ability to import and export Apple Final Cut Pro and Avid projects let you use the unique tools in Adobe Premiere Pro CS5 and other Adobe Creative Suite 5 Production Premium components, such as After Effects and Soundbooth, in every project.

3. Finishing and outputting engaging video experiences
Streamline client and team review and approval by taking advantage of how Adobe Premiere Pro can integrate with CS Review, another new CS Live online service. (Adobe CS Review will not be available for Adobe Premiere Pro CS5 when the software initially ships. Adobe Premiere Pro CS5 users will automatically receive access to CS Review integration when it becomes available later in 2010.) Use new output options and metadata features in Adobe Media Encoder to gain more control over your content and streamline the encoding process. See how the new multipage menu feature in Adobe Encore CS5 gives viewers a smoother way to navigate your projects. Then, use Adobe Encore CS5 to deliver a searchable web DVD that uses metadata created during production.

What’s New in Device Central CS5

Adobe Device Central CS5 software simplifies the production of content for mobile phones and consumer electronics devices.

Now with support for HTML and the latest version of Flash Player, Adobe Device Central helps developers deliver engaging experiences to millions of mobile subscribers and consumers across an extensive range of devices.

1. Test with confidence on the latest devices
Use the online device library to browse device profiles that support Flash Lite 4 and Flash Player 10.1.

2. Author mobile content accurately
Create a new document optimized for a specific mobile device with Fireworks CS5.

3. Debug ActionScript 3 code
Test your content more accurately and help ensure high-quality results with support for debugging ActionScript 3.0 code.

4. Render HTML content
Use Adobe Device Central to preview SWF/FLV files embedded in HTML files, and HTML pages in general.

5. Test content with new device features
Test SWF content that utilizes features available on newer devices, including accelerometers, multi-touch screens, and geolocation services.

6. Use community-generated device profiles
Define your own device profiles for devices that aren’t available in the library, and comment on profiles defined by others

What’s New in Adobe Soundbooth CS5

In Soundbooth CS5, you can get projects off to a fast start with access to more than 130 royalty-free Soundbooth Scores and over 10,000 sound effects.

Work more efficiently by combining Soundbooth Scores, video, dialogue, and sound effects on multiple tracks, and easily view your entire project at once, or zoom in to work on specific clips. Improved multitrack workflows make it easy to move, copy, and clean up audio clips.

1. Edit multitrack projects easily
With new track-sizing options, it’s easier to work with multitrack projects. Combine multiple tracks of dialogue, sound effects, music, and ambient background sounds in your productions while keeping your creative focus. Copy, split, and move audio clips more intuitively with key commands.

2. Tap into Resource Central for sound design
Resource Central has been enhanced for Soundbooth CS5, making it easier to find music and sound effects for your productions. The selection of royalty-free Soundbooth Scores and sound effects has been augmented, and it’s now easier to audition clips, download them, and place them into tracks.

3. Find a Soundbooth Score that’s perfect for your project
Soundbooth CS5 gives you access to over 130 scores in nearly every musical genre, as well as ambient tracks that create dramatic soundscapes for your projects. Soundbooth Scores aren’t just static audio files; their sonic parameters can be adjusted to support the emotion of a scene, and they automatically adjust their internal structure accommodate length changes.

4. Collaborate and export
Save your multitrack project as an Adobe Sound Document (ASND) file, and open it directly in Adobe Flash Professional CS5, Adobe Premiere Pro CS5, or Adobe After Effects CS5. Use the MP3 compression preview to get the results you need without having to go through a time-consuming trial-and-error process.

CS5 should be available for purchase around May 15th. You can follow the official launch at Adobe.com.

What do you think of the new features of CS5? Which one is your favorite? Will you be upgrading to CS5 when it’s released?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: H0Oa9C

We’ll use various tools and techniques to create a vintage camera from scratch, from the basic Marquee Tools (to create simple shapes) to the Brush Tool (for highlights and shadows).

The tutorial has 23 steps, and it targets users with average Photoshop knowledge.

It was created by Callum Chapman from Circle Box Creative exclusively for Webdesigner Depot readers.

Feel free to share links to your own results in the comments section below… Enjoy!

Final image:

Step 1

First thing’s first. Open up Photoshop and create a new document. I’ll use a Web Preset document at 800×600 pixels.

We’ll be referring to a source image of this Halina camera, one that I took using my iPhone.

Feel free to use it or one of any other camera—in fact, I encourage this because you’ll be able to more productively experiment with the tools and techniques that I’ll show you. The choice is yours.

Once you’ve saved the photograph, go back into Photoshop and go to File → Place. Locate your image and put it in the center of your document.

Rename the new layer (i.e. the one with the source photo on it) to something appropriate, such as “Source.” Lower the Opacity of that layer to 50%.

Step 2

Our document and source photo are set up and ready to go. Before we get into the fine detail of the camera, let’s create the main shapes of the camera to use as a guide.

Make a new layer and call it “Main Body.” Grab the Rectangular Marquee Tool and drag a rectangle over the leather part of the camera’s body, as seen below.

Fill your selection with black using the Paint Bucket Tool, making sure the “Main Body” layer is selected.

We can no longer see the camera, which is why we’re about to uncheck the visible layer of the “Main Body” layer. Once it’s unchecked, create a new layer called “Left Main Body.”

Grab the Rectangular Marquee Tool again and make a selection over the left side of the main body, and then fill it with dark gray. If you’re not sure what I’m talking about, see the images below.

Repeat this last step, this time selecting and filling the right side of the camera. Don’t forget to create a new layer!

With the visibility of all layers enabled, we should see something like this:

As with any design, this one starts off looking… well, pretty rubbish. That will change, though; don’t worry.

While holding the Command key, click on the thumbnail image of our layer “Left Main Body.” Before doing anything else, hold the Command + Shift keys and click on the thumbnail image of the “Right Main Body” layer. The outline of both items should now be selected.

Select the “Main Body” layer and hit the Delete key. This will remove unwanted areas of the main body shape. We could have just visually checked that our main body shape was right to begin with, but this way tends to be much more accurate.

Select the Polygonal Lasso Tool and, with the visibility boxes unchecked on all of our shape layers, make a selection as seen below.

Right-click and select Inverse, or go to Select → Inverse. This inverts our selection so that we can remove anything outside of our original selection, rather than inside.

Click again all of the visibility boxes next to our shape layers and one by one click on each and press the Delete key. You should end up with this:

As you can see, we now have the basic shape of our camera. The reason we did this in separate layers is so that we can be much more creative in applying textures to certain areas. For example, we will be able to apply transformed or warped textured images to just one particular area.

Step 3

Although we haven’t yet created much of the main shape of the camera, we’ll start adding texture to the main body.

I find it much easier to work on one area first and then move to the next step, rather than tackle it all at once. Head over to Bittbox and download one of these leather textures (I used the last one). Put it in your document by going to File → Place.

Shrink the texture; the easiest way to do this is by hitting Command + T and dragging the corners down while holding the Shift key to keep everything in proportion.

Holding the Command key, click on the thumbnail image next to our “Main Body” layer. Right-click and select “Select Inverse.” Click on your leather texture layer (you can rename this to “Main Body Texture”) and hit the Delete key.

Move the “Main Body Texture” layer down so that it is directly above your “Main Body” layer. You can see now why renaming your layers is important; otherwise they would get very confusing.

Go to Layer → New Adjustment Layer → Brightness/Contrast. Bring the brightness level down to -75, and the contrast up to +10. Make sure the adjustment is above your “Main Body Texture” layer, and hit Command + E on the adjustment layer to merge it down to your texture layer.

This basically means that the brightness and contrast settings will be applied only to the textured layer. Warning: after merging an adjustment layer down, there’s no readjusting it, so be sure to get it right before merging.

Place the texture in your document (again), and go to Edit → Transform → Skew. Lower one side of the texture, making sure it lines up with the angle at the bottom of the left side of our main body, as seen below.

Position your texture so that it completely covers the left side of your main body. While holding the Command key, click on the thumbnail image next to our “Left Main Body” layer to make a selection.

Right-click and click on “Select Inverse,” select our new texture layer and hit the Delete key.

After renaming the layer to “Left Main Body Texture” and moving it directly above the “Left Main Body” layer, add another Adjustment → Brightness/contrast layer, this time adjusting the brightness to -20 and the contrast to +10.

Merge the adjustment layer down to the “Left Main Body Texture” layer by hitting Command + E.

Repeat the last step, this time for the right side of the main body.

You might be thinking that the color of each side of the main body looks a bit off. Don’t worry; it will probably look much more suitable once the source photo is gone.

If it still doesn’t look right, we can touch it up later. Put all of your main body layers into a folder labeled “Main Body.” This makes things much easier to manage later on; otherwise we could end up with hundreds of unorganized layers.

Uncheck the new folder’s visibility. Now we can move on to the next step.

Step 4

The next thing we’ll start is the lens. Select the Elliptical Marquee Tool, and make a round selection over the lens.

Create a new layer, and name it “Lens Shape.” Fill your selection with light gray using the Paint Bucket Tool.

Hide the visibility of our “Lens Shape” layer, and make several more circles. Use appropriate colors to fill in each circle, and remember to make each circle on a new layer.

Call them “Lens Shape 2,” “Lens Shape 3,” etc. In total, I have five lens shape layers. Here is what it looks like with all of the lens shape layers selected, and further below with all layers selected:

Step 5

Select “Lens Layer 3″ (this is my third circle in), and drag it down to the New Layer icon in the Layer Palette. This will duplicate the layer.

Hit the Command + T combination to open up the Free Transform tool, and in the menu at the top of your window, change Width and Height to 95%.

With the new layer still selected (it should be “Lens Layer 3 copy”) go to Layer → Layer Style → Blending Options. Apply an Inner Shadow using the following settings.

Repeat the last step until you have something that looks like this:

You’ll probably have around seven to nine new layers after what we just did, so put all those copied layers and the original into a folder labeled “Lens Shape 3.”

Step 6

Hide the visibility of all of your lens layers except “Lens Shape 1.” Go to Layer → Layer Style → Blending Options, and apply the following Gradient Overlay settings:

With the same layer still selected, duplicate it (as we did earlier), and reduce the height and width to 94%. Reopen the Blending Options, and darken each of the gradient colors.

We’ve covered a lot of the shaded and highlighted areas from these two simple gradients, but adding a little extra detail would be cool.

Zoom into the lens, and using a fine soft brush (using the Brush Tool) brush around some areas, as seen below. If you have a graphics tablet, this would be a good time to use it. Make sure this step is completed in a new layer labeled “Lens Highlights.”

Lower the opacity of your new highlight layer to 65%.

Repeat the last step, this time using a dark brush and painting in any shadowed areas. Do this in a new layer labeled “Lens Shadows.” Lower this layer’s opacity to 65%, too.

With all of our layers selected, here is what we have so far:

Step 7

Put all of your lens layers into a folder labeled “Lens.”

Create a new layer and name it “Inner Lens Shadow.” While holding the Command key, click on the thumbnail image of our “Lens Shape 2″ layer, which is my dark gray lens circle.

In the new layer, go to Edit → Stroke, and use the following settings:

I used a gray that is a little darker than the original gray circle.

Step 8

Our lens is starting to look pretty good. Make another new layer and call it “Lens Reflection” (all new lens layers should be put in the “Lens” folder).

Grab a soft brush and use a light-yellow color (I used #fffae5). Paint over some of the lens, as seen below.

Go to Filter → Blur → Gaussian Blur, and blur by about 10 pixels.

Change the Blending Mode of the layer to Overlay, and lower the opacity to 40%.

Step 9

Create yet another new layer (I know, there are

a lot) and name it “Flare.” Reselect the outer shape of “Lens Shape 2″ by holding the Command key and clicking on the thumbnail image of the layer, and fill the selection with pure black in the new layer.

Go to Filter → Render → Lens Flare, and use the following settings:

Change the Blending Mode to Overlay, and lower the opacity to 30%. Although this doesn’t make much of a difference, it adds that all-important detail.

Step 10

All we want to do now is add a little more texture to our lens. Create another new layer, and place in one of these textures. Scale the texture down, and place it over your lens.

Select the outline of the layer “Lens Shape 1″ (you know how to do that by now), and select inverse. Hit Delete on your textured layer.

Change the Blending Mode to Overlay, and lower the opacity to 50%.

If you feel the urge, you can repeat this step using a different texture. And you can rub some areas out using a soft eraser brush.

Step 11

Select the layer “Lens Shape 1,” and open up the Blending Options by going to Layer → Layer Style → Blending Options. Apply the following drop-shadow:

Download one of these textures (I used the last one), and insert it into your document.

Position the texture beneath your layer “Lens Shape 5″ (this is my actual lens, the glass bit).

Select the layer “Lens Shape 5,” select Inverse and hit Delete on your new texture layer (which I named “Bubble Texture”). Change the layer’s Blending Mode to Overlay.

After positioning the bubble texture over our “Lens Shape 5″ layer, go to Layer → New Adjustment Layer → Hue/Saturation.

Increase the Hue setting to +180, and hit Command + E to merge the hue/saturation layer with our bubble texture layer.

Lower the opacity to 65%. Our lens is complete!

Step 12

We’re getting somewhere now! Let’s move on to the lower area of our camera.

Using the same technique we used earlier to get the main body shape (using the Rectangular Marquee Tool and Polygonal Marquee Tool), select three different layers: “Left Bottom,” “Main Bottom” and “Right Bottom.”

Place these layers in a folder called “Bottom.”

Make sure your layers are arranged correctly, and place them beneath your lens folder.

Step 13

Open up the Blending Options for your “Main Bottom” layer. Apply the following Gradient Overlay settings:

Repeat this step twice, once for each bottom side. Use the colors from your original source photo for maximum detail.

Step 14

Create a new layer and place one of these textures into it. Place the texture over your bottom layers, like so:

While holding the Command key, select the outline of one of your bottom shapes, and then holding the Shift + Command key, click on the remaining two shapes.

This should select all of the shapes’ outlines, leaving you with this:

Go to Select → Inverse, and hit the Delete key while your texture layer is selected.

Change the texture’s Blending Mode to Overlay. Now we’re done with the bottom section of our camera.

Step 15

This is what we have so far:

The camera is pretty obvious by now, which is good because we’ve already built a huge number of layers, the total file size coming in at over 4.3 MB.

From what we have already done, you have most of the skills you’ll need for the rest of this tutorial, so I won’t go into too much detail from here on in.

Create a new folder and call it “Viewfinder.” In new layers, create the following shapes using the selection of Marquee Tools, which we’ve used several times earlier.

Use the Polygonal Lasso Tool and the Select Inverse feature to cut out the proper shapes from our existing rectangles.

Step 16

Using the same technique that we used for the circles in the lens, create a viewfinder.

This is easier than it sounds: just use the Rectangular Marquee Tool to create several rectangles, and fill them in with different colors on different layers.

Step 17

Apply some Gradient Overlays to your “Main Viewfinder,” “Left Viewfinder” and “Right Viewfinder” layers.

Step 18

Using the same texture that we used earlier for the bottom of the camera, add some texture to the viewfinder area. Make sure to use the exact same settings.

Use the Brush Tool on a new layer to create highlights in your texture.

Step 19

Using the techniques you learned when making the camera lens, spice up the viewfinder with gradients, shadows and the Brush Tool. I used Inner Shadows on every rectangle, as well as strokes.

I used subtle gradients, the Brush Tool (to add some reflection on both sides of the viewfinder) and a lens flare.

To make the circle a little dirtier, I added 6-pixels worth of noise by going to Filter → Noise → Add Noise.

Step 20

Using the Marquee Tools, draw the remaining shapes of our camera. Remember to do each shape on a different layer, and name them appropriately.

Step 21

With our shapes done, it’s time to add gradients and textures to the main body (we’ll do the buttons afterwards). Use the same techniques that we used earlier.

Step 22

Using the Brush Tool with a soft brush selected, add highlights and shadows to our newly textured shapes.

Set the Blending Modes of all of the shadow and highlight layers to Overlay (the shadows should be in black, the highlights in white).

The first screenshot is what you’ll see after applying shadows, the second after the shadows and highlights.

Step 23

We’re almost there! Apply some Gradient Overlays to our two buttons.

Use the same technique that we’ve used several times now to add lighting effects to your buttons (i.e. the Brush Tool technique).

Add some texture to your buttons to finish things off.

Conclusion

After all that hard work, we’ve finally finished! We have one pretty detailed camera that can be used as a stock image, as part of a photo manipulation or even as an icon.

Experiment with the Hue and Color Balances (you can see my modifications with the color settings further below).

Compiled exclusively for WDD by Callum Chapman, a freelance designer from Cambridge, UK. He is the creative mind behind Circlebox Creative and Circlebox Blog, and can often be found writing for design related blogs.

What do you think of this tutorial? Feel free to share your own results below…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: H0Oa9C

In this post we have compiled a list of great resources, that teach you how to create your own iPad icons, as well as a collection of ready made icons and PSDs.

To download the files, please click on the preview image to go to the source site and remember to check the terms of use before using them in your projects.

If you know of any other great iPad freebies, please add them in the comments section below and we’ll include them in this post when appropriate.

Enjoy…

iPad Tutorials

Callum Chapman’s iPad Photoshop Tutorial

In this tutorial, Callum explains the process of designing the Apple iPad from scratch in Photoshop using shape tools, layer styles and blending modes. You will also use the brush tool to create detailed chrome and lighting effects.

Chris Spooner’s iPad Photoshop Tutorial

Chris Spooner also creates an Apple iPad from scratch in Photoshop using simple modification tools, the pencil tool and transformation tools.

iPad Icons

Seeing how many great iPad icons are already available to download for free across the web is pretty amazing. Here is a small collection that will surely grow.

Enthusiastik iPad icons (2 icons; PNG format)

Chris Spooner iPad Icon Set (1 icon; PSD, PNG and ICN formats)

KR Design iPad Icon (2 icons; PNG format)

Sudhithxavier iPad Icon (1 icon; PNG format)

Chris Noakes iPad Icon (1 icon; PNG, ICO and ICN formats)

Adidadidu iPad Icons (18 icons; PNG, ICO and ICN formats)

TinyLab iPad Icon (1 icon; ICN format)

Bisiobisio iPad Icon (1 icon; PNG, ICO and ICN formats)

Santieldarlaine iPad Icon (1 icon; PNG format)

iPad PSD Documents

If you’re looking for something a little easier to customize, try out these iPad PSD documents.

Kevin Anderson iPad PSD

This PSD is completely editable. Every object was created using vector masks, meaning you can scale it up or down without any loss of quality.

Mppagano iPad PSD

This huge and incredibly detailed iPad PSD comes in at a whopping 2400 x 2400 pixels, large enough for almost any design project.

Geoff Teehan iPad GUI PSD

This one is for the application developers out there. The PSD was constructed using vectors, so it is fully editable and scalable. The workable screen design is formatted to 768 x 1024, so anything you design in the Photoshop file can easily be brought over to the SDK. This is a beauty of a document, coming in at around 24 MB. Start designing those apps!

Compiled exclusively for WDD by Callum Chapman, a freelance designer from Cambridge, UK. He is the creative mind behind Circlebox Creative and Circlebox Blog, and can often be found writing for design related blogs.

Feel free to share other iPad design resources below…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: H0Oa9C

On February 10th, 2010, Photoshop turns twenty. To mark this anniversary, we’ve come up with an article that takes you through the evolution of Photoshop from its modest beginnings as a bundled program sold with scanners to its current version.

For each version and major feature listed, we couldn’t help but think “did Photoshop ever exist without that feature?”.

Some of the minor details are fun too, such as the one-liner Easter Eggs that Photoshop developers hid in some versions and the fact that the most current versions of Adobe Photoshop CS are equipped with anti-counterfeiting measures for multiple world currencies.

Please join us in thanking the Knolls and Adobe for making all of our lives more awesome, every day.

Photoshop: Origins

One of the most impressive things about the company is the fact that one gifted family, consisting of an engineering prof, a PHD engineering student, and a talented special effects whiz working at Industrial Light and Magic came up with the core idea of Photoshop.

Thomas Knoll, the PHD student, is still heavily involved with Photoshop years later.

Glen Knoll was a college professor with two sons and two hobbies; computers and photography.

He had a darkroom in his basement, and an Apple II Plus that he was allowed to bring home from work.

Thomas Knoll adopted his father’s photography habit throughout high school, while his brother, John Knoll, purchased one of the first Macs available to the public.

Fast forward to 1987: Thomas Knoll was a PHD student studying Engineering at the University of Michigan. His brother was working at Industrial Light and Magic.

Thomas Knoll wrote a subroutine for a program to translate monochrome images on his monitor to grayscale.

The successful subroutine led Knoll to create more and very soon he had a number of processes for achieving photographic effects on digital images.

After his brother John saw what Thomas was doing, he recommended that Thomas turn what he was doing into a full-featured image editor.

The combination of Thomas’ programming abilities with John’s pragmatic design background led to a collaboration between the two brothers to develop more processes and improve on the initial application.

Even though the process led to interruption in Thomas’ thesis work, the brothers released “Image Pro” in 1988.

John suggested that they begin to sell Image Pro as an application.

Within six months, the brothers had a partnership with a company that manufactured scanners, Barneyscan.

They purchased 200 copies of the program to ship with their scanners.

They called on Supermac and Aldus, but were turned away at both, a move that Aldus would come to seriously regret.

Shortly after, the Knoll brothers struck gold when they won over Adobe management with their product, and formed a licensing partnership with Adobe that was to launch their software and Adobe into the stratosphere.

In February of 1990, Adobe 1.0 was released.

This video, shot in January of 2010, is a great interview with John Knoll about the early days of Photoshop:

Photoshop Through the Years; Version Changes

We’ve included major changes within each version and some minor ones. This is meant to be a fun stroll down memory lane rather than a complete version catalogue.

If you have a particular version change that got your hackles up or a feature that you’d to mention, feel free to add it to the comments section.

1990 – Photoshop 1.0

John Knoll, Thomas’ brother, wrote “special effects” for the program which were frowned upon by Adobe staff as being too “gimmicky”. Thomas and John found a way to sneak them into Photoshop as plugins, giving rise to what is now a huge cottage industry in add-ons to the popular program.

John and Adobe staff constantly pushed Thomas to make improvements until the final product shipped.

The first version of the Photoshop splash screen features just four Photoshop programmers. In subsequent versions, more and more names are added to the list. In more recent versions, a limited number of Adobe VIP’s appear in the splash screen.

1991 – Photoshop 2.0

Photoshop 2.0 included the Path feature, which allowed users to trim around an object easily and to save that path for future use. This feature was added by a second engineer, Mark Hamburg, that Adobe hired to work on the application.

Up until 2.0, Thomas Knoll was the only engineer working on it. Adobe called Mark the “Path Man”. 2.0 also featured rasterizing for Illustrator files, support for CMYK colour which led to widespread Photoshop adoption by the printing industry, and the Pen.

Photoshop 2.0 also required 4 megabytes of RAM to run rather than 2, which really helped program stability.

Photoshop 2.5, released in 1992, was notable for being the first release for the Windows operating systems.The code had to be completely changed in order to accomplish this goal which meant that the first effort was slow going.

16-bit file support and palettes were added to this version as well. The initial Windows release had a “memory bug”, a bug which actually saw Mark Hamburg offer to make house calls. The patched version was released as 2.5.1. Filters got their own menu in 2.5 as well. The workspace shot below is of Photoshop 2.5 for the Mac.

1994 – Photoshop 3.0

The big story for Adobe Photoshop 3.0 was layers. Layers were and are a lifesaver for any marginally complex design.

Prior to their introduction, designers would save different versions of designs so that they could go back and grab them if needed; layers made this practice redundant.

Layers are individual slices of the image that go together to make the final “sandwich” of the image. Different images, such as those used in the image above in the 3.0 splash screen, are assigned their own layers, making it easy to work on those images without tampering with other areas of the image.

Thomas Knoll, the original creator of the program, was responsible for their development. Other engineers made improvements in the program’s performance with Power Mac chips and bringing the Windows version up to the same level as the Mac version. Tabbed palettes also had their debut in 3.0.

Adobe engineers included Adobe Transient Witticisms (ATW) with this version. They were little Easter Egg funny one-liners that would appear only when you pressed obscure combinations of keys.

1996 – Photoshop 4.0

Adjustment layers and macros were the two most notable features of Photoshop 4.0.

Adjustment layers allow the designer to apply one effect to a group of layers. Macros, or actions in Photoshop speak, allow you to map a series of commands to one command. This allows you to perform the same operation in much less time if you have a bunch of images to work on.

The most important change to 4.0 was the unification of the user interface with other Adobe products, a feature which Adobe has stayed consistent with right up to present-day incarnations of the program. This meant a less steep learning curve for Adobe products, a blessing for those who got their start with Photoshop 4.0.

Loyal users of Photoshop were not amused with the redesign, the common question from the community being “Why did you break Photoshop?”.

1998 – Photoshop 5.0

The two most important features released with 5.0 were editable type and the ability to undo actions multiple times in the “History” palette.

Previous versions of Photoshop allowed text to be added, but the fuzzy rasterized type didn’t make for pretty magazine mastheads or decent web menus. This was a huge step forward. Multiple undos via the History palette were very helpful, especially since designers were starting to use the new Adobe tools for increasingly complex designs.

Color Management made its debut with 5.0. Like other major changes to Photoshop, it was greeted with equal parts of praise and condemnation. It allowed colors to be managed natively within the application rather than relying on third-party tools that had been used, a huge improvement.

However, it also automatically converted the colors when opening files, a “feature” that engineers quickly eliminated after multiple user complaints. The magnetic lasso tool debuted in 5.0, making selecting areas of an image to work on much easier.

1999 – Photoshop 5.5

Photoshop 5.5 featured the huge time saver, “Save For Web”. This feature allows those who choose it to save the image in a preset specifically designed for web use which allows the user to adjust image quality to achieve a smaller image.

Version 5.0 had failed to take the Web into account with all of its other major feature changes on the table. It was also bundled with ImageReady, a standalone program that was purpose-built to edit web graphics.

Most of the features of ImageReady were later incorporated into the full version of Photoshop and the idea of a simpler program was reborn eventually in the form of Photoshop Elements.

2000 – Photoshop 6.0

The layer styles panel made working with layers even easier in Photoshop 6. Vector shapes were also added in this release; the ability to draw vector shapes such as arrows into a bitmap was lauded by users.

There was also a new custom shapes palette that allowed the user to draw using vector shapes rather than just using lines. Text could also now be typed directly onto a picture, rather than being typed first into a text box.

Multi-layer functions made their first appearance with version 6.0. The Blending Options dialogue was also introduced which made blending various elements of an image much easier. 6.0 separated the crop tool from the marquee tool, making it that much easier to get to this commonly used command.

2001 – Photoshop Elements

With the increasing complexity of the tools available to users, Photoshop was risking losing a significant market share that didn’t understand or need some of its more advanced tools.

In order to combat this, they released Photoshop Elements in 2001. The new product was a success, and designers continue to recommend it to clients for simple image resizing and other non-design tasks.

While its current interface, shown below, isn’t intuitive for those trained in traditional Photoshop, it is highly usable and labeled clearly for the average user. If there are any problems with it in terms of functionality, the simple answer is to upgrade to the full-featured Photoshop.

2002 – Photoshop 7.0

Version 7.0 introduced the healing brush and text that was fully vector-based. More importantly to veteran users, it introduced a new file browser that let designers easily pore through folders to find the graphics that they wanted.

Files within a folder could be renamed using Batch Rename, plus a bunch of other helpful commands that made working with a high volume of files much easier.

Workspaces could also be created and saved, allowing you to save your file locations and groups for future use.

The brush palette also featured a number of changes, including the new healing brush tool, patch tool, and the ability to create custom brushes. Spell check and a find/replace feature rounded out the updates to the text tool.

A number of enhancements were also included for web use, including the addition of rollover effects for images and a web gallery feature.

One of the most important upgrades was under the hood; 7.0 was optimized for use with Mac OS X, virtually eliminating crashes in the middle of working on large files. The tool presets palette let users program presets for commonly performed tasks, increasing efficiency.

2003 – Photoshop CS

Photoshop CS was the first to employ the CDS (counterfeit deterrence system) which recognized and refused to allow duplication of paper currency.

Scripting support for various web languages, including JavaScript, was also new to this release.

Layer groups were introduced with this version, which allowed various layers to be grouped together for effects to be applied to some and not others.

Improvements to the File Browser made images easier to work with, and the 16-bit and better large file support made CS much easier to work with for designers who constantly worked with larger images and photographers.

2005 – Photoshop CS2

The red eye removal tool, previously exclusive to Elements, was popular enough to make an appearance in the core version of Photoshop. Smudging options and the ability to select multiple layers also added to the functionality of Photoshop.

The Vanishing Point tool allowed users to edit images in perspective. The largest moment of panic when upgrading to PS2 came for most when they tried to find the Paint Bucket tool, which had been classified under the Gradient tool. There were other significant changes to the UI that prompted one writer to put out this “Where’s My Stuff?” column.

Layers and the layers palette were other areas of note. The “links” column was removed because CS2 included a link button rather than the small chains beside each layer. The “Smart Object” feature was introduced, which allows the user to scale a layer up without significant loss of quality.

2007 – Photoshop CS3

A faster load was probably the most noticeable feature of this 2007 release. It included fine tuning to a number of its existing tools rather than focusing on new ones.

The most notable new feature was graphic optimization for mobile devices, a feature which many web designers focusing on mobile design were thankful for. This version also saw significant feature updates to Adobe Camera RAW, a Quick Select tool, alterations to core commands like Brightness and Contrast and Black and White conversion.

CS3 shipped in Standard and Extended editions. The Extended version was intended for high end video and scientific users. Improved performance for Intel-based Macs significantly improved the speed of Photoshop, while Windows users also enjoyed performance upgrades. The new Quick Selection tool put the rest of the selection tools in Photoshop to shame with easy object selection with one or two strokes.

Cloning became easier in CS3 with the birth of the Clone Source palette which increased the options available to the Clone Stamp tool in an easily accessible palette.

2008 – Photoshop CS4

The smoother pan and zoom allowed for fast drill down on the areas of an image that you wanted to look at. Prior to this, there was a lag time of a few seconds (depending on your system) if you wanted to zoom in or out on an image.

The Masks and Adjustments panel was added, making working with masks easier. CS 4 also dealt with edges on masks more effectively. Colour correction took a huge step forward with this release.

The user interface was significantly simplified in CS4. The support of tabbed documents made it much easier to use and the main tools were added to the title bar for easier access. Quick access for common actions was made available in the panel area.

Where Are The Knolls Now?

Thomas Knoll
Thomas was the lead developer of Photoshop right up until CS 4. He now leads up the Camera Raw plugin for Photoshop, which allows Photoshop to develop a smooth handshake between different models of camera raw image formats.

John Knoll
John is still employed by Industrial Light and Magic as a Visual Effects Supervisor. He was the Visual Effects Supervisors for the recent efforts on the first three Star Wars prequel films. He also supervised work on two Star Trek movies, Star Trek episodes, and the Pirates of the Caribbean movies.

Glenn Knoll
Their father is a teacher at the University of Michigan in the Engineering Department.

Let’s all get together to wish Photoshop a Happy Birthday!

Resources

• From Darkroom to Desktop – How Photoshop Came to Light
  Derrick Storyje
• Guidebook Gallery
  Photoshop Section
• 10 Years of Photoshop
  by Jeff Schewe, the artist who designed most of their splash screens.

Written and compiled exclusively for WDD by Angela West.

How has Photoshop impacted your design career over the years? Share your experiences and let us know which version you first cut your teeth on.

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: H0Oa9C

You’ll find them accompanying many different styles. They’re handy effects for web designers because they’re attractive, useful and easy to create with any graphics program. But they have a dark side: they’re frequently abused.

Using amateurish drop-shadows or gradients is almost as bad as affixing a scarlet letter to your shirt to let the world know you’re a beginner or a hack. Even subtle, barely noticeable mistakes can create tensions that undermine otherwise beautiful and effective designs.

In this article, we’ll look at what drop-shadows and gradients do, we’ll talk about how to use them effectively and we’ll look at some examples of mistakes and how to fix them.

What Do Drop-Shadows and Gradients Do?

The job of a web designer is to create patterns of color for glowing two-dimensional screens. (There are a few exceptions to this: websites can be viewed on, say, a Kindle screen, which doesn’t glow; and websites can be printed out on paper.) These screens do not reflect the real world; they’re not even very much like the real world. For this reason, we have no real imperative to make the patterns on our websites bear any relationship to objects in the three-dimensional world we live in.

Operating systems like Unix and DOS have an interface that is nothing but colored text on a screen. Others, like Windows and Mac OS X, are filled with the illusions of real objects. OS X, for instance, has a dock that looks like a table with a shiny surface that recedes in the distance, a menu bar whose beveled edges make it look like it bulges out slightly, and scroll bars that appear to have translucent lozenges.

All of these effects are metaphors. They treat certain elements that we can interact with on screen as though they were three-dimensional objects that interact with light sources in the way that objects in the non-digital world do. It’s a funny thing to do, in a way: all of these light sources and edges and shapes are pure fantasy. Because the objects on the screen are imaginary, why should we relate them to the objects in the real world?

The illusion of space connects the imaginary to a world we are comfortable living in.

The most important reason why we relate imaginary objects to real-world ones is that we are experts at interacting with objects in our three-dimensional world. We have experience in dealing with three-dimensional objects, and we have accumulated knowledge of the visual code that tells us about the relationships of objects to each other in space.

It’s partially because the feat of interpreting light is so remarkable that we take such pleasure in illusion, or in creating the appearance of objects. We are often more engaged by dramatically life-like paintings of common objects like houses and apples than we are by the objects themselves. We humans have created drawings for thousands of years that are intended to present the ideas of objects. Illusory lozenges and tables on the screen are nothing but the most recent manifestation of this long tradition.

There’s more to it than pleasure, though. Shape and position give us information about how objects relate to each other. The long vertical lozenge shape of the scroll bar in the Safari window, for instance, creates the illusion that it sits “higher,” or closer, to me than the elements surrounding it. This gives it greater importance in the design, which is appropriate because the scroll bar is an essential interface element for navigating the page.

Visual metaphors create perceived affordance.

By appearing as an object, the scroll bar creates “perceived affordance.” That is, it links itself by way of metaphor to the properties of real objects that lend themselves to particular uses. A beveled button on a web page, for instance, communicates that it affords pressing. We can make anything on a page clickable, but associating a clickable element with the image of something pressable suggests its function in a clear, obvious and even pleasing way.

Drop-shadows and gradients are basic tools for creating the illusion of space.

Drop-shadows and gradients are two tools that help create the illusion of three-dimensionality and suggest the spatial relationships of objects on the page. When done well, this three-dimensional information makes a design more beautiful and more understandable.

In the real world, drop-shadows are created when an object blocks a light source from striking a surface that is behind it. This is one of the reasons why people say that drop-shadows make two-dimensional designs “pop”: because they make objects appear to stick out from, or float above, other elements.

Gradients appear when one part of an object is closer to a light source than another part. As a result, the closer part appears lighter, and the farther part appears darker. (Gradients get more complex, of course, when multiple light sources interact or when light sources have different colors.)

So, by mimicking the effects of light in the real world, drop-shadows and gradients communicate information about metaphorical objects, imaginary light sources and their relationships.

How To Use Drop-Shadows and Gradients Effectively

Here is one possibility: don’t use drop-shadows or gradients at all.

I mean this, seriously. This is the surest way to avoid drop-shadow and gradient mistakes, and the option should always be considered.

Because tossing drop-shadows on random objects is so easy, they can be an excuse to avoid simpler, better solutions to problems. For bits of text that need to be more prominent, for example, designers will often neglect color, size, weight of the type and many other elements in favor of a drop-shadow.

Similarly, designers often use gradients to make a field of color seem less boring, without figuring out why the overall composition is not dynamic.

If you’re working on a comp for a website, save three-dimensional touches such as drop-shadows and gradients for the end, if at all possible. Use spacing, placement and color to make the design effective before adding the final layer of polish. If you focus on making your designs work without these tricks, you may find that you don’t need them as often, and that they are more effective when you do use them.

Before you plop in a drop-shadow or a gradient, ask yourself, “Is a three-dimensional metaphor necessary for this design?” Am I using it to add useful information about the way objects are related or as an effective component of a sound aesthetic approach, or am I using it as an excuse?”

The Subtler, the Better

For drop-shadows, almost never use Photoshop’s default settings. Photoshop’s default drop-shadow is very dark and is cast to the lower-right corner of an object (the default global light source being 120°, in the upper-left).

Shadows tell you about the light in your environment. Suppose you’re in a dark room with no windows, and you turn on a flashlight. Any object that you shine it on will cast a shadow that’s almost black. That’s because the object is blocking light from the only light source, meaning that no other light is coming from anywhere else to brighten that area.

Now, the shadow won’t be completely black because of the reflected light. Some of the light from your flashlight will bounce off the walls and hit the shadowed area from a direction that’s not blocked by the object. And if you turn on a lamp in another corner of the room, the shadow will brighten considerably. The object will cast a second shadow: the new shadow will appear where the light from the lamp is blocked but will be filled with the light from the flashlight, while the area of the first shadow will still be blocked by the light from the flashlight but will be filled with the light from the lamp.

When we add drop-shadows to our designs, we suggest an imaginary environment for our web page. Dark, hard-edged drop-shadows suggest a dark room with a single light source. Light, soft-edged drop-shadows suggest a room rich with diffuse light.

A well-lit room is the most comfortable environment for users, because it is similar to the kind of environment where we use our computers: an office or study. Unless we deliberately want to avoid that comfort zone, we should bring the drop-shadow settings in Photoshop way down from their defaults. Bring the opacity down to 30 or 40%, or even lower.

Also, keep things simple so that people understand the metaphor without thinking about it. A light source at 120° does not makes much sense. Mac OS X, for instance, puts its light source at 90°, or straight above, which seems more logical. I like to make it even simpler and put the light source directly perpendicular to the screen. To do this, just bring the distance setting on your drop-shadow to zero (this represents the distance from the object that casts the drop-shadow to the object beneath it). At this point, global light doesn’t matter: it’s simply as if a big diffuse light source is coming from behind the user to illuminate the design.

This effect is very common in “trompe-l’œil” designs, the most common of which features the background image or frame of a desk surface, as if one were looking at it from straight above. Film directors such as Alfred Hitchcock, Martin Scorcese and Wes Anderson employ the same effect for their signature God’s-eye-view shots. Such web designs have a kind of effortless comprehensibility, and maintaining consistency across a design becomes easier for the designer.

If you’ve brought the distance setting down to 0 and the opacity down to about 30%, you’re at a good starting point for a drop-shadow. Play around with the size to change how far the surface of the object appears to be from the background on which it sits. Setting the size to 1 pixel, for example, gives you a beautiful effect that’s almost invisible but quite pleasing. Designer Dan Cederholm has made small, simple effects like this an integral part of his style (as demonstrated in his seminal A List Apart article on “Mountaintop Corners“).

You can certainly bring the opacity up if the effect is invisible, but starting subtle and then dialing it up is much better than the opposite. The effect should not be the slightest bit more overt than it needs to be.

For gradients, Photoshop has a lot of fancy defaults. These may have some good uses, but they certainly have unlimited poor uses, so steering clear of them is usually wise.

Instead, select the default black-to-white gradient. Then select both the black and the white and make them both the base color of your element. Now that you have a base, pick either the dark side or the light side and adjust it to be just slightly darker or lighter. Again, the subtler, the better. (Some of the best gradients I’ve come across I had to verify with the eyedropper tool in Photoshop to make sure they were there at all!)

The greater the contrast between the light and dark, the rounder the surface will appear. For some things, such as navigation menus and buttons, some roundness is appropriate. But for objects that should appear flat, keep the contrast low.

And remember, the lighter side should face the direction of your light source.

This kind of gradient is wonderful because it mimics the gradients we see around us all the time. Nothing in the real world is truly a single color field, because it always has some kind of relationship to a light source. Look carefully at the pages in a book or at the ceiling around your overhead light: you’ll find gradients everywhere.

Examples of Mistakes and How to Fix Them

The web has many obviously ugly gradients, but these are not usually done by professional designers. Rather than show egregious mistakes, I’ll illustrate a few ways in which subtle errors can create tensions in otherwise excellent designs.

Uniform Shadows for Overlapping Objects

Overlapping objects imply a difference in their distance from you (determined partly by their thickness). Designers, though, frequently use identical drop-shadows for overlapping objects. So, the information conveyed by the drop-shadows conflicts with the information conveyed by the overlap, undermining the illusion of dimensionality.

Seeing conflicts such as these makes me uneasy, and the more I focus on them, the more my head hurts. Users should take pleasure in your design, not feel pain!

You can read more about this issue in “Build a Better Drop-Shadow,” a guide by Jacci Howard Bear on About.com.

Abrupt Edges

The corners of real drop-shadows wouldn’t have hard edges unless they had absolutely no reflected light—which would be a very unusual situation. Rather, their corners are usually rounded by the rays of light that creep around them.

Here’s a drop-shadow with an unrealistically hard edge:

This otherwise lovely design has almost no dimensional illusion anywhere but has a drop-shadow along the right sidebar. The designer perhaps wanted to lower the sidebar’s hierarchy on the page, an effect that its blue background helps achieve. Not only is it unnecessarily dark, though, but the implausibly hard edge stares the visitor in the face.

At the bottom of the sidebar, you can see a rounded transition, where the designer has created a more plausible effect. But you can see why he didn’t repeat it at the top, because it would jar with the clean horizontal line set by the well-aligned top elements. Rather than demand the realism of this rounded transition, let’s fix it by toning down the drop-shadow as much as possible.

Here, I have made the drop-shadow so light that it does little more than suggest it is sitting farther back. Because it’s so light, the clean line of transition isn’t ugly or distracting.

What the heck is going on behind that object?

Sometimes, a drop-shadow goes nuts for no obvious reason, as with the blue box surrounding the W3C logo below.

Why is the drop-shadow so far back from the object, and so rounded? The more I try to understand the story being told by this drop-shadow, the more confused I get. My guess is that the designer wanted to give more prominence and weight to the logo, which the drop-shadow helps accomplish, but it disrupts the harmony of the page so much that it’s not worth it.

Don’t let your gradients suggest different light sources.

In this otherwise excellent design for WolframAlpha, objects on the page have gradients ranging from white to pale orange. The problem is that the gradient in the header region has white at the top, implying light from above, while the page elements lower down have white at the bottom, implying light from below.

You could argue that I’m over-thinking this, that gradients don’t have to match up with light sources. That’s possible, but subtle gradients like these have an inherent metaphorical relationship to the gradients we see in the real world. Let’s switch the direction of the gradients lower down on the page so that they imply a light source from above:

And we get light source harmony.

Ultimately, you’re free to do as you please.

Because the objects on a web page relate to real objects only by metaphor, their effectiveness is essentially subjective. The connection between an image of a button and an actual button has no reality beyond the mind of the user.

We designers are not required to make our metaphors consistent with reality, but being thoughtful and careful about the many levels of communication in a design helps us make our websites more harmonious.

And our care and consistency helps make the user’s experience of the website comfortable and even delightful.

Written exclusively for WDD by Nate Eagle. He studied philosophy in college, an education that prepared him perfectly to design and develop web pages for PBS KIDS. You can read more from him and his PBS co-workers at Design.PBS.

Do you think this level of detail is important when designing drop-shadows and gradients? Do you have your own pet peeves about how drop-shadows and gradients are used?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: H0Oa9C