UNIT-II INTRODUCTION TO PHOTOSHOP Learning objectives To understand the basics of Images To understand the basics of Images To Know the Photoshop 6.0 Interface, basic tool box, various palettes To Know the Photoshop 6.0 Interface, basic tool box, various palettes To learn the operations performed on images like change of color settings, merging layers, using layer styles, resizing images, changing resolution etc To learn the operations performed on images like change of color settings, merging layers, using layer styles, resizing images, changing resolution etc To understand how to create animation To understand how to create animation

Image basics Computer graphics fall into two main categories--bitmap and vector. Bitmap images--technically called raster images--use a grid of colors known as pixels to represent images. Each pixel is assigned a specific location and color value. Vector graphics are made up of lines and curves defined by mathematical objects called vectors. Vector graphics are resolution-independent--that is, they can be scaled to any size and printed at any resolution without losing detail or clarity. As a result, vector graphics are the best choice for representing bold graphics that must retain crisp lines when scaled to various sizes-- for example, logos.

Image basics Image attributes Image Size – pixel dimensions - The size of the image measured in pixel dimensions is the number of pixels along the width and number of pixels along height. Ex: 640x480 image, 1024x768 image Image Size – pixel dimensions - The size of the image measured in pixel dimensions is the number of pixels along the width and number of pixels along height. Ex: 640x480 image, 1024x768 image Image resolution - The number of pixels displayed per unit of printed length in an image, usually measured in pixels per inch (ppi). Ex: 72 ppi, 81 ppi etc., Image resolution - The number of pixels displayed per unit of printed length in an image, usually measured in pixels per inch (ppi). Ex: 72 ppi, 81 ppi etc., Color model - A color mode determines the color model used to display and print images. Ex. RGB, CMYK Color model - A color mode determines the color model used to display and print images. Ex. RGB, CMYK Color depth - The number of bits per pixel of a color image. Ex:16 bit, 24 bit, 32 bit etc., Color depth - The number of bits per pixel of a color image. Ex:16 bit, 24 bit, 32 bit etc., Image File size - The digital size of an image, measured in kilobytes (K), megabytes (MB), or gigabytes (GB). File size is proportional to the pixel dimensions of the image. Image File size - The digital size of an image, measured in kilobytes (K), megabytes (MB), or gigabytes (GB). File size is proportional to the pixel dimensions of the image. File Format File Format Palette Palette

Image basics File Format - Photoshop has support for the following file formats. PSD (photoshop native file format), BMP, GIF, PICT, TIFF, Photoshop EPS, Photoshop PDF, JPEG, Pixar, PNG, RAW, Targa etc., File Format - Photoshop has support for the following file formats. PSD (photoshop native file format), BMP, GIF, PICT, TIFF, Photoshop EPS, Photoshop PDF, JPEG, Pixar, PNG, RAW, Targa etc., Palette - A number of palette types are available for converting an image to indexed color. Palette - A number of palette types are available for converting an image to indexed color. Ex. Exact, System(Mac), System (windows), Web, Uniform, perceptual, selective, Adaptive, custom, previous etc.,

Knowing the Photoshop Interface

Palette: Palettes help you monitor and modify images. By default, palettes appear stacked together in groups. The palettes are Layers, Channels, Paths, History, Actions, Color, Swatches, Styles, Navigator and Info.

Knowing the Photoshop Interface As soon as you select the ‘new’ from the ‘file’ menu the ‘new’ dialog box appears as below. Information about the current file size and other features of the image is displayed at the bottom of the application window.

Color palatte The color palatte appears as below. Selection Color field Color slider (hue) Only Web Colors New color Previous color Closest Web safe color Hue Red Green Blue Hexadecimal The color picker dialog appears as below.

Using Layers Layers allow you to work on one element of an image without disturbing the others. In addition, special features such as adjustment layers fill layers, and layer styles let you create sophisticated effects.

Using Layers These icons allow you to (left to right) work with layer effects, add a layer mask, group layers into sets, create adjustment layers, create a new ordinary layer, and delete layers.

Using Layers The blending mode specified in the options bar controls how pixels in the image are affected by a painting or editing tool. It's helpful to think in terms of the following colors when visualizing a blending mode's effect: The base color is the original color in the image. The blend color is the color being applied with the painting or editing tool. The result color is the color resulting from the blend.

Using Layers Some of the blending modes available are Normal, Dissolve, Darken, Multiply, Color Burn etc., Layer effects and styles: Photoshop provides a variety of effects--such as shadows, glows, bevels, overlays, and strokes--that let you quickly change the appearance of a layer's contents.

Using Layers You can manage layers, move copy or transform layers, merge layers etc.,

Creating new images 1. Do one of the following: To base the image dimensions and resolution (Photoshop) on the Clipboard contents, choose File > New. If the Clipboard does not contain image data, the image dimensions and resolution are based on the last image you created. (Photoshop) To base the image size on the default dimensions and resolution or the last entered settings, hold down Alt when you choose File > New. 2. If desired, type a name for the image, and set the width and height. 3. Set the resolution and mode.

4. Select an option for the contents of the background layer (Photoshop) of the image. White to fill the background or first layer with white, the default background color. Background Color to fill the background or first layer with the current background color. Transparent to make the first layer transparent, with no color values. The resulting document will have a single, transparent layer as its contents. You can import scanned images directly from any scanner that has an Adobe Photoshop-compatible plug-in module or that supports the TWAIN interface. Creating new images

Brushes Brush tips The brush you select determines many characteristics of the resulting stroke. you can also create custom brushes using the Brushes palette. The Brush pop-up palette in the options bar for the painting and editing tools lets you view, select, and load preset brush tips.

Brushes The Diameter Controls the size of the brush. Enter a value in pixels or drag the slider. Angle Specifies the angle by which an elliptical or sampled brush's long axis is rotated from horizontal. Roundness specifies the ratio between the brush's short and long axes. Hardness controls the size of the brush's hard center. Spacing controls the distance between the brush marks in a stroke.

Brushes Brush Dynamics: The Brushes palette provides many options for adding dynamic (or changing) elements to preset brush tips. For example, you can set options that vary the size, color, and opacity of brush marks over the course of a stroke. Paint Brush tool: The Brushes palette provides many options for adding dynamic (or changing) elements to preset brush tips. For example, you can set options that vary the size, color, and opacity of brush marks over the course of a stroke.

Brushes Paint Brush tool: Wet edges apply paint that acts more like watercolor paint or markers. When you paint with a soft brush, the paint is more translucent in the center of the stroke and darker along the edges of the stroke. With a hard edge brush at 100% opacity, the paint still has some translucency, just as markers or watercolor paints would have. Air Brush tool: The airbrush tool works more like a traditional airbrush or spray paint. The airbrush puts paint on a bit lighter than the paintbrush tool. The airbrush is especially useful for painting subtle shading and highlights.

Brushes Pencil tool: This tool is shared with the Paintbrush and the shortcut key is B. History and Art History Brush tools: The history and art history brush are tools that help create some fantastic effects. To work with these tools you will need to have the history palette open. The history brush tool lets you paint a copy of one state or snapshot of an image into the current image window. This tool makes a copy, or sample, of the image and then paints with it. The art history brush tool lets you paint with stylized strokes, using the source data from a specified history state or snapshot.

Grids and Guides Guides appear as lines that float over the entire image and do not print. You can move, remove, or lock a guide to avoid accidentally moving it. In Photoshop, a grid appears by default as nonprinting lines but can also be displayed as dots. The grid is useful for laying out elements symmetrically.

Scaling or resizing images When an image needs to be resized in Photoshop the image size, the resolution, or a combination of both must be changed. There are two menu options that handle this. The Image Size menu option allows new image size dimensions to be specified, or a new resolution to be created. The Canvas Size option allows the existing image to remain, while appending or removing areas from it according to the dimensions entered.

Screen Capturing “capture” image that appears on screen Works like copy and paste Press Print Screen button to copy screen contents Paste into new image Press Alt+Print Screen to capture active window

Styles Palatte The Styles Palette contains prepackaged and custom Styles that can be applied to shapes, layers and text. To apply a preset style to a layer, do one of the following: Click a style in the Styles palette to apply it to the currently selected layer. Drag a style from the Styles palette onto a layer in the Layers palette. Drag a style from the Styles palette to the document window, and release the mouse button when the pointer is over the layer content to which you want to apply the style. Double-click a layer thumbnail in the Layers palette, and click on the word Styles in the Layer Styles dialog box (top item in the list on the left side of the dialog box). Click the style you want to apply, and click OK. When using a shape or pen tool, select a style from the pop-up palette in the options bar before drawing the shape.

Creating animations using Photoshop and Image Ready

Shown in the previous slide is the Adobe Image Ready program interface. This is used for creating animations and optimizing them for the web. There are also some changes to the Palettes. Instead of a Navigation Palette, we have an Optimize Palette where we set our Compression settings. We also have a Rollover, Animation, Image Map, and Slice Palette. Seven steps to construct an animation

Creating animations using Photoshop and Image Ready Seven steps to construct an animation 1.Create basic image (or open an existing multilayered image) We will construct a simple image, a sign that says "WELCOME", using the Toolbox. First, select File>New In the dialog box that opens set: Name: Welcome, Image size: Width 200, Height 40, and Content: transparent

Creating animations using Photoshop and Image Ready Click "OK" Select the Text Tool in the Toolbox and click the blank transparent image. Type "WELCOME" at the cursor on the image. We want to use a 30 px Bold Arial font so enter the values below in the Type Tool palette and change the foreground color to green. After achieving the desired font and color the Move tool can be used to center the text in the image. This is the basic image we will use to form the animation.

Creating animations using Photoshop and Image Ready 2. Add animation frames A thumbnail of the basic image should be located in the Animation palette. The initial frame needs to be duplicated several times. This is done by clicking the "Duplicate Current Frame" icon. The result should look like

Creating animations using Photoshop and Image Ready 3. Make changes in frames using Layer palette Changes will be made in the first and third frames to create the animation. In the third frame we will change the opacity so the "WELCOME" message fades away. We will change the first frame so that the message will move "onstage" from the left side to the center. Select the third frame. Then in the Layer palette move the opacity slider to 0%. The message in the third frame should now be invisible.

Creating animations using Photoshop and Image Ready Now select the first frame. Using the Marquee tool (from the toolbox) select the text "WELCOME". Then, using the Move tool, move the selection just off the left edge of the image. The image below shows the text partly moved.

Creating animations using Photoshop and Image Ready 4. Add frames with Tween We now have three frames where the message is visible in the 2nd frame, but invisible in the 1st and 3rd. We will use the Tween Command to fill in frames to create the desired actions. First we will add frames between the 2nd and 3rd frames that will cause the message to fade away. Select the 2nd frame. Open the Animation palette menu (by clicking the small triangle in the upper right of the Animation palette) and select Tween. In the Tween dialog box select to add 6 frames, Tween with Next Frame, and select Opacity to vary.

Creating animations using Photoshop and Image Ready Clicking "OK" should add 6 more frames. It only remains to set the delay between frames.

Creating animations using Photoshop and Image Ready 5. Add delays between frames Go to the Animation menu and choose Select All Frames. This will highlight all the frames. Alternately, the (number on the) first frame can be clicked and the last frame can be shift+clicked. With all the frames selected click the small down triangle to the right of sec at the bottom of one frame. Choose a delay, for example, 0.1 seconds. This is applied to all the selected frames. To set the delay for a single frame, for example Number 7, select it alone and change its delay. 6. Preview animation To view the animation go to File>Preview. It is good to check what the animation looks like in all the popular browsers. 7. Save animation The layered animation is saved as a.psd file using File>Save Original. To save it as a gif animation use File>Save Optimized. An HTML file which includes the code for placing the animation on a web page can also be generated by going to File>Export>Save HTML.

THANK YOU