Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
27th January 2013

Create futuristic sci-fi effects with Photoshop

Recreate future effects inspired by the TRON movie using the power of Photoshop

Create futuristic sci-fi effects with Photoshop

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.

inspiration: www.disney.co.uk/tron

TECHNIQUE

Nail neon effects

Set up your canvas
Create futuristic sci-fi effects with Photoshop
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.

Shaping up
Create futuristic sci-fi effects with Photoshop
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.

On the right path
Create futuristic sci-fi effects with Photoshop
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.

Add an outline
Create futuristic sci-fi effects with Photoshop
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.

Time to erase
Create futuristic sci-fi effects with Photoshop
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.

Feather-light touch
Create futuristic sci-fi effects with Photoshop
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.

On the button
Create futuristic sci-fi effects with Photoshop
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.

A glowing finale
Create futuristic sci-fi effects with Photoshop
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.

TOOL TIP

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%.
Create futuristic sci-fi effects with Photoshop

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://www.mercubuana.ac.id/ ululf01

      very nice, thank you

    • Meerkat

      Where can I get the resource files (psd files) for the tutorials listed on this web site?

    • Andrew

      nice finished product, but this tutorial is almost impossible to follow for someone who doesn’t already know how to use all of the tools you’re discussing. I wish this were more comprehensive as you just blow over a lot of things that I don’t know how to and have never used. Oh well, off to find another tutorial :/