15 Photoshop tips for web Designers

Here are some tips for web designers who wants to master and user Photoshop in better way. Photoshop can help web designers to have better and more attractive design.

1. Use grid systems

There are a number of tools to help you use grids in Photoshop. Grid systems can save a lot of problems and mistakes in web design. Try to use Photoshop extension to make custom grids easier and more accurate..

2. Customize default type

Close all open documents. Open the Character palette to select your preferred font family, weight, spacing and color.

3. Make your vectors crisp

Keep your vector objects crisp. With the Rectangle tool selected, open the Geometry options menu in the options bar.

4. Create dotted lines

It's one of those things you always have to do. Select the Brush tool, then open the Brush Presets palette, followed by the drop-down menu in the upper-right corner. Select Square Brushes and hit Append.
Now select the Hard Square 1 Pixel brush. Switch to the Brushes palette and hit Brush Tip Shape, adjusting Spacing to 300%. On your canvas, hold Shift while dragging the brush horizontally or vertically to create a crisp dotted line.

5. Build quick color fills

Certain key commands come in useful over and over again. Quick fill is one of them. Hit alt+Delete to fill text, shapes and layers with the selected foreground color. Press cmd+Delete to fill an area with the selected background color. Hit D to revert to the default black and white, and press X to swap the foreground and background colors.

6. Organize your works

Use group layers and help you stay organized and focused. Grouping your content areas and components separately will save you confusion throughout the design and development process.

7. Learn shortcuts

The key to Photoshop stardom is efficiency. It is not just knowing how to do something, but you need to know how to do something quickly so you will not waste valuable time to execute a function.

8. Consistency

Be sure to check the colors being used, especially when exporting images. Photoshop has helpful tool for color accuracy which provides hex values of shares that are harmoniously lighter and darker than any given color.

9. Do not use the default settings

If you are treating the Effects panel like a checklist of desired styles, you are most likely not crafting them into their best state. The default settings are generally harsh in order to emphasize their effect. Soften the values and change the angles.

10. Pay attention to details

An integral part to perfecting your craft in Photoshop is to make your design 'pixel perfect'. Go back through your PSD, looking for blurry edges on rounded rectangles or inconsistent line weights. It pays to take the time in Photoshop perfecting your layout

11. Create realistic shadows

Piggybacking on the last tip, the sign of an amateur designer is when you see drop-shadows that are far too dark. It makes it look like the object is under a spotlight. Be sure to decrease opacity, opt for a darker shade of the background color of using black.

12. Use masks smartly

Globalizing masks makes for some sweet Photoshop efficiency. For instance, if you have five slider images in your design, group them and put a mask on the folder instead of on each individual layer.

13. Put up text easily

Using a quick workaround, Photoshop can apply Text Wrap functions. Select the Rectangle tool. In the Options bar set the fill to Paths, set the shape to Rectangle tool and select ‘Add to path area’.
On your canvas, draw a large rectangle over the content area. Back in the Options bar, change the 'Add to path area' to 'Subtract from path area'. On your canvas with the outline of the original rectangle showing, draw an intersecting rectangle where the text will wrap.
Select the Type tool, and click inside the large rectangle to convert the shape to a Type Work Path to fill with type. You can further refine the Type Work Path dimensions with the Rectangle tool and the Direct Selection tool.

14. Become clever

Using Smart Objects 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.

15. Discover custom document presets

The Preset menu contains basic web and mobile presets but is missing many common dimensions for a variety of grid systems, banners, iOS and Android devices.