Creating a stylish form for your website.
This tutorial will show you how to create a very simple, yet stylish form. First of all we will create a couple of simple images using Photoshop, we will then create a form using HTML. Finally we will style the form using CSS.
Take a look at the finished product below.
The end product:
Step 1 - Creating some simple images using photoshop.
Open Photoshop & create a new image. Specify a height & width of around 300 px. Remember to up the resolution to around 250px per inch.
Set the foreground color to #e6f1ea & select the rounded rectangle tool('U'). Use 'Shift + U' to toggle through the shapes if you have any other shape selected. Set the corner radius to around 8px. You can do this in the options window at the top of the screen.
Draw out a rectangle similar to the one shown in the below image:
With the layer still selected browse to 'Filter > Noise > Add Noise'. Change the settings as follows & click OK.
You should now have something like this:
Now for the title of the form. For the sake of this tutorial, I'm going to be making a sign up form. Change the foreground color to #c7d5c9 & select the text tool('T'). Select your preferred font family, in my example i am using Tahoma. Add some text to the image.
Easy enough, but that looks pretty basic. To make it look more stylish I want to create an indented effect. The way i like to do this is to duplicate the text two times. On the first duplicate layer you choose a darker colour & move the text up 1 pixel. And on the second duplicate layer you do the opposite.
With the text layer still selected, browse to 'Layer > Duplicate Layer'. We now have a copy of our title text. Change the colour of this duplicate text to #b1c3b5. Now, select the 'Move tool' by pressing 'V'. Tap up on your keyboard once to move the layer up 1 pixel.
One more step: You need to move the duplicate layer below the original layer. In the layers panel, left click the duplicate layer, hold and drag it down below the original layer. Look below for an example of this:
The change is subtle, but it works. Now, repeat the process...this time change the text colour to white & move it down 1 px. Take a look at the below image for an example.
We're almost done with photoshop now. We just need to create a button. Change the foreground colour to #f0f7f1 & select the rounded rectangle tool.
Draw out a rectangle similar to the one seen above. The corner radius was left at 8px in our example.
Add the follow layer styles to the button layer.
That's all we need from Photoshop. The rest we can do with CSS. Lets export the images now. In the layers panel hide all layers except for the first layer containing the green rectangle. Select the layer by left clicking it.
Press 'CTRL +A' to select everything in the layer, then press 'CTRL + C' to copy it. Browse to 'File > New', leave the settings as the are and press OK.
Now in the new document press 'CTRL + V' to paste the rectangle in. Press 'C' to select the crop tool & select an area around 50px by 50px. You can see an example of this below.
Press enter to cut the image down. Export this for the web & save it with an appropriate name. We can then use CSS to repeat this background as required. After saving as JPG,PNG or whatever you prefer close the document & return to our original Photoshop image.
Now hide all layers except for the text layers. Whilst holding 'CTRL' click on each of the text layers(in the layers panel), you should now have all 3 selected.
When you have done this, browse to 'Layers > Merge layers' & select 'merge layers'. Alternatively you can simply press 'CTRL + E'.
Now, using the same process as before, copy and paste the layer into a new image document. Export this for the web.
Finally, we need to export the button for the web. Hide all other layers and browse to 'Layer > Flatten image'. Now repeat the same process to copy, paste and save the image.
Popular pages