Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Web design with Photoshop part 3/10 – Contact form

Monday, January 25th, 2016 by Servage

part3-1In this section, you will learn how to add layers to the form in the banner section. For this, start by selecting the rectangle tool to draw a rectangular layer with dimensions of 460 by 304 pixels. Place this layer at the centre bottom of the banner section. This will be the base of the form.

Form title

Select the rectangle tool and draw a rectangle with a resolution of 460 by 63 pixels. Place the rectangle in upper section of the form. Use the direct selection tool and move the lower points of the rectangle on both lower left and lower right side of the second rectangular layer.

Select the text tool and write the text on the header of the form, Get started today. Select the text layer and the rectangular layer and make sure to align them horizontally and vertically centered. For doing so, use the move tool.

Input fields

Create a new rectangular layer in the dimension of 166 x 42 pixels and place it 20 pixels below the header of the form. Copy the same layer and paste it next to the first layer. Select the text tool and write the name of the boxes on them as first name and last name respectively. Don’t forget to align them horizontally. Here, 18 pixel Museo font is used. The color of the box is #e8ebed and the color of the text is #889193.

Create another rectangular layer for the email address with 340 by 44 pixels and place it 20 pixels below the name layers. Write the name of the layer on it with the help of the line tool. The background will be same as other boxes of the form. Make sure to align them horizontally.

Submit button

Create the last rectangular box in the form for the submit button, having dimensions of 280 by 37 pixels. The color for the background of the layer will be #5fcf80 and add another text layer on the box that says “Claim your free trial today”. Also change the color of the header of the form to #3ac162 and the background of the banner to #5fcf80.

Now add a drop shadow effect to the button by right-clicking on the rectangular layer. Go to the drop shadow option and adjust to 50% opacity. The color of the shadow of the box is black.

You can also add some drop shadow effect on the headline of the banner. For this, right click on the headline layer and select the Blending option. Go to the drop shadow option and select 70% opacity to the layer. With this you are done with setting up the form layers in the banner section.

Web design with Photoshop part 3/10 – Contact form, 3.3 out of 5 based on 6 ratings
Categories: Guides & Tutorials

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.