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

Let's Begin!

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

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.

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

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

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

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

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

You should have the same as above. Moving on!

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

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.

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

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

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

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

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

You should have the same image as above.

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

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

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

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

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

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

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