For Use With Web Creation or Graphic Design

Step-By-Step Instructions:

Creating metallic futuristic playback control panels.

Create “Square Frame” shape using custom shape tool.

Double click the layer to open layer style window. Apply settings as shown.

Create a rectangle using rectangular shape tool. Apply same layer style.

Create some vertical rectangles using rectangular shape tool. Apply same layer style and change the gradient angle in gradient overlay panel. Move these layers below all the layers in layer order in layer palette.

Similarly create rounded rectangles and place as shown.

Create a rectangle using rectangular shape tool.

Double click the layer to open layer style window. Apply settings as shown.

Create a triangular shape using polygon shape tool.

Double click the layer to open layer style window. Apply settings as shown.

Similarly create other icons like pause, fast forward and rewind etc.

Select and merge all the layers. Duplicate the layer and change the layer mode to “Hard Light”.

For Use With Web Creation or Graphic Design

Step-By-Step Instructions:

Creating a metallic futuristic navigation header

Start by creating a “Circular Frame” shape using custom shape tool.

Double click the layer to open layer style window. Apply settings as shown.

Create a circle inside first circle using rectangular shape tool. Apply same layer style.

Create another circle inside small circle using elliptical shape tool.

Double click the layer to open layer style window. Apply settings as shown.

Create an ellipse using elliptical shape tool. Apply same layer style. Move this layer below the circle layers in layer order in layer palette.

Similarly create another ellipse and place as shown.

Select all the layers except the circular frame layer. Duplicate, scale down, and place on all the four sides.

Select and merge all the layers. Duplicate the layer and change the layer mode to “Color Burn”.

Create a rounded rectangle using rounded rectangle shape tool. Duplicate the abstract shape layers. Scale down and place in the center of the header.

Select the rounded rectangle layer. Double click the layer to open layer style window. Apply settings as shown.

Change the layer mode to “Color Burn”.

Create a rectangle using rectangular shape tool. Apply same techniques and layer styles to create button.

Duplicate and place as shown.

For Use With Web Creation or Graphic Design

Step-By-Step Instructions:

Creating a cool stainless steel navigational header

Create a rounded rectangle using rounded rectangular shape tool.

Double click the layer to open layer style window. Apply settings as shown.

Create a shape as shown using pen tool.

Double click the layer to open layer style window. Apply settings as shown.

Duplicate the layer. Place on the other sides.

Create some small tiny circles and apply same layer style.

Create a rounded rectangle using rounded rectangle shape tool.

Double click the layer to open layer style window. Apply settings as shown.

Create another rounded rectangle using rounded rectangle shape tool.

Double click the layer to open layer style window. Apply settings as shown.

Create more rounded rectangles for the buttons using rounded rectangle shape tool.

Select and merge all the button layer. Change the layer mode to “Exclusion”.

Create some connecting rounded rectangular shapes using round rectangle and elliptical shape tool.

Create some circular shapes and apply same layer style.

Select and merge all the layers. Duplicate and change the layer mode to soft light.

Step-By-Step Instructions:

1. Open a new document in Photoshop. 500×500 width/height.
2. Create a new layer. Name it “Button”.
3. Select the Rectangular Marquee tool. Create a rectangular selection as follows:

4. Select the Gradient tool.

5. Set the gradient from a dark color to a lighter color. (Hex Color: #1E1D1B – #7C7B77).

6. Using the gradient tool, drag from the bottom of the rectangular selection to the top.

7. Goto Filter > Noise > Median.
8. Click Ctrl+D to deselect.

9. Create a new layer underneath the “Button” layer. Call it “Connector”.
10. Select the Rectangular Marquee tool. Create a rectangular selection as follows:

11. Select the Gradient tool.
12. Set the gradient from a black to white. (Hex Color: #000000 – #FFFFFF).

13. Using the gradient tool, drag from the bottom of the rectangular selection to the top.
14. Click Ctrl+D to deselect.

15. Select the “Button” layer so that it is active.
16. Select the Move tool.

17. Hold down the ALT key, then drag the button to the right to create a duplicate. Be sure to hold down the SHIFT key as you drag so that it remains in line with the previous button.

18. Finally, select the Type tool. Add text over your buttons and you have your Box Button Navbar.

For Use With Web Creation or Graphic Design

Step-By-Step Instructions:

Creating an ultra chic central navigation panel for a website with hanging chains effect

Apply a nice gradient in radial mode to the background layer. Create a circle using elliptical shape tool.

s

Press Ctrl+T. Right Click and select Warp. Select “Fish” style from the preset warp shapes. Apply settings as shown.

Double click the layer to open layer style window. Apply settings as shown.

Enable “subtract from shape area” at the top bar. Create two circles using elliptical shape tool.

Create a circle using elliptical shape tool. Press Ctrl+T. Right Click and select Warp. Adjust the nodes to get the shape as shown.

Apply same layer style. Remove inner shadow layer style.

Duplicate and scale down. Apply same layer style we used for the first layer.

Double click the layer to open layer style window. Apply bevel&emboss settings as shown.

Create two circles using elliptical shape tool. Apply same layer style we used for the first layer.

Create a circle using elliptical shape tool. Enable “subtract from shape area” at the top bar. Create another circle using elliptical shape tool.

Duplicate the layer. Press Ctrl+T. Right click and select Flip Vertical, scale down and place as shown below. Using pen tool create two rectangular shapes as shown below. Apply same layer style.

Duplicate, scale down sequentially and place below each other.

Create “Circular Frame” shape using custom shape tool. Apply same layer style.

Duplicate the layer. From layer menu select layer style>>create layers. Select and merge all the resulting layers. Scale down horizontally. Select eraser tool and erase the overlapping area.

Similarly create more knuckles joined with each other to create a hanging chain.

Create more chains and place some rounded rectangular buttons over them.

Using basic shapes like rectangle and circle create a top lid for each button.

Select and merge all the layers. Duplicate the layer. Press Ctrl+U to open hue/saturation window. Apply settings as shown.

Change the layer mode to “Color Dodge”.

Creating a futuristic alien arms website layout.

Create a rounded rectangle using rounded rectangular shape tool.

Double click the layer to open layer style window. Apply settings as shown.

Duplicate the layer several times and place as shown.

Select and merge all the rectangle layers. Press Ctrl+T. Right Click and select distort. Adjust the nodes to get the shape as shown.

Duplicate the layer and move a few pixels downwards. Change the layer mode to “Linear Dodge”.

Duplicate both the layers and place as shown.

Select and merge all the layers. Duplicate the layer, flip vertical and change the layer mode to “Difference”.

Duplicate both the layers. Press Ctrl+T. Right click the layer and select Rotate 90°.

Select and merge all the layers. Duplicate and scale up. Change the layer mode to “Difference”.

Duplicate the layer again. From “Filter” menu select “Blur>>Gaussian Blur “. Apply 5 as blur radius.

Change the layer mode to “Color Dodge”.

Create a rounded rectangle using rounded rectangle shape tool.

From layer menu select layer style>>create layers. Select and merge all the resulting layers. Duplicate the layer, flip horizontal and change the layer mode to “Difference”.

Duplicate both the layers and place as shown.

Create a new layer. Select brush tool and create some wires.

Create a pattern of very tiny ellipses and place near the end of the alien arm.

Duplicate and flip to create other alien arms.

Step-By-Step Instructions:

Creating left navigation panel with old metallic look

Create a rectangle using rectangular shape tool.

Enable add to shape area from the top bar. Create two circles using elliptical shape tool.

Enable “subtract from shape area” at the top bar. Create a rounded rectangle using rounded rectangle shape tool.

Create more rounded rectangles and place below each other.

Double click the layer to open layer style window. Apply settings as shown.

Similarly create rounded rectangles and place as shown.

Apply same layer style. Double click the layer to open layer style window. Enable and apply inner shadow settings as shown.

Create two circles using elliptical shape tool. Apply same layer style we used for the first rectangle layer.

Double click the layer to open layer style window. Enable and apply inner shadow settings as shown.

Duplicate the first rectangle layer. Remove layer styles, scale down and place as shown.

Double click the layer to open layer style window. Apply settings as shown.

Duplicate the circle layer several times. Scale down and place as shown.

Type link names over this rectangle.

Select and merge all the layers. Duplicate the layer and change the layer mode to “Vivid Light”.

For Use With Web Creation or Graphic Design

For Use With Web Creation or Graphic Design

Step-By-Step Instructions:

Create this shape with rounded rectangle tool. Fill it with #4B604D. Add two dark colored #101922 lines with high feathered brush.

Add default inner shadow and drop shadow in it.

Press control+j to duplicate the layer. Control+click on its layer name to select it. Move the selection as shown :-

Press shift+control+i to inverse the selection and alt+ctrl+click on its layer name.

Press control+j to duplicate the layer.

Again control+click on the layer to select the layer.

Go to select>modify>contract selection and contract it by 1 pixel.

Keep the selection active, inverse the selection and alt+control+click on its layer name to select outline of the layer. Create another layer. Use brush tool to add some white shades as shown.

Dulicate and place the layer as shown :-

Click on the first layer which we duplicated. Keep the drop shadow and inner shadow sattings same but apply this gradient overlay.

Now, group and merge all layers to have a single layer. Duplicate this layer as shown.

Draw a line either with rectangle tool or with rounded rectangle tool. The upper rounded shape is not important here because we will send it back. Apply same layer style as we applied to the third layer (drop shadow, inner shadow and gradient overlay).

Send this line back by pressing shift+ctrl+{. Duplicate this layer for 7 times.

Draw these buttons with ellipse tool. Apply same layer style.

Draw these half rounded shapes with ellipse tool and if you like than you can fill the background with ##8A988C color.  Our left navigation pannel is ready

Step-By-Step Instructions:

Creating a left navigation panel with illuminated florescent tube lights.

Create a rounded rectangle using rounded rectangular shape tool.

Double click the layer to open layer style window. Apply settings as shown.

Duplicate scale down and place as shown.

Duplicate the layer. From layer menu select layer style>>create layers. Select and merge all the resulting layers. Change the layer mode to “Lighten”.

Create some circles on every corner using elliptical shape tool. Apply same layer style.

Create another circle using elliptical shape tool.

Double click the layer to open layer style window. Apply settings as shown.

Duplicate several times and place it on every corner as shown in the image below.

Create some lines using line tool. Apply same layer style we used for the rounded rectangle layer.

Select and merge all the layers. Duplicate the layer and change the layer mode to “Vivid Light”.

Create two rounded rectangles using rounded rectangle shape tool.

From layer menu select layer style>>create layers. Select and merge all the resulting layers and change the layer mode to “Vivid Light”.

Press Ctrl+U to open hue/saturation window. Apply settings as shown.

Duplicate both the rectangle layers and place as shown.

Summary:
In the following tutorial, we’ll learn how to create the illusion of a button with in a hole.

Step-By-Step Instructions:
1. Open a new document in Photoshop. 300×300 width/height.
2. Select the Paint Bucket tool.

3. Fill in the background with a light grey color. (Hex Color: #f3f3f3).

4. Create a new layer. Name it “Hole”.
5. Select the Eliptical Marquee tool.

6. Create a circular selection.

7. Select the Paint Bucket tool. Fill in the circular selection with a dark grey. (Hex Color: #898989).

8. Right click the “Hole” layer. Select “Blending Properties” from the pop-up list.
9. Choose “Inner Shadow”. Set to the following:

10. Click OK to close out and return to image.
11. Create a new layer. Name it “Button”.
12. Select the Eliptical Marquee tool again.
13. Create a circular selection inside of the hole.

14. Select the Paint Bucket tool. Fill in the circular selection with a color of your choice. (Hex Color: #ff9c26).

15. Right click the “Button” layer. Select “Blending Properties” from the pop-up list.
16. Choose “Drop Shadow”. Set to the following:

17. Choose “Bevel and Emboss”. Set to the following:

18. Click OK to close out and return to image.
19. You should now have your “Button in a Hole”.

20. Repeat the tutorial and try different colors to create a colorful array of buttons.

1. Open a new document in Photoshop. 500×500 width/height.
2. Create a new layer. Name it “Button”.
3. Select the Rounded Rectangle Tool.

4. In the options bar, make sure that “Paths” is selected. Set the Radius to “25″.

5. Create a pill shape for the first button of the side panel.

6. Select the Path Selection Tool.

7. Move your mouse over the path of the oval shape. Right click, then choose “Make Selection” from the list.
8. The Make Selection box will appear. Click OK to accept defaults. (Default should be Feather Radius: 0).

9. Select the Paint Bucket tool.

10. Fill in the selection with a color of your choice. (This tutorial Hex Color: #00ff00).

11. Goto Select > Modify > Contract. Set the Radius to a small number, such as “2″. Click OK.

12. Select the Gradient Tool.

13. Set the gradient with the same color you used in step 10 to pure white. (Hex Color: #00ff00 to #ffffff).

14. Fill the selection with a linear gradient starting from the bottom of the selection and going up just over the top of selection.

15. Click Ctrl+D to deselect.
16. Select the Eliptical Marquee tool.

17. Create a new layer. Name it “Arrow Circle”.
18. On this new layer, create a circular selection at the left side of the button.
19. Select the Paint Bucket tool. Fill the selection with light grey. (Hex Color: #d7d7d7).

20. Click Ctrl+D to deselect the circle selection.
21. Select the Polygonal Lasso tool.

22. Zoom in on the grey circle. Create an arrow shape like the one in the image below. (Remember that holding down the Shift key while you drag the lasso tool will allow you to get perfect diagonal selections).

23. Select the Paint Bucket. Fill in the arrow shape with white (Hex Color: #ffffff).
24. Click Ctrl+D to deselect.

25. Right click the “Arrow Circle” layer in the Layers Palette. Select “Blending Options” from the pop-up list.
26. Choose “Bevel and Emboss”. There are two areas in Bevel and Emboss, they are “Structure” and below that is “Shading”. Set them to the following:

27. Choose “Drop Shadow”. Under the “Structure” area, set to the following:

28. Choose “Stroke”. Under “Structure” area, set to the following:

29. Click OK to close out and return to your button.
30. You should now have your completed button.

31. Flatten both layers: “Arrow Circle” and “Button”.
32. Type text over your button with the font of your choice.

33. Copy and paste to make multiple buttons on top of each other.

Step-By-Step Instructions:

1. Open a new document in Photoshop. 500×500 width/height.
2. Create a new layer. Name it “Box 1″. Select the Rectangular Marquee tool. Create a rectangular selection.

3. Choose a gradient fill from light grey to white to light grey. (Hex Colors: #C0C0C0 – #FFFFFF – #C0C0C0)

3. Fill the selection with a linear gradient from top to bottom.

4. Create a new layer. Name it “Box 2″.
5. Select the Polygonal Lasso tool. Draw a selection like the illustration below.

6. With the “Box 2″ active. Fill in the selection with the same linear gradient from top to bottom as in the “Box 1″ layer.

7. Click Ctrl+D to deselect the active selection.
8. Create a new layer. Name it “Box 3″.
9. Select the Rectangular Marquee tool. Create a small rectangular selection near the left side.
10. Fill this selection with a dark grey. (Hex Color: #868686)

11. Create a new layer. Name it “Box 4″.
12. Create a small rectangular selection inside the grey box.
13. Fill it with a linear gradient from left to right. You can choose your color scheme. (In this tutorial, Hex Colors: #007F18 – #FFFFFF – #007F18).

14. Select the Move tool. Holding down the ALT and Shift key, click and drag the small gradient box to the right to duplicate it. Repeat this step until you have filled the grey box with a row of small gradient boxes.
15. Merge the “Box 4″ layer that contain the small gradient boxes with the underlying “Box 3″ layer that has the dark grey box. Your image should now look like this.

16. Right click “Box 3″ in the Layers Palette. Goto “Blending Options”.
17. Select “Inner Shadow”. (Opacity: 75% / Angle: 120 / Distance: 5 / Choke: 0 / Size: 5)

18. Right click “Box 2″ in the Layers Palette. Goto “Blending Options”.
19. Select “Drop Shadow”. (Opacity: 75% / Angle: 120 / Distance: 1 / Spread: 0 / Size: 1)

20. Right click “Box 1″ in the Layers Palette. Goto “Blending Options”.
21. Select “Drop Shadow”. (Opacity: 75% / Angle: 120 / Distance: 1 / Spread: 0 / Size: 3)

22. Merge all the layers so that the complete button is on a single layer. Rename this layer “Button”.
23. Select the Type tool. Choose a darker grey color (Hex Color: #606060)
24. Type out the name for your button.

25. Copy and paste the button to create additional buttons to create a side panel. Try creating different colors for the gradient filled boxes from Step 13.

For Use With Web Creation or Graphic Design

Step-By-Step Instructions:

1. Open a new document in Photoshop. 500×500 width/height.
2. Create a new layer. Name it “Button”.
3. Select the Rectangular Marquee tool. Create a rectangular selection.

4. Goto Select > Modify > Smooth. Set Sample Radius to “5″. Click OK.
5. Select the Paint Bucket tool. Fill in the selection with a light grey color. (Hex Color: #b2b2b2).

6. Select the Rectangular Marquee tool. Create a rectangular selection inside the button. See image below:
7. Goto Select > Modify > Smooth. Set Sample Radius to “5″. Click OK.

8. Click the Delete key.
9. Right click the “Button” layer in the layers palette. Choose “Blending Options”.
10. Select “Bevel and Emboss”. Adjust the properties until you are satisfied with the bevel of the button.
11. Click OK to close out and return to your image.

12. Create a new layer. Name it “Tray”.
13. Select the Paint Bucket tool. Fill in the selection with a brownish color. (Hex Color: #7b7961).

14. Right click the “Tray” layer in the layers palette. Choose “Blending Options”.
15. Select “Inner Shadow”. Adjust the properties until you are satisfied with the shadow inside the tray section of the button.
16. Click OK to close out and return to your image.
17. Click Ctrl+D to deselect.

18. Select the Eliptical Marquee tool. Create a circular selection in the top right of the button.

19. Make sure the “Button” layer is active, then click the Delete key.
20. Create a new layer. Call it “Circle”.
21. Select the Paint Brush tool. Fill in the circle selection with same color from Step 13. (Hex Color: #7b7961).

22. Right click the “Circle” layer in the layers palette. Choose “Blending Options”.
23. Select “Inner Shadow”. Adjust the properties until you are satisfied with the shadow inside the tray section of the button.
24. Click OK to close out and return to your image.
25. Click Ctrl+D to deselect.

26. Select the Type tool. Type what you want your button to say in the rectangular tray area.

Step-By-Step Instructions:

1. Open a new document in Photoshop. 600×600 pixel width/height allows a good workable canvas area.
2. Create a new layer. Name it “Circle”.
3. Select the Eliptical Marquee tool. Hold down the SHIFT key and drag to make a perfect circular selection.

4. Select the Paint Bucket tool. Fill in the selection with a color of your choice.

5. Click Ctrl+D to deselect.
6. Create a new layer. Name it “Rectangle”.
7. Select the Rounded Rectangle tool. Make sure that “Fill Pixels” is active in the options bar.
8. Choose black as your foreground color.
9. Draw a rectangular box in the upper left corner of the circle.

10. Right click the “Circle” layer. Choose “Blending Options” from the pop-up list.
11. Set the properties for “Stroke” to the following:

12. Click OK to close out and return to image.

13. Choose white as your foreground color.
14. Make sure top layer is active.
15. Select Type tool. Type out what you want to say over the black rectangle.

16. Then proceed to type out what you want inside the container. As you type out your content, remember that each time you do a carriage return, you need to use your space bar so that your text fits nicely in the circle.

Step-By-Step Instructions:

1. Open a new document in Photoshop. 300×300 width/height allows a good workable canvas space.
2. Create a new layer. Name it “Circle”.
3. Select the Eliptical Marquee tool. Hold down the SHIFT key and drag to make a perfect circular selection.

4. Select the Paint Bucket tool. Fill in the circular selection with white. (Hex Color: #ffffff).
5. Goto Select > Modify > Contract. Contract by “5″ pixels.
6. With Paint Bucket tool still selected, fill in the circular selection with color of choice. (This tutorial Hex Color: #00adef).

7. Goto Select > Modify > Contract. Contract by “5″ pixels.
8. Select the Gradient tool.

9. Set the gradient white to the color you used in Step 6. (Hex Color: #ffffff – #00adef).

10. In the options bar, make sure that the gradient is set to “Radial Gradient”.

10. Using the Gradient tool, drag from the top right area to the bottom left area of the circular selection.

10. Click Ctrl+D to deselect.
11. Right click the “Circle” layer in the layers palette. Choose “Blending Options”.
12. Select “Stroke”. Adjust the properties to the following:
(For best effects, make sure the color for the stroke is a grey color. In this tutorial, Hex Color: #898989).

13. Click OK to close out and return to your image.

14. Select the Type tool. Add any text or images that you want in the content circle.

Step-By-Step Instructions:

1. Open a new document in Photoshop. 600×600 width/height allows a good workable canvas space.
2. Create a new layer. Name it “Panel”.
3. Select the Rounded Rectangle tool.

4. Make sure that the Path option is active. Radius should be set to “40″.

5. Draw a rectangular path.

6. Select the Path Selection tool.

7. Move your cursor over any point along the path, then right click. Choose “Make Selection” from the pop-up.
8. The “Make Selection” pop-up will appear. Click OK to accept default values. (Default Feather Radius should be “0″).
9. Select the Gradient tool.

10. Choose a gradient from light blue to white. (Hex Color: #cbcfdc – #ffffff).

11. Using the Gradient tool, drag from the bottom of the selection to the top.

12. Right click the “Panel” layer in the layers palette. Choose “Blending Options”.
13. Select “Drop Shadow”. Adjust the properties to the following:

14. Select “Stroke”. Adjust the properties to the following:
(For best effects, make sure the color for the stroke is a light color. In this tutorial, Hex Color: #8ca8bc).

15. Click OK to close out and return to your image.
16. Click Ctrl+D to deselect.

17. Select the Type tool. Type out any content that you want in your panel. Add any logos you have prepared.

Step-By-Step Instructions:

Creating a cool place holder for promotional banners

Create a rounded rectangle using rounded rectangular shape tool.

Double click the layer to open layer style window. Apply settings as shown.

Enable add to shape area from the top bar. Create two circles using elliptical shape tool.

Create a rectangle using rectangular shape tool.

Double click the layer to open layer style window. Apply settings as shown.

Duplicate the layer. Place on the other side.

Create a rounded rectangle using rounded rectangle shape tool. Apply same layer style.

Create a circle using elliptical shape tool.

Double click the layer to open layer style window. Apply settings as shown.

Duplicate the layer. From layer menu select layer style>>create layers. Select and merge all the resulting layers. Ctrl+Click the rounded rectangle layer thumbnail to get the selection. Press Delete. Apply drop shadow.

Create a circle using elliptical shape tool. Enable “Intersect shape areas ” at the top bar. Create a small circle using elliptical shape tool.

Double click the layer to open layer style window. Apply settings as shown.

Repeat the steps to create more intersecting shapes as shown below.

Create two small circles inside the blue circles. Apply same layer style. Decorate the place holder with few small multicolored circles.

You can always use this place holder to add animated promotional text.

Step-By-Step Instructions:

Creating a mechanical style content box for web site

Start by creating a new file with black as background color. Create a rectangle using rectangular shape tool.

Double click the layer to open layer style window. Apply settings as shown.

Create another rectangle inside first rectangle using rectangular shape tool.

Double click the layer to open layer style window. Apply settings as shown.

Create a rectangle using rectangular shape tool. Place it on the top. Enable “subtract from shape area” at the top bar. Create a circle using elliptical shape tool.

Apply same layer style we used for the first rectangle layer.

Duplicate the layer and scale down. Apply same layer style we used for the second rectangle.

Create a circle using elliptical shape tool. Apply same layer style. Duplicate and scale down.

Create a circle using elliptical shape tool.

Double click the layer to open layer style window. Apply settings as shown.

Duplicate the layer several times and place on the each corner of the rectangle.

Create a rounded rectangle using rounded rectangle shape tool. Rotate it and move this layer below all the layers in layer order in layer palette.

Create some bolts as shown.

Create two rectangles as shown in the image below. Apply same layer style.

Create two more rectangles to create joints between first two rectangles.

Similarly create some pipe connectors to join these parts with each other.

Select and merge all the layers. Duplicate the layer and change the layer mode to “Overlay”.

Step-By-Step Instructions:

Creating cool metallic photo frame

Create a circle using elliptical shape tool.

Press Ctrl+T. Right Click and select Warp. Select “Arch” style from the preset warp shapes. Apply settings as shown.

Double click the layer to open layer style window. Apply settings as shown.

Duplicate the layer. Remove layer styles. Enable “Exclude Overlapping Shape Areas” at the top bar. Create a circle using elliptical shape tool.

Similarly create more circles and place as shown.

Double click the layer to open layer style window. Apply settings as shown.

Duplicate the original shape layer. Move this layer above the layers in layer order in layer palette. Scale down and remove layer styles.

Duplicate the layer. Press Ctrl+T. Right click and select flip vertical, scale up and place as shown.

Select and merge all the layers. Double click the layer to open layer style window. Apply settings as shown.

Duplicate the layer. Scale down and place as shown.

Change the layer mode to “Multiply”.

Select and merge all the layers. Duplicate layer and change the layer mode to “Color Dodge”.

Using magic wand click inside the black area. Press Ctrl+J to copy paste the selection in a new layer.

Double click the layer to open layer style window. Apply settings as shown.

Insert an image of your choice. Move this layer right above the previous layer in layer order in layer palette. Press Ctrl+Alt+G to create a clipping mask.

For Use With Web Creation or Graphic Design

Step-By-Step Instructions:

Creating a logo with 3D metallic look

Create a drop shape using custom shape tool.

Press Ctrl+T. Right Click and select Warp. Select “Arc” style from the preset warp shapes. Apply settings as shown.

Double click the layer to open layer style window. Apply settings as shown.

Create another drop shape and apply same layer style.

Duplicate and merge both the layers. Scale down as shown.

Double click the layer to open layer style window. Apply settings as shown.

Create an ellipse using elliptical shape tool.

Double click the layer to open layer style window. Apply settings as shown.

Select and merge all the layers. Duplicate the layer and change the layer mode to “Multiply”.

Merge both the layers. Duplicate layer, scale down and change the layer mode to “Lighten”.

Ctrl+Click the duplicate layer thumbnail to get the selection. Create a new layer. Apply Black to white gradient. Change layer mode to screen for this layer.

Insert any relevant graphic and text to complete the logo.

For Use With Web Creation or Graphic Design

Step-By-Step Instructions:

1. Open a new document in Photoshop. 600×600 width/height.
2. Create a new layer. Name it “Peanut”.
3. Select the Pen Tool

4. Use the pen tool to create a peanut shape or curvy object for your interface.

5. Select the Path Selection tool.

6. Move your mouse over any point of the path, then right click. Select “Make Selection” from the pop-up.
7. The “Make Selection” box will appear. Click OK to accept defaults (default should be Feather Radius: 0).
8. Select the Paint Bucket tool.

9. Fill in the peanut shape selection with a grey color. (Hex Color: #d7d7d7).

10. Click Ctrl+D to deselect.
11. Select the Pen Tool. Draw a paths inside the peanut shape to make the windows of the interface.

12. Select the Path Selection tool again.
13. Drag the Path Selection cursor over both paths, then right click. Select “Make Selection” from the pop-up.
14. The “Make Selection” box will appear. Click OK to accept defaults (default should be Feather Radius: 0).

15. Click the Delete key.
16. Right click the layer “Peanut”. Choose “Blending Options” from the pop-up list.
17. Choose “Bevel and Emboss”. Set to the following:

18. Choose “Drop Shadow”. Set to the following:

19. Click OK to close out and return to your image.

20. Create a new layer. Name it “Screens”.
21. With the Screens layer active, select the Magic Wand tool.

22. Make sure the Tolerance for the Magic Wand is set to “32″ and the Contiguous checkbox is checked off.
23. Click in the Magic Wand tool inside the empty white holes within the peanut shape. Both holes should be selected now.
24. Select the Paint Bucket too. Fill in the two selections with black. (Hex Color: #000000).

25. Goto Select > Modify > Contract. Contract by “10″ pixels.
26. Make sure that Black is your foreground color and White is your background color.

27. Goto Filter > Render > Clouds Difference.
28. Repeat Step 26 once or twice to get a nice even set of clouds within your selections.

29. Goto Image > Adjustments > Color Balance. Slide the color sliders to get the color that you want. In this tutorial, only the Red slider under “Midtones” was slid completely to the right.

30. Click Ctrl+D to deselect.
31. With the “Windows” layer still active, click the “Add Layer Mask” icon on the layers palette.

32. Select the Gradient tool.

33. Set the gradient from Black to White.

34. Using the Gradient tool, drag from the bottom of the peanut interface to the top.

35. Create new layers and add any buttons or text where you want it to go and you’re done!

For Use With Web Creation or Graphic Design

In this tutorial, we will learn to create a nice looking car stereo like design.

Create this shape with rounded rectangle tool.

Apply these layer styles :-

Image after applying above layer styles :-

Duplicate the layer. Click on rounded rectangle tool. Select substract from shape area (-) and draw a rectangle as shown.

Click on polygonal lasso tool and draw this selection :-

Create a new layer. Go to Edit>stroke and fill the outline with 1 pixel wide black color.

Keep the selection active. Go to select>modify>contract and contract the selection by 1 pixel. Fill the outline with light gray color.

Again, create a new layer. Select the portion as shown by polygonal lasso tool.

Fill the selection with any color of your choice. The color is not important because after applying gradient overlay, it will be replaced :) Apply these layer styles in it :-

Image after applying above layer styles :-

Draw the white color circle with ellipse tool.

Apply same layer styles in it as we applied for the first layer.

Draw another small circle in it leaving the upper 2 pixels from the main circle and apply this gadient overlay.

Duplicate the both layers (buttons) to other side :-

Draw this tinny white color circle :-

Apply these layer style in it :-

Duplicate the circle as shown :-

Draw a line with rectangle tool, apply same layer styles but change the bevel & emboss settings. Change the emboss style to pillow emboss.

Rasterize the layer and draw selection with polygonal lasso tool. Press delete to create the button. Duplicate and place them as shown.

Draw another black color buttons and place it at both sides.

If you want, than you can add custom text in the screen. Our car stereo is ready

For Use With Web Creation or Graphic Design

In this tutorial we will learn to create a cool six button interface design. Final output can be seen below:

Draw a circle with ellipse tool.

Apply these layer styles: -

Image after applying above layer styles :-

Select elliptical marquee tool and draw a selection as shown.

Press delete.

Right click on the selection and click on Transform Selection.

Transform the selection as shown :-

Press delete again. You should have this type of image: -

Press control+j to duplicate the layer. Select elliptical marquee tool again and draw a circular selection as shown.

Press delete.

Draw this shape with rounded rectangle tool.

Apply same layer style in it.

Duplicate and place the shape as shown: -

Create a black circle with ellipse tool.

Apply these layer styles in it.

Image after applying above layer styles: -

Place it at middle of the shape.

Create this shape with pen tool.

Apply default inner shadow in it. Add bevel and eboss style as shown: -

Place it as shown :-

Duplicate and resize the middle layer and place it as shown: -

Create this shape with rounded rectangle tool. First draw a small rounded rectangle than press ‘+’ from the keyboard and draw another big rounded rectangle.

Apply similar layer styles: -

Create another rounded rectangle as shown: -

Apply these layer styles in it: -

After adding above layer styles, group and merge the two layers. Duplicate and place the layers as shown. Our design is finished

In this tutorial, we will learn to create a nice looking interface. Final output can be seen below:

Create a new file. Set the background to black. Draw this shape with pen tool. Fill it with #4A4A4A.

Apply Bevel and Emboss as shown.

Control click on its layer name to select it. Go to select>modify>contract and contract the selection by 7 pixels.

Create a new layer. Set the foreground to #10173B and background to #386DD9. Select foreground to background gradient to fill the shape.

Apply inner shadow as shown :-

Create another layer. Draw white color line with high featherd brush.

At the left side, draw black color line with rectangle tool.

Draw another light gray color line with line tool.

Now, merge these two shapes. Duplicate and place them as shown: -

Create another layer. Select 1 pixel wide pencil and draw these two lines first with black and second with light gray.

Also merge and duplicate these lines and place them as shown: -

Draw a white color circle with Ellipse tool at the top in the first layer.

Apply default Pillow Emboss  and default (black & white) gradient overlay. The button is ready.

Duplicate and place the button as shown: -

Create another layer. Select Pen tool and click on paths. Draw this straight line with pen tool.

Click on convert to point tool . Drag the right point slightly upward.

Set the master diameter of brush to 4 pixel. Right click on path with convert to path tool selected. Click on stroke path, select brush and click ok.

Apply default inner shadow and bevel & emboss settings.

Select this shape with polygonal lasso tool.

Create a new layer. Fill the selection with same colors as we filled the ‘Orb’ shape. Add 1 pixel wide black color stroke in it. Duplicate and place it to other side of the wire.

Type some text with any pixel font or font of your choice. Our design is completed.