How to use Photoshop for web design – part 1
Adobe Photoshop is a valuable asset for web designers, even if it is used only as a supplier of elements. But now with the improvements to the new version CS6, Photoshop software is doing its best to deliver stunning front-end content, through unbridled creative tool sets. With Photoshop CS6, production capabilities for web have fully evolved.
This tips feature looks at many of these new option and toolsets, as well as pre-existing alternatives, showing you just how to work professionally in this editing suite to get the best commercially-oriented results.
We’ll show you how to use Photoshop to maximise time efficiency. We explain the brand-spanking new Layer Search functionality in CS6, the means to use Layer Comps in your rollover button creation, and show you how to create Actions and Droplets to automate the generation of assets and transform image file resolution.
We also explore more creative techniques, showing you not just how but why you should replicate commercial effects. We reveal the reasons to apply textures, the effects of type hierarchy on site visitors, how to create authenticity with drop shadow effects and why to avoid Bevel & Emboss.
There’s so much more to say and do, and you’ll need to read on to discover this. Once you’ve finished reading you’ll ultimately have a better understanding of how to apply tools and options from Photoshop, with which you can enhance your web projects further.
GET THE RIGHT RESOLUTION
Make sure your pixels conform to your final design
Everyone starts with a blank page, even in Photoshop. At this initial stage it’s very important to make sure the document you’re working with has the right dimensions and resolutions attached, to achieve the correct final output.
Basic knowledge dictates that 300dpi is print standard and 72dpi is screen standard. But the latest screens demand varied width and height resolutions, so do your research. It’s a comparative minefield, now mobile and portable devices are thrown into the mix. But luckily the industry standard still sits at 1,024 x 768px, with a few 27” LCD monitors upping to a resolution of 2,560 × 1,440px.
Photoshop CS6 in particular helps you save time setting up your documents. No longer do you need to do this manually. Just have in mind the device you’re designing for and select File>New. In the Presets drop options you’ll discover Mobile & Devices with a host of industry-standard resolutions ready to apply in one click. Presets for iOS devices are available too.
HOW TO ALIGN ELEMENTS
Make web design layout easier with all new CS6 smart guides
When you’re working with elaborate web design, alignment is key. This provides the structural framework of any design. Your starting point is always a grid, be it rigid or experimental, and there’s only one way to apply this in Photoshop – with the guide options. These are used by activating View>Extras, View>Rulers and Show>Smart Guides.
Even though rules can be applied very loosely here, they still exist. Always make sure that content aligns to lines in your grid – nothing should be floating. Also if you break free from a rigid format make sure that you create patterns in your alignments that are definable.
For example, image titles can be aligned to the first line on the left, with images more central, aligned to the third line in.
Photoshop CS6 once again has enhanced productivity with improved Smart Guides. When aligning elements, CS6 shows on screen x and y values and prompts, aiding you in matching perfect symmetry in your web grid layouts.
RESIZE WITH SMART OBJECTS
Stop images distorting using this Photoshop option
When designing for web in Photoshop, you must remember that if you go trying to decrease and increase things multiple times, you’re going to shift pixels and boy, will you get yourself in a pickle. Images will blur.
Sadly there is nothing to stop Photoshop doing this, but if you import images the right way then you’re limiting the possibilities of this happening. What you must do is always import your images at their original size (bigger than the intended descaled size). Then simply Ctrl/right-click the layer and choose the option Convert to Smart Object.
From here you can descale your image and rescale to this original size, never losing resolution. This makes the interpolation of images far more flexible.
WORK WITH WHITE SPACE
Embrace the trend and learn to love the use of negative space
White space should be used intentionally. Apply it as a sign of authority; you’re saying that your content is far more important than the screen real estate. Apply it to navigate design constraints. Referring back to screen resolutions, due to this small screen real estate you don’t want to clutter this area.
Also at this micro level the use of white space can play a major role in the application of type and essentially, usability. For example, text that is cramped with minimal line spacing can be very difficult to read. White space set between lines of text makes this much easier to scan and digest.
Of course, there are good reasons to motivate your application of white space but not always a concrete rule for what looks right or wrong. But the best way to distinguish what works and what doesn’t is to experiment and study the work of other designs that seem to be getting it right. Eventually you will develop an eye and feel for competent usage.
RESIZE WITHOUT SMART OBJECT
Combat pixel distortion no matter what
Some web designers may not be privy to a copy of Photoshop that precedes version CS, so won’t have the luxury of applying Smart Object layers. However, if working with Photoshop there is a pre-existing functionality that still allows you to maximise an image’s resolution – it’s called interpolation.
Optimise your outcomes by selecting Preferences>General>Image Interpolation. Setting to Bicubic Smoother will improve more dramatic upsizing. Bicubic Sharper holds in the detail when descaling. This can sometimes result in over-sharpening, in which case simple set to standard Bicubic. If you prefer this way of working CS6, it can be found in the overhead drop option, when resizing with the Move tool.
DROP SHADOW EFFECTS
Create totally variable special effects by utilising this simple option
We’ll admit that applying overly-hard drop shadows do draw focus to your site elements, but unfortunately, it’s for all the wrong reasons. These create an easily definable 3D effect, but one that’s cheesy and fake looking. With subtlety afforded due to the effects obtainable in Adobe Photoshop, such garish effects are no longer excused.
Softening drop shadows using Size and Spread setting (Layer Style), and even making them more transparent with opacity, offers you a subtle yet authentic look. This is especially true when applying to header and title fonts, as well as floating elements.
But you can afford to be far more creative. One commercial effect doing the rounds is a hard edge effect, looking far more illustrative. This is easily created by applying your Drop Shadow from Photoshop’s Layer Style options, setting your Radius and Distance values accordingly, Size value at 0px eradicating any feathering. A knock section in between the shadow and the text is another nice looking visual effect. This is easy to apply with the Layer Style>Stroke option, which is in fact now a Shape Layer option in Photoshop CS6.
WORK WITH FONT STYLES
Play it safe with applied type
We’ve touched on applying drop shadows to your fonts as a means of interest, but what about when the font style itself is the focal aesthetic? There’s a lot of uncertainty surrounding what types (excuse the pun) are best to apply.
You see, there are certain fonts you can use that are hosted by both Mac and PC computer platforms, called web-safe fonts, almost certainly increasing the likelihood that content will be displayed true across all viewers computers. Lucida Sans, Times New Roman, Verdana and Georgia are but a few, which are all supplied in Photoshop.
But the rise of the new web fonts means that web designers can now create dynamic, accessible content that’s still grabbing attention with individual styles, without having to become rasterized. The CSS @font-face declaration is gathering pace, with web browsers temporarily downloading the fonts and using them to display text, but as far as we’re concerned, web-safe fonts are still the only sure-fire way at present to achieve certain styles displayed on all systems.
CS6 LAYER COMPS
Optimise comparisons between design amendments
Alternate designs of one site will always happen, as you look to make numerous amendments at a client’s demand. Instead of working with loads of cluttered layers and Group folders, Photoshop CS6 has provided an easier way with the new Layer Comps panel. This lets you take ‘snapshots’ of key edits to your layered images, save these as presets, and play these stages back to commissioners at any time.
To add key stages in your design layer tweaks, first make your changes, then afterwards hit the Create New Layer Comp button. You can have multiple Layer Comp presets, activated through one-click functionality. It’s a great way to share rollover states in your button design.
KEEP LAYERS ORGANISED
Optimise your production times by finding what you want, fast
Web design can sometimes see you work with many design elements – Panels, navigation buttons, images, photo image, etc. On large-scale projects your Photoshop file can become a comparative minefield, littered with layers.
Of course your can place these into Layer Group folders, even colour tag them (Ctrl/right-click visible layer icon). But you are still faced with a layer stack you must sift through.
Photoshop CS6 has considered how this is an issue, now implementing a much-needed layer search engine. This is a must use if you are going to optimise your production times. You can find layers quickly based on a number of factors, including Name, Effect, Mode, Attribute and Color. The searches are then fine tuned by sub-categories such as blending modes, applied Layer Style, or attributes such as locked layers and applied layer masks.
WORK WITH ACTIONS
Record and automate image effects with this one-click option
A Photoshop Action is a recorded effect that is automatically applied to subsequent assets. This is a great way to recreate one-click techniques in numerous projects.
An Action allows you to record a sequence of applied adjustment options, such as resizing, colour alterations and creative Filter effects: especially advantageous when replicating glossy web 2.0 or digitally illustrated elements.
Operation is simple. Just activate your Actions Tab (F9), click the New Action icon, name it, and Photoshop starts recording. Once you’ve applied your effect hit the Stop icon. This then saves your Action as a preset that can be applied time and time again, pressing the Play Selection button.