SEARCH
  Tutorials Photoshop Tutorials 3D Effects How to Create 3D Search Bar in Photoshop

How to Create 3D Search Bar in Photoshop

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.

Final Result of 3D Search Bar

img

Let's Begin!

img

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

img

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.

img

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

img

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

img

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

img

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

img

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

img

You should have the same as above. Moving on!

img

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

img

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.

img

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

img

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

img

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

img

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

img

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

img

You should have the same image as above.

img

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

img

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

img

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

img

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

img

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

img

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

img

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 would like to code this on HTML / CSS, but I think I will be needing a little help from you guys

subscribe to newsletter