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”.

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:

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

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.

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

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.

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. 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.

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

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

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.