DOCUMENT SETUP
As your document should fit with every standard resolution, start with a reasonable minimum resolution. Go to File>New and set Width at 1024px, Height at 768px and Resolution at 72dpi. You can easily increase the pixel density later for any other resolution requirements. Also, add horizontal and vertical guides (View>New Guide) and centre them in the document.
As your document should fit with every standard resolution, start with a reasonable minimum resolution. Go to File>New and set Width at 1024px, Height at 768px and Resolution at 72dpi. You can easily increase the pixel density later for any other resolution requirements. Also, add horizontal and vertical guides (View>New Guide) and centre them in the document.
BACKGROUND COLOUR
A light background will be used to contrast the darker effects from layer styles. Pick a light colour (#e0e0e0) and press Opt/Alt+Delete to fill the background layer. You can add a subtle gradient effect to give the global light a main direction. Add a standard Gradient Overlay layer style, setting the gradient to Linear style from black to white and Opacity to 2%
A light background will be used to contrast the darker effects from layer styles. Pick a light colour (#e0e0e0) and press Opt/Alt+Delete to fill the background layer. You can add a subtle gradient effect to give the global light a main direction. Add a standard Gradient Overlay layer style, setting the gradient to Linear style from black to white and Opacity to 2%
BASIC SHAPES
Three vector shapes are used to create the dial, along with one extra circle that outlines the outer ring. To create your own, first select the Ellipse tool, then draw a centred circle and adjust the Radius to 350px. Next, make two duplicates and rescale them (Cmd/Ctrl+T) to 315px. Do the same for another duplicate with a diameter set to 530px, drawing the outer ring
POSITION MARKERS
You are going to make the outer markers. With the Ellipse tool, make a 25px diameter circle in the outer ring at the top of the dial. It will be the activated marker. Duplicate (Cmd/Ctrl+J) and transform this circle (Cmd/Ctrl+T). Hold Opt/Alt to drag the circle’s anchor to the centre of the dial. Rotate it from an angle of 45°. Press Enter and repeat the operation six times by duplicating and rotating (Cmd/Ctrl+Shift+T). You can group the layers for normal markers and take the top marker apart in the Layers panel.
You are going to make the outer markers. With the Ellipse tool, make a 25px diameter circle in the outer ring at the top of the dial. It will be the activated marker. Duplicate (Cmd/Ctrl+J) and transform this circle (Cmd/Ctrl+T). Hold Opt/Alt to drag the circle’s anchor to the centre of the dial. Rotate it from an angle of 45°. Press Enter and repeat the operation six times by duplicating and rotating (Cmd/Ctrl+Shift+T). You can group the layers for normal markers and take the top marker apart in the Layers panel.
INNER DIAL EFFECTS
To give the user interface elements a realistic appearance, just analyse shape, light and shadow interactions around you. You will use the same approach according to the top lighting. Go back to the very first circle you created and add a Linear Gradient with very soft greyscale (#d4d4d4 to #f7f7f7). Then, use a black Inner Shadow, setting Opacity to 8%, Angle to -90°, and both Distance and Size to 8px. You can also add a Drop Shadow, setting Opacity to 16%, Angle to 90°, Distance to 3px and Size to 10px
To give the user interface elements a realistic appearance, just analyse shape, light and shadow interactions around you. You will use the same approach according to the top lighting. Go back to the very first circle you created and add a Linear Gradient with very soft greyscale (#d4d4d4 to #f7f7f7). Then, use a black Inner Shadow, setting Opacity to 8%, Angle to -90°, and both Distance and Size to 8px. You can also add a Drop Shadow, setting Opacity to 16%, Angle to 90°, Distance to 3px and Size to 10px
Apply a Linear Gradient to an inner circle with softer greyscale (#dedede to #ededed). Set both Inner Shadow and Drop Shadow to white and Normal blend mode, respectively setting Opacity to 60% and 60%, Angle to -90° and 90°, Distance to 4px and 2px, and Size to 5px and 5px. For the other circle, set the Fill Opacity in the Blending Options to 0%. Then, set both Inner Shadow and Drop Shadow to black, respectively setting Opacity to 5% and 7%, Angle to 90° and -90°, Distance to 5px and 3px and Size to 21px and 5px
QUICK TIP
A realistic scene can be improved by several types of shade: cast shadows of objects, which can be sharp or soft; limited shadow at the intersections of objects; ambient shadow, which is broader; or blurred, discrete and core shadow on objects subtracted from the incident light rays.
MAIN DROP SHADOW
Duplicate the first circle again and set the Opacity to 23%. Apply a Color Overlay style, setting the colour to black, deselect any other style and move this layer under the dial layer. Move the circle down by 50px by holding Opt/Alt. Then, display the properties values (Window>Properties) of the vector shape and set Feather to 27px for the vector mask
Duplicate the first circle again and set the Opacity to 23%. Apply a Color Overlay style, setting the colour to black, deselect any other style and move this layer under the dial layer. Move the circle down by 50px by holding Opt/Alt. Then, display the properties values (Window>Properties) of the vector shape and set Feather to 27px for the vector mask
DIAL POINTER
Now that the dial is created, you can make its pointer. Select the Rounded Rectangle tool, set the
Radius to 15px and draw a rounded rectangle, setting Width to 25px and Height to 120px. Make sure the shape is central on the vertical guide at the top of the dial, slightly exceeding the top edge by about 10px. For the next part, the pointer must be integrated into the dial, so a subtle depth effect is needed
Radius to 15px and draw a rounded rectangle, setting Width to 25px and Height to 120px. Make sure the shape is central on the vertical guide at the top of the dial, slightly exceeding the top edge by about 10px. For the next part, the pointer must be integrated into the dial, so a subtle depth effect is needed
DIM LED LIGHT
In a bright environment, it’s always useful to accentuate light sources with an eye-catching colour variation instead of outer glow effects degrading lighting quality. In this way, apply a Gradient Overlay, choose the Linear style and use the standard black and white gradient. Then, add a Color Overlay, setting a bluish colour (#65b5f0) and Opacity to 83%. The idea is to give a way to the pointer by highlighting the outermost side
In a bright environment, it’s always useful to accentuate light sources with an eye-catching colour variation instead of outer glow effects degrading lighting quality. In this way, apply a Gradient Overlay, choose the Linear style and use the standard black and white gradient. Then, add a Color Overlay, setting a bluish colour (#65b5f0) and Opacity to 83%. The idea is to give a way to the pointer by highlighting the outermost side
DIM LED LIGHT 2
Lighting can be added with an Inner Glow – use a bluish colour (#7fc9ff), setting the blend mode to Color Dodge, Opacity to 30%, Source to Center, Size to 10px and Contour to Half Round. Also, you could try to add some volume with a glass effect. Apply a Bevel & Emboss style, setting the Size to 4px, a Shading Angle to 90° and Altitude to 50°, Highlight Mode Opacity to 70% and finally Shadow Mode to 20%
Lighting can be added with an Inner Glow – use a bluish colour (#7fc9ff), setting the blend mode to Color Dodge, Opacity to 30%, Source to Center, Size to 10px and Contour to Half Round. Also, you could try to add some volume with a glass effect. Apply a Bevel & Emboss style, setting the Size to 4px, a Shading Angle to 90° and Altitude to 50°, Highlight Mode Opacity to 70% and finally Shadow Mode to 20%
SETTINGS IN PHOTOSHOP
There are many resources that allow you to
create quality designs using layer styles in
Photoshop. These are a popular way to achieve
any effect with the right knowledge and
experience. Only technical approaches change
and should be exploited in piece. In this way,
learn to handle each setting individually and ask
yourself how to combine them to achieve a
particular look.
For example, gradients are powerful for
adding depth to any design. Combined with the
right style, you can create shapes that interact
with the environment, such as light reflections,
shadows and textures.
There are many resources that allow you to
create quality designs using layer styles in
Photoshop. These are a popular way to achieve
any effect with the right knowledge and
experience. Only technical approaches change
and should be exploited in piece. In this way,
learn to handle each setting individually and ask
yourself how to combine them to achieve a
particular look.
For example, gradients are powerful for
adding depth to any design. Combined with the
right style, you can create shapes that interact
with the environment, such as light reflections,
shadows and textures.
DIM LED LIGHT 3
Finally, you can enhance this volume effect using an Outer Glow with Color set to grey (#b5b5b5), Opacity to 100%, Blend Mode to Normal and Size to 5px. Also, add a Drop Shadow, setting Blend Mode to Normal with a white colour, Distance to 9px and Size to 5px, at an angle of 90°. This style allows you to show light at the outer edge of the pointer, taking into account the overall lighting. You should now have a coherent object with a modern and soft look
Finally, you can enhance this volume effect using an Outer Glow with Color set to grey (#b5b5b5), Opacity to 100%, Blend Mode to Normal and Size to 5px. Also, add a Drop Shadow, setting Blend Mode to Normal with a white colour, Distance to 9px and Size to 5px, at an angle of 90°. This style allows you to show light at the outer edge of the pointer, taking into account the overall lighting. You should now have a coherent object with a modern and soft look
EMBEDDED POSITION MARKERS
Now that you have a pointer, you need to give it some functionality. Apply a Color Overlay to the top marker with a grey colour (#969696) and a Stroke, setting Size to 2px, Position to Outside, Fill Type to Gradient and a greyscale Linear gradient (#c0c0c0 to #e9e9e9) from top to bottom at an angle of -90°. Copy and paste this layer style to each layer, drawing a position marker. Make sure that these layers are underneath the shadows from the dial.
Now that you have a pointer, you need to give it some functionality. Apply a Color Overlay to the top marker with a grey colour (#969696) and a Stroke, setting Size to 2px, Position to Outside, Fill Type to Gradient and a greyscale Linear gradient (#c0c0c0 to #e9e9e9) from top to bottom at an angle of -90°. Copy and paste this layer style to each layer, drawing a position marker. Make sure that these layers are underneath the shadows from the dial.
ACTIVATED MARKER AND OUTER RING
Select the top marker and as you already did before for the dial pointer, add the same Inner Glow and change the Color Overlay (#65b5f0). Finally, select the outer ring layer and add a black Inner Glow, setting Opacity to 6px and a Stroke setting Size to 1px, Blend Mode to Lighten, Opacity to 80%, Fill Type to Gradient, and a Linear black to white gradient at an angle of -90°. For the final touch, add text as in the example with the Bariol font.
Select the top marker and as you already did before for the dial pointer, add the same Inner Glow and change the Color Overlay (#65b5f0). Finally, select the outer ring layer and add a black Inner Glow, setting Opacity to 6px and a Stroke setting Size to 1px, Blend Mode to Lighten, Opacity to 80%, Fill Type to Gradient, and a Linear black to white gradient at an angle of -90°. For the final touch, add text as in the example with the Bariol font.
0 comments: