ACTIVITY: Creating a banner in Photoshop

(Go here for illustrations and sample images)

Step by step

1. What is the size of your required image? Let's create a banner that will be 600 pixels wide by 120 high. Select File:new, and insert your image size and colour mode (RGB colour), then OK.
2. Towards the bottom of the toolbox are two squares representing foreground (upper left) and background (lower right) colour.
   • Click on the background colour square to activate the colour selector.
   • Check 'only web colours' to restrict your choices to the websafe palette.
   • Slide the hue selector at right of the palette to see a range of hues.
   • Click on the colour you want, then OK.
   • You can click anywhere in your Photoshop document window, or another Photoshop window, to select a colour.
   • You can also enter RGB, HSV, CMYK or hexadecimal values. This may be useful, for instance, if you want to find the web colour closest to a printed process (CMYK) colour, or if you already know the hexadecimal value of the colour you want to use.
3. Select your image (Cntrl-A or Cmd-A) and hit the delete button ­ this will fill your background with the new background colour.
4. Add UNSW id:
   • Download a black on white UNSW logo from the web (http://www.unsw.edu.au/standards/symbol_abbreviation.html ).
   • Copy and paste the image into your new file.
   • Open the 'layers' window (window: show layers) ­ you will see that the logo has pasted onto a new layer.
   • Use the 'move' tool (top right of toolbox) to click and drag the logo to the top left of the image.
5. Let's change the UNSW id from black lettering on white, to white lettering on the background colour:
   • With the logo layer selected, go to image: adjust: invert. This will invert the colours from black on white to white on black.
   • In the layers window, select the layer mode: 'multiply' will make the white areas on your layer transparent, 'screen' will make the black areas on your layer transparent. Select 'screen'.
6. Adding text:
   • Click in the 'foreground colour' selection box to choose a colour for your text.
   • Click on the 'text' tool (), and type in your text.
   • Use the 'character' window (window: show character) to format the text size and font.
   • Use the 'paragraph' window to align text and adjust indents etc.
   • To create guides to assist with text alignment, view: rulers, then drag from the ruler to create guides (view: show: guides). Use the move tool to move guides.
   • You can select parts of the text and apply different attributes if you wish.
   • The text is on a new layer, and is fully editable. Double click on the layer in the layers window to see layer attributes and select effects. Add a drop shadow to your text layer.
7. Adding another image:
   • Select and open the image you would like to add to your graphic.
   • Copy and paste the image into your document (Hint: use the layers window to drag layers between documents).
   • Go to edit: transform to select how you would like to manipulate the layer (scale, rotate, flip etc)
   • Use the marquee selection tool (top left) to select areas you wish to delete.
   • Change the layer mode to select a blending mode (multiply, luminosity etc).
8. Saving for web:
   • Save your image as a PSD file.
   • Use the slice tool to select segments for web graphics (buttons etc).
   • Go to File: save for web
   • Look at different settings, and how it alters the file appearance and data size. Select a setting that gives a good quality image with a small file size. (Each slice can have a different optimisation setting).
   • Go to OK, then select what you want to save (images only, html only, or both).
   • Save into your website folder.