Photoshop

CMX Masterpiece Photo Collection 25: Simplicity
Reader Level: Reader Level

No doubt, these are very complicated times in our world. We can't possibly control everything around us, so when stress is taking over, why not take some time out to enjoy the simpler things in life? Following are some images that are calming, peaceful and simple.

This collection includes ten high resolution images that can be used for print or web work.

Maintaining Transparency and Anti-Aliasing Between Fireworks and Photoshop Free!
Reader Level: Reader Level

In the wonderful world of web design, there are two main graphic camps - Fireworks users and Photoshop users. This article isn't so much about the different camps - there are tons of articles out there on that topic - but more so on the reality that sometimes - maybe even often - a designer either has to work with both applications, or at least has to prep artwork to go from Fireworks to Photoshop.

Yes, this is the part of the true, heart-wrenching and inspiring tale of Fireworks conversion. It's happening, but slowly, one designer at a time . . .

Alternative Background Masks in Photoshop
Reader Level: Reader Level

So you've mastered removing backgrounds with a mask, huh? Here's a variation that will allow you to add some unique blending and layer effects in Photoshop.

Photoshop CS5 Mixer Brush Experiment 1 Free!
Reader Level: Reader Level

Have you checked out the new Mixer Brush in Photoshop CS5? I happen to love it, but I'm no painter, so I need a little help. Still, my aim isn't to make a photographic painting. Instead, I want to use a photo as a base for a more artistic approach.

In this video, I'll show you one way to start experimenting with painting from photographs using this wonderful new tool in Photoshop CS5.

Approximate download size: 47MB

CMX Masterpiece Photo Collection 14: The Adventures of Sherlock Holmes
Reader Level: Reader Level

Close-up photography is one of my favorite types of shooting. The camera lens can zoom in and focus on details that the human eye is not equipped to see. Plus, a simple image that fills the entire frame can be quite dramatic. Often, I will go out on a shoot with macro/close-up photography as my project of the day and come home with some incredible surprises.

This collection contains ten high resolution images that you can use in your web or print work.

Approximate download size: 54MB

Spikey 3D Ball in Photoshop CS4 Extended Free!
Reader Level: Reader Level

So, you've probably seen some slick stuff you can do in Photoshop CS4 Extended with 3D objects. You may have seen someone put a car from Google Warehouse into a parking lot (yawn), or even a 3D display case into a store (double yawn). Perhaps you've seen some goofball create a fiery soap bubble entirely in 3D with Photoshop (seriously - who think of these things??).

But now you are going to see the true power of 3D in Photoshop; random junk! Yes, follow along as I show you how to create a spikey blog thing that defies other description (try as I might).

Approximate download size: 6MB

Photoshop CS4 New Features - Clone Stamp Free!
Reader Level: Reader Level

Need to manipulate campaign photos? Want to drum up some sympathy for your favorite cause or movement? Well, you've come to the right place. The new clone stamp features in Photoshop CS4 Extended may just be cool enough to get some positive light for once. The public at large will be more than happy to suspend belief while looking at your masterful clone jobs!

Photoshop CS4 - Spring-Loaded Tools
Reader Level: Reader Level

BOING!!! Come check out one of the neatest UI enhancements in Photoshop CS4!

Photoshop CS4 New Features - Content Aware Scaling Free!
Reader Level: Reader Level

Cropping is for sissies. Get you some manly scaling with Photoshop CS4's new Content Aware Scaling!

Experimenting in Photoshop - Part 1 Free!
Reader Level: Reader Level

You seriously don't want to read this article. It's got no pictures, and has some touchy-feely stuff about Photoshop and how to use it. You won't get any shortcuts or actions, and there's not one word about HDR or painting with light.

What it's got is some very esoteric nonsense about experimenting with your favorite pixel pusher. You probably won't enjoy learning about how to make Photoshop an extension of your creativity, nor would you want any insights that will speed up your work.

Nope. I wouldn't bother, if I were you. I'm sure you'll do just fine following the crowds.

Heh...

The Experimenting in Photoshop Series:
Experimenting in Photoshop - Part 1
Experimenting in Photoshop - Part 2: Basic Filter Fun

Digital Photography - Home Studio DIY Lights
Reader Level: Reader Level

So, you're ready to go get some lights for your home photography studio. Find out about the options available to the intrepid DIYer, from the obvious work shop lights to not-so-obvious LEDs. What you'll learn in this article is how to think about choosing your lights, what to look for when out hunting, and how to keep it all coordinated. This is really an experimentalist's approach to home studio lighting.

The DIY Digital Photography Home Studio Series:
Digital Photography - Home Studio DIY Concepts
Digital Photography - Home Studio DIY Lights

Digital Photography - Home Studio DIY Concepts Free!
Reader Level: Reader Level

Welcome to the first in a series of articles about setting your own home digital photography studio, and doing it cheaply.

Fireworks or Photoshop? Free!
Reader Level: Reader Level

A common question that comes up from new users is, "How do I decide whether to use Fireworks or Photoshop for a project?"

It's a good question. In fact, the answer may not be completely black and white (or RGB).

By answering the 5 questions in this article, you will be better prepared to decide not only what software application is best suited to the job at hand, where Fireworks can reside in your creative or production workflow.

Some of these questions you can answer yourself, while some may need to be posed to the client, or even other production partners.

Are you ready? Sharpen your pencil and let's go!

Using the Image Processor in Photoshop or Bridge CS3
Reader Level: Reader Level

Automating repetitive tasks is something that any good production software should do - or allow for. Fireworks and Photoshop are no slouches in this area; they both offer ways to batch process images in a variety of different ways right out of the box, and give you tools to easily create your own custom automation commands (Custom Commands in FW, Actions in PS).

If you've been watching my Bridge videos, you see that Bridge gives us access to many of the common batch commands available in Fireworks and Photoshop, so long as those applications are installed on your system.

One of the Photoshop tools I use quite often is a command called "Image Processor." This Photoshop script command allows me to select any recognizable graphic file format and batch process it into three other common digital formats; TIF, JPEG and PSD. Follow along in this video tutorial to learn more about how the Image Processor script works.

Notes From the Photoshop File Importer Front Free!
Reader Level: Reader Level

In this, the fifth of eight excerpts from their new friendsofED book- Foundation Flash CS3 for Designers- Community MX partners David Stiller and Tom Green examine a new feature of Flash CS3. The Photoshop File Importer in Flash CS3 is a welcome addition to Flash CS3. Just be aware there are a couple of "gotcha's" you need to know.

The Foundation Flash CS3 for Designers Excerpts
Motion Tween Effects in Flash CS3
Optimizing Flash Content for Use in Video
Adding Audio to Flash CS3
XML Captions for Video
Notes from the Photoshop File Importer
Create a Soft Mask in Flash CS3
Going Mobile in Flash CS3
Using XML in Flash CS3 to Build a Slideshow

A Photoshop CS3 Sneak Peek - New Features Free!
Reader Level: Reader Level

There are indeed many new things coming with the release of Photoshop CS3. The phrase "jam-packed" comes to mind. Between new features and improvements to existing features and tools, this is one pretty amazing upgrade. Perhaps the most noticeable is the fact there will be two versions of Photoshop: Photoshop CS3 and Photoshop CS3 Extended.

I'll start with Photoshop CS3 and then give a brief overview of the extra goodies in CS3 Extended.

Tag along and see what's in store.

Getting Productive with Adobe Bridge: Fireworks CS3 Integration
Reader Level: Reader Level

For years, Fireworks users have been clamouring for some method of browsing and previewing files without having to go into Windows Explorer or the Mac Finder. Something seamless, that actually worked with Fireworks. Heck, it got to the point where many of us would have been happy with the equivalent of the Files tab from Dreamweaver. But now, the wait is over.

Now that Fireworks has become part of the Adobe fold, this wish has come true! Adobe Fireworks CS3 is now integrated with Adobe Bridge CS3. I have written several articles on Community MX with respect to Bridge CS2, but at that time, Fireworks and Bridge were not communicating to each other. With the launch of the CS3 Suite, not only is there far more communication between former Macromedia and Adobe apps, Bridge CS3 has gotten a massive cosmetic and functional overhaul. From a visual perspective alone, Bridge CS2 and CS3 look completely different.

A Look at The Integration Between Fireworks and Photoshop CS3
Reader Level: Reader Level

Communication – that’s what this industry is all about. For years, Fireworks and Photoshop have been like those two brothers who never really talked to each other and wouldn’t share their knowledge either. With the release of CS3, these two applications have finally buried the proverbial hatchet and are clasping hands – if somewhat tentatively at times.

Many graphics professionals use more than a single application to create their work. Personally, I’m always moving from FW to PS, depending on my client’s needs and the goals of the project. This shuffling back and forth has become much easier with CS3. A great deal of effort was put into making Fireworks and Photoshop more compatible in this release. Here’s the list in brief:
  • Improvements to the Photoshop Import and Export functions within Fireworks
  • Hierarchical Layers panel
  • FW support for Photoshop Layer Effects, with the Live Filters menu.
  • Support for commonly used Photoshop blend modes
  • Bridge/XMP Data Integration

Follow along in this Sneak Peek article for more reasons to consider upgrading.



From Fireworks to Photoshop - Traverse City PNG to PSD Conversion
Reader Level: Reader Level

Recent enquiries from one of our loyal subscribers was the inspiration for this, the fourth in my series of CMX JumpStart PNG's conversion articles. I supply you with the Traverse City PNG file as a fully editable PSD file. Much like the Venice conversion (Hmm, The Venice Conversion . . sounds like a new John Grisham novel . . .) the Traverse City JumpStart, designed by Linda Rathgeber-Stewart and coded by Zoe Gillenwater, has two complete layout designs, each on its own frame. The advantage to doing this is you only have to deal with a single PNG file.

Currently, one can't save a multi-framed Fireworks PNG file as a PSD and expect it to display properly in Photoshop. Each frame must be saved as a separate PSD file, then the user must combine the elements of both files into one, using Layer Comps to emulate the multi-frame design method.

For detailed information and steps on converting flattened vector objects into editable Shape Layers be sure to read Fireworks to Photoshop - Rebuilding the CMX Vienna JumpStart PNG as a PSD file. For details on creating and working with Smart Objects, or working with an exported Adobe Illustrator file see Converting the CMX Orlando JumpStart PNG to a PSD and AI file. An in-depth description of working with Photoshop Layer Comps can be found in Fireworks to Photoshop - Converting the CMX Venice JumpStart PNG to a PSD File. The main purpose of this article is to supply you with a fully editable - and sliced - Photoshop version of the Traverse City PNG. For the actual conversion, I used exactly the same steps as I did with the Venice JumpStart.

Approximate download size: 1MB

Fireworks to Photoshop - Converting the CMX Venice JumpStart PNG to a PSD File
Reader Level: Reader Level

I will do my level best not to bore you with why I like Fireworks in this, the third in my series of CMX JumpStart PNG's conversion articles. But I have to say, for rapid prototyping and flexibility, Fireworks can't be beat. By using Frames, you can create completely separate designs and where there are common elements in each design, you can share specific layers throughout the frames. This is just the case with the Venice JumpStart which has two complete layout designs, each on its own frame.

That said, PhotoShop is no slouch in this area either. While there is no way to directly port over this multi-frame document to Photoshop, by using Layer Comps we can emulate the PNG file quite nicely.

For detailed information and steps on converting flattened vector objects into editable Shape Layers be sure to read Fireworks to Photoshop - Rebuilding the CMX Vienna JumpStart PNG as a PSD file.

For details on creating and working with Smart Objects, or working with an exported Adobe Illustrator file see Converting the CMX Orlando JumpStart PNG to a PSD and AI file.

Because these steps have already been covered, I will not be covering them again in this article in any great detail. The focus in this piece will be exporting the two-frame PNG file as individual PSD files. We will then merge those two files in to one and use Layer Comps to emulate the original two-frame design.

Several other workflow techniques will be discussed as well:
  • PNG layer hierarchy to PSD layer hierarchy
  • Creating Layer Comps
  • Creating new, editable layer masks
  • Creating and working with Work Paths
  • Working with Slices
  • Working with the Gradient Editor

The instructions in this article, along with the two previously mentioned articles, are meant as a guide if you choose to do the conversion on your own. Remember, as with all the articles in this series, a final, editable PSD file is part of the support documents download.

Approximate download size: 1.8MB



Fireworks to Photoshop - Rebuilding the CMX Orlando JumpStart as a PSD (and AI) File
Reader Level: Reader Level

I love Fireworks. As I progress through these articles on converting FW PNG files to PSD files, I am quickly learning just how versatile and powerful Fireworks is for design, creation and optimization. The Orlando JumpStart is a perfect example. As you will see, depending on the design you need either Photoshop or Illustrator (and sometimes both) to do what Fireworks does easily in one application. That's not to say either of these other Adobe products is weak; they are designed to do specific things and they do them quite well. You can certainly add vectors to Photoshop or Bitmaps to Illustrator. It just seems to me that this workflow is handled best by Fireworks.

In this continuing series, I supply you with an editable PSD version of the main Orlando JumpStart PNG file. For details on most of the conversion process, make sure to read Fireworks to Photoshop - Rebuilding the CMX Vienna JumpStart PNG as a PSD file .

NOTE: These articles are based on using the most current versions of Fireworks, Photoshop and Illustrator. Older versions of the software may behave differently or may not even include some of the features/tools listed here.

As with any of these conversions, there will be some differences to how I approach the process. In the case of Orlando, it's all about vectors. Complex, custom vectors.

In my first conversion (Vienna), I ungrouped all my grouped objects, made sure each object had a name, then saved as a PSD. From there, I tweaked several things in Photoshop, including the re-creation of a few vector shapes. You may recall that saving as a PSD in Fireworks rasterized all vectors except for fonts.

With Orlando it is very easy to do the same thing. And assuming your aren't going to use/edit any of the amusement park vector art, clouds or the paths that make up the words Orlando JumpStart, the conversion is quite simple. The PSD file includes all the artwork as flattened bitmaps by default.

However, for those of you who still want scaleable vector art, a different approach was taken. Not only did I save the file as a PSD, but I also saved it as an AI file. This preserves all the vector paths. Once both files are created, (PSD and AI), I can work in either Photoshop OR Illustrator. We're going to look at both options here and in fact, you will find both a PSD file and an Illustrator file in the support documents. With this particular JumpStart, there are pros and cons to working in either program. A big part of the decision factor is your comfort level with Photoshop or Illustrator. So let's have a look at both scenarios.

Fireworks to Photoshop - Using Fireworks to Rebuild the CMX Vienna JumpStart PNG as a PSD File
Reader Level: Reader Level

I'm sure that most people will agree, JumpStarts can be a great way to get a new site up and running quickly; these template pages are ready to roll, CSS is done and commented to death; just add content and away you go! From the graphics side, you've got a structured and sliced PNG file. All you need to to is change the graphic objects and you're good to go. IF you have Fireworks.

As you may have discovered the hard way, opening a native FW PNG file in Photoshop gives you a flattened bitmap. Not much use when you are trying to customize the design to your own needs.

Fireworks does give you the ability to save as a PSD file, though. So if you have clients or other team members who need or prefer to work in Photoshop, this tutorial may be for you.

In this, the first of several articles in the series, I will convert a native Fireworks PNG file to a useable Photoshop PSD file, ready for slicing.

By following along with this article you will learn how to:
  • Prepare a Fireworks PNG file for save/export as a Photoshop PSD file to maximize its editability
  • Build a layer structure similar to the layer/object model of Fireworks by creating Layer Groups
  • Recreate vector shapes and editable Photoshop Shape Layers
  • Accurately control the size and position of Shape Layers
  • Work with Layer Styles to create gradient fills and strokes for the Shape Layers
  • Create Layer-Based and User slices in Photoshop
  • Use Save for Web to optimize the sliced images and save only the slices we created

You will also learn about some of the limitations of a Fireworks generated PSD.

Included with the article is a Photoshop format version of the Vienna design. For all other articles relating to JumpStart Vienna, make sure to download the Vienna JumpStart.

Approximate download size: 1.1MB



Retouching in Photoshop - Part 3 - More Image Adjustments
Reader Level: Reader Level

It's pretty much an undisputed fact that Photoshop is the king of bitmap editing tools — especially for high resolution, print-destined images. Photoshop CS and CS2 have some very cool and useful tools (seen in Part 1 and Part 2) and commands that can help you fix or clean up almost any image that is supplied to you. In this article (Part 3) we will look at some more Image Adjustment commands — some of which you will recognize if you are a veteran Fireworks user — and some which you will probably say, "Holy Image Adjustment heaven, Batman!"

This article is intended as an introduction to some of Photoshop's image adjustment commands (with visual examples) and should not be considered an exhaustive exploration of these features.

In this article we will look at some of the not-so familiar commands:
  • Shadow/Highlight (Enhanced for CS 2)
  • Exposure
  • Replace Color
  • Variations

The Retouching Tools in Photoshop Series:
Retouching Tools in Photoshop CS2: Part 1
Retouching Tools in Photoshop - Part 2: Image Adjustment
Retouching Tools in Photoshop - Part 3: More Image Adjustments



Retouching in Photoshop - Part 2 - Image Adjustments
Reader Level: Reader Level

It's pretty much an undisputed fact that Photoshop is the king of bitmap editing tools - especially for high resolution, print-destined images. Photoshop CS and CS2 have some very cool and useful tools (seen in Part 1) and commands that can help you fix or clean up almost any image that is supplied to you. In these article (Part 2 and Part 3) we will look at Image Adjustment commands - some of which you will recognize if you are a veteran Fireworks user - and some which you will probably say, "Holy Image Adjustment heaven, Batman!"

This article is intended as an introduction to some of Photoshop's image adjustment commands (with visual examples) and should not be considered an exhaustive exploration of these features.

In this article we will look at some of the not-so familiar commands:
  • Auto Contrast
  • Auto Color
  • Color Balance
  • Match Color

The Retouching Tools in Photoshop Series:
Retouching Tools in Photoshop CS2: Part 1
Retouching Tools in Photoshop - Part 2: Image Adjustment
Retouching Tools in Photoshop - Part 3: More Image Adjustments



Fireworks Is Better Than Photoshop! Challenge #1 Free!
Reader Level: Reader Level

A few weeks ago Brian Edgin set forth a challenge: Send him any Web design created in Photoshop and he will show you how to do it more efficiently in Fireworks. Craig Hartel was the first to respond to the challenge and provides a good first example for us to look at.

What is This Thing Called PNG? Free!
Reader Level: Reader Level

The PNG format has been around since 1985. While hardly new, the use of the PNG image format still raises concern - even suspicion - when it comes to web graphics. This article will discuss PNG, and hopefully dispel a few myths in the process. I'll also talk about why you should NEVER use one specific PNG derivative.