Graphics - Photoshop Tutorial, Guides for Photoshop
sundar29 January 2014

Graphics - Photoshop Tutorial, Guides for Photoshop

PDF (680 KB)
18 pages
1000+Number of visits
Photoshop tutorial to teach things in best way. These slides talks about: Graphics, Bitmap, Vector Graphics, Types of Graphics, Photographic Images, Graphic Format for the Web, Format for Print, Standard Photoshop File, ...
20 points
Download points needed to download
this document
Download the document
Preview3 pages / 18

This is only a preview

3 shown on 18 pages

Download the document

This is only a preview

3 shown on 18 pages

Download the document

This is only a preview

3 shown on 18 pages

Download the document

This is only a preview

3 shown on 18 pages

Download the document

Graphics Overview: Using Photoshop

Computer graphics boil down to two basic types: (bitmaps and vectors )

1. Bitmap (or raster) graphics: • Bitmap graphics are stored as a series of tiny dots called pixels. • Each pixel is assigned a color, and when they are viewed all together, they form

the picture. • Bitmap graphics can be edited by erasing or changing the color of individual pixels. • There are many different bitmap file formats:

• TIFF for print; Photoshop's PSD and BMP; and • GIF, JPG, and PNG for the Web.

2. Vector graphics: • Unlike bitmaps, vector graphics are not based on pixel patterns, but instead use

mathematical formulas consisting of lines and curves that make shapes. • Vector graphics are ideal for illustrations, line art, and type. • However, with the exception of Macromedia's Flash and Shockwave formats, most

browsers do not support vector graphics. • As a result, vectors have to be converted to bitmap (rasterized) before being

displayed on the Web. • Some vector graphics file formats include: EPS; Illustrators' AI and WMF; and PICT

for the Mac.

Types of graphics

1. Photographic images: • Continuous tones, 24 bit color, no text, few lines and edges

2. Graphics, Logos, Line art and Screen Captures: • Solid colors, up to 256 colors, with text or lines and sharp


Image mode (RGB, indexed color, Gray scale, CMYK)

• RGB:

• Uses millions of colors. Flexible for editing.

• Use when working on editing or creating an image (millions of colors).

• Save file as .psd . Remember when saving in PSD, this will produce a large file and will not be viewed on the web. The PSD file is good to use while editing file.

• Layers are available in this mode and not in gif or jpg, or png (they are compressed/ flattened files)

• Jpg/png24, uses RGB but NOT gif.


• The CMYK model is based on the light-absorbing quality of ink printed on paper.

- Pure cyan (C), magenta (M), and yellow (Y) pigments should combine to

absorb all light and produce black. For this reason these colors are called subtractive


- Use when working on images for print and save as .tiff and use high resolution (200-600).

- Indexed color mode:

• 8bit or 256 colors. Used with .gif files. Not flexible to use while editing and you will get chunky result


• Resolution

• The resolution of an image describes how fine the dots are that make up that image.

• The more dots, the higher the resolution (better quality).

• Resolution for the screen/web (dependant on monitor size):

• When displayed on a monitor, the dots are called pixels.

• A 640-by-480-pixels on screen is capable of displaying 640 distinct dots on each of its 480 lines, or about (640 X 480) 300,000 pixels.

• Use 72 - 200 resolution for web (Note: if use higher resolution than 72, your file size will increase and dimensions of height and width as well)

• Resolution for printer: • A 300 dpi (dots per inch) printer is capable of printing 300 dots in a line “1 inch” long.

• This means it can print 90,000 (300 X 300) dots per square inch

• Use 200- 1200 resolution for printing

Working with mode:

To change your image over to RGB mode:

- select Mode from the Image pull down menu and choose RGB Color.

To resize image:

go back to the Image pulldown and select Image Size. Enter in the size you want (either the pixel dimension or in inches - make sure the resolution box reads "72") and click OK.

Graphic format for the web/screen: GIF: Graphic Interchange Format • First graphic format for the web created by CompuServ • Standard gif is 8bits or 216 colors • Transparent gif: GIF89a (No background color: blends into any

background since it doesn’t have any background color of is own)

• Gif uses “LZW” (Lemple-Zev-Welch) compression. • This compression takes advantage of the repetitions in

data streams. • LZW is efficient for storing simple graphic, flat colors,

Banners, logo’s (images with little color shading)..

Graphic format for the web:

• Jpeg or JPG: Joint Photographic Experts

• 24 bits... Millions of colors

• used for photograph and complex images

• Uses Lossy compression method: • which compresses shades of tones that are not visible by the eye without

loss of quality

• Used to compress photographs

PNG (png8 and png 24):

 PNG: Portal Network Format

 Types of PNG:

Png_8: 8 bits.. 256 colors, good for simple graphics .. Not too many shades of colors

Png_24: 24 bits or millions of colors. Good for complicated images such as photographs.

 Lossless compression scheme and better compression than gif

Format for Print/editing/scan: Tiff : (great quality image used for print)

• TIFF - Image File Format (.TIF files).

• TIF files are large, huge even, but it's the price we pay, it's how large

the data is.

• TIFF is the most universal format, about any program on any

platform will handle TIFF.

• TIFF has been the format of choice for use for master copies of

scanned data for years.

• TIFF was developed by Aldus, before Adobe bought them, and is the

most widely supported format across other platforms.

• Not used on the web

• Great for print (good quality), but remember that it’s a large file

PSD: standard Photoshop file(.psd)

• Uses millions of colors (RGB: red, Green, & blue)

• (0-256 shades of red, 0-256 shades of Green, 0-256 shades of blue)

• Great for editing / work in progress

• Saves with layers / helpful while editing a file

• Very Large file

• PSD file format will not work on the web … (except in Safari under

Mac OS X... Which will display a flattened version of your image.)

Other formats: These formats are not commonly used on the web (as they are not supported by all browsers)

• BMP (Windows Bitmap)

• BMP will handle 24 bit data but it cannot be compressed.

• BMP uses RLE (Run Length Encoding) to compress 8 bit data, which is

effective in graphics, but much less effective in continuous tones like


• PICT (Macintosh Quickdraw) PICT is used in page layout and graphics

programs; it creates large files and is not suitable for exchange with Windows


Browser color palette:

 Browser Safe palate ( web):

 Browser uses 256 colors (8 bits).

 40 colors are reserved for its own use

 216 colors are used by the browser

 Dithering: browser tries to substitute colors if not part of its palate

 Interlace: browser will display image gradually

 Anti-alias: blending of pixel colors on perimeter of hard-edge shapes. Smooth edges and not jagged

• Photoshop tips for the web

Graphic format for the web/screen:

• File formats to use: gif, jpg or png

• To save for the web using Photoshop: • From the FILE menu, select SAVE FOR WEB and then select the desired web

format from the window that comes up.

• Make sure you select “0” dithering colors (minimal loss of color)

General Photoshop tips (such as after scanning)

• To reduce image size and resolution: • From the image menu, select “image size” • You can also use the “Crop” tool to remove parts of the image along the


• You can change the orientation of the image: • From the image menu, select “Rotate canvas”

• To restore some lost information after resizing image (or scanning) • Apply “unsharp mask”: from “filter menu” choose sharpen then select “unsharp mask” • You can also try to adjust colors (after scanning or changing size of image): • Image menu: select adjustments, then try the following • Curves

• Auto levels

• Auto contrast

• Variations

Useful Chart when working with image (web vs print)

Image type Editing image/While working on with image

Output to screen/web Output to printer


(complicated image)

Mode: RGB: best for web

Save file as: .psd

CMYK: mode used for printing

Save file as: .tiff

Format: Jpg or png

Mode: RGB

-Millions of colors

Resolution: 72-200

The lower resolution, the lower file size

Format: .tiff or .pict

- mode: CMYK

-Millions of colors


Line art image

(simple image)


RGB: mode best for screen

Save file as: .psd)

CMYK:mode used for printing

Save file as: .tiff


Gif or png8

-256 colors (mode: index)


The lower resolution, lower file size


.tiff or pict

-Millions of colors

-resolution: 200-600

Mode: CMYK

Scanning Scan at high resolution

150-300 web

200-600 print

After scanning and editing image, save for desired output as mentioned above

Move object tool

- Rectangular marquee tool - press to select Elliptical Marquee tool

- Crop tool

- used to Shrink image. You can also use to enlarge image

- Paint bucket tool

- used to paint large area of canvas. It uses colors in the foreground

-Type tool

- Eye dropper tool

-to select a foreground color from image

-Foreground color

- used when using type, paint bucket, pecil, paint brush

-Background color

- used when “cut” from edit menu

-Pencil tool: free hand drawing (uses foreground color)

- Press on same tool to select a “Brush” tool

Overview of Photoshop tools

comments (0)

no comments were posted

be the one to write the first!

This is only a preview

3 shown on 18 pages

Download the document