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.

Awesome looking Letterpress Effect in Photoshop, very cool.

Click Here to see the Tutorial

Awesome snowboarding Poster with Photoshop, excellent Effect!

Click Here to see the Tutorial

Learn how to create a cool looking Valentines card for your special someone in Photoshop

Click Here to see the Tutorial

Create a cool looking invasion scene using Photoshops new 3d modeling techniques

Click Here to see the Tutorial

Create a cool looking invasion scene using Photoshops new 3d modeling techniques

Click Here to see the Tutorial

Learn how to create a cool looking Glowing Box effect in Photoshop, adds alot to the image!

Click Here to see the Tutorial

Create a cool looking ‘Ice’ Effect in Photoshop using this easy to follow quick tutorial.

Click Here to see the Tutorial

To begin create a new image 500×100 pixels for the Dimensions, fill the background with #3F3F3F

Click on the brush tool, and make the settings like so:

Create a new layer and pull out the pen tool and make a path like below

Right click in the graphics area and choose ‘stroke path’ choose Brush with Simulate Pressure unchecked It should look like below

Where your layers are click on the ‘paths’ tab, click on the Path1 and drag it to the new path icon to convert it to an editable path, right click on the path and choose ‘duplicate path’ duplicate it twice like below:

Now deselect all the paths by clicking in the grey area below them, and click the layers tab, select the layer with the black line and it and press ctrl+j to duplicate it, press ctrl+i to change it’s color to white and then use the move tool and the arrow keys to move the line down about 2-3 pixels, change that layers blending mode to Overlay.

Now go back to the paths tab, pull out the pen tool and select one of your duplicated paths. Make sure your pen tool is configured like so:

Use the pen tool to make a shape like below:

Right click in the graphic and choose ‘make selection’ deselect the path and go to the layers tab, pull out the gradient tool and set the colors to black to transparent

Now create a gradient like so.

Do the exact same thing for the top except pull the gradient too the top.

Now use the text tool to type out the text ‘sweet’, I used the font Tahoma and the color is #CF7600

Create a new layer above the ‘sweet’ layer and press ctrl+g (alt+ctrl+g in CS4) to mask that layer over the text layer below it, ctrl+click on the sweet text to select it, pull out the marquee tool and press alt on the keyboard and select the bottom half of the selection to deselect it.

Fill the remaining selection with white, and set that layer opacity to about 20-30%

Follow the same process for the UI text. You can then add in some links like Home | Portfolio etc.. I used Tahoma 10 pt.