PSDesignZone – Source for Photoshop, Fireworks, Gimp, and CSS Tutorials

Eye Popping Dialogue Boxes in Photoshop

Feb 11, 2010 Photoshop, Web Graphics

Learn how to create "Eye Popping" Dialogue Boxes with Shadows and Gradients.

This tutorial has been viewed: 11276 times

+ Add to Todo List

Added By: PSDesignZone

In this tutorial We will Learn how to create awesome looking “Eye Popping” Dialogue Boxes like Below.

We will learn how to make this Dialogue Box in Photoshop

Step 1.

Create a new document with the following properties:

Width: 500 px
Height: 400 px
Background Color: #373737

Step 2.

Create a New Layer Use the Marquee Tool to create a box near the middle of the new document, Fill the box with White. Like Below:

Create a White Rectangle

Step 3.

Now create a New Layer, Make sure that you create this New Layer UNDERNEATH The White Rectangle Layer

Use the Marquee Tool Again, set the Feather to 20px and make a selection near the bottom of your white Rectangle.  Fill the marquee with Black It should now look like below:

Create a Feathered Marquee and fill it with Black.

Step 4.

It acutally already looks pretty good so this step is optional, essentially you follow the same procedure but put the marquee tool on the Left, Right and Top sides Make a New Layer for Each side.  To come out with the following effect:

More Shadows added, you can play around with the amount for the Feather, see what you can come up with.

Step 5.

Make a Rectangular Selection In the middle of your popup dialogue box and Fill it with #dddddd

Like Below:

Create an inner Marquee fill it with #dddddd

Step 6.

And that’s it! Add whatever else you want to add to the box depending on what you need.  I added in some text and a button:

The Finished Design

I hope you enjoyed the tutorial.  Be sure to let us know if you have any questions in the Comments below.

Tags: Boxes, Dialogue Box in Photoshop, Learn how to create a Dialogue Box in Photoshop, Photoshop Tutorial