Create contemporary web ribbons with Photoshop
Corner ribbons, small ribbon badges and logo banner navigation bars are all over the web. Find out to create your own with Photoshop
No doubt you’ve spotted examples of corner ribbons, small ribbon badges and logo banner navigation bars around the web. They’re not new, but the bevy of examples make these trends mainstream. But what are the reasons behind this newfound popularity? Many examples can be seen in portfolio, one-page and ‘coming soon’ website designs. Their application seems a direct response to presenting work over a host of devices, including smartphones and touch tablets.
A smaller screen space usually prompts more white space. Therefore standing elements need to be straightforward in build, yet sophisticated in style, which many banner examples are. Drop shadows, embossed and texture effects, illustrated elements, and rich gradients all add something. Photoshop CS6, with its latest Shape tool options makes the creation of banners and the like much easier. UI designers can now apply many visual effects from one location.
The Photoshop CS6 Shape tool options offer users the ability to add solid and gradient colour, and importantly, styled border effects through Stroke settings. Here you can apply another popular technique used in modern web design at the moment, creating a stitch effect – up until now this has been a drawn out manual process.
Furthermore, these latest Shape tools are now wholly vector-based. This means that resizing assets for use across multiple devices and multiple resolutions can be done freely. Pixelation and the use of Smart Objects to control asset delineation is no longer necessary. Here we show you the ways to create said assets with these new CS6 tools and others that can be implemented to improve your banner creations.
inspiration www.theworldwelivein.co.uk, www.georgebadea.com, www.malaga-creation.com/#agence
CREATE A WEB RIBBON
We’re seeing more and more tangibly textured web elements, but carbon and gloss effects still ring true with many digital designers. So here we’re offering up an opportunity for everyone who loves web 2.0 styles to see how you apply these to your web ribbons.
Creating these isn’t all that hard, utilising the power of Photoshop Layer Styles and the Gradient tool. Follow these three easy steps to discover how to apply these.
Masking your shape
Create a light grey rectangle using the Rectangle Shape tool. Using guides, make a selection with the Rectangle Marquee tool, holding Shift for 45-degree angles. Apply a layer mask to this selection, activate the mask, and invert it (Cmd/Ctrl+I)
Layer Style effects
Open your Layer Styles dialogue and apply Gradient Overlay – gradient style Silver – from the Metals presets. Set Opacity at 75%. Apply a saturated blue colour with Color Overlay, setting Blend Mode to Screen, and Opacity at 35%.
Cmd/Ctrl-click your shape layer Vector mask. Select the Elliptical Marquee tool, and holding Alt, apply to create a concave selection. Apply a White to Transparent style Gradient tool to this, and Drop Shadow settings.
CREATE A WRAP AROUND RIBBON
We’ll show you how to work up this asset in a matter of minutes using Photoshop CS6 Shape tool options, working up stitch and colour effects along with drop shadows.
Apply a Rounded rectangle shape with a Radius of 2px to your iPad-screen sized (720 x 1280) template. Using guides, make a selection with the Rectangle Marquee tool, holding Shift for 45-degree angles. Apply a layer mask to this selection and invert this (Cmd/Ctrl+I).
Create a darker small square with the Rectangle tool, place behind your template and, holding Cmd/Ctrl, move the bottom-corner point up to meet the top-corner point at a 40-degree angle.
A little bit of script
Create a similar colour Rectangle shape, on top and inside the guides of your Rounded Rectangle shape. Apply a white colour dashed line style from the Stroke Options, masking away both ends. Apply an Inner Shadow Layer Style and text to achieve further effect.