![Page 1: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/1.jpg)
Photoshop
Teppo Räisänen
LIIKE/OAMK 2011
![Page 2: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/2.jpg)
General Information
Photoshop is an advanced image editing tool Web Graphics Printed material
UI is based on menus/commands floatable tool windows
![Page 3: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/3.jpg)
Tools
Stages of use of tools Choose the appropriate tool Make the necessary adjustments Point the mouse into the image and
perform the operation with the tool
![Page 4: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/4.jpg)
History
Previous commands are shown in the history window
Drag the operation into the recycle bin to cancel the operation
Otherwise undo/redo and step backwards/forward can be used
![Page 5: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/5.jpg)
Opening a Image
File > Open Note: ”All Formats” shows also the
formats not compatible with Photoshop
Several images can be opened at the same time to be edited within Photoshop
![Page 6: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/6.jpg)
Creating a new image
Steps: File > New (use presets) Adjust Height & Width Adjust resolution (72 ppi for Web
graphics) Adjust color model (RGB for Web
graphics)
![Page 7: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/7.jpg)
![Page 8: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/8.jpg)
Saving an Image
Photoshop’s native format is .psd .psd stores all the information
about the image => Use .psd for work copies
Finally for Web use ”Save for Web” and choose between .jpeg/.gif/.png
![Page 9: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/9.jpg)
Colors
The tools window shows the current Foreground color Background color
To change colors use swatches clicking on squares from tools window colors window
![Page 10: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/10.jpg)
Brush/Pencil tool
For freeform drawing Options:
Shape and size Opacity
![Page 11: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/11.jpg)
Paint Bucket
Fills the selected area with color Gradient Tool fills the area with the
selected gradient Note: adjust the scope of the
gradient by dragging the mouse
![Page 12: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/12.jpg)
Crop Tool
For cropping the image into a selected area
The area is adjusted by dragging with mouse
Finally, click on the v-button to perform the cropping
![Page 13: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/13.jpg)
Brightness and Contrast
For adjusting the general look of the image
Also subareas of an image can be modified
Image > Adjust > Brightness/Contrast
![Page 14: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/14.jpg)
Histogamm
For more sophisticated adjustments Image > Adjust > Levels Adjust all the rgb components or
select a single channel Basic adjustment includes removing
the empty areas from the histogamm by dragging the arrowheads
![Page 15: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/15.jpg)
Histogamm
![Page 16: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/16.jpg)
Selections Selections are essential when
editing areas of an image Options:
Marquee Tool Lasso Tool Magic Wand
Selections are performed by dragging with the mouse or clicking
![Page 17: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/17.jpg)
Selections
Selections can be added to existing selections transformed reduced from existing selections
There are several settings connected to the selections
![Page 18: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/18.jpg)
Quick Mask
Tool for sophisticated selections within an image
When Quick Mask Mode is on the eraser and pencil tools can be used for modifying the selections
Note: use zooming to pick up small areas of the image
![Page 19: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/19.jpg)
Clone Stamp Tool
For cloning pixels from one area of the image to another
Alt-key + left click is used for defining the source of pixel copying
The cross symbol on the image will indicate the source area during copying
![Page 20: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/20.jpg)
Layers
Essential feature of Photoshop = Transparent levels of which sum
is the actual image Layers are stored ONLY
into .psd file format Layers can be hidden/unhidden
from the layers window
![Page 21: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/21.jpg)
Layers
![Page 22: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/22.jpg)
Background
Layers are placed on top of the background
For some operations the background needs to be converted into a layer double-click on the background on
the layers window rename the background if necessary
![Page 23: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/23.jpg)
Opacity
Opacity of a layer can be adjusted by dragging a slider in the layers window
100 % = the underneath layers are not visible at all
![Page 24: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/24.jpg)
Layer Effects
Several effects can be easily attached to an individual layer
Steps: Activate the layer by clicking on it Layer > Layer Style > (adjust effects) choose OK
Effects are can later be easily removed
![Page 25: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/25.jpg)
Adjustment Layers
For adjusting e.g. brightness without actually affecting on the layers’ contents
Steps: Layer > New Adjustment Layer Make the adjustments and press OK Adjustment layer will appear in the
layers window
![Page 26: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/26.jpg)
Type Tool For adding text into the image A layer will be automatically
created for the text part For some edits the layer may need
to be rasterized The text contents can be later
modified by activating the text layer from the layers window
![Page 27: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/27.jpg)
Filters
For adding effects into the layers Artistic Blurring / sharpening Lightning effects …
![Page 28: Photoshop Teppo Räisänen LIIKE/OAMK 2011. General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on](https://reader035.vdocument.in/reader035/viewer/2022062423/56649ef25503460f94c03590/html5/thumbnails/28.jpg)
Transform
For Scaling Rotating Free Transform
of the layer contents Use dragging to perform the
operations and finally v-button