Related posts

• No related posts.

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.

Related posts

• Create a Wordpress Web Layout from Scratch (2)

Awesome looking Letterpress Effect in Photoshop, very cool.

Click Here to see the Tutorial

Related posts

• Wolfman Signature Tutorial (1)
• Windows Messenger Icon in Photoshop (3)
• Whiteshading Website Layout V2 (8)
• Welcome to the PSDesignZone.com (0)

Awesome snowboarding Poster with Photoshop, excellent Effect!

Click Here to see the Tutorial

Related posts

• Wolfman Signature Tutorial (1)
• Windows Messenger Icon in Photoshop (3)
• Whiteshading Website Layout V2 (8)
• Welcome to the PSDesignZone.com (0)

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

Click Here to see the Tutorial

Related posts

• Wolfman Signature Tutorial (1)
• Windows Messenger Icon in Photoshop (3)
• Whiteshading Website Layout V2 (8)
• Welcome to the PSDesignZone.com (0)

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

Click Here to see the Tutorial

Related posts

• Wolfman Signature Tutorial (1)
• Windows Messenger Icon in Photoshop (3)
• Whiteshading Website Layout V2 (8)
• Welcome to the PSDesignZone.com (0)

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

Click Here to see the Tutorial

Related posts

• Wolfman Signature Tutorial (1)
• Windows Messenger Icon in Photoshop (3)
• Whiteshading Website Layout V2 (8)
• Welcome to the PSDesignZone.com (0)

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

Click Here to see the Tutorial

Related posts

• Web Development Tutorials (0)
• Volkswagen Logo in Photoshop (0)
• Program a PSD into valid XHTML/CSS (1)
• Professional Logo design in Photoshop (0)

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

Click Here to see the Tutorial

Related posts

• Wolfman Signature Tutorial (1)
• Contemporary Photoshop Logo (8)
• Windows Messenger Icon in Photoshop (3)
• Whiteshading Website Layout V2 (8)

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.

Related posts

• Wolfman Signature Tutorial (1)
• Windows Messenger Icon in Photoshop (3)
• Whiteshading Website Layout V2 (8)
• Watercolor Effect in Photoshop (4)

Description

In this tutorial we will be creating a trendy and useful effect with the Halftone Pixel Filter, this effect can be applied to almost any object and can add alot to your designs

Objectives

In this tutorial we will be creating a cool photographic effect called the Halftone Pop dot effect.

• Learn how to use the Halftone Pixel Filter
• Gaussian Blur
• Seperate Layer Styles

Final Result:

Step 1:

Create a new document 400×400 pixels I filled the background with #E96B10 but this effect will work with any color.

Step 2:

Copy and paste in some cool render or something like a person, I used the Master Chief figure from Halo. Which you can download Here

Step 3:

Now ctrl+click on the layer with the Render to select it, create a new layer and fill the selection with black it with black: #000000

Step 4:

Duplicate the layer by dragging and dropping it to the new layer icon, your layers should look like below.

Step 5:

Now ctrl plus click on your top layer to select it, press ‘q’ on your keyboard to get into ‘Quick Mask’ mode, go to Filter > Pixelate > Color Halftone leave it at default settings and press ok. Press ctrl+f until you see an effect similar to below.

Step 6:

Now we need to press ‘q’ to switch out of ‘Quick Mask’ mode, it will make a selection of the ‘dots’ with the top layer selected press delete, and then fill the selection with Black #000000.

Step 7:

Select the layer just above the Master Chief (or whatever) and go to Filter > Blur > Gaussian Blur apply a blur of 6 pixels and press ok.

Step 8:

Position the layer with your render on it above the layer with the dots on it so it looks like below.

Step 9:

Now you are basically done, I pressed ctrl+alt+u to change the hue/saturation of the Master Chief Render but that is optional.

Conclusion

Well I hope you enjoyed the tutorial, if you have any questions be sure to leave a comment below.

Written by: Jordan Garn

Related posts

• Wolfman Signature Tutorial (1)
• Windows Messenger Icon in Photoshop (3)
• Whiteshading Website Layout V2 (8)
• Welcome to the PSDesignZone.com (0)

View Full

First create a new Photoshop document, that is 800×200 pixels, and has a transparent background.

Next use the paintbucket tool to fill the background with #B5B292, create a new layer , then pull out the Marquee Tool Make a selection like below and then use the paintbucket tool again to fill the selection with #473E26. Your document should look like below:

Next we are going to make a dropshadow image, create a new document with the following settings:

Set the foreground color to black and then pull out the pencil tool , zoom in really close and create an image like below

Now go to Edit > Define Pattern it doesn’t matter what the pattern is, so press ok

Now make a new layer and position that layer underneath the layer with the Brown Header rectangle on it press ctrl+click on the layer with that Brown Header to select it use the down arrow key to move the selection down about 5 pixels (BE SURE THE LAYER UNDER THE BROWN HEADER IS SELECTED):

Next with the layer under the header selected press shift+backspace, and select the pattern you created earlier. Then press ok:

Set that layers opacity to 20% and you should come out with this:

Next you need to download the following image, (right click and select save image as)

Then open the image use the marquee tool to copy and

paste it over top of the Brown Header layer. Make it look like this

Your going to be needing to create a new pattern now, press ctrl+n to create a new image, make it’s dimensions 2×1 pixels and draw out an image like so, use the zoom tool to zoom way in:

Make a new layer and make a selection right above the layer with the trees on it

Press shift plus backspace and fill that layer with the new pattern:

Related posts

• Wolfman Signature Tutorial (1)
• Windows Messenger Icon in Photoshop (3)
• Whiteshading Website Layout V2 (8)
• Welcome to the PSDesignZone.com (0)

Browse more Photo Shop CS Tutorials | Written by Jordash PS Design Zone

Page 1 of 1

Click Here to Discuss This Tutorial and ask Questions

Description

Learn how to create a glossy balloon comment box in Photoshop

Objectives

• Bevel effect
• Paths and Shapes
• Text

We are going to be creating a Popup Balloon Comment box like below:

First create a new document 500 x 500 pixels. Create a new layer and pull out the circular marquee tool and make a selection like below, fill it with black #000000:

Next select the pen tool and make sure it’s settings are like so.

Now using the pen tool create a shape like so, once it’s created right click and choose ‘fill path’ fill it with black, #000000, right click and choose delete path.

Now add the following layer styles to the Layer.

You should come out with the following:

Add some text and your set!

Thanks for viewing the tutorial

Written by Jordash

Please let us know what you think! Leave a comment below:

Related posts

• Web Development Tutorials (0)
• Volkswagen Logo in Photoshop (0)
• Program a PSD into valid XHTML/CSS (1)
• Professional Logo design in Photoshop (0)

Fill the canvas using the paintbucket tool
with #e2e2e2

Tip:

Press (g) to bring out the Paintbucket tool

Now Create a new layer and select the Rounded Rectangle Tool , then set the foreground color to #695D54

Once you create the Rounded Rectangle we are going to create a new document for the dropshadow, press ctrl+n to create a new document and use the following settings:

Next select the Pencil tool (b) And create an image like so

Then go to Edit > Define Pattern, it doesn’t matter what it is named

Now ctrl+click on the layer that has the rounded rectangle on it to make a selection of that layer, then create a new layer now drag the new layer under the layer that contains the rounded rectangle. Use the arrow keys to move the selection down a ways.

Press shift+backspace to fill the layer with the pattern we just created.

Be sure to set the layer with the Pattern in it to about 20-30% (whatever looks good, do it by eye)

Tip:

you can make a pattern anything you want fool around with it and you can come up with some pretty cool effects.

Now we are going to make those bevels, create a new layer, first zoom in really close using the Zoom Tool pull out the handy pencil tool again set it’s width to 1px (pixel), set foreground color to black and draw a short line (see image), now set the foreground color to white and draw another line just to the right of that; Set this layers blending mode to overlay and your all set.

Copy this layer by pressing ctrl+j (while that layer is selected) and you can make multiple bevels, zoom out to see what it looks like.

Now pull out the gradient tool set the foreground color to white, and set the Gradient style to white to transparent (see pic)

Set the opacity of that layer to about 10-20%

Tip:

play around with the opacity and blending options to see interesting results

Now we can add in the text, I used Tahoma Bolded with an outer glow on it applied to it:

To come out with:

View Full Image

Hope that helps, if you have any questions leave a comment below.

Related posts

• Wolfman Signature Tutorial (1)
• Grass Text effect in Photoshop (0)
• Cool 3d Paint and Text Effects in Photoshop (0)
• Contemporary Photoshop Logo (8)

First off create a new image document, I made it 100 x 50 pixels, now you need to use the paintbucket tool to fill the background with #D5D3BF.

After you create the new image with the background color set the foreground color to #313025 and pull out your pencil tool set it’s width to 1 pixel, create a new layer and draw a shape like below.

I found it very helpful to zoon im using the zoom tool so it was like this

Now use the wand tool to click inside of the black outline and select inside of it. Then create a new layer .

Now be sure that the new layer is selected (layer 3) and set your foreground color to #9F9B74, then pull out the paintbucket tool and click inside of your selected area to fill it with that color:

Now comes the fun part we’re going to make a highlight of the button, first set the foreground color to #B7B391, then using the pencil tool draw a 1 pixel line around the top left hand corner of the button like so, be sure you have created a new layer

Now simiarly we are going to create a shadow, pull out the pencil tool again and set the foreground color to #797353, then in the bottom right hand corner of the button draw the shadow, it should look like this

Related posts

• Whiteshading Website Layout V2 (8)
• Network Icon in Photoshop (2)
• Create a Moniter Icon in Photoshop (2)
• Wolfman Signature Tutorial (1)

First off you are going to need to download the water background used in the tutorial in a .psd format, click Here to Download
now you are to need two documents with the water background in them so just copy the water texture, create a new document of the same size and paste it in that new document. While you are in the new

document go to filter > guassian blur and set the setting to about 1.0

Now go to File > Save and save that document (in .psd format) wherever you want on your hard-drive just remember where you save it too. Now go back to the other document, (without the gaussian blur) and type in whatever text you want, it’s best if you use a font that is thick and set to bold, below I used Placard Condensed, set to Bold, and at 72pt font you can use

whatever font you think looks cool though.

Now you need to Rasterize the text layer, Right click on the Layer with your text on it

and choose Rasterize Layer.
Now we are going to use the .psd file we saved earlier, first with the rasterized text layer selected go to Filter > Distort > Displace use the following settings

When it asks you to select a file, select the .psd file you saved earlier then press ok, if all goes well you should come out with this

Set the blending mode of that layer to Overlay and apply the following style settings to the layer

Which should result in

Hope you enjoyed the tutorial!

Related posts

• Wolfman Signature Tutorial (1)
• Windows Messenger Icon in Photoshop (3)
• Whiteshading Website Layout V2 (8)
• Welcome to the PSDesignZone.com (0)

Step 1: First creat a a new image, make the background transparent, and the size 120 pixels wide by 240 pixels tall *note see the tip above to see about standard web banner sizes.

Step 2: Now you are going to want to create the shape of the affiliate banner using the rectangle tool set the radius of the tool to 10px put the cursor near the top left hand corner of the document and drag down towards the bottom right of the document. *Note* If you want to use the same color scheme we use, remember to set the foreground color to: #009543; Or you can fool around with a color you think would look good, or better portray your message.

Step 3: Next apply a stroke to the layer,

I applied the following settings.

Step 4: We are now going to be adding some glow effects to the banner, first make a new layer, by clicking on the new layer button , Now with that layer selected press ctrl+g, what this will do is make that layer “Mask” the layer underneath it i.e. things will only show on that layer if it is “touching” stuff in the layer underneath it. Grab the rectangular Marquee tool , make a selection of about the top 4th of the rounded rectangle box, now select the gradient tool set it’s style to foreground to transparent (top box you can make the gradient tool work by making it move from solid color to transparent color), and drag the gradient tool from top to bottom like so. REMEMBER!! to set the foreground color to #00F943 and the gradient from solid to transparent.

To come out with:

note how the solid to transparent gradient is selected, as well as the correct foreground color

Step 5: Now we are going to do about the same thing just a more subdued gradient, pull out the marquee tool again make a selection from the bottom up to almost 3/4′th of the way. After that pull out the gradient tool, , remember to keep the same settings as the previous step and use the gradient tool like so *note how we don’t “pull” the gradient all the way through the marquee this allows for a more “blended look”:

That should produce this:

And that is about it, I borrowed some photos from MorgueFile.com A great website that offers free professional stock photos. I cropped the images from there and positioned them on top of that banner, then added the Monkey Feather Logo (MonkeyFeather.com is a high quality hosting company that psdesignzone.com recommends above any other!) and some other advertising text with an outer glow to get a decent looking affiliate banner like below:

Related posts

• Contemporary Photoshop Logo (8)
• Wolfman Signature Tutorial (1)
• Whiteshading Website Layout V2 (8)
• Welcome to the PSDesignZone.com (0)