logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Painting
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods


dailyclick
All times in EST

Autism Spectrum Disorders: 4:00 PM

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

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..
Add Adding+Photoshop+Images+to+an+Illustrator+CS2+Web+Banner+Project to Twitter Add Adding+Photoshop+Images+to+an+Illustrator+CS2+Web+Banner+Project to Facebook Add Adding+Photoshop+Images+to+an+Illustrator+CS2+Web+Banner+Project to MySpace Add Adding+Photoshop+Images+to+an+Illustrator+CS2+Web+Banner+Project to Del.icio.us Digg Adding+Photoshop+Images+to+an+Illustrator+CS2+Web+Banner+Project Add Adding+Photoshop+Images+to+an+Illustrator+CS2+Web+Banner+Project to Yahoo My Web Add Adding+Photoshop+Images+to+an+Illustrator+CS2+Web+Banner+Project to Google Bookmarks Add Adding+Photoshop+Images+to+an+Illustrator+CS2+Web+Banner+Project to Stumbleupon Add Adding+Photoshop+Images+to+an+Illustrator+CS2+Web+Banner+Project to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Digital Art and Design Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


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.

g


g features
Sketch with Your Silhouette SSDE

Simple Drawing Tools in Silhouette Studio Designer

Silhouette Studio Designer Edition Software

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor