Printer Friendly Version

BellaOnline's Digital Art and Design Editor

Adding Photoshop Images to an Illustrator CS2 Web Banner Project

Project Information-- Skill level-Beginner AdobeR Illustrator R CS2

Previously, we began working on a web banner and you learned how to draw the banner rectangle and fill the rectangle with a gradient of your choice of colors. Now we are ready to add some graphics to the banner background. When creating web graphics, you will frequently encounter a situation where you need to add to your current project a graphic previously created in another graphics program such as PhotoshopR. As in the example, this might be the company logo or other images that represent the company or its products. You have two options. You can add (embed) the image directly into the project or you can link to the image as an external file. In the second option, the image will not really be added to your project image. Only the link information is added to the project image file. In this tutorial, we will use the first option and embed two images into our web banner.

1. Open your web banner image into Illustrator CS2. Go to the Layers Palette and click on the "Layer 1" text. When the Layer Options dialog box opens, rename this layer "Background".

2. Place the first image. To add or place an image into your project, you will need to set some values in the Place and Photoshop Import Options dialog boxes. From the Menu Bar, click File > Place to open the Place dialog box. Navigate to the image you wish to include and click once on the file. At the bottom of the dialog box, you will see some checkboxes. The Link and Template checkboxes should be unchecked. Now click the Place button which will open the next dialog box.

In the Options section of the Photoshop Import Options dialog box, choose the Convert Photoshop Layers to Objects option. This will ensure that the embedded image remains editable and you will be able to resize the image if necessary.

Selection Tool
3. Position the embedded image. Use the Selection Tool to drag the image onto the banner. If you need to resize the image, pull or push on the handles (small boxes) at the corners of the image. You can also use the directional arrows on your keyboard to nudge the image into place.

4. Layers Palette. When you check the Layers Palette, you will notice that the embedded image is added as a sublayer of the original Background layer. If we had several layers in our project image, we could determine which layer to embed the image onto by first selecting that layer before embedding the image.

5. Repeat the three previous steps for any other images you wish to add.

6. Save your image. From the Menu bar, click File > Save to save your changes to your web banner image.

In the next tutorial, we will add the text to our banner.

Adobe Illustrator Workspace Diagram

AdobeR product screen shot(s) reprinted with permission from Adobe Systems Incorporated. AdobeR, PhotoshopR, PhotoshopR AlbumTM, IllustratorR, InDesignR, GoLiveR, AcrobatR, CueR, Bridge, DreamweaverR, FlashR, FireworksR, ContributeTM and FlashPaperTM are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries..

Digital Art and Design Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor