How to Use a Grid in Photoshop for Website Design

Photoshop for web design: 20 pro tips

David Everly and Dan Rose reveal their top Photoshop tips for being more efficient when creating website graphics.

For many web designers, Photoshop still plays an integral part in the website creation process. Whether you're mocking up your entire site, or just designing individual site elements, here are some Photoshop web design tips that may prove useful for your next project...

01. Use grid systems

There are a number of tools to help you use grids in Photoshop

Grid systems can save a lot of headaches in web design. Try using free resources like Cameron McEfee's GuideGuide Photoshop extension and the Grid System Generator to make custom grids easy and accurate.

02. Get it all out

One of the best practices for successful web design (and time management) is to place all your elements on your Photoshop canvas before you start getting dirty with design. Web designers often jump right into one particular area without considering the rest of page and the weight of content. Getting the rough framework into place quickly will ensure smarter decisions early on and avoid larger edits later.

03. Custom document presets

Photoshop comes loaded with a number of web focussed presets. Check them out!

HitCtrl/Cmd+N to open the New Document window. The Presets menu contains basic web and mobile presets but is missing many common dimensions for a variety of grid systems, banners, iOS and Android devices. Take a few moments to fill the missing areas.

04. Customise default type

Close all open documents. Open the Character palette to select your preferred font family, weight, spacing, and colour. No more default Myriad!

05. 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.

06. Easy dotted lines

Creat dotted lines in Photoshop. It's one of those things you'll always have to do.

Select the Brush tool (B), 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, holdShift while dragging the brush horizontally or vertically to create a crisp dotted line.

07. Easy text wrap

With a quick workaround, Photoshop can apply Text Wrap functions similar to InDesign's. Select the Rectangle tool (U). In the Options bar set the fill to Paths, set the shape to Rectangle tool and select 'Add to path area' (or press+). 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' (or press-). On your canvas with the outline of the original rectangle showing, draw an intersecting rectangle where the text will wrap. Select the Type tool (T), 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 (U) and the Direct Selection tool (A).

08. Quick colour fills

Certain key commands come in useful over and over again. Quick fill is one of them

HitAlt/Opt+Delete to fill text, shapes and layers with the selected foreground colour. PressCtrl/Cmd+Delete to fill an area with the selected background colour. HitD to revert to the default black and white, and pressX to swap the foreground and background colours.

09. Stay organised

UseCtrl/Cmd+G to group layers and keep you 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.

10. Get smart

Using Smart Objects (go to Filter>Convert for Smart Filters, and Ctrl/Right-click Layer>Convert to Smart Object) wisely can really increase workflow throughout the design process. Converting larger photographs and vector objects into Smart Objects retains original image quality after scaling, rotating, and skewing.

11. Master shortcuts

The key to Photoshop stardom is efficiency. It's not just knowing how to do something, but how to do something quickly so that you're using valuable time executing a function. Some specific shortcuts to know? Start with Save for Web [cmd+opt+shift+S], Image Size [cmd+opt+I], Canvas Size [cmd+opt+C]. Don't forget Levels [cmd+L] and Hue/Saturation [cmd+U]. Head here for more Photoshop shortcuts.

12. Be subtle - everything in moderation

Add filters such as noise and drop shadows with ease as if barely using them

As designers, we tend to discredit our audience's ability to perceive the effect we're trying to achieve. So our response is to 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.

13. Use masks intelligently

Globalising 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 each individual layer. It's a far superior solution than sifting through 20 masks, not knowing which ones do what.

14. Refine masks for easy hair silhouetting

Frizzy hair? Fear no more. Use the Refine Mask tool instead of spending countless hours silhouetting by hand

Who doesn't loathe having to silhouette hair? Here's a trick that works well on various sizes of images, no matter how crazy the hairdo. Make a rough mask of the person, then go toSelect >Refine Mask (Refine Edge in versions previous to CS5). Play with the Radius and watch the magic unfold.

15. Perceive drop shadows accurately

Piggybacking on the last tip, the sign of an amateur designer is when you see drop shadows far too dark. It translates that the object is under a spotlight. Probably not the case. Be sure to decrease the opacity, and better yet, use a colour that's a dark hue of the background behind it instead of black.

16. Teach yourself the pen tool

PSDTuts has a very comprehensive tutorial on how to master the pen tool

It's worth the time to get good at using the pen tool. It's one of those things we tend to avoid, but if you want to pull off some crisp masks or add illustration to your designs, the pen tool is your weapon of choice. Brush up your skills with this tutorial.

17. Sharpen photos using high pass

Ready for some Photoshop Magic? So, you've received a low-res photo from your client, and it's just too blurry to use. Duplicate the layer, then go toFilter >Other >High Pass. Choose something low (around 2.0) and then set that layer's Blending Mode to Overlay. If it's too crisp, decrease the opacity. Results may vary.

18. Be consistent

Five different blues, and none of them are the one from the brand guide? Be sure to check the colours being used, especially when exporting images. Another handy tool for colour accuracy is 0to255.com, which provides hex values that arharmoniously lighter and darker of a given colour.

19. Don't default to default settings

You'll know when you see a drop shadow whose settings haven't been touched. Work those settings every time

One of the hardest things to ward off is Photoshop autonomy. If you're treating the Effects panel like a checklist of desired styles, you're most likely not crafting their settings to a reasonable state. The default settings are generally harsh in order to show their appearance. Soften the amounts and change the angles.

20. It's in the 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 (rather than in HTML/CSS). Article originally posted on 23rd September by Creative Bloq

How to Use a Grid in Photoshop for Website Design

Source: https://www.itpie.co.uk/blog/photoshop-for-web-design-20-pro-tips

Share this post