- Published by
- Posted on
- 12 Comments
Forms are one of the most difficult tasks you can encounter when coding a website, well at least it was for me when I first started. Many designers do very good up until this point or get to this point and just give up on contact forms. Well if you’re one of those designers or are completely new to creating web forms have no worries. In today’s tutorial I will teach you how to create a contact form from scratch using Photoshop to design it and slicing it up for code using HTML, CSS. Part 1 of the 3 tutorials will cover the design of the contact form. Enjoy.
Things you will need:
Open Photoshop, Create a new document 900px x 900px, background white.
Now right click on the background layer>>blending options>>pattern overlay and select the pattern we’ve downloaded earlier.
Note: Make sure you have your guide lines turned on and the layout center. Each side left and right of the contact form is 200px and the contact form is 500px in width.
Now Select the rounded rectangle tool and create a rectangle box. Height around 720px.
Now right click on the contact form layer>>blending options>>gradient overlay. The left color: #b2c0c3, right color:#fff. The bottom is light blue then fades up to white.
Now Select the rounded rectangle tool once again but this time we will create a rounded rectangle just for the top of our form to give it that popping out look.
Now right click on the layer>>blending options>>gradient overlay>>. You will see a color bar usually back and white, double click on that bar and another box should appear. For the Left color: #d6d6d6, Right color:#ffffff.
Now select the Bevel and Emboss option. After you’ve copy the setting below press ok.
Now create a new group. Drag rounded rectangle that we’ve just created into that group. Now right click on the group folder>>Merge Group. You should now have one layer with all effect gone. Now select the blurred edge eraser tool and erase the bottoms so it blends in with our form.
Select the type tool, font: Steiner, Size:33px and create the word contact us or any word you would like to use for your form. After you’ve created your word right click on the layer>>blending options>>Drop Shadow. Copy the settings below.
Now select the gradient overlay option. Left color:#d2d2d2, Right color:#ffffff.
Finally select the stroke option.
Select the type tool, font: Tahoma, size:14px, color: #808080 and create the label Name. Now select the rounded rectangle tool and create a input field.
Right click on the input layer>>blending options>>gradient overlay. Left color:#e5e5e5, Right color:#ffffff.
Now select the stroke option. Color:#e5e5e5.
Repeat steps 7 for the rest of the labels and input fields.
Select the rounded rectangle tool once again and create a rectangle for your submit button. Now right click on the layer>>blending options>>gradient layer. Left color:#e5e5e5, Right color:#ffffff. Next select the stroke option and change the color to 1px #e5e5e5. Then press ok. Finally select the type tool, font: Tahoma, size:10px, color:#454747 and create a description for your contact form. Then you’re done!