adobe photoshop cs


Published on

surf through the full guide of Photoshop from practical guidance

Published in: Art & Photos, Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Read it
    Takr a picture and zoom way in! (ctrl and +)
  • Elements has less you can do with layers and vector graphics – all basic photo manip and drawing are there
    Paintshop – wordperfect folks
    Photodraw, camera software allows jpeg and gif, resizing, cropping, flip/rotate
  • Read it
  • Read it
  • Read it – have IMPORTANT tattooed on your arm!
  • Switch from pp to screen – everyone open it up
  • Point out more obvious tools
    Have everyone l-click and hold on paintbucket
  • Choose different tools – watch options change
  • Pull up windows menu
    Toolbox and options already checked – also 3 others are checked
    Bring up layers, history – lose all others
    Layers palette is VERY useful in compositing images, adding backgrounds, text, logos, etc
    History palette is your BEST FRIEND – back out of a bad decision one step at a time (if only that were true in life!)
  • File, open is often inadequate – web sites, photo archives have TONS of images, not always descriptively named (or have several similarly named versions of same image)
    Take file browser to materials folder – thumbnails!
    Point out navigation pane
    Point out sort
    Flag certain pix –
    Edit, select all flag, rotate – or open
    I don’t use metadata, but it allows you to add lots of info to photo using xml
    (actually, I drag down preview and metadata windows to make nav pane that much easier to use)
  • Bring up crop & resize pic
    Choose crop tool
    Click and drag – do it badly on purpose
    Fine tune with sizing boxes
  • D-click it
    Save with diff name (Save As)
    Close original – just say NO! – it’s counterintuitive
    We’ll talk about saving options shortly
  • Some quick web design stuff:
    You are going to be doing this A LOT
    Small is good – for web, crop to lose as much of background as possible – get up as close as you can
    900 pixel width of content means a third of viewers have to scroll left to right – it’s annoying
    You’ve got scrollbars too – so design with 750-ish in mind
    Banner photo – 700-750 pix wide
    Photo + wrapped text on page – 300 pix wide
    Little photo with an article – 100 pix wide
    Height is less important – people are used to scrolling down – and you can use the wheely thing on your mouse
  • Look at our picture’s title bar – it’s not shown at real size
    CTRL + or - to raise or lower
    Mag glass also works (too cumbersome unless you’re zooming in – we’ll do that later)
    View, actual pix works too
  • Contrain proportions before you do anything
    300 width – height will change
    Lower box is for print – inches (though resolution will be a factor in actual size of printed photo)
    Cropped, resized, we’re ready to save
  • Photos = jpg
    Cartoons = gifs
    Often surprizing exceptions, so look at both – PShop makes it very easy
    Don’t use pings
    If there are transparent bits, use gifs
    ***brokering a compromise between file size and quality! – you will do this a lot!
  • File, Save for Web
    IReady is very cool – animate, rollovers, image maps, multi-state buttons (my site at end of PP has a bunch of lessons)
  • Jpeg/gif
    Don’t bother with high/medium/low – use quality slider
    Go real low – zoom in – look for artifacts – Blur will help a little
  • Draw Apple tree picture
    Add background
    Add pattern background
    Add a gradient
  • Let do a 300 x 500 px image
    72 res (standard for web)
    RGB, 8 bit
    White b-ground
  • Bring up the paintbrush
    Set size
    Draw – notice the color is the color in the color picker
  • Slide the slider and the field changes – black in lower left, white in upper right, all colors in between them
    Numeric values – RGB, CMYK, and IMPORTANTLY – hex codes for web (how to survive color blindness – way to match colors easily – how the web defines color)
    Web safe colors off – continuous color field – web safe colors on – boxes of colors
    If you have an image up in PShop – move your cursor to it and sample it!
    ****Go to next page for lesson****
  • Turn off ground layer, flower layer
    Choose a blue background (TURN ALL LAYERS OFF) – paint it
    Turn flower/ground back on!
  • Change to pattern – paint it
  • Back up in history panel
    Draw a gradient – left to right
    Now draw right to left – notice how the transition stops and starts with your l-clicks
    Draw on the diagonal
    Draw all 5 patterns on toolbar
  • Skip this slide – it’s here so if you want to customize a gradient you can
  • Use the history panel to choose gradient, background color, or pattern
  • Use navy photo
  • rotate photo for rotate
    Use scanned photo – dadfleetwood – for arbitrary
    Flip it around
    Bring up grid
  • Color balance, brightness and contrast are self evident – figure it out yourself
    Bring up Jesse to work with levels
  • Watch me do this – we’ll use these tools later, tho
    Use which image?
  • Use burn example
  • Erase fold in fleetwood
  • read
  • Use shay pic – let them play
  • Use CSU logo
  • Csu logo
  • Took logo, used magic eraser at 0 tolerence (set at 5-10 it’s much less noticeable)
    64 colors, no dither on both images
    Only difference is trans. Dither turned on in 2nd one
  • Use cats on mars – add headline for text?
    Use web header
  • read
  • read
  • R-click - properties
  • adobe photoshop cs

    1. 1. An ISO 9001 -2008 company “Total Web Solution Company Customized To Your Business Needs” PHOTOSHOP FULL GUIDE 1
    2. 2. Table of contents  Basic concepts………………....................…….................…slide 3   Basic photo manipulation …....................………………..….slide 13   2 Creating transparent backgrounds, saving transparent images, transparency dither Layers……………………………....................…………..…..slide 51   Rotation, adjustments, the dodge-burn-sponge tools, the clone tool, the filters menu Transparency……………....................……..........................slide 46   New image dialogue box, pencil and paintbrush tools, paintbucket and gradient tools, saving as .gifs, dither Adjusting/retouching photos……....................……………..slide 37   Opening, cropping, resizing, saving as .jpeg Creating new images………………....................…..……….slide 26   What is Photoshop?, other options, types of image files, The Photoshop workspace (toolbox, options bar, palettes) Layer basics, moving layers, naming layers, copying layers, compositing images, transforming layers, layer via copy/cut, adding text Other resources……………….............................................slide 61
    3. 3. Basic concepts What is Photoshop?, other options, types of image files, The Photoshop workspace (toolbox, options bar, palettes) 3
    4. 4. What is Photoshop?       4 Image editing program Shows images as bitmaps Bitmap = arrangement of dots (pixels) on grid  Don’t confuse bitmap with file type called .bmp - just a descriptive term Pixel = “Picture element” - smallest unit of an image Size of pixel depends on resolution  Typical web image: 72 dpi  Typical print image: 300 dpi or hgher End result can be saved in variety of ways: .bmp, .jpeg, .gif, .tif
    5. 5. Other options     5 Adobe Elements (basic, cheaper version of PShop) - $79 Corel Paintshop Pro - $79 (similar to Elements) MS Photodraw/ PhotoEditor – often free Software that comes with digital camera
    6. 6. Types of image files 1    6 .psd  Native Photoshop file, usually needs to be saved as other type  New images, layered images start as .psd .gif  Good for web, used for simple images, large eras of flat color  Often good for B & W  Supports transparency  Lossless .jpeg  Good for web, used for photos or complex coloration (e.g. – gradients)  Slightly longer to download (decompression time)  Lossy  Doesn’t support transparency
    7. 7. Types of image files 2    7 .png  Good for web, best of both worlds (lossless, supports complex photographs)  Not supported by older browsers (pre IE 4, NN 6)  Wait for all browsers to catch up before using .tif  Good for print media  Can be imported by most apps (QuarkX, Pagemaker, InDesign)  Large file sizes (but compressible)  Can supports layers .bmp  Simple grid of pixels  Uncompressed, large file sizes  Can be imported by almost all apps
    8. 8. Color modes  Image, Modes  RGB is almost always best bet       Default choice CMYK for high end professional printers Grayscale for B&W Index greatly reduces file size IMPORTANT: If Photoshop is not allowing you to use a tool, change mode from index to RGB 8-bit is usually adequate  It’s per channel, so you’re actually talking about 24 bit image in RGB mode  16-bit only for very high resolution pictures  8 Very large file size
    9. 9. The Photoshop workspace Options palette History palette Layers palette toolbox image 9
    10. 10. The toolbox   Commonly used tools arranged as icons Triangle in lower right means multiple tools are nested there Paintbucket icon  10 Expanded: Gradient and paintbucket tools Left-click the icon and hold down the button to see all tools nested there
    11. 11. The options palette   Just below the Menu choices Changes depending on which tool you’ve chosen from the toolbox Options palette for paintbucket tool  11 Allows greater control of that tool by changing settings
    12. 12. The palettes   19 palettes available from the Windows menu Only need a few up all the time    Toolbox (already discussed) Options (already discussed) Layers    History    12 One of the main reasons Photoshop is so versatile Layer images on top of other images – mix text, photos, shapes by superimposing them Ctrl + Z only works for the last thing you did History palette lets you go “back in time” step by step - particularly useful when you’re first learning Photoshop, so you can back out of a bad decision Pull up others (e.g. Character for text, Styles for special effects) as needed
    13. 13. Basic photo manipulation Opening, cropping, resizing, saving as .jpeg 13
    14. 14. Opening an image: the file browser  If you know exact name of file…     For large libraries of images, or nondescriptive file names…    14 File, Open Web sites often have huge numbers of images 1 images folder – gets bigger and bigger Window, File browser Gives thumbnail of every picture in folder Allows fast ways to browse, sort, flag, rotate, delete, etc.
    15. 15. The File browser Rotate Folder browser Thumbnails Metadata 15 Flag Search Delete
    16. 16. Cropping an image 1  Bring up image     Choose cropping tool Left-click and drag to define crop area    16 File, Open (if you know the name of file) Window, File Browser (to see thumbnails of all images in a folder) Uncropped area will be shaded Don’t have to be perfect Use sizing boxes to fine-tune crop area
    17. 17. Cropping an image 2  When you’re happy with crop, doubleclick inside it    The cropped image will be displayed Rename the image (so you don’t overwrite original image) and save it   17 Cursor will change to solid black triangle AFTER you’ve saved it, when Photoshop asks if you want to save changes, say “no” (it’s counter-intuitive, but you’ve already saved a version of your image) We’ll discuss save options in a few minutes
    18. 18. Resizing an image 1  For web: smaller image = smaller file size = faster download time   Also lower file size by compressing when saving Web images are measured in pixels   Actual size depends on resolution Design with 800 x 600 in mind     18 640 x 480 (1%)* 800 x 600 (29%)* 1024 x 768 and higher (68%)* Your specific audience might skew higher or lower *these numbers are notoriously hard to track accurately
    19. 19. Resizing an image 2  Images will not necessarily be shown actual size in Photoshop    Look at title bar to see percentage Ctrl and + to zoom in Ctrl and – to zoom out   19 Magnifying glass in toolbar does this too (more cumbersome, but good for zooming in on the specific area you click) View menu, Actual Pixels will also take you to 100%
    20. 20. Resizing an image 3   Image menu, Image Size Make sure “Constrain proportions” is checked to avoid stretching     20 Link icon appears Change width (in pixels), height will automatically change Use document size box for print (set in inches, not pixels) Save as new file name, so as not to overwrite original image
    21. 21. Saving images 1  General rule:       Goal is to find a compromise between file size and image quality  21 Photos, complex images save as .jpegs Cartoonish images with large areas of flat color save as .gifs Many exceptions, so try both options and compare side by side (using 2-up or 4-up) .png is not supported by all browsers, so try to avoid Transparency supported by .gif, but not .jpeg Lower file size = lower image quality
    22. 22. Saving images 2   After you’ve cropped, resized, adjusted File, Save for web    Dialogue box appears  22 ImageReady is another option (icon at bottom of toolbox) IR doesn’t help that much with simple images (use for animation, links, rollovers – web specific tasks) Choose 4-Up tab at top
    23. 23. Save for Web dialogue box 1    23 4 versions of picture Allows side-byside comparison of different settings Use these controls to change settings
    24. 24. Save for Web dialogue box 2    24 Ctrl and + or – will allow you to zoom in or out L-Click and drag allows you to drag image around Download time under all 4 versions: CRUCIAL piece of info
    25. 25. Saving .jpegs   Use this pulldown to switch between jpeg and gif Use this slider to adjust quality     25 Higher quality = larger file size Often get by with 15-20 for web use Zoom in and drag around to look for “artifacts”  Little blemishes caused by compression process, often in areas of flat color Adding a little blur with this slider sometimes masks artifacts or poor image quality  Don’t overdo it!
    26. 26. Creating new images New image dialogue box, pencil and paintbrush tools, paintbucket and gradient tools, saving as .gifs, dither 26
    27. 27. New image dialogue box     27 Width, height in pixels, inches, cm, etc. Resolution: 72 ppi for web work,300 or higher for print Color mode: RGB best default, grayscale for B&W, CMYK for highend print work Background content: transparent for gifs only, background color needs to be set beforehand
    28. 28. The pencil and paintbrush tools  Left-click and hold down icon to choose     28 Pencil has hard edges Brush has feathered edges Brush pulldown in options bar controls diameter, hardness Brush palette has presets for stars, leaves, grass, etc.
    29. 29. The color picker 1       29 On toolbox Flips background and foreground Foreground color picker Background color picker Default (in this case B&W) Click background or foreground to bring up color picker
    30. 30. The color picker 2       30 Color slider Color field Field/slider combo gives you access to all colors Numeric color values Web safe colors option (important!) You can sample colors with the CP eyedropper
    31. 31. The paintbucket tool 1   Left-click and hold down to choose between paintbucket and gradient Paintbucket is for solid fill backgrounds and patterns    Select proper layer, choose paintbucket, click on area to fill   31 Solid fill – choose color from options bar Patterns – lots to chose from: cloth and paper textures, nature images (rocks, flowers), abstract patterns Can’t paint a background – change to layer first Tolerance and opacity on options bar
    32. 32. The paintbucket tool 2  For patterned backgrounds     32 Change Fill box from Foreground to Pattern in options bar Use Pattern box pulldown to see patterns to use Use this button to bring up more pattern choices Select your pattern, choose layer, click on image
    33. 33. The gradient tool    Gradient = gradual transition between two or more colors Choose gradient tool, choose preset from options bar “Draw” gradient with a left click and drag    33 Starting and stopping points and direction of dragged line will define gradient Use History panel to back up, try again Click on Gradient box in toolbar to create own gradient
    34. 34. Custom gradients      34 Preset gradients are here Click on these boxes to change opacity (for a fade to transparency) Click on these to change color of gradient Slide them to change when gradient ends This changes midpoint of transition
    35. 35. Saving .gifs 1   File, Save for web, 4-Up tab (just like .jpegs) Can have between 2 and 256 colors   35 More colors = larger file size Control # of colors with this pulldown
    36. 36. Saving gifs: dither     Dither diffuses color boundaries by mixing pixels together Good for preventing “banding” in gradients and shading Turn it on using this pulldown (diffusion is usually best bet) Set amount of dither, from 0 to 100  36 Don’t overdo it – can create graininess
    37. 37. Adjusting and retouching photos Rotation, adjustments, The dodge-burnsponge tools, the clone tool, the filters menu 37
    38. 38. Rotation      38 Image menu, Rotate canvas 180o, 90o clockwise or counter Flip horizontal or vertical Arbitrary is for specific number of degrees (not really arbitrary at all!) Bring up grid (View menu, Show, Grid) for more accuracy
    39. 39. Adjustments 1  Image menu, adjustments allows you to fine-tune image (or sections of image)   LOTS of options Adjust levels, color balance, brightness, contrast   Contrast and Color have both auto and manual options Levels limits the range of pixels being used (auto-levels lets P-Shop do it)   39 Very useful tool Auto option available as well
    40. 40. Adjustments 2  40 To adjust just a section of photo, use the marquee or lasso tool to select section, then adjust (upper-left in toolbox)  Marquee for squares/rectangles and circles/ellipses  Lasso for irregular sections  Regular lasso for freehand (need good mouse skills)  Polygonal for point to point (I recommend this)  “Magnetic” lasso for P-Shop to decide (based on change in pixel value)  Tip: Little circle in lower right of cursor lets you know you’re done; quit before that and PShop will just keep drawing lasso Marquee tools Lasso tools
    41. 41. Dodge/burn/sponge tools    Dodge – lightens an area Burn – darkens an area Sponge – saturates or desaturates color     41 Mode box in options bar determines saturate or desaturate For Dodge/Burn, keep exposure low (20-30), use multiple passes For Sponge, keep flow low, use multiple passes Use history palette to “back up” if you go too far
    42. 42. The clone tool 1      Really fun! “Clones” pixels from one area of your image and places them in another VERY useful for repair and retouching Select Clone stamp tool from Toolbox Bring up image   42 Hold down Alt key – cursor turns to crosshairs
    43. 43. The clone tool 2    Move cursor to general area you want to clone from (make sure there’s room on all sides) With Alt key still held down, left-click to select clone area Left-click and drag to paint cloned pixels onto new area     43 Cross marks where you are sampling from – will move as your cursor moves Re-sample clone pixels as needed Change brush size in options bar as needed Takes practice, but a very useful tool
    44. 44. Filters 1     Almost as fun as the clone tool! Over 100 effects to choose from Some are subtle, some bizarre Filter gallery is best approach:   44 Allows you to quickly tour all filters Shows preview on left as you adjust variables
    45. 45. Filters 2 45 preview filters variables
    46. 46. Transparency Creating transparent backgrounds, saving transparent images, transparency dither 46
    47. 47. Creating transparent backgrounds 1  Bring up image   L-click and hold down eraser tool to get all options    Choose Magic Eraser tool Set tolerance to 5 in options bar (a starting point) Anti-alias should be checked (gets rid of “jaggies” on edges)  47 Need a flat color background Uncheck contiguous to make insides of letters transparent
    48. 48. Creating transparent backgrounds 2  Click on background  Background will disappear, checkerboard will appear     If some background remains, Ctrl + Z, raise tolerance If some logo is gone, Ctrl + Z, lower tolerance If you get Ø symbol, change image mode from index to RGB  48 No checkerboard in actual image Image menu, choose Mode, choose RGB
    49. 49. Saving .gifs: transparency dither   Only .gifs support transparency Turn on transparency here    Turn on transparency dither here (diffusion usually best) % of transparency dither  49 Background will be checkerboard Again, don’t go crazy
    50. 50. Transparency dither example   50 Without transparency dither With 51% diffusion transparency dither (all other variables the same)
    51. 51. Layers Layer basics, moving layers, naming layers, copying layers, compositing images, transforming layers, layer via copy/cut, adding text 51
    52. 52. Layer basics 1   Layers are like sheets of glass stacked on top of each other From top to bottom:      52 Text layer Text effect/Drop shadow Photo at left Gray background L-click and drag layers to move them up or down
    53. 53. Layer basics 2 Visibility off/on toggle Selected layer effects 53 New layer/Drag here to copy Drag here to delete
    54. 54. Layer basics 3  Name your layers with a descriptive name    Right-click a layer and choose “layer properties” You can left-click right inside the name to change it too The “color” pulldown allows you to color code you layers  54 Good organization technique for complex images
    55. 55. Compositing two images 1  You can save a layer from one image directly into another image   Fast effective way to composite two images Right-click on layer, select Duplicate Layer   55 Destination document must be open as well Choose destination document from pull-down
    56. 56. Compositing two images 2   You can drag layers from one image to another Both images must be open       56 Select Move tool from toolbox L-click and drag You’ll see new layer in layer palette Drag multiple times to create “clone” images If it doesn’t work, make sure both images are in RGB mode Fine-tune position by using arrow keys to move it to correct spot
    57. 57. Transforming layers  Use transform to manipulate a layer within an image, not entire image     Use sizing boxes or Options bar   57 Select layer to transform Edit menu, Transform Resize, rotate, flip, etc. If resizing, use Scale command Click chain link in options bar to keep width/height ratio intact
    58. 58. Layer via copy or cut  You can select a section of a layer, then copy or cut the selection into new layer    58 Use Marquee or Lasso tool to make a selection Right-click Choose “Layer via copy” or “Layer via cut”
    59. 59. Adding text   Choose text tool Two ways to begin:    Use Options bar for basic manipulation   59 Click once on image for insertion point, begin typing, or… L-click and drag to define text area, then start typing Text options can all be changed after the fact – highlight text, then change settings on Options bar Font type, style, size, anti-alias type, alignment, color
    60. 60. Character palette  For more advanced manipulation   Window menu, Character Particularly useful for squeezing text or spreading it out Kerning – space between 2 letters (on either side of cursor) Vertical scale – adjusts height of type Upper/lower case, sub/super script, etc. 60 Leading – space between lines Tracking – space between all letters Horizontal scale – adjusts width of type
    61. 61. Other resources  Websites:  Photoshop training videos   ImageReady training videos   Photoshop and ImageReady CDs   Same material as website, larger screen size Email me and ask for them  61