Adobe Photoshop is famous not only for its image editing feature, but also for its capabilities to design user interfaces. In this tutorial we are going to design a three-dimensional search and image display interface. We are going to use lots of vector shape features, and then apply Layer Styles to add a 3D effect.
You will need the following free assets to follow this tutorial:
1. Preparing the Canvas
Start by making a new file (Control-N) with size 400 pixels × 300 pixels. For its background, select White.
Click the Add Adjustment Layer icon and then select Solid Color. In the next dialog box, select a light color for the background.
Double-click the Solid Color adjustment layer and then activate Pattern Overlay. For the pattern, select a free pixel pattern. Reduce its Opacity to 10% to keep it subtle.
2. Design a Search Box
We want to keep all the layers organized. Start by making a new group layer.
Draw a rounded rectangle with corner radius 6 px. For its color, use grey.
Double-click the rounded rectangle shape and then apply the Layer Styles Stroke, Inner Shadow, and Gradient Overlay. These styles will add a 3D effect to the shape.
Duplicate the shape by pressing Control-J. Change its color to blue. We are going to convert it into a button.
Change the Layer Style settings. Feel free to play around with the settings, especially if you use different colors in the vector shape.
Cut the button by adding a rectangle shape on its left side and then set its mode to Subtract Front Shape.
Inside the search area, draw a white rounded rectangle with corner radius 2 pixels. Make sure it is placed in the center of the empty space.
Double-click the shape to add the Layer Styles Bevel & Emboss, Stroke, Inner Shadow, Gradient Overlay, and Outer Glow. These effects will add a mild embossed effect to the search area.
Duplicate the search area vector shape. Change its color to green. Cut it by adding a rectangle path on its left side with mode Subtract Front Shape.
Add these Layer Styles to the shape.
Add a label on top of the green shape. In this tutorial, I'm using the font NuOrder. Feel free to use any font. Double-click the text layer and then add the Layer Styles Drop Shadow and Gradient Overlay to add depth to the text, which will increase its readability.
Add an arrow next to the label. You can draw it using two overlapping triangle shapes, with the last shape set to Subtract Front Shape.
Add the same Layer Styles to the arrow shape as in the label.
We are going to add a magnifier icon on top of the search button. To draw it, start by making a doughnut shape made from two overlapping circle shapes.
Then add a rounded rectangle shape for the magnifier handle.
Double-click the magnifier icon to add Layer Styles. In the Layer Style dialog box, activate Bevel & Emboss, Stroke, Inner Shadow, Gradient Overlay, and Outer Glow. A combination of all these Layer Styles will turn the icon into a nice hole that goes through the button.
Add a label on the search area. To make it readable, add a subtle Drop Shadow Layer Style.
Duplicate the main shape and place it on top of the search bar. Add the Layer Styles Inner Glow and Gradient Overlay from black to white with low Opacity.
Reduce the Fill layer to 0% until we have only the gradient sitting on the search bar.
Now, we want to turn the search bar into a 3D shape. Start by duplicating the search button and moving it down a few pixels. Change its color to a darker blue. Make sure the duplicated shape is placed behind the search bar.
Repeat this step for the search bar main shape. Move it downward a few pixels and change it to a darker color.
Double-click the shape and then add the Layer Style Drop Shadow. Remember that you will always need to add a drop shadow to every 3D shape.
We also want to add a highlight on top of the button. Control-click the top search bar shape to make a new selection based on its shape. Make a new layer on top of every layer. Click Edit > Stroke. Set the stroke color to white.
Remove the selection we have just made by pressing Control-D. Soften the stroke line by applying a Gaussian Blur filter.
Add a layer mask and remove some of the highlight by painting it with black.
3. Image Display
To keep all the layers organized, as always we start by making a new group layer. We will place every layer in the next step inside this group layer.
This image display interface is going to use the same style as the previous search bar. That's why we are going to start by duplicating the basic shape of the search bar. We want to take the main search bar, button, search area, its highlight, and its rear side.
Clearly, we want it to be bigger. Use the Direct Selection Tool to select points on the upper part of the display interface and then pull it upward a few pixels.
Add an image that is going to be displayed above the display area layer. Convert it to a Clipping Mask by pressing Control-Alt-G. The image will go inside the display area.
Activate the Polygon Tool. From the Option Bar, set Sides to 5, and activate Star and Smooth Corners, with Indent Sides By: 50%. Click and drag to start drawing a star shape. Double-click the vector shape layer and then activate the Layer Styles Bevel & Emboss, Stroke, Gradient Overlay, Outer Glow, and Drop Shadow.
For the gradient, use the gold gradient available in the default gradient preset.
Activate the Move Tool and then Alt-drag the star shape to duplicate it. We want to have four stars on the right side of the display. These stars will represent the image rating.
Select all the star layers in the Layers Panel. Make sure the Move Tool is active. Click the distribute icon in the Option Bar to fix the stars' alignment and spacing.
Activate the uppermost star layer and then change setting in its Bevel & Emboss Layer Style to Down. Change its Inner Shadow color and also its gradient in Gradient Overlay.
This star should be perceived as an unselected star. In this case, we have a display rating 3 stars out of 4.
Our next work is adding a floating 3D banner in the display area. Start by drawing a rounded rectangle shape with corner radius 6 px. We are consistently using 6 px corner radius to match it with the basic shape of the search bar.
Extend the corner of the banner by adding a 6 px × 12 px rectangle shape. We need this size, 6 px and 12 px, to match the corner radius of the banner, 6 px. You'll understand the reason soon.
Next, add a circle with 6 px radius and set it to Subtract Front Shapes.
Double-click the shape and then apply the following Layer Styles.
Make a new layer on top of the banner and convert it to a Clipping Mask (Control-Alt-G). Paint some shadow manually on left side of the banner.
For the rear side of the banner, draw a rounded rectangle with a darker color. As on the front side, use a corner radius of 6 px. Add the same Layer Style as for the front side.
Together, the result is a floating banner.
Draw a new layer between the front and rear side of the banner. Paint shadow manually using the Brush Tool.
Keep on adding shadow behind the banner as shown in the following picture. Draw the banner shadow on the canvas and its shadow on the image display.
Add text on the banner. Double-click the layer and then activate the Layer Styles Drop Shadow and Gradient Overlay.
Here's the final result of our search bar and image display interface. In this tutorial, you have learned how to add a three-dimensional effect to a flat vector shape, draw simple icons with vector tools and Layer Styles, and make the perfect rounded rectangle manually. I hope you enjoyed the tutorial and learned some new techniques from it.