Faculty of Arts and Social Sciences
MECO3602 Online Media
Department of Media & Communication CREATING BANNERS – PHOTOSHOP 02
Today’s tutorial follows on from the skills we learned last week and we will explore the application of a number of tools. You may find it useful to refer back to the previous handouts that about the PHOTOSHOP INTERFACE and the DETAILED TOOLS OVERVIEW.
1. USING LAYERS
Firstly, it is important to identify the concept of layers, which operate like overlays to build up a composite image.
What are layers in Photoshop?:
Layers give you the freedom to rearrange elements of your image, adjust colour and brightness, apply special effects, edit and add new elements to your image. With layers all of these things can be done without permanently editing your original image and without affecting other layers.
When you create, import or scan an image into Photoshop it is made up of a single layer. If you are retouching an image you can edit the original layer but you will find that it is very useful to keep the original layer intact and retouch duplicate copies of the layer.
Layers essentially allow you to work on individual elements of your image without disturbing the others, and without having to make tedious selections.
MAKING A BANNER IN PHOTOSHOP CS6:
Since a banner comes at the top of each page in a site, it is the single most important part of your site’s design. It announces the identity of you site via the graphic style, the colours and fonts and even the layout of the body text and images.
If you create your banner with care, the rest of your design decisions will be easy. The following directions will help you make a simple personal homepage banner in Photoshop CS6.
Before we start I’ve included some examples of interesting banner designs that can easily be created in Photoshop.
(http://dailypoetics.typepad.com/)
(http://www.feedhere.com/) MAKING A BANNER:
Today we will be creating an example website banner, but to do that you first need to
download the Week 5 image folder from the transfer server, htlee. In that folder you will have all the assets to create this banner:
It is made up of six image layers: 1. the clouds background
2. a gradient layer of colour, which moves from white to opaque. 3. text in two different fonts
4. a pineapple top 5. a hibiscus flower 6. a postage mark
We’re ready to start imaging:
1.) Create a folder in your student folder called image drafts. This is where you will save all the graphics and rough drafts used for your banners. Copy all of the original files from htlee > Online Media > Tutorial Assets > Photoshop Assets > Week 4 to your image draft folder. 2.) Open Photoshop and Go to File > New. In the New popup box fill in the following:
Name: mybanner Preset: Custom Width: 800 pixels Height: 150 pixels
Resolution: 72 pixels/inch Color Mode: RGB Bit size: 8 bit
Background Contents: White
3.) Do a File > Save As. Call the file mybanner and choose a Photoshop format which will add .psd to the file name. Save the file mybanner.psd in your image drafts folder.
4.) Now open the graphic clouds.jpg from your week 4 image folder.
Note: You may notice that the banner and cloud image have become two tabbed screen workspaces. To allow them to float on the desktop you can just separate them at the top tabs by dragging them apart – go to Preferences > Interface > panels and documents and uncheck enable floating document window docking.
5). We want to insert a cloud background into our banner. There are three ways to do this. The first is by duplicating the clouds jpg file as a layer. Click on the clouds file to select it and then go to the top level layer menu and choose duplicate layer. In the text box that appears name your new layer clouds and in the destination field choose mybanner.
You can also drag the clouds across into the banner if the two files are floating on your desktop. The last two methods allow you to reposition your large image within the banner space by using the Move tool.
Finally we’ll explore how the clouds image can be cropped to fit the banner.
6.) Select the crop tool from the LHS tools menu and enter the dimensions 640px and 150px in the width and height boxes respectively, and 72 in the final box with pixels/inch selected from the drop down menu. Drag the crop tool over the image and select and enter or double click in image crop an area.
7.) Select the Move tool. Drag the cropped image and drop it into ‘mybanner’. Align the image to the frame. Again you will notice that the image you have just dragged in will have made another layer in the Layer panel to the right side of the interface.
Double click on the layer name in the work menu panel and call it Clouds.
8.) At this point it is useful to know that mistakes are easily undone in Photoshop. To get out of a working layer (unsaved) click you can often just click escape. If that doesn’t work you can take a step backwards in the Edit menu. Or you can use Command + Z to undo a single mistake.
work menu. This allows you to keep track of changes and reverse them if at any time you realize that you have made several mistakes. This palette lists your last 20 steps, but by clicking on the last correct step, you can undo all of the subsequent mistakes and start over again.
NOTE: Continually check which layer you currently have highlighted on the Layers Panel. You can’t work with an object or text unless you have selected its layer. Name your layers throughout the working progress. This will be especially useful for managing projects with multiple layers.
You should now have something that looks like this:
9.) Go to Layer > New Fill Layer > Gradient. We are going to add a new Gradient Layer to our banner. This will create a layer that masks part of the one beneath.
In the pop up text box name the layer Gradient and make sure none is selected for the Color option. Opacity should be set to 100%. Opacity is the degree of transparency of an image. Select OK. Another pop-up box will now open that looks like this:
Double click in the top editing box to choose the colour for your gradient (the default is black). The gradient editor box will appear. Choose the colour bucket on the right bottom of the gradient bar
A colour wheel will appear and you need to click on the white section in the top right. Then click OK. Repeat for the colour bucket on the bottom left.
Once you have done that you can set the location of the start of the gradient using the midpoint diamond on the bar. Click OK. You will come back to this box:
Finally want our gradient to come from a 30 degree angle so change the preset 90 next to the Angle Dial to 30 and select OK.
If at any stage you accidentally close the gradient editor you can click on its icon in the layer work menu, next to the eye icon.
10.) To add text, we first select the Horizontal Type Tool from the left hand side tools menu and then click in the general area where you want the words to go. When you do this a blinking line with a square dot will appear on the banner.
Choose a colour for your text in the Foreground Color Box in the top left corner. Choose a beginning size and font in the Options Bar.
Type the word HOLIDAYS in Caps. Here we are using web color: FF6600 and 48pt Font Size.
Websafe colours
Color values on screen-based devices are made up of 3 pairs of numbers and/or letters representing the amount of red, green and blue contained within a color, in a 256 colour system. These colors are represented as hexadecimal values. Using these values eg. FF6600 for fire engine red you can ensure your chosen colour displays more or less the same on any monitor.
For more info check out: http://www.w3schools.com/Html/html_colors.asp
Websafe fonts:
Websafe fonts like Verdana and Helvetica are those that are likely to be installed on a user’s computer and so using these fonts in your web production gives a greater chance your material will display the same on any computer.
If you use a custom font, and your website user does not have it installed on their computer, their browser will select an alternative – which may not represent your message elegantly or accurately.
Custom fonts can however be used as part of images. You can, for example, apply them in Photoshop when creating jpg image files that require text, such as your banner.
For this banner I have chosen the font ‘AKKA’ which is a custom font. You can download custom fonts to install on your computer from sites like www.dafont.com However these are not web-safe fonts.
11.) Now that you have entered text, let’s apply some effects to it. Check that the ‘HOLIDAYS’ Layer is highlighted. Text layers can be recognized by the ‘T’ symbol in the Layers panel. Go to Layer > Layer Style > Drop Shadow.
Select a colour for the Drop Shadow that will fall around your text by clicking on the black box next to Blend Mode. For this step we will choose Blend Mode: Multiply. Do test out other options from the menu to see their effects. I have chosen a black shadow with an Opacity of 75%.
We are also going to create a Stroke outline around our text. To do this double click on the Stroke option in the left-hand Styles column.
I have chosen an Outside stroke outline that has an Opacity of 100% and line weighting of 2px.
Finally, we are also going to create a gradient overlay over our text.
Double click on the Gradient Overlay option in the Styles column. I have chosen the Normal option for the Blend Mode, a Linear Style and a 90 degree angle.
Do feel free to experiment with different settings. By ticking the Preview Box you can see a live preview of the effect as you change the levels and settings.
We’ve now got something that looks like this:
Repeat steps 10.) and 11.) this time typing the words WEBSITE SHOWCASE in CAPS. I have used web colour: 99CC33 and Birch Std Font in 32pt.
NOTE: I have only used the Drop Shadow and Stroke Effects this time around. Your banner should now look like this:
12.) Open pineapple.jpg. This is a large image, so firstly go to Image > Image Size and change the width of the image to 640px, the same width as our banner. (This will make it easier to resize the image when we drag it into our banner.)
13.) Select the Magic Wand Tool from the Tools Panel. Using the Magic Wand click anyway on the white background of the pineapple.jpg. You will notice that everything that is white is now selected within the area of within an area surrounded by flashing dotted edges. We want to select the pineapple to include it in our banner so we need to Invert the selection. (You can also erase with the Magic Wand. Click on the area you want to erase and then press the delete key. The selected area disappears and the background shows through. Erasing with the Magic Wand is best when there are large areas of one colour.)
14.) Go to Select > Inverse to invert the selection. You will notice that it is now the pineapple that is selected, not the background.
Alternately, select the Quick Selection Tool and drag it over the image and it will intuitively select areas within the image. This can be tedious and you may not always get a clean edge. To deselect an area with this or the Magic Wand hold down Alt/Option while you click. If you have an issue with untidy edges, these can be corrected by going to Select > Refine Edge and adjusting the Radius and Smoothness of the edge or by Feathering the edge which adds softness with a uniform blur.
15.) Select the Move Tool and click somewhere on the pineapple and drag it onto mybanner.
16.) You will notice that the pineapple is too large for our banner. To resize the image go to Edit > Free Transform. A box will now appear around the edges of your object. Resize the object by clicking on one of the boxes on the corners of the image and drag the image diagonally in or out to make it larger or smaller. Make sure to hold down the Shift Key while you drag. Holding the Shift Key ensures that your image scales in proportion, otherwise you will stretch and distort it. Also, generally you will only want to make the object smaller. Enlarging an object often distorts or pixelates it.
17.) Use the Move Tool to reposition the pineapple towards the right hand side of the banner.
18.) Effects can be applied to images too. This time we will apply an Outer Glow to our pineapple. You can do this in the same way as you did when applying Effects to text. 19.) Open flowers.jpg and repeat steps 10.) to 14.). This time I have applied a Drop Shadow.
20.) Open postage_stamp.jpg and use the magic wand tool to select the grey areas of the stamp. You will need to deselect the centre of letters like A’s and O’s by holding down Alt/Option whilst you click on these areas.
22.) To make the stamp slightly transparent click on Opacity in the Layers Palette. I have changed the Opacity to 55%.
23.) The Postage Stamp Layer would benefit from being between the pineapple and the flowers. You can do this easily by dragging the layer between the two in the Layers Palette.
24.) The banner is almost done. The elements are all arranged in the composition and now we will add a border. Create a new layer by going to Layer > New or clicking on the New Layer Icon in the Layers Palette.
25.) Select everything by going to Select > All or by pressing Command + A. Then go to Select > Modify > Border and set the pixel width to 10px in the Border Window. Set the Foreground Color to white in the Options Bar and then select the Paint Bucket Tool and click within the border to create a subtle border edge.
26.) When you finish editing all of the layers in your image you can merge or flatten the layers to reduce the file size. Flattening combines all the layers into a single background layer. However, you cannot edit layers once you’ve flattened them. Rather than flattening your original PSD files, it’s a good idea to save a copy of the file as a JPG and a copy of your PSD with layers intact.
27.) To Flatten your image go to Layer > Flatten Image. Alternately you can select Layer > Merge Down or Layer > Merge Layers to flatten groups of layers rather than the whole file. 28.) Save your banner. First do a regular save to save the mybanner.psd. Then Save For Web & Devices as we did last week by clicking File > Save For Web & Devices.
REMEMBER: Banner images should be saved as a JPG and ideally be around 40Kb in size. Use the 2-Up and 4-Up options to compare compression. If the banner is a simple two-colour line drawing you can save it as GIF. If there is a lot of shading JPEG is the best option. IF YOU HAVE ANY SPECIFIC QUESTIONS REGARDING PHOTOSHOP TOOLS OR EFFECTS FEEL FREE TO ASK.
