Advertisement
  1. Design & Illustration
  2. Interface Design
Design

Design a Search Bar and Image Display Interface in Adobe Photoshop

by
Difficulty:IntermediateLength:MediumLanguages:
Final product image
What You'll Be Creating

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.

Tutorial Assets

You will need the following free assets to follow this tutorial:

1. Preparing the Canvas

Step 1

Start by making a new file (Control-N) with size 400 pixels × 300 pixels. For its background, select White.

New file dialog box
Blank canvas with white background

Step 2

Click the Add Adjustment Layer icon and then select Solid Color. In the next dialog box, select a light color for the background.

Add Adjustment Layer Solid Color
Select canvas color

Step 3

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.

Pattern Overlay
File background

2. Design a Search Box

Step 1

We want to keep all the layers organized. Start by making a new group layer.

Create a new group

Step 2

Draw a rounded rectangle with corner radius 6 px. For its color, use grey.

Draw a grey rounded rectangle

Step 3

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.

Stroke
Gradient Editor for Stroke
Inner Shadow
Gradient Overlay
Result after adding layer styles

Step 4

Duplicate the shape by pressing Control-J. Change its color to blue. We are going to convert it into a button.

Duplicate shape for search button

Step 5

Change the Layer Style settings. Feel free to play around with the settings, especially if you use different colors in the vector shape.

Inner Shadow
Gradient Overlay
Stroke

Step 6

Cut the button by adding a rectangle shape on its left side and then set its mode to Subtract Front Shape.

Cut the button

Step 7

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.

Draw white rounded rectangle

Step 8

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.

Bevel  Emboss
Stroke
Inner Shadow
Gradient Overlay
Outer Glow

Step 9

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 green shape
The result after adding green shape inside the search area

Step 10

Add these Layer Styles to the shape.

Bevel  Emboss
Stroke
Inner Shadow
Gradient Overlay
Outer Glow

Step 11

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 text label
Gradient Overlay
Drop Shadow
Search bar label with layer styles

Step 12

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.

Draw arrow shape

Add the same Layer Styles to the arrow shape as in the label.

Layer styles added

Step 13

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.

Draw magnifier icon

Then add a rounded rectangle shape for the magnifier handle.

Draw magnifier icon

Step 14

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.

Bevel  Emboss
Stroke
Inner Shadow
Gradient Overlay
Outer Glow
Search bar with magnifier icon

Step 15

Add a label on the search area. To make it readable, add a subtle Drop Shadow Layer Style.

Add label in search area
Drop Shadow

Step 16

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.

Duplicate main shape
Inner Glow
Gradient Overlay

Reduce the Fill layer to 0% until we have only the gradient sitting on the search bar.

Reduce Fill to 0

Step 17

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.

Adding 3D effect

Step 18

Repeat this step for the search bar main shape. Move it downward a few pixels and change it to a darker color.

Adding 3D effect

Step 19

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.

Drop Shadow
Search bar with shadow behind it

Step 20

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.

Adding highlight

Step 21

Remove the selection we have just made by pressing Control-D. Soften the stroke line by applying a Gaussian Blur filter.

Adding highlight

Step 22

Add a layer mask and remove some of the highlight by painting it with black.

Adding highlight

3. Image Display

Step 1

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.

Create a new group

Step 2

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.

Duplicate search bar basic shape

Step 3

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.

Select upper part of the interface
Pull selected points upward
Bigger base size

Step 4

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.

Adding image
Convert image to Clipping Mask

Step 5

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.

Draw star shape
Bevel  Emboss
Stroke

For the gradient, use the gold gradient available in the default gradient preset.

Gradient Overlay
Gradient type
Outer Glow
Drop Shadow

Step 6

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.

Duplicating star

Step 7

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.

Fix the stars alignment and spacing
Image display with stars

Step 8

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.

Bevel  Emboss
Inner Shadow
Gradient Overlay

This star should be perceived as an unselected star. In this case, we have a display rating 3 stars out of 4.

Three stars out of 4

Step 9

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.

Draw a rounded rectangle

Step 10

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.

Extend rounded rectangle corner

Step 11

Next, add a circle with 6 px radius and set it to Subtract Front Shapes.

Reduce with circle shape
Result in 100 magnification

Step 12

Double-click the shape and then apply the following Layer Styles.

Bevel  Emboss
Stroke
Inner Shadow
Gradient Overlay
Outer Glow
The result is not yet perfect. We need to add a shadow to make it curvy.
Shadow is missing

Step 13

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.

Draw shadow manually

Step 14

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.

Rear side of the banner

Together, the result is a floating banner.

Floating banner

Step 15

Draw a new layer between the front and rear side of the banner. Paint shadow manually using the Brush Tool.

Paint shadow inside the rear side

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.

Draw banner shadows

Step 16

Add text on the banner. Double-click the layer and then activate the Layer Styles Drop Shadow and Gradient Overlay.

Add text on the banner
Gradient Overlay
Drop Shadow

Conclusion

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.

The result display image interface and a search bar
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.