Miracle Studios Digital Agency

10 years Experience, Over 1000+ projects Completed. Do it right, the first time.

Visit Website

Here you can explore the best tips shared by Dan Rose and David Everly for making effective use of Photoshop while crating graphics for websites.

Photoshop has been a crucial part of web designing process for several web designers. From making minor changes in the overall web design or creating several individual elements for your site, the tips mentioned here will definitely prove helpful to you.

Using Grid systems

Grid sytem

Grid systems are considered to be a highly time effective tool in web designing. For creating accurate custom grids easily you can try to use free resources such as Grid System Generator and GuideGuide Photoshop extension by Cameron McEfee.

Custom Document Presets

Custom Document Presets

You can use Ctrl + N for opening a new document. The preset menu which opens in a new window includes basic mobile and web presets, while some common dimensions regarding the grid systems, iOS, Android devices and banners are missing. You can spend some time filling these areas and make your task easier.

Easy to Use Dotted Lines

easy dotted Line

Select Brush tool and from the drop down menu which appears in upper right hand corner, open Brush Presets palette. Now select Square Brushes and click on Append. Next you need to select Hard Square brush of 1 Pixel size. Again go to Brushes palette and click Brush Tip Shape, while selecting 300% as Spacing. Now to crate crisp dotted lines you need to hold Shift and drag the brush vertically or horizontally.

Getting Everything Out

A highly useful practice for creating amazing web design in less time is to put every element on the Photoshop canvas prior to beginning with the designing process. Usually web designers are too keen to start with a specific area that they forget to consider other part of the page and content. By having a rough framework in place you can make better decisions, thus avoid major changes later on.

Customizing Default Type

Close all the documents which are open. Now you can open Character Palette for selecting the font, weight, colour and spacing according to your preference.

Crisp Vectors

The vector objects should be kept crisp. Select the Rectangle tool and in options bar open Geometry option. Now check the option of Snap to Pixels.

Easy Text Wrapping

Once you become a bit familiar, you can use Text Wrap functions in Photoshop just like the ones available in InDesign. Select Rectangle tool and set Paths as fill in Options bar. Now set Rectangle tool as shape and select the option of Add to path area.

Now create a big rectangle over the area for content. Come back to Options bar and select Subtract from path area instead of Add to path area. While the outline of original rectangle is showing, make a rectangle which intersects for wrapping the text.

Selecting the Type tool, click in large rectangle for converting shape to Type Work Path for filling it with type. The Type Work path dimensions can be refined further with Rectangle tool and Direct Selection tool.

Fast and Easy Colour Fills

fast and easy color fill

To fill the foreground colour you have selected in shapes, layers and text click Alt + Delete. For filling background colour you have selected click Ctrl + Delete. If you want to revert to default black and white click D, while for swapping background and foreground colours press X.

Staying Organized

Layers should be grouped using Ctrl + G in order to stay focused and organized. You can minimize your hassles all through the process of project designing and development by keeping the components and content areas in groups, such as footers, navigation and supporting components.

Work Smart

Smart Objects can be used for increasing workflow all through the process of designing. By converting big vector objects and photographs into the Smart Objects, you can also retain their original quality even after scaling, skewing and rotating.

Master Shortcuts

Efficiency is crucial to master Photoshop. Knowing how something should be done is not enough as you should also know how a task can be done quickly, so that you can get maximum output while function execution. You should be aware of some common shortcuts, such as for Save for Web, Image Size, Canvas Size, Hue/Saturation and Levels. You can access more shortcuts here.

Stay Moderate


Designers usually get so carried away while designing and completely overlook the impact they want to create on their audiences. Adding a lot of noise, making too many gradient or using too much saturation or contrast can prove detrimental for your design. Remember to stay in control and perfectly blend the subtle effects with elegance.

Making Intelligent Use of Masks

For enhancing Photoshop efficiency globalizing masks is a good option. For Example, when creating a design with five slider images, you can put mask on folder after grouping, rather than on every individual layer. It is much easier rather than shuffling through multiple masks in order to find one.

Refining Masks

Refine mask

Silhouetting hair is a common task which not many designers can get right. You can use this tip for every kind of hairstyle. After creating a rough mask of an individual, then click Refine Mask in Select menu. You can make changes to the Radius for better effects.

Accurately Perceiving Drop Shadows

Drop shadows which are way to dark signify the work of an amateur. It makes the object look as if it is placed under a spotlight, which is not always right. An easy way to avoid this mistake is decreasing the opacity. Another good option is to use a colour darker than the background rather than black.

Be Familiar With Pen Tool

Pen tool

Spend some time mastering your grip on pen tool. This tool is highly useful when creating crisp masks, as well as adding illustrations to a design. However, still many designers tend to avoid it due to its complexity. You can better your skills by using the tips mentioned in this tutorial

Miracle Studios Digital Agency

10 years Experience, Over 1000+ projects Completed. Do it right, the first time.

Visit Website
There are no comments.

Leave a Reply