Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Photoshop  Home Photoshop Web Layout Tech Menu
rss

Tech Menu

Author: Mark More by this author


Step 1:

Create a new image with the dimension 800 x 600. Change the background color to white. Press ALT+CTRL+0 to view the actual pixel of your work area. Create a new layer, Layer > New > Layer... (Shift+Ctrl+N). Now click on the Rounded Rectangular Tool image 1 using the setting below create the rectangle shown in the image.

image 2

image 3

Now right click on the layer, click Blending Options, and add the settings below.

Drop Shadow

image 4

Inner Shadow

image 5

Inner Glow

image 6

Bevel and Emboss

image 7

Gradient Overlay

image 8

Stroke

image 9

After that, click ok to add the settings. If you are having a hard time adding the setting above, click here to download the Gradient. With that added, your rectangle should look like the image below.

image 10

Step 2:

Hold CTRL and click on the rectangular layer to select it as shown below.

image 11

Now click Select > Modify > Contract... and change the contract by to 9

image 12

Create a new layer, Layer > New > Layer... (Shift+Ctrl+N). Click on the Gradient Tool image 13 and using the setting below create a gradient going from the bottom to top onto your new layer.

image 14

At this point, your image should look like the screenshot below.

image 15

Tip: Still on the same layer click Image > Adjustments > Hue/Saturation click colorize when the window comes and you can change the color of the gradient.

Press CTRL+D to deselect.

Create a new layer, Layer > New > Layer... (Shift+Ctrl+N). Now click on the Rounded Rectangular Tool image 16 using the setting below create the rectangle shown in the image and place the rectangle on the upper left hand side as in the image.

image 17

image 18

Now we need to add the Blending Option to the layer you just created. Right click on the small rectangular layer and click Blending Options

image 19

In addition, add the setting below.

Bevel and Emboss

image 20

Satin

image 21

Gradient Overlay

image 22

Gradient Overlay (gradient)

image 23

Stroke

image 24

Click ok to add the setting. At this point, your image should look like the screenshot below.

image 25

Step 3:

At this point, we will add the screws seen in the image above. Create a new layer, Layer > New > Layer... (Shift+Ctrl+N). Click on the Elliptical Marquee Tool image 26 . Using the setting below create a circle and place it at one of the ends of the small rectangle.

image 27

At this point, your image should look like the screenshot below.

image 28

Fill your selection (The circle) With a gray color: b3b3b3, we need to create the slice in the screw head. Click on the Zoom Tool and zoom into your image so you can have a better view of what you need to do. As shown below.

image 29

Now click on the Polygonal Lasso Tool  image 30 Press CTRL+D to deselect your selection. Using the Polygonal Lasso Tool select a tin line as shown in the image below and press the delete key on your keyboard.

image 31

Press ALT+CTRL+0 to view the actual pixel of your work area. Right click on the screw layer, click Blending Options and add the setting below.

Gradient Overlay

image 32

Gradient Overlay (Gradient)

image 33

Stroke

image 34

Stroke Gradient

image 35

After that, click Ok, to add the settings. At this point, your image should look like the screenshot below.

image 36

Now duplicate the screw layer and place it at the ends of the small rectangle. To duplicate the layer click to highlight the screw layer and click on Layer > Duplicate Layer...

Highlighted layer

image 37

Duplicate Layer

image 38

Your content box at this point should look like the image below.

image 39

Step 4:

Ok now we will add the wire coming out of the small rectangle. Go back to the main content box layer, and hold CTRL and click on the layer to select it as shown in the image below.

Highlighted Menu box

image 40

Hold CTRL and Click on highlighted layer

image 41

Click on the Rectangular Marquee Tool image 42 make sure that the Subtract From selection image 43  is selected. Use the Rectangular Marquee Tool and subtract from the selection as shown in the image below.

How to use Rectangular Marquee tool

image 44

  Subtract from selection result

image 45

Create a new layer, Layer > New > Layer... (Shift+Ctrl+N). Make sure this layer is under the main content box layer, so the wire is behind the box. Using the Arrows on your key board move the selection to the Left and down so it look like the screenshot below.

image 46

Fill the selection with a gray color: b3b3b3, and select the layer it should look like the picture below.

image 47

Now we need to add a blending Option to this layer. Right Click on the wire layer, Blending Options, and add the setting below.

Drop Shadow

image 48

Bevel and Emboss

image 49

Satin

image 50

Pattern Overlay

image 51

Your image should look like what I have below.

image 52

This part is a bit confusing so I will try my best to explain it. I need to make the wire at the bottom of the content box to end at the middle, and to add the cuts in the wire. So let us get started.

Hold CTRL and click on the wire layer to select it. As shown in the image below.

image 53

Click on the Rectangular Marquee Tool image 54 make sure that the Subtract From selection image 55  is selected. Use the Rectangular Marquee Tool and subtract from the selection as shown in the image below.

Subtract from selection

image 56

Subtract Result

image 57

Create a new layer, Layer > New > Layer... (Shift+Ctrl+N) and fill the selection with a gray color: b3b3b3. At this point, you image should look like the screenshot below.

image 58

Now using the style, you saved add it to this part of the wire. Now you should be able to move that end of the wire to the middle of the content box. It should look like the image below.

image 59

Using the Rectangular Marquee Tool image 60 delete the extra wire. Hold CTRL and click on the wire layer, which should look like the image below.

image 61

Click on the Rectangular Marquee Tool image 62 make sure that the Subtract From selection image 63  is selected. Use the Rectangular Marquee Tool and subtract from the selection to get the effect below.

image 64

Create a new layer, Layer > New > Layer... (Shift+Ctrl+N) and fill the selection with a gray color: b3b3b3 as shown below.

image 65

Click here to download the gradient to use on the wire. With the gradient added, you should have something like I have below.

Tech Menu  Tutorial: Final Result

Well that is it. Hope it came out to what you expected.



Author's URL: www.pixeldigest.com

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Tech Menu"