Breaking News

Adobe Photoshop Web Design Tutorial.

Before starting Adobe Photoshop Web Design Tutorial Course. I want to include some information. If you are a web designer, blogger, illustrator, photographer.

What anyone wants to share images online you can find a Photoshop fine and flexible source Adobe Photoshop for Web Design.

Where you will learn Optimizing images for the web, how to create animation, how to design web pages, including how to graphic rollover navigation, slice images. Adobe Photoshop integrated, dream weaver, fireworks, flash, illustrator.

 Photoshop Web Design

This Adobe Photoshop Web Design Tutorial course teaches you to need to know to create exciting visual assets that will make your website, blogs, web ads, and other online projects really stand out.

Adobe Photoshop Interface.

The Interface: –


Contains controls, and information etc.

On the right side of your screen you see panels.


Left side your screen you see toolbox.


  • When you select any tool from toolbox then the tool options bar will be changed.
  • Some tools have the black rectangle at the corner it means some tools are hidden behind.

Each tool has a short key.

On top of the screen, there is a Menu Bar.

 menu bar

Working with the tabbed documents.

Open more than image files.

 tabbed document

Move to the next image file.

move to next image


move to previous image

Adobe Photoshop Web Design

You can drag/move the image, where you want to keep. ( to another file).

Ctrl+t for resizing the image.

Arrange Documents.



Arrange Documents.

 arrange document

 arrange document

Hand Tool.

hand tool

Drag one window to another window.

Customize Panels.

 customize panels

Click on collapse to icons.

 customize panels

 customize panels

Panel Menu Icon.

Click and hold on any panel.

panel menu icon


close only one tab.

Close tab group.

close group tab.

 penal tab

Open any Panel.


open any panel.

You can drag/move any panel group to any panel group.

Click and drag.

You also drag/move any single panel where you want to on the screen.

panel dragging

You can also create/make panel group with the help of dragging.

Customizing Web Shortcuts.

Every tool has a shortcut key.

keep mouse arrow over any tool and see keyboard shortcut.

For watching inside tools.

Pressing Shift key with shortcut letter.

Panels also have shortcuts, see in the Windows menu.

Also in the Menu bar, there are shortcut keys.

So here you can create your own shortcut.


keyboard shortcuts.

 keyboard shortcuts

saving shortcut

location of kb shortcuts

web shortcut

web shortcuts

save shortcut


Now you can see the changes have been made. (file save for web & Devices).

Saving a custom web workspace.

 custom space

 custom space

New workspace (for creating the new workspace.)



Save workspace.

Delete Workspace.



delete workspace.

 delete space

 delete space

Setting Photoshop Preferences for the web.

Photoshop Preferences offer a way for you to customize the way that you’re a copy Photoshop behaves. I would like to emphasize one preference choice that I suggest you make whenever you doing web work in Photoshop and that make sure that the ruler’s units’ measurement is set at pixels Before I show you do that I am going to go make my ruler visible by going to the menu bar.

(When work on web project then remember you have to work on pixels.)






Units & Rulers.

Choose pixels.


Right, click on the ruler.

Choose any option.

 ruler more options

Double click @ corner.

ruler image




Guides. (Guides are also very useful, positioning and measuring.)

Guides show you where you are in the page in designing process.

Green lines are the example of guides.


Delete guides: click on the line with the arrow and then delete it with the keyboard. (view ==>clear guides.)

Adobe Photoshop Tools (CS6).

 Adobe Photoshop Commands.

Spread the love

About imran

My Name Mohammad Ramzan Bhutto. Live in District Jacobabad, Sindh, Pakistan. I have started blogging on Information Technology, my selected areas are Online Business, Digital Marketing, Make Money Online.

Check Also

Inpage Urdu

A complete Inpage Urdu Tutorial.

A complete Inpage Urdu Tutorial. An Introduction of Inpage Urdu. Inpage Urdu is a word …