Cinema is awash with awesome sci-fi special effects right now that are being deployed in branded websites, as well as inspiring others to create more personalised styles. From floating transparent panels to holographic Flash effects and energised lighting and colour, many sites are being given a futuristic twist.
A great example is www.disney.co.uk/tron. The site’s design follows the aesthetics of the TRON 2.0 brand meticulously, littered with neon lighting – most noticeably in the page’s buttons and panels. These sport outer glow effects that are further boosted through the use of textures, along with a little Flash animation and electronic audio. Here we’ll show you how to recapture the 2D effects of this website using the power of Photoshop’s layer style options and shape tools. These effects can be enhanced further still with a bit of
your own creativity.
Nail neon effects
Open a dark navy backdrop layer. Set your foreground colour to #364f7c then select Gradient Overlay from the Layer Styles options. Set Opacity at 30% and Scale at around 85%. Create a new Soft Light layer and choose a large blue (#364f7c) brush. Make sure that Pen Pressure is activated in the Brush Presets.
Apply your brush to the edges of your image and add a layer mask. With this active, go to Filter>Noise>Add Noise>Amount 11% to limit gradient banding. Select the Pen Shape tool and draw out a shape like above. The Ellipse shape tool has been added in the bottom-
right corner, set to Combine Shapes.
Set blending to Overlay and add a layer mask. Apply a 50% Opacity black-to-transparent gradient to the bottom-right of your shape twice. Cmd/Ctrl click your shape layer thumbnail, create a new layer, select the Paths panel and choose Make Work Path from selection. Cmd/Ctrl-click the path thumbnail to make a selection.
Select a small hard orange brush and Ctrl-click your path, before choosing the Stroke Path option. Apply a #f47a20 colour, with Opacity at 53%, Noise at 5%, Spread at 8%, Size at 16px and a Screen blend mode. Duplicate the outline layer, setting blending to Screen. Press Cmd/Ctrl+U and drop the Hue to -180.
Next, apply a layer mask to this layer and erase halfway from the left. Reactivate your original shape layer and apply a Tiles-Smooth Pattern overlay (in Layer Styles) at 25% Opacity and 85% Scale. Use what you’ve learnt to create a new shape (see above) in the bottom-left corner of your design.
Duplicate your original shape layer and your last shape, reset both the blending modes to Normal, then delete any attached layer masks and layer styles. Place both new layers at the top of the stack, Cmd/Ctrl-click them and press Cmd/Ctrl+E to merge. Now select the Feather Elliptical Marquee tool at 1px size.
Next, select the right-hand side of your shape and add a layer mask, inverting this (Cmd/Ctrl+I). Drop the new layer’s Opacity to 20% with Fill at 35%. Create your button by selecting the Ellipse shape tool and activating the Path setting. Draw out your circular button on another new layer and open up the Paths panel.
Cmd/Ctrl-click your path, selecting Stroke Path, with a hard, hot orange brush. Edit your shape to taste with a layer mask. Now add a pale orange Screen blend mode Outer Glow at 55% Opacity and 7px Size. Lastly apply a white Screen blend mode Inner Glow at 25% Opacity, with the Choke set to 18% and Size to 6px.
Create a bokah brush
Bokeh is great for enhancing focal points in lighting effect images. It creates the illusion of depth of field in 2D digital formats – a great asset for web designers looking to create authentic floating or holographic futuristic elements. Creating this effect wholly in Photoshop is easier than you might think. Start by opening a new layer and applying a light grey (#6c6c6c) Ellipse shape. Add a white 2px Stroke set to Outside. Ctrl-click your shape layer, selecting Convert to Smart Object. Cmd/Ctrl your Smart Object and select Edit>Define Brush Preset. Now apply this to a new layer at 10% Opacity, with the Scattering parameter at 1,000%.