Chapters & Exercises

Chapter 1
Chapter 2
Chapter 3
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11
Chapter 12
Chapter 13
Chapter 14
Chapter 15

Photoshop Online Resources:

Adobe.com

Chapter 13: Preparing Files for the Web

Goals for this Lesson

  • Use the Frame tool to create a placeholder for a layout.
  • Create and stylize a button for a website.
  • Use layer groups and artboards.
  • Optimize design assets for the web.
  • Record an action to automate a series of steps.
  • Play an action to affect multiple images.
  • Save entire layouts and individual assets using Export As.
  • Design for multiple screen sizes with multiple artboards.

Assignment

  1. Read and follow the tutorial for Chapter 13: Adobe Photoshop Classroom in a Book. Submit the finished file in the Network Drive when Complete. (5 Pts)
  2. Complete the exercise below and submit it in the Network Drive.  (5 Pts)
  3. Review the Key Concepts below.

Exercise

Objective

The Frame Tool is easy to pick up and start using right away. Select the Frame Tool icon in the toolbar or hit the keyboard shortcut K.

  • Create editable frame area
  • Proportionally insert an image into the frame
  • Save the image for the web

Grading (5 Points)

  • You met the minimum requirements of the project assignment, as outlined in the instructions and submission requirements.
  • You created the correct size frame
  • The image is positioned proportionally inside the frame.
  • Did you save the file appropriately?
  • Is the exercise submitted on time?

Instructions

  1. Download the file here.
  2. Open the frame.jpg photo in Photoshop.
  3. Using the Frame tool create a frame inside the actual frame above the bed.
  4. Insert an appropriate image of your choice into the frame. The image should fit inside the whole frame and fir proportionately.
  5. Save the image as a .psd.
  6. Using the Export command Export the File as a .jpg with a Maximum Quality.  Make the image size width 1000px.
  7. Submit the exported file in the network drive in a folder named Chapter13_(YourInitials).

Example
Frame tool example exercise

Review

What is a layer group?

a group of layers

What is an action?

A set of one or commands that you record and then can play back

What is a frame?

A placeholder shape

A shortcut to duplicate a layer is to hold down _____ while the layer is selected.

Alt or Option