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

Exploring on your own

You can recreate the Jumpcat Mavens image for a Web page, or adjust its appearance. This photo was created in Adobe Illustrator and Adobe Photoshop. Follow the steps in this section to replicate the image for a Web page.

In Illustrator, choose File > Open, and open the L15strt4.ai file in the L15Start folder, located in the Lesson15 folder, inside the Lessons folder within the AICIB folder on your hard drive.

Notice the Jumpcat Mavens flat-color artwork is separated into five separate layers: type, musical note, purple rings, orange oval, and rings back. All of the objects in the artwork have been painted with Web-safe colors.

Figure .

Choose File > Export to export the artwork to Photoshop format. In the dialog box, choose Photoshop 5 from the Save as Type (Windows) or Format (Mac OS) menu, name the file Jumpcat.psd, and click Save (Windows) or Export (Mac OS).

In the Photoshop Options dialog box, choose RGB for Color Model and Screen (72 dpi) resolution. Leave the Anti-Alias and Write Layers options selected, and click OK.

Figure .

For the rest of this exercise, you'll work in the Adobe Photoshop 5.5 application.

Start Adobe Photoshop.

In Photoshop, open the new exported file, Jumpcat.psd.

Notice how the layers in the artwork remain intact in the exported file.

Open the Dancers.psd file. This file contains the bitmap image of the two people dancing.

Choose Select > All, and then choose Edit > Copy to copy the image to the Clipboard.

In the Jumpcat.psd file, choose Edit > Paste to paste the photo image into the Jumpcat Mavens artwork.

Notice a new Layer 1 has been added to the bottom of the Layers palette.

In the Layers palette, drag Layer 1 up between the Musical Note and Purple Rings layers.

Select the move tool and position the photo in the center of the olive-colored oval in the artwork.

Figure . Move Layer 1.

Figure . Reposition photo.

With Layer 1 (the dancers) active, choose Image > Adjust > Hue/Saturation. In the Hue/Saturation dialog box, select the Colorize option, and drag the sliders to adjust the Hue (we selected 30) and the Saturation (we selected 20). Click OK.

Choose Layer > Effects > Bevel and Emboss to apply a filter to the image. In the Effects dialog box, change the Depth to 4 pixels and the Blur to 4 pixels, and then click OK.

Choose File > Save to save the Jumpcat.psd file.

Now you'll create an optimized version for the Web.

Choose File > Save for Web.

Click the 2-Up tab and choose GIF 128 Dithered from the Settings pop-up menu.

Click OK to save the file. In the dialog box, name the file jumpcat.gif, and click Save.

Figure .



Not a subscriber?

Start A Free Trial

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