Photoshop Tutorial – How to Create Modal Window

Here is the final product

You can download the PSD here.

Let’s start

Open your canvas and set the size to 450px and 300px. Background is White.

Fill out canvas with #dddddd.

Now go to Filter > Noise > add Noise and set it to 2%, hit OK.

Select your Rounded Rectangle Tool (M) and set radius to 6px, draw a rectangle like the one above. Set the Foreground color to #FFFFFF. Name this one main.

Right click > Blending Options > Outer Glow and follow the settings above.

We’ll have something like this, now off to create the header.

Now create a new layer (CTRL + J) and grab your Marquee Tool (M) and select the top part, fill with #FFFFFF.

Now, on your layer palette make sure you’re that the top layer was highlighted, click on main layer and press CTRL + Shift + I after that press delete.

Right click > Blending Options > Gradient and follow the settings above.

On Gradient settings set your angle to 90 Opacity 100%.

We now have this cool gradient header, but it’s looks dull. We will add some details.

Create a new layer and Right Click on Marquee Tool Palette, select Single Row Column Marquee. Use #FFFFFF as for Foreground and draw the line at the very end of header.

Do the steps we did a while ago, this time use #c9c9c9 as foreground color. Move the white line 1px above.

Put some text on the header, I use Tahoma bold 13pt color is #595959.

I also put some text inside, font is Arial 13pt color is #595959.

Now, select your Rounded Rectangle Tool (U) and set radius to 4px, draw the shape same as above. This will be our button, name it yes button.

Now on yes button layer, go to Blending Options and set the drop shadow settings like the one above.

For Inner Shadow, set the foreground color to #FFFFFF and Distance to 1px.

In Gradient, follow the colors above.

Here is the Gradient settings, Opacity is set to 100%, angle is 90%.

Stroke just change the color to #679831 and set the size to 1px.

This is what it should look like, to add some shadow to the text above.

Select Blending Options and set the drop shadow, color is #717171 and set the distance to 1, size 1. Now we will create the no button, basically it’s the same process as above.

Here is the yes button, clean and nice looking. Now, create a new shape using Rounded Rectangle Tool (U) name it no button.

Drop Shadow use the #717171 for Foreground and set the distance to 1, size to 1.

Inner Shadow, just set the Foreground Color to #FFFFFF and distance to 1.

In Gradient section, use this settings.

In Stroke we use #9E2F2F and set the size to 1px, Opacity 100%.

Here is our no button, we will now add some text.

We put a drop shadow for  the no button, settings is the same with yes button. As you can see they look sharp and clean. You can now use this on your website if you have a login form or membership site.

Source: sanjaykhemlani.com

you may also like:

• Photoshop Tutorial – Design a Simple Yet Effective, Clean and Shining Button for Your Website
  In this tutorial, I will show you the method I use to create a stylish, clean and shining button for your website in Photoshop. This method is extremely simple with no more than five steps, yet it’s v...
• Photoshop Tutorial – Draw a Rather Cute, Unique Style “Play” Button
  In this tutorial, I will show you the process I took to create this rather cute, unique Style “Play” Button in Photoshop. It’s a simple (aimed for PS beginners) but fun tutorial, have a try :) The ...
• Photoshop Tutorial – Draw a Rather Cute, Unique Style “Play” Button
  Step 1 Create a new document sized 1000 x 600px. Fill the background with the following gradient: Duplicate the background layer once, resize and rotate the duplicated layer, use a big soft br...
• Photoshop Tutorial – Design a Delicious “Contact Me” Button
  Step 1 Create a document sized 200px * 20opx with white background and 72 dpi (web graphic) – please note that this is the actual size of the button we will be making. Here I will show you a littl...
• Photoshop Tutorial – Clean Two-Level Navigation
  Step 1 First off, we need to make a new document; I’ve made a relatively small one for the purpose of this tutorial (600x420px) but yours will probably be for a web design (1000px or so wide). T...

No Responses to “Photoshop Tutorial – How to Create Modal Window”

1. high blood pressure says:

   January 31, 2012 at 01:20

   very few websites that happen to be detailed below, from our point of view are undoubtedly well worth checking out…

   Here is a Great Blog You Might Find Interesting that we Encourage You…