How to Create Modal Window in Photoshop

In this tutorial we will create a modal window in Photoshop, we will use a clean and modern design. Our Modal Window will be created from scratch so we do not need any images or icons, after were done you can code it in HTML / CSS, Jquery and use on your own desire.

The modal window has many advantages. For example, when a modal window contains a smaller element, the user doesn’t need to load an entirely new page just to access it. They can just click between the two options and it will go to the next element.

You can download the PSD at the bottom of this tutorial!

Here is the final product

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.

And we are done! You can use this on any project you have, no attribution required (link back would make me happy though). If you follow the tutorial you can learn a few tricks that you can use on your next design project, I suggest that you read and follow the steps.

Feel free to comment if you have a different version of Modal Window that we created, would love to see what you guys have.