How To Make A Search Box

[Plutonium_mybb_import11555]

Step 1

First off create a new document to house the search box (or add it to one of your existing designs). I’ve filled the background of mine with the colour #2e3033

Step 2

Using the Rounded Rectangle Tool make a white rectangle with radius 10px and dimensions 200x40px. This will be where we enter our search terms.

Step 3

Using the text tool add in some dummy text. The font styling I’ve used is Arial, Bold, 15 pt, Sharp, #37393d.

Step 4

Now we’ll make a button for the search action. Using the same tool make a 80x40px rectangle

Step 5

Apply this gradient overlay to the button layer.

Step 6

Add some text for the button. The font styling I’ve used here is Arial, Bold, 15 pt, Sharp, #ffffff with an outer glow of 30% #000000. I’ve also added another darker rectangle behind the search field and button and a radial gradient in the background.

-/ There, Another tutorial by me. YES, I used Photoshop CS5 & not the CS4 this time. Not sure why though.. XD

My fingers are bleeding.. rawr..

* This will be useful if you're having a HTML website! =)

~ P​

 

[Asshole_mybb_import11515]

Nice tutorial =] This would be pretty useful for someone if they are making a new forum and want a search button

 

[Monetizer]

Thank you for this tutorial here because it will help many members such as me learn graphics, I believe I have seen this tutorial posted by you in SupportForums.net.

 

[Plutonium_mybb_import11555]

Thank you for this tutorial here because it will help many members such as me learn graphics, I believe I have seen this tutorial posted by you in SupportForums.net.

Yepsies. I've posted this on Supportforums.

 

[Mildly Legit]

This would be for css, correct?

 

[Monetizer]

Thank you for this tutorial here because it will help many members such as me learn graphics, I believe I have seen this tutorial posted by you in SupportForums.net.

Yepsies. I've posted this on Supportforums.

Currymanz told me that this tutorial was very effective and he redirected me to this tutorial in Support Forums.

He is currently telling me to ask you for installs he requested. I told him to go on msn and talk to you.

Haha. :hehe::evilgrin:ui:

 

[Plutonium_mybb_import11555]

This would be for css, correct?

No, This is photoshop.

 

[Mildly Legit]

This would be for css, correct?

No, This is photoshop.

I mean CSS the graphics implementer for html.

 

[Plutonium_mybb_import11555]

This would be for css, correct?

No, This is photoshop.

I mean CSS the graphics implementer for html.

Ah! Yes, That's correct.

 

[Coolman909]

Is it possible, to make a fake scroll bar too?

 

[w1nd]

It's a nice box, perhaps make a magnifying glass icon.

 

[GAMEKINGZ_mybb_import1105]

This will come in handy when i start making templates ,thanks.

 

[Plutonium_mybb_import11555]

Is it possible, to make a fake scroll bar too?

There is.

This will come in handy when i start making templates ,thanks.

You're welcome.

It's a nice box, perhaps make a magnifying glass icon.

Yeah, I though of that

 

[Deantehnoobhacks]

great tut man, i know people are going to try this, and get use out of it

 

[Plutonium_mybb_import11555]

great tut man, i know people are going to try this, and get use out of it

Thank you. I appriciate it

 

[Onyx_mybb_import1134]

Once again a nicely done tutorial, thanks for this.

 

[Plutonium_mybb_import11555]

Once again a nicely done tutorial, thanks for this.

Thanks Onyx, I appriciate it!

 

[Blackmail]

Very simple and easy ill try it later.

 

[Plutonium_mybb_import11555]

Very simple and easy ill try it later.

Thankies Blackmail! irate: