Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
PHOTOSHOPI n t r o d u c t i o n t o P h o t o s h o p
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
A B O U T
Adobe Photoshop is a graphics editor developed and published
by Adobe Inc. for Windows and macOS. It was originally created
in 1988 by Thomas and John Knoll. Since then, this software has
become the industry standard not only in raster graphics editing,
but in digital art as a whole. You can use Photoshop for almost
any type of image editing, from touching up photos to creating
high-quality graphics.
We will be using Photoshop to create graphics for a variety of
projects.
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
G E T T I N G S T A R T E D
There are many options to learn in Photoshop, most come from practice and trial and error. While this class doesn’t spend much time on the
creation of images, it is important to have some basic skills in image creation and manipulation to make your Web pages more colorful and
effective. The Web is full of images. You should make every attempt to create your own images, photos and graphics. But if you wish to use
an image from the Web, make sure they are copyright free and that you give credit to the source. You can use the Google Image search to
find images of a certain size, color and usage rights. Images you find on the Web will be at Web resolution (72ppi), so you can’t make them
larger or use them effectively in print.
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
C R E A T I N G A F I L E
When you open Photoshop, go to File > New
Here you will make a few changes. Where it
says Untitled, go ahead and name it
something relevant to whatever you will be
creating.
You will see two boxes for width and height,
make the appropriate size changes based on
what you’re creating. Make sure you’re using
pixels and not percent, inches, etc.
The resolution should be set to 72 since we
are creating graphics for the web.
Now click Create
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
R E S O L U T I O N
When a file comes from a digital camera or from the Web, in most cases the resolution shown will be 72 ppi, the monitor's resolution.
You will optimize your images by sizing them at the screen resolution 72 ppi. If you are planning to print the image, you will need to
save at 120dpi or above, but that is a function of the original image and the media to which you are printing. Resolution can be held
constant in a function with Height and Width. If an image has 2.1M pixels in it, and it is displaying at 10x14 on your screen, you can turn
off the resampling features in Photoshop’s Image, Image Size feature. This will retain the original quality of the image while you adjust
resolution, height and width. Turn on resample when scaling down the image.
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
T O O L B A R
The tools on the left toolbar give you several options for Selecting, Cropping and Coloring
and much more.
The Move Tool allows you to drag different layers wherever you want
The Select Tool has several shapes for selecting sections
The Crop Tool allows you to trim the edges of the image
The Paint Tool will change colors in your image where you select it
The Lasso Tool will let you freehand draw what exactly you would like to select in the image
The Text Tool allows you to add text to your image
Move Tool
Crop Tool
Select Tool
Paint Tool
Lasso Tool
Text Tool
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
U N D E R S T A N D I N G L A Y E R S
In Photoshop, your graphics will be made up of a variety of layers. Some of these layers
could be a background, a text layer, an image layer, etc. These layers stack on top of
each other based on where they sit in the layers panel. For example, my background is
the bottom layer, that means any layers I have above it will display on top of the
background.
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
M A K I N G A D J U S T M E N T S : I M A G E S I Z E
To change the size of the image, go to Image > Image Size. Here you can change the size of the image and the resolution. Make sure
you are looking at the picture at 100% to make sure you are viewing the actual size.
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
M A K I N G A D J U S T M E N T S : T O N E , C O L O R , B R I G H T N E S S , E T C
To change some of the settings, go to Image > Auto Tone, Color and Contrast options. Check how these look before and after using
them. If you don’t like the results, simply click Undo under Edit
If you need to make manual adjustments, you can use other tools under Adjustments to change the Brightness, Hue/Saturation, etc.
You will need to work with these to get the desired results
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
A D D I N G T E X T
To add text to a photo, simply click on the Text tool (has an “T” on it). You can start typing right on the image. Select the text to
highlight and use the tools on the top toolbar to change the color, size, and font. Photoshop automatically puts text in a separate layer.
You can use the Move tool (top right tool with cross on it) to move the entire layer around.
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
A D D I N G E F F E C T S T O A L A Y E R
Once you have different components in your graphic, you may want to add some effects
to different layers. Photoshop has a variety of effects you can add to images and text
layers. To view the effects, click on the ‘fx’ button that’s in the layers panel
Whichever layer you would like to add the effect to, make sure you select it in the layers
panel, and then click on the ‘fx’ button
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
E F F E C T S
Bevel and Emboss gives your layer a three dimensional look
Stroke adds a border around your layer
Inner Shadow adds a shadow inside your layer
Inner Glow adds a glow inside your layer
Outer Glow adds a glow outside your layer
Drop Shadow adds a shadow effect to your layer
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
S A V I N G A F I L E
When you are finished with your graphic, you can save it by using
the File > Save As feature. You want to make sure to save this as a
Photoshop file, the extension will end in .psd
You won’t use the PSD on the web, but you will be able to access it
later if you want to make changes to your graphic.
To save your graphic to upload on your website, you will go to
File > Export > Save for Web. This brings up a box that allows you
to select the file type. If you have a graphic with a transparent
layer, save it as a PNG-24. Otherwise, save it as a jpeg. When
you’ve selected the appropriate file extension, click Save.