Introduction to Photoshop

Introduction to Photoshop

Introduction to Photoshop

Photoshop is a photo editing software that allows the creation of graphics or manipulation of digital photos and images.

Things to remember:

  1. The default file format of a Photoshop file is .psd. This is a raw format which allows users to work on layers.
  2. Photoshop can save several other file formats such as .jpg, .gif, and, .png.
  3. The appropriate and standard resolution or Dots Per Inch for a given project should be 72 DPI for web and 300 DPI for print.

Getting Started

When starting Photoshop, there are two initial options to choose from.

1. Create a New File by clicking File in the Main Menu and then selecting the New option in the dropdown.

2. Open an existing File by clicking File in the Main Menu and then selecting the Open option in the dropdown.

Using the Photoshop Interface

Photoshop Elements

Control Panel

Manage settings of the currently selected tool. For example, if the text tool is selected, the user is able to modify the font size, color, style, etc.


The toolbar provides tools, such as the move tool, type tool, and zoom tool for editing images.

Document Tab

A document tab appears when an image file is open. This allows the user to work and switch from one image document to another.


The area where users work on. Photoshop can have multiple documents in their workspace but only one active document or drawing canvas at a time is allowed.

Panel Dock

The collection of panels are usually located in the Panel Dock. Some of the notable and useful panels are the Navigator Panel and Layers Panel.

Photoshop Tools

Move tool

Moves a selection or layer

Artboard tool

Creates, moves, or resizes multiple canvasses

Rectangular marquee tool

Makes a selection in the shape of a rectangle

Lasso tool

Makes freehand selection

Magic wand tool

Selects similarly colored image areas

Crop tool

Trims or expands the edges of an image

Eyedropper tool

Samples colors from an image

Brush tool

Paints custom brush strokes

Eraser tool

Changes pixels to the background color or makes them transparent

Gradient tool

Creates a gradual blend between colors

Horizontal type tool

Adds horizontal type

Pen tool

Makes and changes paths or shapes with anchor points and handles

Path selection tool

Selects a whole path

Rectangle tool

Draws rectangles

Rounded rectangle tool

Draws round-edged rectangles

Ellipse tool

Draws ellipses

Custom shape tool

Draws shapes from a custom shape list

Hand tool

Pans over different parts of an image

Zoom tool

Magnifies or reduces the view of an image

The toolbar icons with a small arrow underneath provide different other tool options. Click and hold the item to select a different tool.

Showing and hiding panels

In the main menu, locate Window and select panels that need to be displayed or removed from the Panel dock.


Layout Grids


What is Grid?

A grid is a mix of horizontal and vertical lines that divide and guide a designer to put structure on a website by setting columns or modules in proper placements.

The gridlines, while may be visible in Photoshop, is not necessarily required to be displayed as part of the final output. It is only supposed to be used by designers for the following reasons at a minimum:


Item placement

Deciding on where to place elements in web design is critical in a website. The proper item placement allows the user to read and understand clearly what the message of the website is about. The use of grid lines will help a designer in creating an easy-to-understand content flow that will guide the user when browsing through the website.

Alignment control

It’s easier to relate to a website if there’s a visible and proper order, sequence, pattern, or method of elements. Putting in the effort to control the arrangement of a website is important to easily connect with them. At the end of the day, nobody wants a website that is chaotic and difficult to read.

Consistency and Proportion

The grid line allows the design to be consistent in its item placement, alignment control and proportion of elements. Consistency and proportion is important because it keeps the users connected which reduces the chances of them leaving the website instantly.