News

How to use Photoshop for web design – part 2

Part 2 brings together another essential selection of Photoshop tips, tricks and techniques that every web designer needs to know

PhotoshopLogo

Appropriate type hierarchy

Define key content in your web design through styling
If you’re conforming to white space, type hierarchy is a great way to signal loud and clear to your readers the relative importance of the elements in your pages. There are two perfect modes – weight and style. Varying type size is a great way to differentiate content, as this allows skim readers to get straight to the source, the most important info you want to draw attention too. Designers can also use the device of different font styles. Serif and sans serif faces can also be mixed to good effect.
Photoshop CS6 now easily lets you save type hierarchy styling as a preset to apply in subsequent projects, using the latest Paragraph and Character Styles options. Select Typography from the workspace drop option (top-right interface) to have all the associated tools instantly available.
Before you start styling hit the Create a new Paragraph Style button. Double click your Paragraph Style 1 preset to alter name, colour, font type, alignment and many other advanced features. Changes update live. Character Styles let you redefine the style of individual words and sentences. Simply select the word(s) you want to change and hit the Create a new Character Style. Double-click the preset to make changes, the same as a Paragraph Style.


This type hierachy serves to present a sense of the brand first and details second

Colour consistency

Create a sense of visual unity in your on-screen elements
Applying colours can either excite your viewer or make them nauseous. Tones that repeatedly clash on your pages can simply look ugly or have more serious consequences, like impairing text legibility, for example red type on black background, or greying on blue. What you should do is make sure that your colours contrast enough with the background to achieve clear readability. If unsure whether the contrast is enough simply take a screen grab of your page, load up in Photoshop and set Image>Mode to Greyscale. You’ll soon see if you have enough.


The example above demonstrates how the true colour corresponds to the header and logo tones

Convert with Droplets

Drag and drop to quickly transform image scale and resolution
One very successful automated option is the Photoshop Droplet. These let you simply drag and drop a few, several, even a dozen image files at once into it, with Photoshop automating effects, saving to a designated folder. This can be especially effective when you are converting images from a print to  a web resolution.
Here’s how to create one. Record your action and choose File>Automate>Create Droplet. In the Create Droplet panel you can set your created Action in the Play>Set and Action drop options. The Destination option allows you to command Photoshop to either save and close, or save to a designated folder of your choice. You can even choose the file name and extension, eg date, serial number, etc.

Work with gradients

The best ways to combat distortion issues when applying this common effect
Gradients become an absolutely invaluable source for adding a visual yet clear-cut aesthetic to your elements. Gradients can be a great way to improve interest in simplified mobile device UI when applied to touch buttons. These can also be applied to banners, panels and backgrounds.
However, when working at certain resolutions you may experience what is known as dithering. This is when a gradient will show banding, separating a smooth gradient into separate ringed tonal variations. Annoying to say the least.
For web designers working with Photoshop there is a solution – apply Noise. Simply add a Layer Mask, then apply Filter>Noise>Add Noise to this, set to no greater Amount than 1%. You will now see this dithering disperse

Back to emboss

The real way to add emboss and cut out effects
OK, so we just said don’t use Bevel & Emboss, and we meant it in the literal sense. But what this doesn’t mean is that you can’t add subtle emboss and cut out effects to your web elements. In fact, going by current trends it’s good if you do. When applied correctly this again creates a wonderful sense of 3D and tangibility in your web designs.
A perfect way to create cut out effects, which look great with type and panels, is to in fact apply options as old as Bevel & Emboss. Set your type layer and select Layer>Layer Styles>Inner Shadow. Set Distance, Choke and Size accordingly, and Blend Mode to Multiply. From the Layer Style options select Stroke, setting a lighter variant of your background colour, a small Size value and position to Inside.

Reasons for textures

Give your textures a purpose, and distinguish them from patterns
Before we start to discuss reasons to apply textures, lets just clarify one thing – they aren’t the same as patterns. Both sometimes get thrown into the same barrel but are wholly different. Patterns are typically small, repeating, tiled elements. Texture application must ultimately serve a purpose of bringing your website together, but should not be the main focus. It’s a supporting device – not a matter of frivolous aesthetics.
A few examples would be to apply a texture to draw attention to your logo or other page elements. This is done with textured panels and headers, enhancing information architecture. Textures can also effectively create atmosphere and sensibility, engaging viewers and enhancing your identity. For example, if you’re an illustrator, apply marker scribbles and paper texture.
Applying textures in Photoshop can be achieved by applying clipping masks to map your texture layer to your asset. Simply place the texture layer above your asset and Ctrl/right-click it, selecting Create Clipping Mask. You can apply variable Blending Modes to your texture layer for additional effects.

Apply drop lighting

Use CS6’s intuitive options to avoid banding
Drop lighting in your backgrounds is another popular web design trend that creates authentic looks, especially when coupled with drop shadow type effects. There are a few ways to create this look in Photoshop, with many designers turning to Gradient options. It’s a reasonable choice, as you get to control the strength of your lit or shadowed area with applied styles, Blend modes and opacity values. However, these can be susceptible to banding effects.
If you own a copy of Photoshop CS6, we’d say use the new Render>Lighting Effects option instead. Application is far more intuitive, now in real-time, through sizeable handles and an Intensity ring. There are three presets that you can choose from: Spot, Point and Infinite.
Spot Lights adds a hotspot location, which is where the light hits your subject, creating a ‘spot’ of light. You can customise intensity, location and direction. Point Lights are softer, like light from a bulb, and you can alter location and intensity, but not direction. Infinite Lights are more distant light sources, only editable in their intensity and colour.
The Properties panel down the right-hand side of the interface will let you tweak and customise your effects. Add these to a duplicate background layer, and tweak layer opacity to set effect strengths.


A clear application of Spot Light reinforces the foreground image, creating the illusion of depth and promoting a clear focus on screen.

True web colours in CS6

So you’re matching colour values in the Photoshop Color Picker to your code editor, but you’re having to manually copy and paste in hash tags. Well, Photoshop CS6 now allows web designers to enter hashtag Hex colours and three-digit value tones in the Color Values field, improving comparisons between Photoshop and your code editor.

Reflective elements

Simulating reflective surfaces is a great way to create a clean and sophisticated look in your websites. www.apple.com is a main instigator for this consistent style, and designers are taking it one step further now with levitating elements, all creating visual diversity in otherwise simplified designs. Here’s how you can do it too.

01. Cut your image

Apply the Pen Path tool, tracing your image edge. Activate Paths>Work Path and Cmd+click your Path
to make a selection. Cmd/Ctrl+Shift+I to invert selection then click Cmd/Ctrl+X, deleting the background.

02. Reposition your layers

What you’ll want to do next is realign your assets individually. Make sure these are on their own respective layers before you duplicate each and apply Edit>Transform>Flip Vertical.

03. Apply Layer Mask

Lower layer opacity for transparency effects and apply a Layer Mask to each duplicate layer. Select the Black to Transparent gradient style and add to the furthest reflected edge to gradually fade visuals.

04. Add manual drop shadow

If you want a floating effect simply duplicate your layer and repeat step 2. Hit Cmd/Ctrl+U, decreasing Lightness to -80. Apply both Gaussian and Motion Blur and decrease Layer Opacity, placing a distance from your solid layer.

×