Photoshop basics for banner design

In order to make your banner for Wordpress, we’re going to need to know what size of a banner/header your theme supports. Go into your Wordpress dashboard. Scroll over “Appearance” and select “Header.” On the following page, it will tell you what size your banner should be. Mine, for example, is 1120 pixels by 160 pixels.

Open photoshop. It is the blue square on your dock with the letters “Ps.” When you click on “new document,” the window to the right comes up. Before entering width and height, be sure to change the dropdown menu from “inch-es” to “pixels.” If you forget to do this, your file will be huge.

Finding your banner size

Creating a document

One of the most important concepts with Photoshop is its layers. It can also be frustrating for beginners. Each item in your document will be on its own layer. This is done on purpose because it allows you to make changes to one item without affecting others.

To edit the background layer, you have to double click on it to unlock it.

In order to make changes to any layer, you have to have that particular layer selected. If you have a different layer selected than the one you want to edit, no matter where you click or what tool you use, it will affect only the layer that is selected. For example, below I have two layers, a text layer and a rectangle.

As you can see, I have the text layer selected. As I use the move tool, the only thing that moves is the text tool. In the second screenshot, the box is selected, and so it is all that moves. Finally, the order of the layers determines what shows on the screen. Whichever layer is on the top of the list will be in the front, regardless of what color a shape or text might be (see the example on the next page).

Layers

In most programs when we make mistakes, we instantly push cmd+z for undo (ctrl + z on a PC). However, Photoshop will only remember the last step you did.

However, Photoshop has a powerful tool called the History palette. This allows you to go back to any previous step, and it even lists what they were so you know which to select. You can open the History palette by either clicking on the small icon or by going to “Window” an selecting “his-tory.” Select whichever step you wish to return to. You can go back by clicking on the next steps. However, if you do go back, once you make a change, you can’t return to later steps.

Photoshop has a host of tools, many of which we don’t have space or time to discuss (and which we wouldn’t necessarily use as a journalist. Here are the ones you need to know to make a banner.

As you can see, the previous screens had the text layer above the rectangle layer on the layer list. In those screens, the gold text shows up on the black rectangle. In this case, however, the rectangle is blocking the text because it is listed first in the layers palette.

History

Tools

Move tool — Well, it moves things. Quick key: V.

Marquee tools — There are various shapes that allow you to make selections. By holding down while clicking on it, you can choose one of the other shapes. Quick key: M.Lasso tools — Allows you to make more cus-tom shape selections (such as people) in order to make cutouts. With the main lasso tool, you have to click and hold down as you draw your shape. The polygonal lasso tool will allow you to click key points, but it mostly makes shapes with straight edges. The magnetic lasso tool some-what senses the shape you are trying to draw and attaches itself to the edges of the shape as you draw your selection. Quick key: L.

Text Tool — Well, it writes text. Quick key: T.

Magic Wand Tool — Selects whole shapes. Find it underneath the quick selection tool. Quick key: W.

Red-eye Tool — Fixes red eye on photos. Find it underneath the spot healing brush (which looks like a band-aid). It senses groups of red pixels and changes them to black. Quick Key: I.

Quick Selection Tool — Senses shapes and allows you to make large selections quickly. Quick key: W.

Tools, Cont. Changing the colors

Using the text tool

Crop tool — Helps you in resizing and repositioning your photo.

Paint bucket — will fill a whole layer with your foreground color

Gradient tool — Fills a layer with two colors, going step-by-step from a fore-ground color to a background color.

Eraser tool — Erases sections of a layer based on the brush size/shape. To make the eraser bigger or smaller, use the bracket [] keys.Color palettes — The color in the front is your foreground color and will be what most tools use. The color in the back is your background color, which you mostly are saving for later. To switch between the two colors, click on the small double arrows.

Eyedropper tool — Selects a particu-lar color from any part of a picture by clicking on a particular pixel.

Shape tool — Draw shapes that will be filled with your foreground color. Click and hold to choose from rectangles, rectangles with rounded corners, circles, polygons lines, or even custom shapes.

Custom Shape tool — Allows you to draw a host of premade shapes, includ-ing arrows, music notes, paw prints, or fleur-de-lis.

When using the text tool, there are a couple of ways for you to change the text. First, you can select the area using the text tool and make changes on the edit bar at the top of the window.

Here, you can make a host of changes, including the alignment, color, and size of the text. You can also select the text and use push shift+cmd+> or < to change the size (add option to make the change faster).

By clicking on the color palettes on your toolbar, you can choose from an array of colors to use for text or shapes. You can eyeball the colors for an approximate color or enter color codes to get exactly what you are looking for.

You can also use the eyedropper tool to select a specific color out of a pixel. First, open a picture in photoshop (or locate a color you want from your current picture). In this case, I made a screenshot of thesundevils.com to get the Sun Devil maroon color (make a screenshot by push-ing shift+cmd+3 for the whole screen or shift+cmd+4 to draw a box). I then used the eyedropper to get my color.

Changing the colors (continued)

After opening the screenshot in photoshop (by drag-ging it from the desktop onto the icon in my dock, I then can take my eyedropper tool and click on a ma-roon section. Now I have maroon in my color palette. Once I have the maroon selected, if I take my paint bucket tool, I can fill the whole layer with that color. If I repeat the process to fill my background color with Sun Devil gold, I can use the gradient tool to go from the maroon to the gold.

Select the gradient tool. Use it to draw a line across the layer. Wherever you stop the line (and whatever direction) will be where you reach the background color. What it will create is a gradient that goes from step to step from the foreground color to the background color (in this case, from maroon to gold). If you want to get to the background color faster, draw a shorter line.

ShapesYou can use the shape tool (located near the bottom of the tool palette, just above the hand tool) to draw all sorts of shapes. If you click and hold down your mouse on the icon, you will see all of the options you have.

In the screenshot to the right, I have drawn a black rectangle using the shape tool.

The shape tools also include the ability to draw various polygons, such as pentagons and hexa-gons. You can control the shape by navigating to the top of your window and changing the number of sides the shape has.

With the line tool, you can draw straight lines. The Custom Shape tool is a favorite of a lot of students because there are a host of built-in shapes that you can use to create designs from arrows to checkerboards to hearts. To change the shape of the custom shape tool, you have to select the tool and then use the dropdown menu from the top of the page (as shown).

Free TransformIf you would like to modify a shape after you’ve added it to your Photoshop document, one of the easiest ways to do it is to use the Free Transform Path option. You can find this by going to the Edit menu and then selecting “Free Transform Path” (or by pushing cmd+T on the keyboard.

Once that has been selected, you can resize the shape, making it smaller, rotating, etc., by grab-bing the box that appears around your shape.

The free transform option also gives you a chance to change your shape in other ways. If you go to the Edit menu and scroll to “transform path” you will see a list of other options.

First, “Rotate” will rotate your object in an easy manner.

“Perspective” will give you a bit of a 3D effect, with the shape now coming toward or away from you instead of just being flat.

“Warp” is another effect that will allow you to take a polygon and stretch it into a different shape.

Inserting PhotographsAdding a photograph to a banner has a couple of steps. The first, and easiest, is to open the photo, crop it to the size of your banner, and use it as the background for your banner from the beginning.

Open the photo in photoshop. One of the easiest ways to do this on a Mac is to simply grab the photo in the Finder window and drag it onto the Photoshop icon in your dock.

Click on the crop tool on the toolbar. The crop tool allows you to draw a crop box in whatever shape. Drag the crop box wherever you want and double click.

Be careful not to draw the box over the top of the image or else photoshop will include the extra space as empty white space.

If you want to crop the photo to a specific size or shape (such as our banner dimensions), you can insert the pixel values for the size you need into the forms at the top of screen after selecting the crop tool. Just remember to clear these next time because if you have a number in there, everything you crop will be confined to those dimensions.

Inserting Photographs (continued)

Text effects

There are several ways hat you can get the image into a document you’ve already started. First you can drag it straight for your desktop onto your file.

Second, you can go to “file” and choose “place.”

Finally, you can open the file in photo-shop and crop it (as we showed on the previous page). Take the tab at the top of your window (the one with the file name on it) and drag it away from the other tabs. That will give you two separate windows. Now you can drag it to your banner.

However you pull the photo into your document, the photo will likely come in scaled much smaller than you want it. However, you should have the option to scale it to whatever size you would like.

Once you do this, you will not be able to do anything else in the document until you officially “place” the picture To do this, simply click on to any of the tools on your toolbar. It will ask you whether you want to place it. Once you do, the photo is now a part of your document.

If you place a picture in your background, chances are it will make it difficult to see the text against it.

There are a few effects we can try in order to fix this. The first (and most obvious) is to pick a different color for your text. But this most of the time still won’t make it “pop out.” Next, you could try putting a contrasting back-ground behind the text. This will work but isn’t always the most visually attractive solution.

The next thing you can try is to lower the opacity of the photo. As you can see, this can wash out the photo.

Text effects (continued)Another obvious thing to try is to make the text itself larger. I strongly suggest you do this, anyway, in order to draw the attention of your viewer.

One of the best ways to get your text to stand out against the background is to work with a handful of text effects that can separate the text from the background. To get to some of these effects, you can right click on the name of the layer on the palette (keep in mind that these effects will be made to a whole layer, so it’s best to have things on separate layers).

From the menu that comes up when you right click on a layer, select “blending options.” This will open up a window in which you can add a stroke (outline), a drop shadow, or texture to your text.

Let’s start with the drop shadow. Click on the box on the left hand side of the window and the bottom of the column.

The nice thing about Photoshop is that you can see the effects in real time as you make them.

Right now, even without making any other changes, you can already see that the drop shadow has made it easier to see the text.

Changing the angle will change the direction of the shadow (similar to how a real shadow changes based on the source of light moving). The distance will change how far the shadow is from text.

The size and spread have actually always seemed a little backward to me. Spread deals with the thickness of the shadow. You can see in the picture at the bottom of the page what the size function does.

Text effects (continued)A stroke will also help the text stand out. As you can see in the photo to the left, it is similar to a shadow in appearance but it mostly puts an outline around the text.

The larger you apply the effect, however, the more obvious it will be and the less natural it will appear. (The shadow looks far more natural).

Another thing you can do to draw attention is to add texture. Click on Bevel and Emboss, and you will notice that the text now stands out a little more because it has a bit of a 3D feel to it.

Of course, even with all of these things, I still think it’s important to have bold text. On a banner this small, it is important to have something that catches the eye, and bold font is a good way to do that. The size and text effects can blend together well to give us what we’re looking for.

Another thing that helps, especially if you have a long title for your blog, is to have text of varying sizes and styles.

Remember that changes that we make are applied to whole layers and not just individual letters/elements.

Therefore, in order to make changes that allow multiple lines of text to have different styles or effects, you need them to be on dif-ferent layers.

You can create a new layer by clicking on a different area with the text tool, or you can click on the little “post-it” icon on the layers palette.

CutoutsYou may decide that you want to add a cutout to your banner instead of the whole picture. This is particularly useful if you only want a part of the picture or if you want a solid background behind it.

There are a couple of different kinds of cutouts that I will cover in this handout. The first involves cutting out a picture but including a portion of the background (using the marquee tools). Then we will cut out a picture from the background, and finally we will cover cutting out text that is filled with a photo.

Before you can do anything, you need to unlock the background layer. Double click on it on your layers palette.

Let’s begin with the marquee tool. As covered in the tools section, this is the tool that kind of looks like a dotted-line rectangle. If you hold down on the tool on the tool palette, you will see that you can pick from a variety of shapes.

Next, draw your shape to make a selection. Include everything you want in your cutout (but note the background will be included).

Once you let go of the mouse, your selection can still be moved, but whatever is selected will be flashing with dotted lines. In order to get rid of the selection, you need to deselect. You can either get there through the “Select” menu or by clicking “Cmd+D” on your keyboard.

At this point, there are a couple of different ways to make the cutout. First, if you have another docu-ment open already, you can use the Move tool to take the selection and drag it into a different win-dow. Second, you can hit the delete key to delete what you don’t need. However, because you have what you do want selected, you will need to invert the selection or will delete what the part that is select-ed. To do an inverse, you can either navigate to the “Select” menu or use the quick key “Cmd+I.”

Cutouts (continued)An inverted selection should look something like the photo to the left. In this case, there are actu-ally two selection boxes because it is showing you that the area between the two boxes is what is selected. Once you delete (or drag) the selection to make the cutout (note that if your background layer is unlocked, the background will now look like checkers boxes. That means that your background is transparent, you will notice that using the marquee tool for this creates something that still looks like a regular picture. It has harsh edges. At this point, we really could have just cropped the photo.

However, it is possible to make a selection that will blend into the background more so that it fades from the picture to the background.

Choose the marquee selection tool. Before mak-ing your selection, however, take your mouse to the top of the window to the field called “Feather.” This will soften the edges for you. You will need to pick a pixel value. So that you can better see the effect, I’ll pick 20 px here.

Once you have set the feather value, you can draw your selec-tion. You will see this time that the corners of the box have become rounded. This means that you have set it for a feather.

Invert the selection and delete, and you will see the cutout fades into the background more.

Note that after you’re done, you will have to clear the feather value back to 0 px or it will do this ev-ery time. Also, once you have already made your selection, you can’t just add to the feather value at the top. You need to go to the “Select” menu, then “Modify” and “Feather.”

Cutouts (continued) Now we will work on cutting an object out of the picture.

This is a little more difficult. It is also hard to show you here because my cursor is not included in the screenshots for this handout. However, I will do my best.

There are a few different tools we can do for this. We will start with the lasso tools. There are a few different lasso tools that you can use to make a selection for your cutouts. What they will do is allow you to make a more precise selection than the marquee tool, which simply draws a box or a circle.

The first lasso tool is the most precise of the three but is probably the most time consuming to use. Basically, you need to hold down your mouse and draw your selection around what you want to cut out. This can be frustrating and time consuming. Especially because if you let go, it will make a selection for you. However, don’t despair, because we can add to the selection later.

The best way to make your selection is to zoom in closely (as shown) and click and drag. When you come to the edge of the picture, hold the spacebar (while still clicking on the mouse) and use the hand tool to drag your window across the picture. (Look closely at the screenshot to the left. You will see a light-colored line around Sparky the Sun Devil. That’s my lasso path that I have created).

If you let go, as I mentioned, it will make a selection. To add to a selection, hold down the spacebar. You will see that your lasso now adds a “+” next to it. This means you can drag more to the lasso without losing any of your current selection. Likewise, if you accidentally select something you don’t want, you can hold the “option” key and see a “-” next to the lasso. This allows you to subtract from the selection.

The polygonal lasso tool is more useful on shapes that have defined edges because it draws a selection that is based more on straight lines. Where this one mostly differs from the original lasso tool is that instead of clicking and holding your mouse, you need to actually click the mouse on each area you want to draw the polygon. To finish it, you double click and it makes your selection.

The magnetic lasso is a little easier to use. This one will try to sense the shape that you are going for and will attach keypoints to the edge of the shape. You can click to add your own keypoints, or just drag the line and it will do it for you. As you draw, you will notice it will automatically attach itself to the shape for you.

Cutouts (continued)After you have your selection, you can invert it (Select>Inverse or “Cmd+I” and delete and you will have your cutout.

These lasso tools make a nice, precise cutout but can be time consuming. There are two other tools that can help save you time but are not as precise. For them to work, whatever you are cutting out needs to be a defined shape against a stark background.

We won’t use the Magic Wand tool here (which is under the Quick Selection tool, which looks like a brush and has a dotted line circled around it). We will see it in the last section of this handout. The Magic Wand tool will automatically sense a shape and make a selection. However, this really only works with really defined shapes (text or things like a bas-ketball). So to continue our cutout of Sparky, we will do the next best thing: the Quick Selection tool.

Choose the quick selection tool. Now, click and drag on the shape you want to cut out. As you can see from the screenshots on this page, it will sense the pixels of the shape you are trying to cut out and will begin to select the shape. You can let go of the mouse and still add more to the selection.

If you have selected things you don’t want, hold the option key down. If you notice, it changes the center of the brush from a + to a -. This will allow you to subtract from the selection. If you want to make the brush larger or smaller, you can use the [] keys to change its size.

In some cases, you may have to zoom in very close to where you can see the pixels. This will help you get a more defined shape. Once you are done, invert the selection (Select>Inverse, or “Cmd+I”). Finally, hit the delete key and you will have your cutout. You can either move it to your other document or add layers to this one to create other elements.

The quick selection tool is not as precise as the lasso tools. Chances are, it will give you some rough edg-es. Your banner will be pretty small, so you may get away with some of them. However, the best practice is probably to use a combination of the quick selec-tion tool for speed and the lassos for precision.

Cutouts (continued)The last cutout we can do is to create text with the picture filling it instead of a color. This is a little more complex of a process, so I will present it in a series of steps.

Step 1: Open a picture you want to use. In this case, we will use this Creative Commons photo of a doughnut.

Step 2: Double Click on the background layer to unlock it.

Step 3: Draw the text you would like to use. It’s best to use a big, bold font for this. Yes, I know AP style is “doughnuts” but “Donuts” will fit better here, so that’s why I did it.

Step 4: Right click on the Layer with the photo and select “blending options.

Step 5: We are going to make the photo shine through the text. Therefore, it will be transparent and disappear if we don’t add a drop shadow and/or stroke. So do this before any other step.

Step 6: In the left hand column, make sure that “Blending Options: Default (or Custom)” is selected. Then navigate to the area on the right that is called “Advanced Blending options.” For the “Knockout” value, change the dropdown menu to “Shallow.”

Cutouts (continued) Step 7: Still under the “Advanced Blending” op-tions, taking the slider for “Fill Opacity” and decrease it to “0” as shown to the left. This will make it so your text has no fill color and has the checkerboard transparent background as seen in the screenshot below:

Step 8: To get the picture to fill in the text, we need to group the text layer. Make sure the text layer is selected (and only the text layer). Go to the menu at the top of your screen. Choose Layer>Group Layers or click “Cmd+G” on your keyboard. This step will then fill the picture into the text.

You can see now why we had to have an outline or drop shadow. We would not see our text if we forgot that.

Step 9: It is time to start making our selection for our cutout. We will use the Magic Wand tool, which is hid-den underneath the Quick Selection tool. As I mentioned before, the magic wand will sense specific shapes to make selections. This is pretty useful with text, which has defined shapes and are easy for the Magic Wand to sense.

Cutouts (continued)Step 10: Make sure you have your text layer se-lected. Use the magic wand to select part of the text. Hold shift and continue to click on the rest of the letters until your screen looks like this:

Step 11: Invert the selection. We aren’t trying to delete the area around the text. We want to get rid of the rest of the picture. Invert the selection by either going to the “Select” menu and choos-ing “Inverse’ or by typing “Cmd+I” on your keyboard.

Step 12: Now remember that we are not trying to delete from the text layer. We want the shape of the text in the photo. What we are trying to do is erase the rest of the photo. So make sure that you change your layer selection from the text to the photo:

Cutouts (continued)Step 13: Once you have your selection inverted and the right layer selected, you can hit the delete key to delete the rest of the photo.

Step 14: Now if you’d like, you can crop the photo to the dimen-sion you need.

Step 15: You could also add a background color with your paint bucket tool. Remember that if you want to move the cutout, that your drop shadow and outline were tied to the text layer. What you have here is not text but the shape of text in the picture layer.

That means if you move the text shapes on the picture layer, the drop shadow and outline will stay put. If you want, you can copy the effect by right clicking on the text layer and selecting “copy layer style.”

Then click on the photo layer and select “Paste Layer Style.” This will copy the drop shadow and stroke to that layer. You can copy layer styles for any layer/blending option (such as if you want to add the same drop shadow to multiple text layers).

Important Photoshop quick keys

Uploading your finished banner to your blog

1. V: Move tool2. M: Marquee tool3. L: Lasso tool4. W: Quick Selection/ Magic Wand Tool5. C: Crop tool6. G: Paint Bucket/Gradient7. E: Eraser tool8. T: Type (text) tool9. U: Shape tools10. H: Hand Tool11. Z: Zoom Tool12. I: Eyedropper tool13. cmd+ +: zoom in14. cmd+- : zoom out15. Spacebar: Hand tool

16. Spacebar + cmd + click: Zoom in on a specific spot (must click on spacebar first)17. Spacebar + cmd + option + click: Zoom out in specific place (must click on spacebar first)18. [] : increase/decrease brush sizes19. cmd+D: Deselect20. cmd + I: Invert selection21. cmd + G: Group layers22. Cmd + T: Free Transform Path23. Shift + cmd + N: Create New Layer24. Shift + Cmd +< > : Increase/decrease size of text25. Shift + Cmd + Option + < > Increase/decrease size of text in larger increments.

When you are ready to upload your finished ban-ner to your blog, you will have to save it first in a format recognized by Wordpress.. The banner you have made is a Photoshop Document.

In order to upload it to Wordpress, you will need to save it as an image file. Go to File>Save As (or push Shift+Cmd+S). Change the “format” drop-down menu from “Photoshop Document” to either a PNG or a JPEG.

If you choose JPEG, it will compress your lay-ers down and turn it into one image. If you have a transparent background, it will fill the back-ground with white.

Therefore, if you want to use a transparent back-ground, you will need to save it as a PNG.

Once you have saved the file, log in to Word-press and go to your dashboard. Click on “Appearance>Header.” Upload your banner. If it asks you to crop it, draw the box to whatever shape you want for sure. Then save it. Your ban-ner should be on your blog.