Photoshop Lesson 5

Creating another web page banner.

see https://www.jimssolarguard.com as an example

Create the grid.

1. Start a new transparent file, 20 X 20 pixels.
2. SELECT/Select All.
3. EDIT/Stroke.
4. EDIT/Define Pattern. Give it a name if you want to.

Start the banner file.

1. Start a new file, about 700 X 300 pixels. The banner will not end up being as large, but it gives you more space to work.
2. Choose a color.
3. To add the grid, add a new layer. Then choose EDIT/Fill. Choose pattern.
4. If you want to give an illusion of depth, choose EDIT/ Free Transform. Right click and choose perspective. Click and drag the square handle on one of the corners.
5. In order to divide your background, use a solid brush and just draw a curved/waved line.
6. Use the Magic Wand to select top portion. Fill it with a color.
7. Use the Magic Wand to select bottom portion. Fill it with a color.
8. Use the Pointer tool and drag the bottom portion down a little. Fill the gap with a 3rd color.
9. We will use the Liquify filter, and I'll explain my trial & error method of getting the desired results.
10. Choose FILTER/Liquify Filter. From the toolbox on the left, choose Warp or Wave. Drag the mouse around and try to create a torn edge effect. Click OK.
11. For each image you will.
    • open or paste it in a new document
    • Select with Ellipse tool or Lasso.
    • Feather it.
    • Cut it and paste it into the banner
    • Press CTRL-T to transform (resize) it.
    • (Tip: if it is not blending smoothly, increase the canvas size to be able to select better.)
12. Add the grid. Reduce the opacity.
13. Add text as desired.
14. To get the special effect shown on Jim's SolarGuard, warp the text
15. LAYER/Layer Style, Bevel and Emboss. Choose Drop Shadow, Bevel, and checkmark Texture.
16. After you've refined your banner, crop it to LESS THAN 700 X 200 pixels.