1
Working with Web Graphics
– About Web Graphics. File Formats. Image Resolution, Image Size
– Creating Web Graphics. Getting Started, Paint Shop Pro 5
2
About Web Graphics,
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 manage COLORs.
How ???1. Differentiate COLOR Balancing,
If you differentiate COLOR Balancing, different File Formats will occur;• Gif • JPeg
3
About Web Graphics,
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.
4
About Web Graphics,
Image Resolution, Image Size
1 c
m
28,346 pixel ---- 1 cm450 pixel ---- ? cm
? = 450 x 1 / 28,346 = 15,87 cm
Resolution
# of PIXEL on 1 cm
width and height
Difficult to LOAD
Resolution = 28,346 pixel/cmWidth = 450 pixelHeight = 334 pixel
5
Paint Shop Pro 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 ...
6
First to DO ...
... Apply settings according to Web Graphics ...
1. Run the Program2. File > Preferences > General Program Preferences
. Undo
. Rulers and Units
3. View > Toolbars
8
... Create a New Image ...
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 ....
9
... Toolbars ...
. 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
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 level effects, the appearance of the images softens.Blur
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.