How to Create Modal Window in Photoshop

P On 19 Nov, 2011 • + By 9 With 1 Comment

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

How to create modal window in photoshop - Sanjay Khemlani [tweegi-button name="modal-window"]

Let’s start

How to create modal window in photoshop - Sanjay Khemlani

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

How to create modal window in photoshop - Sanjay Khemlani

Fill out canvas with #dddddd.

How to create modal window in photoshop - Sanjay Khemlani

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

How to create modal window in photoshop - Sanjay Khemlani

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.

How to create modal window in photoshop - Sanjay Khemlani

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

How to create modal window in photoshop - Sanjay Khemlani

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

How to create modal window in photoshop - Sanjay Khemlani

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

How to create modal window in photoshop - Sanjay Khemlani

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.

How to create modal window in photoshop - Sanjay Khemlani

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

How to create modal window in photoshop - Sanjay Khemlani

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

How to create modal window in photoshop - Sanjay Khemlani

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

How to create modal window in photoshop - Sanjay Khemlani

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.

How to create modal window in photoshop - Sanjay Khemlani

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

How to create modal window in photoshop - Sanjay Khemlani

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

How to create modal window in photoshop - Sanjay Khemlani

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

How to create modal window in photoshop - Sanjay Khemlani

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.

How to create modal window in photoshop - Sanjay Khemlani

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

How to create modal window in photoshop - Sanjay Khemlani

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

How to create modal window in photoshop - Sanjay Khemlani

In Gradient, follow the colors above.

How to create modal window in photoshop - Sanjay Khemlani

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

How to create modal window in photoshop - Sanjay Khemlani

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

How to create modal window in photoshop - Sanjay Khemlani

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

How to create modal window in photoshop - Sanjay Khemlani

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.

How to create modal window in photoshop - Sanjay Khemlani

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

How to create modal window in photoshop - Sanjay Khemlani

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

How to create modal window in photoshop - Sanjay Khemlani

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

How to create modal window in photoshop - Sanjay Khemlani

In Gradient section, use this settings.

How to create modal window in photoshop - Sanjay Khemlani

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

How to create modal window in photoshop - Sanjay Khemlani

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

How to create modal window in photoshop - Sanjay Khemlani

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.

C Tags: , , ,


Show some love and share!


is a Web & Graphic Designer from Philippines, he is passionate about Wordpress, Responsive Design and Open Source. He is helping small to medium size business to market their products, you can contact him here.
50% of Hosting for your Website at GoDaddy.com!

One Response to “How to Create Modal Window in Photoshop”

  1. Hey Sanjay,
    I have found your tutorial for “How to Create Modal Window in Photoshop” very easy to understand.It is a complete material for this task.Now let me follow it to make one Modal Window for my project.

    Thank you Sanjay for sharing this valuable tutorial with us.
    Good Luck and God Bless!!
    Best Regards!
    Samuel Joshua

Leave a Reply

  • (will not be published)