This tutorial will show you how to create a glowing LCD Orb, great for interfaces and hi-tech designs. You’ll learn a cool airbrushing technique to create a glowing effect, as well as a way to design a great-looking highlight effect.
Step 1
For this tutorial, my LCD Orb was created at 350x350px and scaled down in the examples below - if you apply this technique to a different sized shape, you may need to adjust the values to suit your particular image.
Begin by making a new 350x350px image with a white background, and create a new layer—name this layer “LCD Shape”. Select the Elliptical Marquee tool. Now hold Shift and Option (PC: Shift and Alt) on your keyboard and from the center outward draw your circle so that it fills most of the image area.
Fill in the selection with your color of choice (Edit » Fill). The example’s fill color is #ACBEDC.
Step 2
Now without deselecting, create a new layer and name it “LCD Shading”. Press D on your keyboard to reset your colors to default. Go to Edit » Stroke—for the width enter 9, Location should be Inside, and if it isn’t already, ensure that the color is black. Click OK.
Now, with the “LCD Shading” layer selected and your selection still active, go to Filter » Blur » Gaussian Blur, enter a setting of 9, and click OK. Lower the opacity of the layer to about 28%. Remember to keep in mind that if your image is a different size than the example (350x350px) then you may need to use different settings to get a similar look. Press Cmd+D (PC: Ctrl+D) on your keyboard and compare what you have so far with this example.
Step 3
The next step will be to create a subtle outline around the Orb, to give the shape a little definition from its background. Hold Command (PC: Control) and click on the “LCD Shape” layer to load the circle selection. Again create a new layer on top of the other 2, and name this one “Stroke”. Go to Edit » Stroke and enter a setting of 2. Now lower the opacity of this layer to about 32%.
Step 4
Create a new layer on top of all the others and name it “Orb Glow”—change the layer blending mode of this layer from Normal to Color Dodge, and lower the “Fill” (located under the opacity) to around 21%. After that, select the Paintbrush tool and in the Options bar at the top of the screen, select the Airbrush icon.
Press D on your keyboard to reset your colors, and then press X so that white is your foreground color. In the Option bar set your brush size to 300, and set 0% Hardness and 40% Flow. Hold your brush at the bottom of the LCD Shape so that it is positioned about half way out of the selection (see the example below), and hold down your mouse button for about 1 second give or take.
Move your mouse down further so that now only the top 1/3 of the brush is inside the selection, and click for about 1 second again. You should now have painted a bright glowing area around the bottom half of the circle, which is brightest at the bottom. Looking smooth eh?
Step 5
The next step will be to create the highlight for the orb. Create a new layer and name it “Highlight”. Choose the Pen tool and set it to Paths mode. Now draw a series of points to create a rough section in the top half of your circle as illustrated in the example below (if your path ends up as a solid shape that you can’t see through, make sure your Pen tool is set to Paths mode as mentioned above).
To get the bottom of the path to curve, you can use the Add Anchor Point tool. Add a point to the middle of the bottom line, then click and drag the point upwards to slightly bend the path.
Step 6
With the Pen tool still selected, right click in the path and choose “Make Selection…” and press OK. Press M on your keyboard to switch to your Selection tool.
The next part is a bit tricky, so hold on to your hat. Create a new layer (don’t lose your selection), hold Shift+Command+Option (PC: Shift+Control+Alt) together, and click on the “LCD Shape” layer (the original circle layer). Move the selection down about 5 pixels using the Down arrow on your keyboard. This should give you a selection similar to that in the example below.
Step 7
Select the Gradient tool, and choose the “Foreground to Transparent” setting (white to transparent). Now, make a gradient in your selection starting from the top and dragging to the bottom of the selection. You will end up with a nice highlight. Press Cmd+D (PC: Ctrl+D) to deselect. Go to Filter » Blur » Gaussian Blur and enter a setting of about 6.
To delete any of the blurred gradient that may have strayed outside the shape, hold Command (PC: Control) and click on the “LCD Shape” layer to bring back your original circle selection. Choose Select » Inverse and press Delete on your keyboard. You won’t see anything change, but you would if your LCD Orb was on a background color other than white.
If you’d like your highlight to be brighter, try making a duplicate of the Highlight layer, and adjust the opacity of the copied layer. Also try scaling the highlight with Edit » Free Transform for different effects.
Step 8
Your LCD Orb is now complete! Use it as part of your interface, skin (e.g. winamp), website layout, or wherever you like.
You can add on additional effects as well, such as scan-lines, a translucent logo, or inset [1] it into an interface. To learn how to make a smooth metal panel like in the example below, see the smooth metal tutorial [2].
If you had any trouble completing this tutorial, feel free to download the lcd-orbs-sample.psd [3] file and take a look under the hood on how this effect works (right click on the link and choose Save Target As or Save Link As). You can also download a PSD of the example below [4].
