photoshop introduction

The first step of creating a website starts with a mockup design built with the use of photoshop. It gives us a clear picture about the website being built before the actual coding begins. All the color themes as well as the fonts, navigations, buttons and other interface elements are developed to imitate a fully functional website.

It'll be much easier to view the outlook of the website within a few hours and much more convenient to make changes in photoshop rather than scrapping all those html and css codes when the actual coding has been done and your client isn't happy with the design.

Hence, in order to save your time and effort while designing a website, it's better to start with the photoshop mockups rather than doing all those html, css and js works before the layout is finalized.

So, Let's start with the photoshop tutorials to reach the coding level or learn it for graphic designing.

Photoshop Interface

Before we start working with the tools, templates and images, it's good to have a general knowledge about the interface of photoshop. Here's a picture of photoshop interface.

adobe photoshop cs6 interface

Menu Bar

As seen in other applications, Menu bar contains multiple options for creating, editing, saving and printing the document. We'll go through the ones we need in the latter part of the lesson.

Tools Bar

Photoshop has a tools bar on the left of the window that makes all the works easier as you don't need to navigate through the menu bar to find the tools that you need on a regular basis to move, select, crop, paint, etc. We'll go through those on the next lesson.

Document Tab

Photoshop allows you to open and work on multiple documents at a time. All the documents currently opened are visible as tabs on top of the document area. You can toggle among the documents by clicking on those tabs and work on multiple documents simultaneously.

Options Bar

Most of the tools in photoshop can be customized as per the requirement and you can find all the options available for the selected tool on the options bar.


Depending upon the document you are working on, you might need different panels for quick view and convenience and photoshop offers a great space to display some of them as per your need on the right hand side of the document area. The most important one would be the layers panel that displays the layer you are working on as well as allows you to re-order the layers as per your need. Let's have a closer view on that one.

Layers Panel

adobe photoshop layers panel

Layers panel helps you organize your document layers that can be viewed and edited as individual units. It lets you control the outlook of your document with convenience as well. Let's have a look at the options available at the layers panel.

  • Layer Visibility The eye shows that the selected layer is visible. Click on or off to see or hide a layer.
  • Layer Locking Options Checkered square icon locks transparency while the brush icon locks the image, the arrow icon locks the position of the layer and the lock icon locks all options.
  • Layer Blending Mode Choose a particular blending mode from the drop-down menu to make the selected layer blend as you like with the layers beneath it. The default value is Normal here.
  • Fill / Opacity Lets you specify the transparency of the layer by typing in some values or dragging the slider.
  • Layer Options Menu Located at the top right section of the layers panel, this menu allows you to select multiple layer options. Some of them are displayed as icons at the bottom of the Layers panel as well.
  • Link Layers The first option at the bottom of the layers panel. It allows you to link multiple layers so that you can move or transform those linked layers together.
  • Layer Styles Allows you to add various visual effects to the selected layer.
  • Layer Mask Allows you to show or hide certain parts of the layer with the use of paint brush.
  • New Fill or Adjustment Layer Creates a new layer that can be used as individual layer in the document but effects will be applied in the layer beneath it.
  • New Group Allows you to organize document with multiple layers where you can group different layers into a folder.
  • New Layer A shortcut icon to create a new layer in the document.
  • Delete Layer A shortcut icon to delete a layer or a group of layers. You can drag the layers to the trash to get it deleted or select the layers and click on the trash icon too.

Don't want to read the article ? Here's a video tutorial, if you would like to see a video instead.