We got an idea on how to implement custom textfields in CSS and HTML in an earlier post. So, I went ahead and put together a few free textfield or search field background images. These are just some examples to give you an idea of what you can create. I made them in Illustrator and they are free. I have also included the HTML and CSS for each image as a reference. The download below comes with png files, gif files, the CSS, the HTML, and the Illustrator file. Everything you need to get started.

HTML EXAMPLE

Download Files

Popularity: 5% [?]

A reader left a comment requesting smaller stripes in the stripe pattern I put up for download. So, here it is.

Download Stripes Pattern

Thanks

Popularity: 7% [?]

I have used this pattern in the Web 2.0 Button and the Header with Stripes tutorials. If you don't want to go through the process of creating the pattern then just download it here.

Download Stripes Pattern

This is how I would go about installing the pattern(for windows). Just navigate to where your Adobe Photoshop files are installed and inside the Presets folder there is a Patterns folder - for example: C:\Program Files\Adobe\Adobe Photoshop CS2\Presets\Patterns - place the stripes.pat into this folder and you should be ready to use it in Photoshop.

Popularity: 15% [?]

We are going to create a snazzy web 2.0 glossy button. I am using Photoshop CS2, but I'm sure these techniques will work in most versions. The size you make the button is up to you and should be customized to fit the site you are building. In this Photoshop tutorial we are going to be using tools like the gradient tool, marquee tool, pen tool, text tool, a pattern, and more.

We will be using a stripe pattern in the background of the button, so if you didn't complete the pattern in the web 2.0 header tutorial you can download it here.

Download Stripes Pattern

Let's get started.

File Setup

Open up Photoshop and create a new file. Like I said, the size is up to you - I will be making mine 200px X 50px.

Create a new layer and name it bg.

Rounded Corners or Not

First, grab the gradient tool.

Set the Foreground color to black.

Set the Background color to 50% gray.

Using the gradient tool click and drag from the bottom to the top - so that the black is at the bottom of the button.

If you want the button to be rectangular then skip to adding a stroke.

If you want the button to have rounded corners follow these steps.

Grab the Rounded Rectangle Tool

At the top set the Radius: to 10px and make sure Paths is selected.

Start in the upper left corner and pull out the shape to the lower right corner.

Right click and select Make selection… Feather Radius: 0 and click OK

Next hit ctrl+shift+i to invert the selection and hit delete on your keyboard and now the corners are rounded.

Add A Stroke

Whether you rounded your corners or not, let's add a stroke to the bg layer.

Double click on the bg layer to open the Layer Style window.

Click on stroke and set size to 1px, Postion: to Inside, and the Color: to black.

Add the Stripes

Create a new layer and name it stripes.

ctrl+left-click on the bg layer's Layer Thumbnail to create our selection.

Go to Edit->Fill… make sure Use: is set to Pattern

Now to load the stripes pattern you downloaded. Follow the directions on the image below then browse to the place you saved the stripes pattern and load it in - it will show up at the end of the list of patterns. Click it and hit OK.

Set the Opacity of the stripes layer to about 20%.

Add the Text

Grab the Text Tool (keyboard shortcut 't').

Set the options to Myriad Pro for the font Bold and 24pt - I used a light gray for the color.

Select the text and change the Vertical and Horizontal scale to match the image below.

Add the Highlight

Create a new layer and name it highlight.

Using the Pen Tool create a path similar to the image below.
Then right-click and pick Make Selection…
Click OK and fill it with white.

Once again ctrl+click on the bg layer's Layer Thumbnail to make it our selection.

With the highlight layer still active hit ctrl+shift+i to invert the selection and hit delete on your keyboard.

Change the opacity of the layer to about 15%.

Text Reflection

shew… text reflection anyone.
Right-click on the text layer Home and select Duplicate Layer… and click OK.

Go to Edit->Transform->Flip Vertically

Hold down shift and drag the reflection down below the text.

Adjust the Opacityof the reflection to 40% or so or add a layer mask which ever you like. And there you have it - were are done with our Web 2.0 style button.

Download the psd file for this Web 2.0 style button and get an extra stripes layer so you can have to colored stripes. To change the color just ctrl+click on the Layer Thumbnail to create the selection and fill it with the color you want.

Grab the Photoshop file and the image file

Download Files

Popularity: 36% [?]

New - download the Photoshop Files for this header at the bottom of the post.

The trendy/popular thing right now seems to be this 'web 2.0 style' of graphics. You'll see that a lot of the web 2.0 style images have things like highlights, gradients, reflections, shadows, and even stripes - along with just an over all clean yet almost bubbly style. So, let's see what we can come up.

Let's get started…

(more…)

Popularity: 100% [?]