Creating Web Graphics in Photoshop

Photoshop is one program in the Adobe Creative Cloud suite that allows us to make graphics for the web. As mentioned previously, Photoshop is best suited to creating and editing bitmap graphics. We'll be creating web graphics based on existing graphics that Hannah has given to us, as well as creating a graphic from scratch. Let's open Photoshop and start creating our first graphic, a header image. We'll start with an image of a rabbit that Hannah has provided to us. Let's open it in Photoshop now.

Creating a New File

Step1. Launch Photoshop CC.

NOTE: These materials were captured with the Photoshop interface at the lightest setting. The color of your Photoshop interface may be darker than seen here.

Step2. To open an existing file, in the Menu bar,

Click File, Click Open...

You see the Open dialog box.

We need to specify the name and location of the file to open.

Setting the Location for Opening Your File

When the dialog box opens, it lists a default location from where the file will be opened. All of our exercise files are contained in the epclass folder, located on the desktop. We'll want to change our location to this folder.

We will start at the desktop, since our exercise file folder, epclass, is located there.

Step1. To move to the desktop,

Click

The current location is now set to the desktop. All of our exercise files are contained in the epclass folder, located on the desktop.

Step2. To open the epclass folder,

Double-Click

The epclass folder contents are now visible.

Note for Macintosh Users - On a Macintosh, the "From:" field is above the list of visible folders and files. To move to the desktop, press the key combination Command key+D. From there, you can move into the epclass folder.

We will need to open the Bunny Trails Site subfolder of the epclass folder that contains all of the necessary documents.

Step3. To open the correct folder,

Double-Click the Bunny Trails Site folder

Step4. To open the file we need, in the Bunny Trails Site folder,

Double-Click rabbit.jpg

The file opens. We are now ready to begin working on the banner.