Working with Web Graphics About Web Graphics . File Formats . Image Resolution, Image Size

1. Working with Web Graphics • About Web Graphics • . File Formats • . Image Resolution, Image Size • Creating Web Graphics • . Getting Started, Paint Shop Pro 5

2. File Formats • . We must work with COLORs, • . There are millions of COLORs produced by the mixture of main colors (R,G,B) • . Web pages are LOADED over the telephone lines, • . Download bandwidth is very very important, things must be easy to load. • There are many ways to manageCOLORs. • How ??? • 1. Differentiate COLOR Balancing, • If you differentiate COLOR Balancing, different FileFormats will occur; • Gif • JPeg About Web Graphics,

3. Image Resolution, Image Size Web is a visual media; NOT PRINT MEDIA. SIZE properties (width, height) of an image DOES NOT fit according to the RULER Measuring. Image Resolution : is the number of PIXELs on 1 cm size. Pixel : Short for Picture Element, a pixel is a single point in a graphic image. Image Size : is the dimension of (width, height) an image. ! You should not use CENTIMETER as an unit for Web Graphics, always use PIXEL. With respect to WEB GRAPHICs, please use the standarts listed above: . Dimension Unit = PIXEL . Image Resolution = 28,346 pixel/cm . Width of the image should be smaller than 600 pixels. About Web Graphics,

4. Image Resolution, Image Size Resolution  1 cm Resolution = 28,346 pixel/cm Width = 450 pixel Height = 334 pixel width and height  28,346 pixel ---- 1 cm 450 pixel ---- ? cm ? = 450 x 1 / 28,346 = 15,87 cm # of PIXEL on 1 cm  About Web Graphics, Difficult to LOAD

5. Getting Started PSP 5; is very simple, and able to do almost everything with respect to Professional Programs. . Create new images in .jpeg, .gif, .png and many other formats. . Create transparent images in .gif format. . Edit the all properties of an image. (size, resolution, color, etc.) . Built up many layers on one work. . Apply many effects on a layer. . Capture and save a screen shot view on your computer. . and many many other things with images .... Detailed information about PSP 5 at http://www.jasc.com Run the Program : START > PROGRAMS > Paint Shop Pro 5 > Paint Shop Pro 5 and, begin to enjoy yourself ... Paint Shop Pro 5

6. ... Apply settings according to Web Graphics ... 1. Run the Program 2. File > Preferences > General Program Preferences . Undo . Rulers and Units 3. View > Toolbars First to DO ...

7. jıo ... Screens ...

8. 1. File > New . Unit must be PIXEL . Resolution must be 28,346 pixel/cm . Background color or transparency ??? 2. File > Save .jpg .gif Give your decision .... ... Create a New Image ...

9. . View > Grid > Rulers . Image > Flip > Mirror > Rotate > Canvas Size > Resize > Deformations > Effects > Blur . Colors > Adjust > HSU > Negative Image > Set Palet Transparency . Layers . Capture > Setup > Start Capture ... Toolbars ...

10. Ruler and Grid • Paint Shop Pro includes a ruler and a grid to help you align your artwork and arrange image elements symmetrically. • The grid/ruler can be set at any size, and the grid can be configured to display inches, centimeters, and pixels. • Set the options in the Rulers > Units > General Preferences dialog box. • To display the grid/ruler, choose Grid/Ruler from the View menu.

11. Flip and Mirror • The Flip and Mirror commands reverse an image or selection's orientation along the vertical and horizontal axes: • The Flip command reverses the image or selection vertically, so that what was the top becomes the bottom, and vice-versa. (Image>Flip). • The Mirror command reverses the image or selection horizontally, so that what was the left side becomes the right side, and vice-versa. (Image> Mirror) Original Flip Mirror

12. Rotate • The Rotate command lets you spin an image by a specified number of degrees. (Image>Rotate) • Select the direction of rotation Right is clockwise, and left is counter-clockwise. Click the direction's option button or its text. • Select the degrees of rotation from the Degrees group box. Click the appropriate option button or its text. • On an image with multiple layers, select the All Layers check box to rotate all the layers. Leave it blank to rotate only the current layer Rotated 30 degrees

13. Canvas Size • It increases or decreases image dimensions by adding or removing pixels around the original image. You can add or remove pixels around the entire image or around selected edges. Blur • Blur level effects, the appearance of the images softens.

14. Resize • Resizing duplicates or deletes pixels as necessary to achieve the desired width and height. Image > Resize ***Aspect ratio is the relationship of the image’s width to height. If you want to retain the original proportions when resizing, select this check box.

15. Deformations • Deformations alter an image or selection to achieve a particular effect. They create an effect by moving image data from one area to another. As the name implies, the result is deformed version of the original image. ***Use deformation browser to see each of the effects ***Deformations and filters can be applied only to grey scale and 24-bit color images.

16. Effects • Add Drop Shadow command adds a shadow effect behind the current selection. • choose a shadow color from the Color box. • select the shadow’s opacity. As the opacity decreases, the drop shadow fades. • set the blur of the shadow. As the blur level increases, the appearance of the shadow softens. • Vertical and Horizontal Offset sliders to control the alignment of the drop shadow. • Buttonize command adds interest to your Web page by creating square or rectangular buttons from any image or selection. It applies a three dimensional border that makes the image or selection appear raised. • select the "Auto Proof” (update the original image) • Select the solid colored or transparent edges option. PSP uses the background color for solid edges. • Select a height and a width, set the opacity of the edges.

17. Chisel command adds a three-dimensional border around a selection or layer to make it appear as though it were cut out of stone. • Cutout command creates the illusion that part of the image has been removed, allowing you to see through the image to a lower level. You can apply this effect only to a layer that contains a selection or is not a background layer. • Select the "Auto Proof" check box. (updates the original image) • In the Attributes panel, select the "Fill the interior with color" check box • choose an interior color from the and a shadow color. Your color choices are the same as for the interior. • Set the opacity of the shadow by dragging the Opacity slider. • et the blur of the shadow by dragging the Blur slider. As you increase the Blur level, S shadow widens and its edges soften. • The Vertical and Horizontal Offset sliders control the alignment of the interior and outline

18. Colors Adjust > Hue Saturation Lightness • Hue refers to the color’s tint, saturation to the hue’s purity, and lightness to the color’s brightness. • Negative Image command replaces the color value of each color with its opposite on the 0-255 scale. The effect is similar to a photographic negative, and the function can be used to create a positive image from a scanned negative.

19. Set Palet Transparency • Determine the color you want to make transparent by doing one of the following: • Selecting the color as the background color. • Locating the color’s palette number from the image palette. • Choose Set Palette Transparency from the Colors menu. The Set Palette Transparency dialog box opens. • Set the transparency by selecting the appropriate option: • To undo the transparency of a color, select No transparency. • To assign the background color, select Set transparency value to the current background color. • To assign a color by palette number, select the number from the palette entry box. • To view the new selection in the image, click the Proof button. Paint Shop Pro removes the color from the image. A transparent color remains visible in the image until you choose the View Palette Transparency command.