Designing a Simple Dark Registration Form Using Photoshop

Designing a Simple Dark Registration Form Using Photoshop

by on June 26, 2011 in Tutorials, Web Interface

This tutorial show how you can use layer styles to create a simple carbon style dark registration form. This is very detailed step by step tutorial targeting beginner level photoshop users.


Source Files

Details

  • Program: Adobe Photoshop
  • Version: CS5
  • Difficulty: Beginner

Final Result

dark simple contact form final Designing a Simple Dark Registration Form Using Photoshop

Step 1

Open a new document size of 800×600 and save it.

dark simple contact form step1 1 Designing a Simple Dark Registration Form Using Photoshop

Click on foreground color box and set its color to #111111. Now press ctrl/cmd+backspace to fill the background color with selected color.

dark simple contact form step1 2 Designing a Simple Dark Registration Form Using Photoshop

Step 2

Create a new blank layer and name it ‘noise’. Hit ctrl/cmd+backspace again to fill it with same color we used in background.

dark simple contact form step 2 1 Designing a Simple Dark Registration Form Using Photoshop

Now go to Filter > Noise and add about 2px of monochromatic noise. Change the layer opacity to 50%.

dark simple contact form step 2 2 Designing a Simple Dark Registration Form Using Photoshop

Step 3

Now take the rounded rectangle tool with radius of 10px and draw a rectangle about 500×400 dimension. Don’t worry about the color we will add layer styles in a minute. Name the layer as ‘form’.

dark simple contact form step 3 1 Designing a Simple Dark Registration Form Using Photoshop

Double click the ‘form’ layer and add these layer style. Click OK.

dark simple contact form step 3 2 Designing a Simple Dark Registration Form Using Photoshop

Step 4

Select the form area by ctrl/cmd+click on the vector mask thumbnail to make a selection with whole form area.

dark simple contact form step 4 1 Designing a Simple Dark Registration Form Using Photoshop

Now with the current selection select the marquee tool or hit M in you keyboard. Now press Shift+Alt key together, you will see the mouse cursor changed with a little ‘x’ under the selection cursor. This modified selection tool will select the interacted area of current selection and selection you will draw by the tool. Now make a rectangle area by holding both Shift and Alt in same time like the preview.

dark simple contact form step 4 2 Designing a Simple Dark Registration Form Using Photoshop

So finally you will select some portion of the top of the rectangle.

dark simple contact form step 4 3 Designing a Simple Dark Registration Form Using Photoshop

Step 5

Create a blank new layer with the selection active and fill the selection with any color by pressing alt+backspace. Name the layer to ‘header’. Now double click the layer and add these layer styles.

dark simple contact form step 5 1 Designing a Simple Dark Registration Form Using Photoshop

The form now should look like this

dark simple contact form step 5 2 Designing a Simple Dark Registration Form Using Photoshop

Add some guide for easily align the form elements.

dark simple contact form step 5 3 Designing a Simple Dark Registration Form Using Photoshop

Step 6

Create a rounded rectangle with 10px radius like the preview and add these layer styles.

dark simple contact form step 6 1 Designing a Simple Dark Registration Form Using Photoshop

Add some text with color of #444444 and group it with the input box rounded rectangle. The input box should look like the images below. I have copied three times and changed the text.

dark simple contact form step 6 2 Designing a Simple Dark Registration Form Using Photoshop

For the password I have added bullet point. Typing bullet point is little tricky! To type bullet, hold down alt key then type 0149 (alt+0149) then release alt key. The final result will look like this.

dark simple contact form step 6 3 Designing a Simple Dark Registration Form Using Photoshop

Step 7

Let’s add a nice looking submit button. Make a rounded rectangle shape with 20px and about 150px width and 50px height.

dark simple contact form step 7 1 Designing a Simple Dark Registration Form Using Photoshop

Add some layer styles you see below.

dark simple contact form step 7 2 Designing a Simple Dark Registration Form Using Photoshop

Add some text with layer styles gray to white gradient and drop shadow. I used the font ‘Myriad pro’ with semi bold font face. You are free to use any other fonts.

dark simple contact form step 7 3 Designing a Simple Dark Registration Form Using Photoshop

Step 8

oval Designing a Simple Dark Registration Form Using Photoshop

Now save this png above, add and resize it like the preview.

dark simple contact form step 8 Designing a Simple Dark Registration Form Using Photoshop

Desaturate it using Hue/Saturation adjustment layer. Now group all element of the submit button to one and name the group to ‘submit’.

dark simple contact form step 8 1 Designing a Simple Dark Registration Form Using Photoshop

Let’s make a hover or Mouse down state for the submit button. Duplicate the submit button group and hide/delete the Hue/Saturation adjustment layer. The big idea is when we press the button the oval will look green icon smile Designing a Simple Dark Registration Form Using Photoshop

dark simple contact form step 8 2 Designing a Simple Dark Registration Form Using Photoshop

Now modify the adjustment layer a little to differentiate the button state. Remove stroke, modify Drop shadow and inner shadow and other styles remains same.

dark simple contact form step 8 3 Designing a Simple Dark Registration Form Using Photoshop

Final result should look something like this. If you have anything to ask please comment and we can discuss it there.

dark simple contact form final Designing a Simple Dark Registration Form Using Photoshop
No TweetBacks yet. (Be the first to Tweet this post)
Source Files

Tags: , ,

About Sisir

Hello! I am a freelance graphic designer, developer and engineer based on Bangladesh. I like my PC, my coffee cup and Internet.
View all posts by Sisir →
Connect with author:

8 Responses to “Designing a Simple Dark Registration Form Using Photoshop”

  1. Shaon June 26, 2011 at 12:02 pm #

    nice job dude!
    hope to see a full design tutorial of a site..

    Reply
    • Sisir June 26, 2011 at 12:10 pm #

      Glad you liked it! Stay tuned we will publish a series of website design tutorial soon.

      Reply
  2. web site design July 29, 2011 at 1:30 am #

    This will help my website design in Kentucky!

    Reply
  3. Vector Gallery Reviews August 4, 2011 at 7:12 pm #

    This is a very nice! I will add your website to useful link list of my blog, is that OK?

    Reply
  4. Robbi Whitver August 5, 2011 at 10:16 am #

    It’s useful for me.Thanks for sharing.

    Reply
  5. Kelly Dalluge August 31, 2011 at 1:06 am #

    [MARKED AS SPAM BY ANTISPAM BEE | CSS Hack]
    I like to check out your site a couple times a week for new entries. I was wondering if you have any other topics you write about?

    Reply
  6. ajay September 27, 2011 at 7:29 am #

    sir application is very super but i have 1 doubt which is how to give validation to that form

    Reply

Leave a Reply