Basic Photoshop operations
Using Photoshop to create images
for use on the UCC Website
V2
V2
G.McCarthy 14.05.2015
Page 1 of 10
Contents
Image Sizes for UCC Web ........................................................................................................................ 3
UCC Branding .......................................................................................................................................... 3
The Dashboard ........................................................................................................................................ 3
The Tool palette .................................................................................................................................. 3
Tool options ........................................................................................................................................ 4
Sample 1 – Create a callout box using an existing image. ...................................................................... 5
Set up for a basic callout box .............................................................................................................. 5
Change background colour ................................................................................................................. 6
Add a coloured square ........................................................................................................................ 6
Insert text ............................................................................................................................................ 7
How to make a straight line ................................................................................................................ 7
Save for use on the web site ............................................................................................................... 7
Sample 2 - Manipulating existing images ............................................................................................... 8
Changing the size of an image ............................................................................................................ 8
Erase tool ............................................................................................................................................ 8
Erase existing text and replace with new text. ................................................................................... 8
Using the Stamp Tool .......................................................................................................................... 9
How to straighten up an image. ......................................................................................................... 9
Shortcuts ............................................................................................................................................. 9
Page 2 of 10
Image Sizes for UCC Web
Where image can be used
Banner image with title
Width x Height
725 x 254 pixels
Size
Less than 50kb
Right hand call out box
210 x 197 pixels
Less than 50kb
Spotlight image
746 x 200 pixels
Less than 50kb
Functional Page Boxes
210 x 197 pixels
Less than 50kb
Prospectus course
276 x 185 pixels
Less than 50kb
UCC Branding
UCC branding download PDF guide: http://www.ucc.ie/en/mandc/viguidelines/
UCC pallet







Crest Yellow
Crest Red
Crest Blue
Crest Black
Crest White
Tint of Crest (grey)
Quad Green
The Dashboard
The Tool palette
(Page 2 of Computer Training Centre Photoshop manual)
The Tools Palette.












Move arrows
Paint brush
Crop
Clone stamp
Marquee
Eraser
Pencil
Hand
Zoom
Eye Dropper
Text
Paint
Page 3 of 10
Tool options
Each tool has own options.
e.g.. Click on crop to see Width Height.
Menus – check out the dropdown lists particularly for
File Edit Image Layer Select Filter Window
In the Window drop down list make sure the following are ticked.





Adjustments
Layers
Swatches
Options
Tools
Swatches and Layers
Figure 1 Swatches
Figure 2 Layers
Shortcuts




Shortcut to zoom Ctrl +
Shortcut to minimise Ctrl Shortcut to make pencil/pen/eraser etc bigger ]
Shortcut to make pencil/pen/eraser etc smaller [
How to create a new image: Ctrl N or File > New
How to open an existing image: Ctrl O or File > Open Then browse for image and click open.
Page 4 of 10
Sample 1 – Create a callout box using an existing image.






How to do a very basic callout box.
Change background colour
Add different coloured squares
Insert text
Make a straight line
Save in a suitable file for putting up on CMS and the UCC Website.
Set up for a basic callout box
1. Check size of box to be created, in this case it is 210 x 197 pixels
2. Ctrl N
3. Put in Width 210 and Height 197 make sure it’s pixels, name it and click ok
Leave default settings on everything else, e.g., RGB = Colour; background Contents = White etc
4.
5.
6.
7.
8.
9.
10.
11.
Ctrl O (opens new image)
Find existing image and click OK to open.
Ctrl A to select the image (in the Photoshop screen of the image)
Ctrl C to copy the image
Click your Call_out_box_new tab
Ctrl V
Ctrl T (Free Transform) you can now change the size of the image to fit your box
Centre your photo and pull on one of corner grips note width % and Size % changes in Tool
Options.
12. Click the link symbol to keep proportions as the original proportions (so image does not look
distorted)
13. When finished adjusting click the tick on the right of the Tool Options bar.
If this basic callout box is the final image you want save according to the “Save for use on the
website” section in this manual.
Page 5 of 10
Change background colour
1. We are going to use the UCC crest yellow. The RGB for that is R255 G181 B0
2. Click on background layer (on Layers)
3. Click of foreground colour (on Tool Pallet)
o In R put in 225
o In G put in 181
o In B put in 0
4. Click Add to Swatches (optional step but will save the colour for you in your swatches)
5. Click Paint Bucket icon on Tools
6. Bring curser (now looks like paint bucket) over area to be ‘painted’ and click once.
Add a coloured square
1. Add a new layer by clicking Ctrl Shift N or clicking icon in layers palette and click ok.
Name it Squares
Page 6 of 10
2.
3.
4.
5.
6.
Click Rectangular Marquee icon on Tools
Bring to where you want to insert your square
Press Shift key* and drag + to make square
Put in colour using paint bucket tool steps 3 – 6 above
Use Crtl D to de-select the square
*To make a rectangle do not press shift key
Creating a coloured circle is similar
Click on Elliptical Marquee icon on Tools - press shift key and drag to make circle - colour using paint
bucket tool.
Insert text
1.
2.
3.
4.
5.
Click the T icon in tools (automatically creates a new layer for text)
Place curser where you want to place the text
Resize and change format using text box (e.g., Verdana, 18pt, black)
Type the word Welcome
Click the tick on top right
How to make a straight line
1. Add new layer called line
2. Click brush/pencil icon and select pencil
3. In dropdown choose size and type of pencil (select 2 px)
You can also make the pen size bigger or smaller by pressing the bracket keys on your
keyboard [ or ]
4. Hold down shift key click where line is to start then place curser where line is to end and
click again. Straight line is created.
Save for use on the web site
Images less than 50kb in size only should be uploaded to the UCC webpages. If you save as you
normally would the JPEG will generally be too big for uploading to CMS.
Page 7 of 10
1. Click File
2. Click Save for Web & Devices
3. Select the best image that is under 50kb size
Sample 2 - Manipulating existing images
Changing the size of an image
1.
2.
3.
4.
5.
Ctrl O and browse to find and open image
Click on Image in menu bar
Image Size will change size of image but keep full picture.
Change Width and Height.
Use default settings. Constrain Proportions being clicked will ensure image does not distort.
Erase tool
1.
2.
3.
4.
Click the Eraser icon in tools.
The colour of the eraser is the colour shown on the background colour icon in tools.
Change the colour by clicking the Background colour icon in tools and insert a new RGB.
Make the Eraser bigger or smaller by pressing the bracket keys on your keyboard [ or ]
Erase existing text and replace with new text.
1. Ctrl O, browse and open and existing image
Note: background colour under the text has to be a uniform colour.
Page 8 of 10
2. Use the Eyedropper tool
to select background colour.
3. Rotate the colours background/foreground.
4. Use Eraser
(which should produce a line which is be the same colour as the
background) to delete the text
Or
5. Create a rectangle and colour it the same colour as the background.
6. Select the Text icon T in tools and type text, format as required.
Using the Stamp Tool
1. Select the clone stamp tool
2. On your keyboard press alt and click on the area you want to copy from and then click the
area you want to copy to.
3. Use [ and ] to increase or decrease the size of your stamp
How to straighten up an image.
1. Ctrl O and browse for existing image
2.
3.
4.
5.
Select the ruler tool
you may have to right-click the dropper on tools to find it
Click and drag to create a line along the edge you with to have vertical
Along menu go to Image, in dropdown list click Image Rotation, then arbitrary
Click OK
Shortcuts
Ctrl o
Ctrl n
Ctrl a
Ctrl c
Ctrl v
Ctrl t
Ctrl d
Ctrl Shift n
Hold Shift left
click mouse &
drag (after
clicking on
relevant tool)
Open existing image
Create a new Photoshop project
Select all
Copy (what is selected)
Paste
Free transfer (adjust size of image in selected layer)
De-select
Open new layer (or use icon under layers)
To create squares, circles and straight lines
Page 9 of 10
UCC Photoshop basics
Learning outcomes








Understand what is meant by Menus, Layers, Tools and Palettes and where to find them.
Create a banner or callout box or other specifically sized image
Make coloured squares.
Make a coloured circle.
Add colours to swatches.
Make a straight line.
Crop an image.
Resize an image
o using free transform
o using image size






Use the Erase tool.
Use the Clone tool.
Realign a crooked image using the ruler tool.
Erase existing text on an image and replace with new text.
Copy colours from an image
Save images for web devices (less than 50 kb)
Page 10 of 10