Photoshop for Web Design 20 Pro Tips

Believe it or not, if you’re using Photoshop to design a website, you’re on the way to become a successful web designer. It is simply because Photoshop is one of the most advanced tool in the design industry as it play an integral part in website creation process, whether in website mockups or designing individual site elements. Photoshop Professional tools can bring your creative imagination into life which at the same time increases your productivity.

Here are some Photoshop tips which may help you to know about Adobe’s venerable capability to make your life easier for your ongoing and coming projects.

Use grid systems

Grid System prevents headaches during web designing. There are many sources available for grid system. Set yourself up with Grid system from Get-go because your design need to address alignment and relationship of size and then Know how to use and put their work in Photoshop for website design.

Get rough work into place

Put and Place all your designing elements on the Photoshop canvas before mixing up with designing. Most Web designers works into single particular areas without considering the rest of the pages and weight of contents So getting rough framework into place will help you make smarter decisions and avoid larger edits.

Snapping to Guides

Once you have implemented Grid system, “snapping to” guides is genius. With less squinting at the screen you will not need those trendy designer glasses. There is nothing worse than be off by a single pixel. Turn on snapping by going to View>Snap and then View>Snap to>Guides


Master Shortcuts

It is not always just to know that How to do something but it is about how to do something quickly because time is always valuable. So you need to know some master shortcuts. Some of the master shortcuts are:

Start with Save for Web: Cmd+Opt+Shift+S, cmd+N to open the New Document, window Image Size: Cmd+Opt+I, Canvas Size: Cmd+Opt+C. Don’t forget Levels: Cmd+L, and Hue/Saturation: Cmd+U, alt+Delete to fill text, shapes and layers, cmd+Delete to fill an area and cmd+G to group layers

Personalise Default Type

Close your all open documents and select your preferred font family, weight, spacing and colour by simply opening the character palette and then-No more Default.

Crisp Vectors

Keep your vector objects crisp. With the Rectangle Tool (U) selected, open the Geometry options menu in the options bar. Check the Snap to Pixels option.


Crisp dotted line

Creating Dotted line is one of the things you can not miss to do.

Open the Brush Presets Palette by selecting the Brush Tool (B) followed by the drop-down menu in the upper-right corner. You need to select Square Brushes and click on  Append.

After that select the Hard Square Brush with 1 Pixel. Switch to the Brushes palette again and select Brush Tip Shape with Spacing to 300%. Hold Shift on your canvas while dragging the brush vertically or horizontally to create a crisp dotted line.

Use wrap text easily

Photoshop can apply Text Wrap functions similar to InDesign’s but with little tricks. Click the Rectangle shape Tool (U) on the sidebar. Set the fill to Path In the Options bar, set the shape to Rectangle tool and select ‘Add to path area’ (or press +).

Place your cursor anywhere on your canvas and draw a large rectangle over the content area. Click on the Options bar again and change the ‘Add to path area’ to ‘Subtract from path area’ (or press ). Outline of the original rectangle showing on your canvas draw an intersecting rectangle where the text will wrap.

Select the Type tool (T), and place your curser anywhere inside the large rectangle to convert the shape to a Type Work Path to fill with type.

Quick color fills

Shortcuts are always useful again and over whenever you are using Photoshop.

Key command for quick colour fill is one of them.

To fill text, shapes and layers press alt+Delete with the selected foreground colour. To fill an area with the selected background colour hit cmd+Delete. Hit D to revert to the default black and white, and press X to swap the foreground and background colours.

Keep Organised

Every professional thing requires to stay organised to achieve aim and projects in time and make more of productivity, the same way you need to stay organised using photoshop for web design by using cmd+G to group layers and help you stay organised and focused. Grouping your content areas and components – such as navigation, featured content areas, supporting components and footers – separately will save you headaches throughout the design and development process of a project.

Smart Objects

‘Make the Logo Bigger’ is always difficult and realising you can not because it is rasterized graphic or trying to resize the button only to find that it is no longer shape. The solution to keep these shape in vector format and you can do that by importing them as Vector Smart Objects or converting them to Smart Objects before you rasterize them.

To use Smart Objects (go to ‘Filter > Convert for Smart Filters’, and ctrl or right-click ‘Layer > Convert to Smart Object’) wisely can really boost your workflow throughout the design process. Converting larger photographs and vector objects into Smart Objects retains original image quality after scaling, rotating, and skewing.

Be subtle

Add filters e.g Noise and drop shadow but with caution.

Designers always tend to discredit audience’s ability to perceive the effect, in response designers add too much noise, make harsh gradients and use too much contrast. The perfect blend is when you use effects with some grace, and, more importantly, self-control.

Using Mask with Intelligence

I would say masking is some sweet efficiency of photoshop. If you have five slider images in your design, group them and put a mask on the folder instead of on each individual layer. It’s a far superior solution than sifting through 20 masks, not knowing which ones do what.

Use Refine Mask

Use refine mask instead of silhouetting by hand.

Everyone loathe having to silhouetting hair and refine mask is the trick which work well on various sizes of images. Make a rough mask of the person, then go to ‘Select > Refine Mask’. Play with the Radius and watch the magic unfold.


Drop Shadows

Remember whenever the drop-shadows are at the far too dark, it is the sign of amateur designer. Make drop shadow realistic so it does look like the object under the spotlight. Be sure to decrease opacity, or better yet, opt for a darker shade of the background colour of using black.

Pen Tool

Oh my time! Are my only three words when I am on Pen tool. It is worth taking time to get good at using the pen tool. One of the things which we really tend to avoid but if you want to pull off some crisp masks or add illustration to your designs, the Pen tool is your only weapon of choice.

High Pass for Sharpen Photos

Have you forgotten to sharpen the photos for you design? I hope No, and you can not forget to do so. But if yes you forgot, then are you ready for Photoshop magic? Use High Pass tool to sharpen the photo whenever you receive the low-res or blurry photo from you client. Duplicate the layer, then go to ‘Filter > Other > High Pass’. Choose a low value (around 2.0) and then set that layer’s Blending Mode to Overlay. If it’s too crisp, decrease the opacity.

Be bit Homogeneous

Five different brand of same colour and none of them are the one from the brand guide? Be consistent with colours and this can be achieved by playing with hex value. Another handy tool for colour accuracy is, which provides hex values that arharmoniously lighter and darker of a given colour.

Big No to default to default Settings

To ward off the Photoshop autonomy is one of the hardest things.  If you’re treating the Effects panel like a checklist of desired styles, you’re most likely not crafting them into their best state. Soften the values and change the angles.