How to Create 3D Search Bar in Photoshop

On 11 Jan, 2012 By With 6 Comments

3D has been a hit on movies and even on TV, and I wonder if what does a website look like if it was 3D. Today I played with Photoshop on how to create a 3D search bar, I started with search bar since it’s easier to design and we can actually see what does the entire site looks like (I think).

I would like to create an entire website layout inspired of 3D, but that will be some other tutorials. Right now we will focus on the task at hand and see what can do from there.

You can download the PSD at the bottom of this tutorial!

Final Result of 3D Search Bar

3D search bar How to Create 3D Search Bar in Photoshop

Let’s Begin!

1 canvas How to Create 3D Search Bar in Photoshop

Create a canvas, 450px width and 200px height.

2 rounded ractangletool How to Create 3D Search Bar in Photoshop

Now, grab your Rounded Rectangular Tool (U) set the radius to 5px and draw the shape same as above, Foreground color is #9edeee. Name this layer body-shadow.

3 rounded dropshadow How to Create 3D Search Bar in Photoshop

On Blending Options > Drop Shadow, set the Foreground color to #b8b8b8 and the rest to default.

4 rounded stroke How to Create 3D Search Bar in Photoshop

On Stroke, fill those colors #93d6e6 and set the size to 1px.

5 rounded2 How to Create 3D Search Bar in Photoshop

On top of body-shadow layer, create a new rounded rectangular shape and name it body-main, foregroundcolor is #c2f0fb.

5 rounded2 innerglow How to Create 3D Search Bar in Photoshop

On Blending Options > Inner Glow, set the color to #FFFFFF and the size to 1px.

6 rounded2 stroke How to Create 3D Search Bar in Photoshop

Next is Stroke, set the color to #a2e6f6 and size to 1px.

7 input shadow How to Create 3D Search Bar in Photoshop

You should have the same as above. Moving on!

8 input main How to Create 3D Search Bar in Photoshop

Create another shape, name this layer input-main. Just fill it with #FFFFFF.

9 button shadow How to Create 3D Search Bar in Photoshop

Create a new layer and name it button-shadow. Grab Marquee Tool (M) and draw a square shape same as above, fill it with #7cdb85. Now while still highlighting button-shadow layer, press CTRL + Click and CTRL + SHIFT + I and hit delete. It will delete the outer space and leave the colored layer inside.

10 button shadow stroke How to Create 3D Search Bar in Photoshop

On button-shadow layer, Blending Options > Stroke and set the size to 1px and color #6ed17a.

11 input main How to Create 3D Search Bar in Photoshop

Duplicate button-shadow and change the name to button-main, fill it with #c5fcca.

12 button main innerglow How to Create 3D Search Bar in Photoshop

Select Blending Options > Inner Glow and set the color to #ffffff, size to 1px.

13 button main gradientcolors How to Create 3D Search Bar in Photoshop

On Gradient Overlay, copy the colors above and hit OK.

14 button main stroke How to Create 3D Search Bar in Photoshop

On stroke, set the size to 1px and color to #75d681.

14 button preview How to Create 3D Search Bar in Photoshop

You should have the same image as above.

15 searchbutton text How to Create 3D Search Bar in Photoshop

Add some text, I use Arial 18pt bold #76d57f.

15 button text dropshadow How to Create 3D Search Bar in Photoshop

On text Drop Shadow, set the color to #ffffff and Blend Modes to Normal, size and distance to 1px.

16 button text innershadow How to Create 3D Search Bar in Photoshop

Inner Shadow color is #6acd77 and distance, size set to 1px.

17 preview button text How to Create 3D Search Bar in Photoshop

This is our image so far, one thing that is left is a dummy text on the input field.

18 searchtext How to Create 3D Search Bar in Photoshop

Write some text and color it with #c9ebf3 font is Arial 20pt bold.

19 searchtext main How to Create 3D Search Bar in Photoshop

Duplicate the layer and hit the up arrow key 2 time and left arrow key 2 times. Color is #c2f0fb same font as above.

3D Search Bar

3D search bar How to Create 3D Search Bar in Photoshop

We achieved our goal of creating a 3D search bar using Photoshop, I am pretty excited about the result because I’ve used a different technique in creating a design.

I hope you learned something new about this 3D hype design and you can use it on your projects too! I already converted this into HTML / CSS, check out the tutorial here!

6 Responses to “How to Create 3D Search Bar in Photoshop”