Adobe CS4 Integration

The Creative Suite of Adobe with CS3 had a lot of integration between applications. However, much of the improvements made to CS4 where in the integration arena. Some of the changes are detailed below, but suffice it to say that Adobe has greatly improved upon the workflow between the programs of the creative suite.

The first change that you will see in CS4 is that virtually all of the interfaces are similar look and feel. This means that you can easily find similar commands whether you are working in Illustrator, Photoshop, Dreamweaver, Flash, Premier or even InDesign. All of these have a similar interface, which will speed up the learning curve and help when working in multiple programs.

In my opinion there are 3 basic type of workflow categories that Adobe provides.

  1. Batch processing features
    These are features of Photoshop, Dreamweaver, Illustrator and Bridge that allow some kind of manipulation of several files or images. Examples that are describe in this page include, Photoshop's Image Processor for making mass changes to many files at once, creating a web gallery using Bridge, the zoomify feature of Photoshop to create several views of a large graphic, and using graphic variables to set up several variations of an image.
  2. Linked files/objects
    These are features that allow you create an object in one program then bring into another while retaining the features of the original object. These are called smart objects and they are automatically updated, or at least tracked, by the program for which it is inserted. Some copy and paste functions also fall into this category.
  3. Program Integration features
    Photoshop, Fireworks, Illustrator, Dreamweaver, and Flash all have types of objects that they are designed to generate. However, it is often desirable to bring into a program an object created in one of the other programs. This is where the "round tripping" or program integration come in to play. Adobe has greatly improved this capability in CS4. Importing and Exporting files and objects between programs is easy and gives you lots of flexibility in most cases.

Smart Object Integration

Smart object integration is new to Adobe CS4. Basically a smart object is an object created in one program, brought into another program, an the tracked and linked to the original object. To bring in a smart object in to Dreamweaver, for example, you can just drag from Adobe Bridge into Dreamweaver. Another way to create a smart object and Dreamweaver, is to use the insert menu and bring in a PSD file. Inserting a native Photoshop PSD in to Dreamweaver will bring up the image preview dialogue box. This is very similar to the "save as web and devices" dialog box in Photoshop. Once you save the optimize image, Dreamweaver will ask you for alt text. Then you saved it as a smart object. You can now place this smart object on any other page using standard inserting techniques. That image will be brought into additional pages as a smart object.

Once the smart objects have been inserted into all of your web pages, you can make changes to the image on any of the pages to make site wide changes. To do this, select the image on any page, click the edit icon in the property inspector. This will open up Photoshop (or Fireworks) , make your changes. Save your changes in Photoshop (or Fireworks) and go back to Dreamweaver. You will see that the smart object is out of sync. In order to sync back to the original file, right click on the synchronization icon and choose update from original. Dreamweaver will actually re-optimize from the original so that you don’t have to optimize the image again. This will update the smart object in all pages that contains the graphic.

Dreamweaver copy paste integration

While working in a PSD file in Photoshop (Illustrator, Fireworks), you can copy the merged layers using the edit menu. Once you have a copy saved to your clipboard, you can paste it anywhere in Dreamweaver. Doing so will open up Dreamweaver's image preview dialogue box. Again, this is very similar to Photoshop's optimization window of "save for web and devices". Optimize the file and save it in your root directory. Now you are done.

This technique does not bring in the image as a smart object. However, you can still update the image manually as you would any other image that is saved in your root directory.