Create a Nice Green Contact Form, Part 1: Photoshop

Published on: Nov 11 2012 by Anli

Green Contact Form

In this tutorial I’ll show you how to design in Photoshop the green contact form that I published here a few weeks ago. As usual, this is the first part of the tutorial. In the second part we will code the contact form in HTML5/CSS3 and we will use PHP to make it send the messages.


This is the final result we’re going to achieve:

Green Contact Form

So, let’s begin with setting up the document and background.

1. Setting up the Document and Background

Create a new document in Photoshop (File > New), set the size to 1024 x 660 pixels and name the project “contact-form” or whatever you like.

Contact Form Step 1

Create a new layer and name it “background”. Click on the new layer and select all the canvas by holding CTRL+A or from the main menu “Select > All”. Right-click on the canvas, select “Fill > Color” and use this color: #c3e8ce.

Now we’re going to add a paper pattern to the background. Download the pattern from here:

http://subtlepatterns.com/clean-gray-paper/

Unzip the file, open the PNG image in Photoshop and define a new pattern; select “Edit > Define Pattern” from the main menu.

Now return on the project and apply this layer style to the background layer:

Pattern Overlay

Contact Form: Step1, Pattern Overlay

Here is how the background looks now:

Contact Form: Step1, Background

2. Creating the Title

For the title we’ll use the Open Sans font. Download it from Google Web Fonts or from Fontsquirrel and install it on your computer.

Create a new group (“Layer > New > Group”) and name it “contact form”. Create a new group inside it and name it “title”. Now create a new layer inside the “title” group and select the “Horizontal Type Tool”. Type the text “*  *  *  Contact us  *  *  *” and apply these text styles:

Contact Form: Step2, Text Styles

Use the color “#3d3d3d” for the text and set the text’s layer fill to 50%.

Contact Form: Step2, Text Layer Fill

For the stars in the title use these three text sizes:  48px, 36px and 30px. Now apply this layer style to the text’s layer:

Drop Shadow (color #ffffff)

Contact Form Step 2, Drop Shadow

Now the title looks like this:

Contact Form: Step2, Title

3. Creating the Form’s Background

Create a new layer inside the “contact-form” group and select the Rectangle Tool. Set the rectangle’s size to 700 x 283 pixels and the color to #ffffff. Click on the canvas (on the document) to create the rectangle (that will be our form’s background).

Contact Form: Step3, Rectangle Tool

Contact Form: Step3, Rectangle Tool

Set the rectangle’s layer fill to 0%. Now download these subtle patterns from here (needs registration), extract the zip file and double click on the .PAT file (in the extracted folder) to install it in Photoshop. Apply this layer style to the rectangle’s layer:

Pattern Overlay (select the pattern named “subtle-light-6”, from the patterns that we installed above)

Contact Form: Step3, Pattern Overlay

Move the rectangle about 70 pixels below the title. Now our form’s background looks like this:

Contact Form: Step3, Result 1

Now we’re going to create the upper and lower borders of the form’s background. Create a new group and call it “border-top”. Select the Ellipse Tool and set its size to 20 x 20 pixels.

Contact Form, Step3 Ellipse Tool

Contact Form: Step3, Ellipse Tool Size

Click on the document to create the ellipse. The ellipse’s layer should be inside the “border-top” group. Now click on the “vector mask thumbnail” of the ellipse’s layer to select the ellipse’s shape.

Contact Form: Step3, Vector Mask Thumbnail

Select the Rectangle Tool and click on the icon “Subtract from shape area” from the top bar.

Contact Form: Step3, Subtract

Click on the ellipse’s shape (the ellipse’s shape must be selected). Apply to the ellipse’s layer the same layer style that we applied to the form’s background above (layer fill 0%, pattern overlay). You should obtain something like this (enlarged image):

Contact Form: Step 3, Result 2

Note: to subtract exactly the half of the ellipse’s shape you can use the Path Selection Tool and move the rectangle up or down.

Contact Form: Step3, Path Selection Tool

Contact Form: Step3, Path Selection Tool

Now move the ellipse on the top of the form’s background, duplicate its layer and move it to the right until you create all the upper border.

To create the lower border duplicate the “border-top” group, select the duplicated group and flip it vertically (Edit > Transform > Flip Vertical). Move the group to the bottom of the form.

The form’s background should look like this:

Contact Form: Step3, Result 3

Now we’ll add a bottom shadow to the form. Duplicate the form background’s layer and rasterize it (right-click > Rasterize Layer). Duplicate the 2 border groups and merge them (right-click > Merge Group).

Merge the 3 duplicated layers together (the duplicated and rasterized form’s background and the 2 duplicated and merged border groups). You can do this by holding CTRL and clicking on each layer, or by right-clicking and selecting Merge Down.

Now we have all the form’s background (duplicated) in one layer. We’ll use this layer to add a shadow to the form. So, set its layer fill to 0% and apply this layer style:

Drop Shadow (color #3d3d3d)

Contact Form: Step3, Drop Shadow

Here is how the form looks now:

Contact Form: Step3, Result 4

4. Creating the Input Fields and the Submit Button

Now we’re going to create the 3 input fields of the contact form: name, email and message. Then we’ll add a nice submit button.

Let’s begin with creating the name input field. We’ll need the Oleo Script font for the field’s title. Download it on Google Fonts and install it on your computer.

Create a new group, call it “name” and select the Horizontal Type Tool. Set the text style below and use the color “#9d426b”.

Contact Form: Step4, Text Style

Type the text “WHAT’S YOUR NAME”, set the text’s layer fill to 70% and apply this layer style:

Drop Shadow (color #ffffff)

Contact Form: Step4, Drop Shadow

Move the text until you get this result:

Contact Form: Step4, Result 1

Create a new layer and select the Line Tool.

Contact Form: Step4, Line Tool

Set the line’s weight to 1px, the color to “#9d426b” and draw a line on the right of the “WHAT’S YOUR NAME” text. Set the line’s layer fill to 70% and apply this layer style:

Drop Shadow (color #ffffff)

Contact Form: Step4, Drop Shadow 2

Here is the result:

Contact Form: Step4, Result 2

Now, for drawing the name input field, create a new layer, select the Rounded Rectangle Tool and set its size to 305 x 40 pixels and its border radius to 4px.

Contact Form: Step4, Rounded Rectangle Tool

Contact Form: Step4, Rounded Rectangle Settings

Click on the document to create the rectangle, set its layer fill to 0% and apply these layer styles:

Drop Shadow (color #000000)

Contact Form: Step4, Drop Shadow 3

Inner Shadow (color #000000)

Contact Form: Step4, Inner Shadow

Pattern Overlay

Contact Form: Step4, Pattern Overlay

Stroke (color #ffffff)

Contact Form: Step4, Stroke

Move the name input field (the rectangle) if needed, until you get this result:

Contact Form: Step4, Result 3

Select the Horizontal Type Tool, select the Open Sans font (that we installed above), set the font style to “Semibold Italic”, the size to 16px, the color to “#adb6b0” and type the text “your name…” inside the name input field.

Contact Form: Step4, Result 4

For creating the email input field we can repeat the steps above or just duplicate the “name” group and change the texts. Place the duplicated group about 50 pixels below the name field. The contact form should look like this:

Contact Form: Step4, Result 5

The message input field is the same as the other two fields, but with a rectangle size of 305 x 100 pixels. Here is how the form looks now:

Contact Form: Step4, Result 6

To create the submit button, select the Rounded Rectangle Tool, set the size to 168 x 40 pixels, the border radius to 8 pixels and the color to “#9d426b”. Click on the document to create the rectangle, set its layer fill to 75% and apply these layer styles:

Drop Shadow (color #ffffff)

Contact Form: Step4, Drop Shadow 4

Inner Shadow (color #ffffff)

Contact Form: Step4, Inner Shadow 2

Gradient Overlay (#ffffff to transparent)

Contact Form: Step4, Gradient Overlay

Here is the result:

Contact Form: Step4, Result 7

Create a new layer and select the Horizontal Type Tool. Select the Open Sans font, set the font style to Italic, the font size to 18 pixels and the color to “#ffffff”. Type the text “SUBMIT MESSAGE” in the middle of the submit button and set the text’s layer fill to 90%. Below is the finished button:

Contact Form: Step4, Result 8

To finish the design of our contact form, we’ll add two little stars next to the submit button. Create a new layer, select the Horizontal Type Tool and the Open Sans font. Set the font style to Italic, the font size to 36 pixels and the color to “#9d426b”. Type the text “*” on the left of the button, set the text’s layer fill to 70% and apply this layer style:

Drop Shadow (color #ffffff)

Contact Form: Step4, Drop Shadow 5

Repeat the steps above and create another star on the right of the button.

After this step, our contact form is finished. Here is the final result:

Contact Form: Final Result

This was the first part of the tutorial. In the second part we’ll code the form in HTML5, CSS3 and PHP, and make it a full working contact form. You can download the PSD file from the link below. I hope you liked the tutorial. Stay tuned for the second part.

Download and License

DOWNLOAD FILE: Green Contact Form, PSD (1671)

LICENSE:

You can use this contact form in personal and commercial projects, but you can’t sell or distribute it directly, “as is”. If you use it or publish it somewhere, a link to this page will be much appreciated.

Filed under: Photoshop Tutorials

One Comment So Far

  1. abbaty says:

    nice one.
    very easy Thanks you please waiting for the second part

Sorry, the comment form is closed at this time.