Sci-Fi Effects In Photoshop

Push the effects to the max: You can take your buttons to another level by applying hot to soft orange gradients and a thin 1px Inside Stroke at 30% Opacity. This will further enhance your luminous effects. Grouping respective layers into Smart Objects and sharpening also helps to intensify the futuristic feel.

• Inspiration: www.disney.co.uk/tron

Tron Renaissance: “In 1982 Tron was released and inspired millions of graphic designers, spawning franchises across the globe. Sadly, for many years, the film’s looks couldn’t be translated online – hardly a surprise as the web didn’t really take off until six years after the film! However, with a resurgence of the brand thanks to TRON: Legacy (released in 2010), and the much more advanced capabilities of contemporary software, these boundaries thankfully no longer exist.”  - Adam Smith

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.

#1 - TOOL TIPS: Create A Bokeh 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%.

#1 - TOOL TIPS: Create A Bokeh Brush

#2 - TECHNIQUE: Nail Neon Effects

STEP 1: Set Up Your Canvas

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.

STEP 1: Set Up Your Canvas

STEP 2: Shaping Up

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.

STEP 2: Shaping Up

STEP 3: On The Right Path

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 to Make Work Path from a selection. Cmd/Ctrl-click the path thumbnail to make a selection.

STEP 3: On The Right Path

STEP 4: Add An Outline

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.

STEP 4: Add An Outline

STEP 5: Time To Erase

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.

STEP 5: Time To Erase

STEP 6: Feather-Light Touch

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.

STEP 6: Feather-Light Touch

STEP 7: On The Button

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.

STEP 7: On The Button

STEP 8: A Glowing Finale

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.

STEP 8: A Glowing Finale