What to do

Setting up background and button layers

  1. Create 3 abstract backgrounds using custom vector shapes. These backgrounds should all be the same size. Your width should be at least 350px.

  2. Once you have 3 layers (3 different backgrounds), create a new layer by clicking on the new layer icon in the Layer palette


  3. Select the default colors by pressing D on the keyboard

  4. Fill the new layer with White by pressing the following keys:+Delete
    This just fills a layer with the current background color-White is the default

  5. Drag this image onto the desktop:



  6. From the desktop, drag the image over the Photoshop icon


  7. Select the Move tool (V)


  8. Drag the button on top of the white layer
    first_button.png
  9. You want 3 buttons, if you need a smaller button, press +T and drag a corner handle to the desired size. Press RETURN to accept transformation
    three_btns.png

  10. Create a folder by clicking on the folder icon at the bottom of the Layers palette


  11. Drag the three button layers inside the folder


  12. Double click on the name of the group and renamebuttons


  13. Click on the triangle to close the group


  14. Dupe the group by dragging the group over the new layer icon


  15. Make 2 more dupes of the group


Extract Image

  1. Open a new window in Safari. Click on this page, then press +N

  2. Go to your class page

  3. Click on one of the Photos link
    photo_link.png
  4. Select a photo of yourself or someone you have permission to use. Click on it. It will open in a browser window. Drag this large image onto the desktop.

  5. From the desktop drag it onto the Photoshop icon
    PhotoshopIcon.png
  6. This image is large and maybe there is a lot of empty space. You need to crop
    1. Select the crop tool

    2. Drag a selection around what you want

    3. Press RETURN to crop


  7. Select the Pen tool and the middle option. then start to click around the edge of your shape:

  8. To complete the path, after going all the way around, click on the first point

  9. Select the paths palette

  10. Click on Load path

  11. Click on Layers palette. You should see marching ants:

  12. Make a duplicate by pressing +J

  13. Click on the background layer and drag it to the trash

  14. Select the Move tool (V)

  15. Drag the layer that is left over your file with your background images.

  16. If you need to scale the extracted photo, press +T and drag the corners to the desired size.


  17. Position the extracted photo where you want it

  18. Make 3 duplicate copies of the photo (+J)

  19. Select the top photo and apply the following effect:
    1. Go to filter>Artistic>Poster Edge and set the sliders to:

    2. Click on the top layer to select it

    3. Press  and click on the thumbnail image in the layer to select the contents of the layer

    4. Press D to get default colors (black and white)

    5. Select Edit>Stroke and give it a 2 pixel stroke on the center


    6. Click on the fx on the layer palette to add a layer style


    7. Select Drop Shadow

    8. Adjust sliders



  20. Turn off the top layer by clicking on the eye to the left of the thumbnail image

  21. Click on the second photo layer to select it. Apply a filter effect of your choice to this layer.

  22. Turn off this layer by clicking on the eye to the left of the thumbnail image

  23. Click on the third layer to select it. Apply a filter effect of your choice to this layer

  24. It is up to you whether you want to apply a filter to the fourth image.

Making pngs

  1. Create 3 new folders by clicking on the folder icon at the bottom of the Layers palette


  2. Rename the folders bg0, bg1, bg2 and bg3

  3. Drag a button folder into each of the background folders.

  4. Drag the white background underneath the button group inside the background group bg0

  5. Drag a background into each of the other background folders.

  6. Drag an extracted photo into each of the background folders.

    This is what your folders should look like:

  7. Turn off the visibility of bg0

  8. Open the buttons folder in group bg1

  9. Click on the third button in the group


  10. Press +U to bring up the Hue/Saturation window. Select Colorize


  11. Adjust the sliders, when the button turns the color of your choice, press OK


  12. Repeat the process for bg2 and bg3

  13. Make sure only the top folder is turned on


  14. Open the Layer Comp palette


  15. Click on the new layer icon to create a new layer comp


  16. Name the new layer comp bg0


  17. Turn off bg0 and Turn off bg1

  18. Click on the new layer icon to create a new layer comp

  19. Name the new layer comp bg1

  20. Turn off bg1 and Turn off bg2

  21. Click on the new layer icon to create a new layer comp

  22. Name the new layer comp bg2

  23. Turn off bg2 and Turn off bg3

  24. Click on the new layer icon to create a new layer comp

  25. Name the new layer comp bg3

  26. Save the layer comps by selecting File>Scripts>Layer Comps to Files

  27. Select the Browse button and create a folder in your web:images folder

  28. Make sure the files are saved as jpegs


  29. Run the script

  30. Save the Photoshop file