Creating buttons with Photoshop liquids

The buttons are special buttons that liquid through the CSS and a single image file (. Png), allows us to create buttons that can have an infinite width ('liquid', in fact) plus can be customized by simply CSS attribute background-color.Questo makes you save time, effort, and we will optimize the download page. In addition, having a single image for all our buttons, if tomorrow we were to change its appearance you will take a moment! The article is very detailed so I decided to split into two separate posts. In the first part we will see how to create the Base with Photoshop, while the second will discuss how they interact with CSS.

Creating buttons with Photoshop Liquid

Open Photoshop and create a new blank document the size of 350x300 px

In the tool, select a rounded rectangle tool with the Shape Layers option. If you want you can specify a fixed size as you can see below, I used 180x46 px with rounded corner radius 10. Rename this layer as BASE .

Now we're going to paint the button with a gradient that we will use mergers. Select the basic level, click the right button and select blending options and click gradient overlay. Choose 2 colors that are similar to each other, such as a light yellow and yellow Slightly darker. For example, I chose the yellow # # d48200 ffae00 and I recommend you also use the scale to 150%.

now add a little 'shadow. Click the check box and enter Inner Shadow Opacity 25% Distance to 0px and Size to 10px.

Ctrl on your keyboard click the level Base layer thumbnail. You will see the selected button serration of the classic Photoshop. From go to Select -> Modify -> Contract ... and specify a Px. this allows you to decrease the selection of a pixel. Now create a new layer with Ctrl + Shift + N cannot call. After the layer was created press 'Ctrl' + 'Delete' that will fill the layer with the background color you used and specify the fill to 0%.

Now select Bevel and we vary the level of blending options. specifying Size: 1, Location of property, color: white

We'll get a result like this:

Now select the level and cannot create a folder by pressing Ctrl + G Select the Gradient tool (G key). select the group and click add layer mask that is in the palette in the lower levels. and put the opacity to 75%

At this point, Ctrl-click layer thumbnail Base. Drag a guide in the middle of the button. From the menu Select -> Modify -> Contract ... and specify a Px. Select the Rectangular Marquee tool and holding down the alt key "delete" the part below the guide (and subsequently removed the guide itself).

Now create a new layer that we call Fade and fill the selection from bottom to top with the Gradient tool by using a gradient from white to transparent. Modificarte ilriempimento image to 40%. You will get this result (deselect the selection of course):

Now you have created all the levels you need and you can pick any change in color shades and fills. Note that by going to layer blending options base and changing the colors of the gradient button will keep the various effects of light and transparency.

This is an excellent base for creating buttons liquids. Now we just have to see how to create a real Liquid Botton that with a simple change of background color will allow us to create endless buttons. First, make visible the background level. Then select the Basic level and change the blending options by unchecking the gradient and decreased the level of filling of the level by putting it to 0%. Here's what you get:

Ctrl-click the vector mask thumbnail to select the button. Create a new layer that we call gradians with them and create a gradient from black to transparent gradient tool from top to bottom.