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

Lesson 6. Using Smart Objects > Placing a Smart Photoshop object

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 ImageReady.

Start GoLive.

Open the farm.site file in Lessons/Lesson06/06Start/farm/.

Show the extras tab in the site window by clicking on the Toggle split view button in the lower right corner of the site window.

with images and media files, be sure to have all files in your site window, including your source files. You can store source files in the folder named “SmartObjects” that is in the Site Data folder by default. Just drag source files into the SmartObjects folder in the Extras tab of the site window. This makes managing image files much easier and prevents broken links (images and media not appearing on your Web page). If you don't see the files in your site window after adding them to a folder (such as the folder named “images”), click the Refresh View button in the Main Toolbar. For more information on managing your image files and folders, see Lesson 12, “Managing Web Sites.”

Double-click the start.html file 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.

Choose Window > Objects to open the Objects palette, or click the Objects tab if the palette is collapsed.

Click the Smart button () at the top of the Objects palette.

From the Smart set 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

Choose Window > Inspector to open the Inspector, or click the Inspector tab if the palette is collapsed.

Make sure you can see the contents of the SmartObjects folder in the Extras tab of the site window. If necessary click the toggle arrow to expand the site window.

In the Basic tab of the Smart Photoshop Image Inspector drag from the pick whip button to the file cow.psd in the SmartObjects folder.

The image opens in the Save for Web dialog box. 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). The Save for Web feature takes care of image optimization, creating a Web-formatted copy that may even include HTML as in the case of a sliced PSD or SVG file. This Web-formatted copy, called a target file, is what appears on your live Web page.

In the Save for Web dialog box, click the Optimized tab.

Select the Slice Select tool (), and click the cow slice in the optimized image.

Select JPEG High from the Preset pop-up menu. Unnamed is the current value.

Click one of the three slices containing the sky, and shift-click the other two sky slices to add them to the selection. They are located on the left, the right, and just below the cow slice.

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

Click Save.

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-optimized format.

In the Save a Folder for the SmartObject target files dialog box (Windows) or Save dialog box (Mac OS), open Lessons/Lesson06/06Start/farm/web-content/images/ and click Save.

GoLive converts the sliced Photoshop image into several Web-optimized 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.

Select the image slice that contains the cow, and in the Alt Text box of the User Slice Inspector, enter Cow image.

Choose File > Save.



Not a subscriber?

Start A Free Trial

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