Estimated completion time: 40 minutes
In this tutorial we will show you how to design a Contact Form with Adobe Photoshop.
When using a website, users have a particular goal. If designed well, the website will meet that goal and align it with the goals of the organization behind the website. Standing between the user’s goal and the organization’s goals is very often a form, because, despite the advances in human-computer interaction, forms remain the predominant form of interaction for users on the Web. In fact, forms are often considered to be the last and most important stage of the journey to the completion of goals. Let’s get started!
The following assets were used during the production of this tutorial: Background.jpg.
Create a new file. Set Width to 600 px and Height to 600 px and the resolution to 72 ppi.
Draw a rounded rectangle using Rounded Rectangle Tool (U). Set Width to 436 px and Height to 456 px with radius 5 px and color #ffffff.
With Slides, we don’t make you start from an empty slate. All you have to do is to pick the elements you like best and combine them. Each slide has been carefully crafted to satisfy three key criteria: aesthetic, function and usability. That way you know every element works together seamlessly while enhancing the impact of your content.Create a Website
Select layer “Form” and layer “Background”, Align vertical centers and Align horizontal centers.
Add Stroke to layer “Form” with following settings.
Draw a rectangle using Rectangle Tool (U). Set Width to 436 px and Height to 87 px and color #f2f2f2.
Paste it in bottom of form and make clipping mask.
Clipping Masks are not terribly complex, but unless you understand what they’re going to do, you may become very confused when you apply one.
Clipping masks, as you can see, mask the image to the opaque pixels of the bottommost layers. You can use this to fill your shapes with all manner of interesting things.
Draw a rounded rectangle using Rounded Rectangle Tool (U). Set Width to 373 px and Height to 50 px with radius 3 px and color #ffffff. We are going to use it for mail recipient.
Copy Layer Style from layer “Form” and Paste Layer Style into layer “Contact field”.
Select layer “Contact field” and layer “Form”, Align horizontal centers then move layer “Contact field” with 53 px from top to bottom.
Draw a rounded rectangle using Rounded Rectangle Tool (U). Set Width to 168 px and Height to 38 px with radius 3 px and color #98d7e4.
Draw a rounded rectangle using Rounded Rectangle Tool (U). Set Width to 12 px and Height to 12 px with radius 3 px and color #ffffff.
Draw a rectangle using Rectangle Tool (U). Set Width to 2 px and Height to 8 px with any color.
Select previous step using Path Selection Tool (A) and duplicate it (copy then paste), hold down Ctrl + C then Ctrl + V (on Mac Command + C then Command + V).
Click on the menu bar and select Edit > Free Transform Path (shortcut Ctrl + T or for Mac users Command + T), and rotate it on 90 degrees.
Select all from current layer using Path Selection Tool (A) and rotate it on 45 degrees.
Select current layer, copy it, then go to the layer below and paste it (now you can delete top layer or change visibility).
Go to the Path Operation and choose Subtract Front Shape.
Using Horizontal Type Tool (T) write down the word “Contacts” using the Font Gotham Pro, Regular, Font size to 16 pt and anti-aliasing method to Strong and color #8a8a8a.
Using Horizontal Type Tool (T). write down the word “email@example.com” using the Font Gotham Pro, Regular, Font size to 14 pt and color #ffffff.
Add Drop Shadow with following settings.
Place all content what is in “Blue” label inside a group layer by selecting them and then hit Ctrl + G.
Duplicate “Blue” group layer, change field color to #ffad46 and drop shadow to #ff8e00. Don’t forget about distance, because our design needs to be pixel perfect.
Select following layers and group it.
Select layer “Contacts field” and “Contact”, Duplicate layers… after rename Contacts in Subject.
Write down the word “Hello Designmodo” and draw a line using Rectangle Tool (U). Set Width to 1 px and Height to 19 px and color #8a8a8a.
Duplicate “Subject” group layer, rename “Subject” in “Message”, “Hello Designmodo” in “Leave your message here” and change color to #c2c2c2 (because this is only notification to write your message), remove line. Change Height dimension on field, from 50 px to 108 px with using Direct Selection Tool (A).
Select following layers and group it.
Draw a rounded rectangle using Rounded Rectangle Tool (U). Set Width to 22 px and Height to 22 px with radius 4 px and color #ffffff.
Add Stroke with following settings.
Draw a “Check” using Pen Tool (P) and Convert Point Tool (Alt + Tool (on Mac Option + Tool), Holding down a key temporarily activates a tool. Letting go of the key returns to the previous tool). Use color #57b638.
Take the Pen Tool (P) and simply click at the beginning and the end of the segment that is being created (for straight-line segment) and click at the place of the first point and, without releasing the mouse button, drag the cursor to the side (for curved segment).
Duplicate one of previous layers what contain words with 16 pt, and rename it in “Save Message” and move near “Check”.
Draw a rounded rectangle using Rounded Rectangle Tool (U). Set Width to 160 px and Height to 46 px with radius 3 px and color #ffffff.
Add Stroke and Gradient Overlay with following settings.
Duplicate layer “Save message” rename in “Send”, change color to #ffffff, align vertical centers and align horizontal centers, add Drop Shadow with following setting.
Now you know how to make a Contact Form in Photoshop. You could play around with other options like changing blending option. Or, you could try to make any other field into the form. Good luck!