For many web designers, Photoshop CC still plays an integral part in the website creation process. Whether you're creating website mockups or designing individual site elements, you may not realise that Photoshop is an effective alternative to your wireframe tools and more.
Whehter you have an older Creative Suite version of Photoshop or are fully signed up to the Creative Cloud, here are some web design tips that you maybe didn't know that Adobe's venerable photo editor was capable of – and may prove very useful for your next project.
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.
Photoahop comes loaded with a number of web focussed presets. Check them out!
Close all open documents. Open the Character palette to select your preferred font family, weight, spacing, and colour. No more default Myriad!
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.
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 +).
Hit Alt/Opt+Delete to fill text, shapes and layers with the selected foreground colour. Press Ctrl/Cmd+Delete to fill an area with the selected background colour. Hit to revert to the default black and white, and press X to swap the foreground and background colours.
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.