All Topics

Find tutorials, courses, and more...

Design & Illustration

Categories

Learning Guides

INTERFACE DESIGN

Design a Search Bar and

Image Display Interface
in Adobe Photoshop
by Mohammad Jeprie

6 days ago

1 Comment

39

open in browser PRO version

128

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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 threedimensional 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:
open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

26 Repeatable Pixel Patterns from PSDfreemium

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.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

2. Design a Search Box

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

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Step 3
Double-click the rounded rectangle shape and then apply the Layer StylesStroke,
Inner Shadow, and Gradient Overlay. These styles will add a 3D effect to the
shape.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Step 6
Cut the button by adding a rectangle shape on its left side and then set its mode to
open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Subtract Front Shape.

Step 7
Inside the search area, draw a white rounded rectangle with corner radius2 pixels.
Make sure it is placed in the center of the empty space.
open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Step 9
Duplicate the search area vector shape. Change its color to green. Cut it by adding
open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

a rectangle path on its left side with mode Subtract Front Shape.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Step 10
Add these Layer Styles to the shape.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Step 11
Add a label on top of the green shape. In this tutorial, I'm using the fontNuOrder.
open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Then add a rounded rectangle shape for the magnifier handle.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Step 15
Add a label on the search area. To make it readable, add a subtleDrop
Shadow Layer Style.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Step 16
Duplicate the main shape and place it on top of the search bar. Add the Layer
open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Styles Inner Glow and Gradient Overlay from black to white with lowOpacity.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Step 21
open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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

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.
open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Step 3
Clearly, we want it to be bigger. Use theDirect Selection Tool to select points on
the upper part of the display interface and then pull it upward a few pixels.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Step 5
Activate the Polygon Tool. From the Option Bar, setSides 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.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Step 6
Activate the Move Tool and then Alt-drag the star shape to duplicate it. We want to
open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

have four stars on the right side of the display. These stars will represent the image
rating.

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.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Step 8
Activate the uppermost star layer and then change setting in itsBevel & Emboss
Layer Style to Down. Change its Inner Shadow color and also its gradient in
Gradient Overlay.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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.
open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Step 11
open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

The result is not yet perfect. We need to add a shadow to make it curvy.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Together, the result is a floating banner.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Advertisement

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

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Conclusion
open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Advertisement

Suggested Tuts+ Course

Difficulty:
Intermediate
Length:
Medium
Categories:
Interface Design
Graphic Design

Interface
Adobe Photoshop

Translations Available:
Tuts+ tutorials are translated by our community
open in browser PRO version

Are you a developer? Try out the HTML to PDF API

Effective Voucher Design

$15
pdfcrowd.com

members. If you'd like to translate this post into

another language, let us know!

Related Tutorials
Download Attachment

How to Create a Stencil Banner Text

Effect in Adobe Photoshop
Design & Illustration

About Mohammad Jeprie

Mohammad Jeprie is a blogger, author,
and graphic designer from Indonesia. He's
not an artist, but he knows a few

Draw a Compass Icon With a Long

Shadow in Adobe Photoshop
Design & Illustration

Photoshop techniques and loves to share it with

everyone. He runs his own design blog,
DesainDigital where he shares tutorials and
inspirations for other designers.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

How to Create an Icon Set using

Adobe Photoshop
Design & Illustration

pdfcrowd.com

Jobs
PHP Coder with Magento Knowledge
at Yoginet Web Solutions in New Delhi,
Delhi, India

Software Architect
at Fire Engine RED in San Diego, CA,
USA

Advertisement

Envato Market Item

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

1 Comment

Tuts+ Hub

Sort by Best

Join the discussion

Gabby Jaime

6 days ago

This is rad! So I could turn this into a fully functioning search bar using Dreamweaver, correct?

Subscribe

open in browser PRO version

Reply Share

Add Disqus to your site

Are you a developer? Try out the HTML to PDF API

Privacy

pdfcrowd.com

Advertisement

19,192 Tutorials

489 Video Courses

Teaching skills to millions worldwide.

Follow Us

Email Newsletters

Get Tuts+ updates, news, surveys &

offers.
Email Address

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Email Address

Help and Support

FAQ

Subscribe

Terms of Use
Contact Support

Privacy Policy

About Tuts+
Advertise
Teach at Tuts+

Custom digital services like logo design, WordPress installation, video

production and more.
Check out Envato Studio

Choose from over 5 million royalty-free photos and images priced from $1.
No subscription required.
Browse Photos on PhotoDune

2015 Envato Pty Ltd. Trademarks and brands are the property of their respective

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

owners.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com