Adobe Photoshop for the Web

Home > Build > Graphics

by Aaron West

There is no doubt that Adobe Photoshop is the hands-down best when it comes to image editing. It has become and remained the industry standard for quite some time. It has an enormous user base, which ranges from end-users, to graphic designers, to web designers. There are many other worthy utilities out there, but none of them equal the power of a Photoshop.

There are few prerequisites to this tutorial. We do expect that you will understand basic HTML and Web concepts. If you don't, there are plenty of resources available on this site. The Beginners HTML Tutorial can be helpful, and most anything else might be found in the Programming section. We also expect you to understand basic graphic concepts. Everything necessary to understand this tutorial can be found at Web Graphics For Beginners.

In this tutorial, you will be learning how to use Photoshop as your primary tool when it comes to web graphics. You will become familiarized with the Photoshop interface, will learn how to crop graphics, scale graphics, selection areas, as well as learn some Photoshop effects.

This tutorial was written on a PC. All screen shots and keyboard commands are from the PC version. Mac users can replace the CTRL key with the Command key, and the ALT key with the Option key. We work in a cross-platform environment, and prefer to use Photoshop on the Macs, however the majority of users out there are on PC's. We decided that a PC based tutorial was more sensible due to our audience. We also feel that the program itself is virtually identical on either platform, save for a few minor differences.

The Photoshop Interface

The Photoshop interface consists of four elements, the toolbar, palettes, and pull down menus. We will cover all three in detail.

The toolbar is where one selects icons, or tools in order to perform a task. For example, if someone wanted to paint, they would use the paintbrush tool; if someone wanted to erase, they would use the eraser tool.

Palettes are where colors are selected, layers are modified, and other preferences are configured. We will cover palettes in limited detail in this tutorial. That means we will explain what they are, but will not cover them in great detail.

The pull down menus are similar to many other programs. Photoshop has the standard File, Edit, View, etc. menus. Most of the menus work in a similar fashion as most other programs.

Part 2: The Toolbar