Integrating_Photoshop_Illustrator

Integrating Photoshop and Illustrator Files:

A Review of Basic Concepts Integrating Photoshop and Illustrator Files

Objectives:

Objectives Learn uses and limitations when integrating bitmap and vector-based images. Understand the difference between linking and embedding images. Work with gradients within both applications. Place, paste, and export graphic images with varying opacity and transparency. Set up web-safe colors, and optimize composite images for use on the web. Save to various graphic file formats for specific purposes. Advanced: Saving files in PDF and EPS formats.

Integrating Illustrator and Photoshop:

Integrating Illustrator and Photoshop Integrating Illustrator and Photoshop images allows the designer flexibility to combine bitmap images with line art into composite images for a variety of effects. Bringing Photoshop’s images into Illustrator allows the designer to trace and create compound paths and apply stroke and fill effects, transforming these images into scalable line art. The designer can also bring Illustrator’s vector-based line art into Photoshop to apply a variety of special Layer Style effects.

Vector vs. Bitmap Images:

Vector vs. Bitmap Images Vector images are scalable to any size for illustrative artwork, whereas bitmap images are non-scalable and cannot be enlarged, but better for continuous tones images like photos. Vector Enlarged Bitmap Enlarged

Setting up Files for the Web:

Setting up Files for the Web When creating files to be used for the web, the measurement settings should be set up in pixels, the color mode in RGB color for web display, and the orientation in Landscape mode. Using a measurement of pixels instead of inches makes it easier for laying out graphics for web documents. This can be set ahead of time in the Preferences area of either program. Select the Web-Safe Colors option from the Color panel menu. Or click on the cube, if it displays, to find the nearest color. Selecting Web-Safe RGB (Illustrator) or Web Color Slider (Photoshop) in the Color panel menu ensures web-safe colors. If a cube displays indicating color is not web safe, simply click it to find the nearest web color .

Web-Safe Colors:

Web-Safe Colors

Gradients with Illustrator:

Gradients with Illustrator Gradients help to provide variety in color shapes and backgrounds by allowing the designer to create a transition between colors. The Gradient panel is the control center for creating gradients. You can select colors from the Swatches or Color panels and drag them to the gradient bar to create color Gradient Sliders that can be adjusted to determine how colors are blended. In Gradient Color mode in the Illustrator Tools panel, you can double-click on any color slider to display the Color panel, select another color, and then that color will replace the previous color slider.

Creating Gradients in Illustrator:

Creating Gradients in Illustrator

Linking and Embedding Files :

Linking and Embedding Files When linking files, any changes made are automatically updated to the linked file in the Illustrator document. This keeps the file size small. However, once the location of the linked file is moved, the link is broken, and changes cannot be updated easily. They must be relinked. Embedded files are added permanently, so there is no need to worry about carrying extra linked files. Embedded files are larger-sized files. Any changes made to the image in one document will not be updated in the other document.

Placing Photoshop Images Into Illustrator:

Placing Photoshop Images Into Illustrator When a Photoshop image is placed (File > Place) into an Illustrator document, it can be rotated and resized before pressing the Return/Enter key. Pasted images are automatically linked. You will find a check in the Link check box in the Place dialog box to link the placed file for future editing. To embed the image into an Illustrator document, Make sure you uncheck the Link check box. You can also copy Photoshop images artwork into an Illustrator document as “Smart Objects” (and vice versa) that can also be edited as a linked object.

Placing Photoshop Images To Be Embedded:

Placing Photoshop Images To Be Embedded

The Paste Command:

The Paste Command For images that only need to be duplicated or copied into another document, or when only a portion of an image needs to be copied, the Paste command works well. When an image is pasted into a new document in Photoshop, it is on its own separate layer and can be edited independent of the background. In Photoshop, when an image is selected with the Rectangular Marquee tool and copied, a new document can be set to the same size as the copied selection, and the selected image can be pasted into this new document.

Copy and Paste Using Photoshop:

Copy and Paste Using Photoshop Use Copy and Paste with a selected graphic into a new document which becomes the same size as the selection.

Placing Linked Photoshop Images Into Illustrator (1 of 2):

Placing Linked Photoshop Images Into Illustrator (1 of 2) Placing layered Photoshop images into Illustrator recreates those layers in the Illustrator document, leaving them intact for making further changes. When these images are ready for the web, all the layers will need to be combined as one, or flattened, to keep the file size small. Linking images makes the file size even smaller, especially with rasterized or bitmap images; so linking helps speed up the download time, as long as the linked image is stored in the same place on the host server for the website as the original image. If changes need to be made to the placed file that is linked, you can select the Photoshop image in the Illustrator document and select Edit > Edit Original. This will launch Photoshop. You can then make the changes and save the file in Photoshop. The new changes will appear in the linked Photoshop image in Illustrator. You can also use the Links panel to do this.

Placing Linked Photoshop Images Into Illustrator (2 of 2):

Placing Linked Photoshop Images Into Illustrator (2 of 2)

Saving as PNG or JPEG Files:

Saving as PNG or JPEG Files The PNG format supports varying levels of transparency and also preserves gradients well. It is great for transparent backgrounds. PNG format is also effective at compressing continuous-tone images without losing any detail, called “lossless” compression, but may create a larger file size than JPEG compressed images. JPEG images use “ lossy ” compression, where details are thrown out every time the image is edited and saved. JPEG images do not support transparencies and keep the background a solid color. Saving the file as a PNG saves the image “As a Copy” and leaves the original still on the desktop, while the PNG copy is saved in a designated location. PNG files may not be read by a user with “older” browsers.

Text Paths In Illustrator:

Text Paths In Illustrator Illustrator’s variety of drawing tools provides the means to create a path to place type on. The Pen tool not only creates precise curves; it also creates straight lines between two points (two clicks). The Type on Path tool is then used to flow text along the path.

Optimizing Files for the Web:

Optimizing Files for the Web Illustrator and Photoshop both provide a Save For Web command to optimize a flattened copy of the file for the fastest downloading time, while still maintaining image quality for web display. Using this feature allows the designer to preview the results to determine image quality with up to four different settings at a time before they are applied, and to view the download times for an image to reach a user. Layers are flattened on the saved copy to keep the file size small without affecting the original layered image.

Save For Web:

Save For Web

Placing and Exporting Illustrator Files Into Photoshop:

Placing and Exporting Illustrator Files Into Photoshop Any Illustrator graphic placed in Photoshop will become rasterized and cannot be enlarged after that point without losing quality. Because Illustrator uses paths to outline objects, and sharp lines are needed for type, a designer must create this art in Illustrator first, and then export that graphic as a PSD file to keep the layers and effects intact. Exporting Illustrator files into Photoshop saves most Illustrator layers to be edited later, maintaining transparency in the background and its gradients. When placing images as templates, it is a good idea to use flattened files. If you are using Illustrator, and the Photoshop Import Options dialog box displays, select the option Flatten Photoshop Layers To A Single Image before placing the file in Illustrator .

Creating Gradients in Photoshop (1 of 2):

Creating Gradients in Photoshop (1 of 2) In Photoshop, you have extensive tool options and the Gradient Editor to apply gradients. To create a gradient in Photoshop, select a foreground to background gradient from the Gradient Editor, and then apply the gradient with the Gradient tool. Gradients in Photoshop use a transition from foreground to background colors. To apply gradients in Photoshop, select colors and apply them with the Gradient tool. The colors have to be selected in the foreground and background color boxes before using the Gradient tool. When the Gradient Color bar is clicked in the Gradient Options bar, the Gradient Editor dialog box displays to select various preset gradient combinations, which can also be customized. You can adjust, add, and remove Color Stops in the Gradient Editor to create custom gradient combinations. Opacity Stops vary the amount of color applied.

Creating Gradients in Photoshop (2 of 2):

Creating Gradients in Photoshop (2 of 2)

In Illustrator, Tracing Photo Template to Create Vector Image:

In Illustrator, Tracing Photo Template to Create Vector Image Illustrator creates paths for complex shapes using a variety of drawing tools. The Pen tool is the most effective tool for drawing smooth lines and curves.

Applying Gradients in Illustrator to Guitar Artwork (1 of 2):

Applying Gradients in Illustrator to Guitar Artwork (1 of 2) In Illustrator, the Gradient panel is the control center for creating custom gradients. Select colors from the Color or Swatches panels, and drag these colors to the gradient color bar to create gradient color sliders. These sliders can be moved around to vary the amount of colors for different effects. In Illustrator, you can have gradients that can be adjusted to fade to transparent, apply special gradients in real time, and move them around. You select the object, then the Gradient tool, and click. A gradient bar displays to edit the gradient effect by dragging and rotating the gradient bar around the selected object. The new gradient can be saved in the Swatches panel. You can also make edits from the Appearance panel.

Applying Gradients in Illustrator to Guitar Artwork (1 of 2):

Applying Gradients in Illustrator to Guitar Artwork (1 of 2)

Warping Type in Illustrator:

Warping Type in Illustrator With Illustrator’s stroke colors, type can be easily outlined in any color and weight. To warp type in Illustrator, you can use either the Effect menu (Effect > Warp), or use the Object > Envelope Distort > Make with Warp command.

Exporting Illustrator Files Into Photoshop (1 of 2):

Exporting Illustrator Files Into Photoshop (1 of 2) Exporting Illustrator files in the Photoshop format saves most Illustrator layers; so they can be edited; it maintains background transparency and gradients so long as the Write Layers option is selected in the Photoshop Options dialog box when you export. You can export multiple artboards as well. You can open the new exported file, edit layers, copy, and paste it into the artwork. Resize and rotate the image as needed before exporting it into Photoshop, which converts images into unscalable bitmap images. Exporting the guitar graphic or any artwork with layers allows the graphic and text to be edited for special effects using Photoshop’s Layer Style effects.

Exporting Illustrator Files Into Photoshop (2 of 2):

Exporting Illustrator Files Into Photoshop (2 of 2) Exporting Illustrator file into Photoshop to include layers, text, and color information.

Opening vs. Placing Artwork Into Photoshop:

Opening vs. Placing Artwork Into Photoshop When you use the Open command in Photoshop to open an exported PSD file, Photoshop only rasterizes the vector objects created in Illustrator and keeps the background transparent. When using the Open command in Photoshop, the illustration should also be resized before bringing it into Photoshop to avoid having to enlarge it as a converted bitmap, creating pixelation issues. When using the Open command in Photoshop, most of the layers made in Illustrator are editable in Photoshop. Once you make changes to any layers in Photoshop, you can use the Copy Merge command in the Edit menu to paste a flattened copy of those edited layers as a new layer in the Photoshop image without affecting the original exported PSD file. Placing files in Photoshop (File > Place) automatically flattens all layers into one, preventing any future editing. However, it does allow you to resize the surrounding bounding box before pressing the Return/Enter key.

Editing Smart Objects in Photoshop (1 of 3):

Editing Smart Objects in Photoshop (1 of 3) Smart objects in Photoshop (Layer > Smart Objects) are layers that contain image data from raster or vector images and that allow a designer to make changes while preserving an image’s source data with all its original characteristics. This enables you to perform nondestructive editing to the layer. Illustrator images placed or pasted into Photoshop as Smart Objects remain live and scalable, allowing future edits made in Illustrator to automatically update in the Photoshop document. You can place a variety of EPS and PDF formats into a single layer or paste Illustrator’s native format onto a single layer. You cannot alter pixel data such as painting, dodging, burning, or cloning, unless the Smart Object is converted into a regular layer, which will rasterize the artwork .

Editing Smart Objects in Photoshop (2 of 3):

Editing Smart Objects in Photoshop (2 of 3) To create a smart object layer, copy the selected Illustrator graphic and paste as a smart object into Photoshop.

Editing Smart Objects in Photoshop (3 of 3):

Editing Smart Objects in Photoshop (3 of 3) To edit a smart object layer, choose to edit the contents, make changes in Illustrator, save the new graphic, and observe the linked change in Photoshop.

Common Graphic File Formats: Pros and Cons (1 of 3):

Common Graphic File Formats: Pros and Cons (1 of 3) JPEG Compressed format used in photo images or images that need detail in shading and tones. Universal format read by all graphic applications and browsers. Used for web and proof printing (before going to press). Data is thrown out each time the image is saved and may gradually deteriorate the quality. Flattens layers in files. Does not support background transparencies. Not recommended for use when documents are needed for press. PNG These files can include detailed transparencies in image’s record detail most accurately. Compress files without losing detail. Used in photo images. Cannot be read by older browsers. May produce file sizes too large for the web for complex images.

Common Graphic File Formats: Pros and Cons (2 of 3):

Common Graphic File Formats: Pros and Cons (2 of 3) TIFF Most accurately records detail in continuous-tone images. Nonscalable . Used primarily for print output. Largest file size. GIF Used for logos, illustrations, and animation. Compress without losing data. Records with transparency settings. Read by most graphic applications. GIF files have only 256 colors. SVG Used in vector-based graphics for the web and animation. Files can be enlarged on screen without sacrificing sharpness. Embeds fonts and can be edited in Illustrator. Limited color depth. Files are not compressed for the web. Cannot be read or created in Photoshop.

Common Graphic File Formats: Pros and Cons (3 of 3):

Common Graphic File Formats: Pros and Cons (3 of 3) EPS Can be imported by most graphic applications and still edited in Illustrator. Vector graphics can still be scalable. Preferred method when combining graphics and fonts. Used extensively for print output. Large file size. Does not handle transparency in files created in older versions of Illustrator or Photoshop. PDF Embeds fonts and graphics for electronic distribution (web). Can be used as electronic proof to send to service provider. Can be read by most graphic applications or read with the free Acrobat Reader. Can be edited in Illustrator. Compresses files without losing detail. Adding embedding and preview characteristics may increase file size .

Graphic File Formats:

Graphic File Formats

Advanced: Understanding EPS and PDF Files:

Advanced: Understanding EPS and PDF Files EPS files are used in the commercial printing process and for vector graphics that use text and images. PDF files are most useful in sharing documents over the web, through e-mail, on CDs, and where minimal file size is needed. PDF files are also used as proofs for commercial printers to check document layouts, fonts, and graphics, and can also be used in the actual printing.

Saving PDF Files:

Saving PDF Files When saving a PDF file, all fonts can be automatically embedded so that the viewer can read the document clearly without having the actual fonts installed on their computer. PDF files retain any transparency information in the file. To display web options, choose Optimize for Fast Web View (or Screen Optimize in earlier versions) from the Adobe PDF Options dialog box. When you check the Preserve Illustrator Editing Capabilities box in the Adobe PDF Options dialog box, the file can still be opened and edited as an Illustrator file. A Photoshop PDF file can be brought into Illustrator with type made into outlined paths if the Use Outlines for Text box is checked. Many commercial printers also prefer to receive files in PDF format from their clients as guides, proofs, and for printing as well. You can save to earlier versions of Acrobat Reader with a description of considerations. The drawback of this option is that there are no editing capabilities in older versions. PDF files use lossless compression; no data is thrown out.

Saving PDF Files in Photoshop and Illustrator:

Saving PDF Files in Photoshop and Illustrator

EPS Files:

EPS Files EPS files can be imported into and read by most graphic programs. Documents saved as EPS files from other illustration programs can be edited in Illustrator, and then saved as an Illustrator document. In Photoshop, files saved in EPS format are saved as copies to a designated location, while the original file remains open. The EPS file format is a good choice if you want to import graphics into a page layout program, word processing program, or other drawing programs when you are not sure what application the intended receiver is using. EPS files do not use compression and produce large file sizes with precise accuracy, which is why they are used in printing, but not used for web design. EPS files are well suited when you need to combine bitmap and vector graphics. Photoshop, however, rasterizes its EPS files into non-scalable bitmapped graphics that cannot be enlarged, and still maintain quality.

Integrating Photoshop and Illustrator PDF Files:

Integrating Photoshop and Illustrator PDF Files There is more flexibility bringing Photoshop PDF or EPS files into Illustrator than Illustrator files into Photoshop, especially with type. Although Illustrator will flatten the Photoshop layers from either a PDF or EPS document, type is treated as individual outlined paths, which can be edited with the Direct Selection tool. Illustrator PDF and EPS files can be brought into Photoshop, but are rasterized and flattened into a one-layer bitmap image with a transparent background. Layer Style effects can only be applied to the whole image.