• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Lesson 4. Using Smart Objects > Using Smart Photoshop Objects

Using Smart Photoshop Objects

In this first section of the lesson, you'll place two Smart Photoshop objects, resize one of them, and edit the color table in the other to achieve a special effect—all without leaving Adobe GoLive. Adobe Photoshop files can be in any of several supported formats: RGB 8-bit PSD, BMP, PICT (Mac OS only), PCX, Pixar, Amiga IFF, TIFF, and TARGA.

Placing a Smart Photoshop Object

The first step involves placing a Smart Photoshop Object on the page. The graphic is a Photoshop file that has been sliced in Adobe ImageReady.

1.
Open the Farm site. The path to the file is Lesson04/04Start/Farm Folder/Farm.site.

2.
Right-click (Windows) or Control-click (Mac OS) in the site window, and choose New Folder from the context menu. Name the folder Images. You'll be placing all your images here to keep the site window better organized.


Choosing New Folder from context menu


3.
Double-click Start.html in the site window to open the page. Notice that the page consists of a seven-cell table with three images already in the bottom three cells.

4.
From the Smart tab () of the Objects palette, drag a Smart Photoshop Object to the top left cell of the table.


Dragging Smart Photoshop object icon to table cell


5.
In the Live Image Inspector, click the Browse button () for Source, and locate Cow.psd in the Startfiles folder. The path to the file is Lesson04/04Start/Farm Folder/ Farm/Startfiles/Cow.psd. Click Open.

6.
Select the Images folder you created when prompted. Since this image has been sliced in ImageReady (there are four slices: the cow itself, and three sky slices to the left, right, and below the cow), you are prompted to select a location for the Cow.data folder that will be created automatically to store all the slices in a Web-safe format.

The Save for Web dialog box appears.

7.
Click the Optimized tab, and select the Slice Select tool ( ).

8.
With the Slice Select tool, click on the cow slice in the optimized image.

9.
Select JPEG High from the Settings pop-up menu.

10.
Shift-click the three slices containing the sky. They are located on the left, the right, and just below the cow slice.

11.
Select GIF 32 No Dither from the Settings pop-up menu.



12.
Click OK in the Save for Web dialog box.

Adobe GoLive converts the sliced Photoshop image into several Web-safe images, adding the appropriate extension to each image. In this example, there will be three GIF images and one JPEG image. All remain linked to the original Photoshop file. Note that when you import sliced images, as you did here, you can set different conversion settings for each slice.

Resizing a Smart Photoshop Object

Now you'll need to resize the image that you just placed. Resizing GIF or JPEG images themselves often provides less than satisfactory results. Smart Objects technology lets you return to the source image (in this case, a sliced Photoshop file), and create new, resized Web-safe images from the original file. The new file uses the settings that you already applied in the Save for Web dialog box when you first placed the Smart Photoshop Object. The original Photoshop file remains unchanged.

1.
With the image still selected, Shift-drag the bottom right handle until the cow image is approximately the same width as the milk wagon image in the cell below. The Updating from Source File progress bar tells you that Adobe GoLive is creating the resized Web-safe version using the original Photoshop source file.

Note

To select the entire sliced image and not just a slice, move the pointer over the top right corner. When the cursor changes to this (), click to select the entire sliced image. If you click when the cursor looks like this (), you will select a slice rather than an entire image, and the Settings button will be disabled.

2.
Save the document as Working.html in the Lesson04/04Start/Farm Folder/Farm.

You can also resize an image by going back to the Save for Web dialog box. We want the cow image to have exactly the same width as the wagon image in the cell below it.

3.
Select the wagon image and note its width in the Image Inspector. (The width was 204 in our document.)

4.
Select the entire cow image (not just a slice), and click Settings in the Live Grid Inspector. You'll be prompted again for a location to save the Cow.data folder and images. Make sure you're saving to the Images folder, and click Save.


Selecting cow image



Clicking Settings


5.
In the Save for Web dialog box, click the Image Size tab. Make sure the Constrain Proportions option is checked, and enter 204 as the width and press Enter or Return. Note the image size (our image was 204 by 309). You'll need these dimensions later when you resize the image that you'll place in the top right cell.



6.
Click Apply, and then click OK.

Note

You can return to the Save for Web dialog at any time and experiment with different settings.


Editing a Smart Photoshop Object

Next you'll add another Smart Photoshop Object to the page, and edit the image's color table to achieve a special effect—again, without ever leaving Adobe GoLive.

1.
From the Smart tab of the Objects palette, drag a Smart Photoshop Object icon to the top right cell of the table.

2.
In the Live Image Inspector, click the Browse button, and locate Wheat.psd in the Startfiles folder. The path to the file is Lesson04/04Start/Farm Folder/Farm/Startfiles/Wheat.psd. Click Open.

3.
In the Settings panel of the Save for Web dialog box, select GIF 32 No Dither from the Settings pop-up menu, and view Optimized.

4.
Reduce Colors to 20.

5.
In the Color Table tab, double-click the darkest brown color.


Double-clicking color


6.
In the Color (Windows) or Color Picker (Mac OS) dialog box, choose a color, and click OK. (We used red.) All of the areas of the image with the dark brown color are now changed to the new color. Replacing colors using this technique is an easy way to achieve some eye-catching special effects.


Color Picker dialog box (Mac OS)



Color dialog box (Windows)


7.
Click OK in the Save for Web dialog box, and click Save to save the converted image (Wheat.gif) to your Images folder.

8.
The wheat image should be about the same size as the cow image (ours was 204 by 309), so select the Wheat.gif Smart Photoshop Object in the top right cell.

9.
In the Basic tab of the Live Image Inspector, enter the dimensions that you noted for the cow image earlier. Press Enter or Return after you type each dimension, and notice that the Updating from Source File progress bar tells you that Adobe GoLive is updating the Web-safe image from its linked source file. The cow and wheat images should be the same size now.



  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint