First I will gather the materials


Bug

Hydraulic Part

Mechanical parts

PCB Board

Save all those images or gather your own and I will walk you through the process I will take.


Start a new document and the size I will use is 497X512px. I chose a bigger size than the bug so I have some room to move some stuff around.


Open the bug picture and cut your bug out so there is no white space around it. I just used the magic wand tool set to 20 tolerance.

Once you do that place it in your new document

Next I am going to cut the bottom torso of the bug in half so I can spread it
apart and place the mechanical parts inside it.


I used the pen tool to make the selection

Cut that part of and paste it back in the document and place it similar to this

Do the same to the other side

I will go ahead and do the easiest stuff first.


Open your mechanical parts picture and put it in the document underneath all of your other layers and size it down to fit right in the opening we made.

Use an eraser brush to remove the excess of the mechanical parts image

Now I will open my hydraulic part and start cutting parts of it off to place where the bugs legs are.


Firs I will cut off the bottom portion of the hydraulic part

Next I will place it in my image and fit it over top of the top left leg. Before I size the part down I duplicated it and hid it for a backup copy to use on the other legs.

Next I will go ahead and place that part around all the legs.

Now I am going to copy the metal pole in between the other parts of the hydraulic image


Place that where all the arms go until they bend and then I will place the other
hydraulic part there

Now I will place the other hydraulic part after the metal bars I added

Now I will finish the legs up by adding the little metal parts again to make the feet of the legs

Ok done with that so erase all the legs off of the bug and move the bug layers above the hydraulic layers

Now open your PCB Board image and cut out parts of that to put over top of your bug so it looks electronic.

Once I placed the image I cut out above the head I used the ctrl+click on the layer icon to make a selection around the head and then got rid of the excess.

After that set the layer to soft light. I am just trying to give the bug a subtle
electronic look. Next do the same method with the wings. Here is what I got

My last final touch is to add a shadow right above the electronic parts inside the bug because the wings would technically have a shadow. I will just create a new layer above the electronic parts and use a soft brush to make a shadow


And Now you are done! Here is my final version

Start a 300X300px document

Make a rounded square in the middle of the canvas with the radius of 10px. Don’t fill up the entire canvas.

Add these layer styles to the box:

stroke

Color Overlay

Inner Glow

Now duplicate your layer so you have a backup

Just hide our original layer.

Create a new layer above that and drag that layer below or layer 1 copy.

Select your top layer and merge it down with the blank layer by using the keyboard shortcut ctrl+e

When you do this it will get rid of your blending options so its an editable image.

Next get your polygon lasso tool

Pick a corner you want to make look like it is peeling off and cut it out. I will pick the top left corner

Cut that out with ctrl+x and paste it back in your document with ctrl+v

Once you paste it back in, rotate it 180 degrees. With that layer chosen hit ctrl+t on your keyboard to transform it, right click on it and hit rotate 180 degrees.

Now you should have something like this

This isn’t right though, because if it was a sticker the back of it would not be the same as the front, so I will change this.

Hold down ctrl and click on the icon beside the layer and a selection should be made around the shape. Create a new layer and fill it with black.

Then add this gradient overlay to it

It will need a shadow since its folded over the shape. So do the same method we just did (hold down ctrl+click on the layer) then create a new layer and fill it with black again.

Add a gaussian blur to that by going to filter>>blur>>gaussian blur with these settings

After you do that use your keyboard arrows to move the shadow out from behind the corner and make the opacity 45%.

Now mine looks like this

Next I will add a rain drop to the icon by using the shape tool in photoshop.

So choose the raindrop

I added some little touches to the drop that you can see in this image

To make a reflection underneath select all your layers and duplicate all of them. Then merge them together as one image.

After that rotate it 180 degrees and drag it below the layer.

Next add a layer mask to the layer by going to Layer>>Layer Mask>>Reveal All or by clicking the little icon on the bottom of your layer’s palette.

Once you do that grab your gradient tool and drag from top to bottom and you should get something like this

So first save this image

Next size the image down to where its about 560px wide and create a new canvas that has that same width and a height of double what it is. My canvas size is 565X848px.

Next duplicate your image

Move your newly duplicated image to the bottom of the canvas and rotate it 180 degrees.

Then flip it horizontally

Create a new layer below that one

Hold down control on your keyboard and click on the little icon beside your duplicated layer so it creates a selection around it.

Fill the new layer with light to mid blue color

Click on your screen to get rid of the selection and choose your copied layer. Then grab your gradient tool from your tools palette. Make sure its linear and pick black to transparent

Add a layer mask to that layer by either clicking the little picture icon at the bottom of your layers palette or go to layer>>layer mask>>reveal all

Take your gradient tool and drag from the bottom up to reveal the bluish background we made.

Next we will make the water so create another new layer above the one we just used the gradient tool on

Use the control and clicking technique on the blue background to highlight around
the area.

Now in the new layer add clouds by going to filter>>render>>clouds

Now go to filter>>artistic>>plastic wrap

Use these settings

Now go to filter>>sketch>>chrome

Use these settings:

After that set the layer to overlay

Next select all the 3 layers of our water

Use control+t to transform the layers then right click on the canvas and click perspective

Grab the bottom right of that and drag to your right so change its perspective until you get your desired result.

Now to add a couple fish in the water. Grab this picture of a fish I got from
http://www.sxc.hu/index.phtml

Cut your fish out and place your fish in the water and size it down how you want

Create a new layer, grab your brush tool and set it to scatter. Use some white and blue colors to make the fish look like its coming out of the water.

Add some more fish and you should be done

Inner Glow

Color Overlay

Stroke

That should look something like this



Click Here for Full Image

After that set its opacity at 90% so we will be able to see our vector brushes through the menu.

Ok for a final touch, in a new layer add a white rounded rectangle at about 10px roundness across the top of the menu less than halfway down.



Click Here for Full Image

Now set its blending mode to overlay and its opacity to about 50%.



Click Here for Full Image

Make a new layer and grab the 3rd brush down in the set. Make your brush color white and put an accent at the bottom left of the menu. I changed the brush size to quite a bit smaller 140px. Add another one to the other side of your menu in the same spot except flip it horizontally.



Click Here for Full Image

Now I want to blend those in to look like they are sort of growing off of the menu so I am going to add some blending options on the left one first. Then I am going to copy its blending options and paste the on the other.

I am going to zoom in about 300% to get a good view of the colors I want to make it.

Add a gradient overlay:

My result:

After that right click on your layer in your palette and click “copy layer style”, then right click on your other layer that doesn’t have color and click “paste layer style” so now it should be the same color.

Start a new layer and grab the last brush in the set and set its size to about 350px and make another vector on the top left so it almost connects to the other

Add this gradient overlay

Now I am going to flatten the layer so it is an editable image. The easiest way I found to do this is make a new blank layer below the layer you want to flatten, right click the layer with our vector and click “merge down”.

I want to make this vector look like its connecting on the front of the menu and the rest of it going behind it so highlight this portion



cut this part and paste it back and make sure to move it back in its original place but behind the menu.

After that duplicate those two layers, flip horizontally, and move them to the right part of the menu or whichever side you need.



Click Here for Full Image

Now I am going to add my menu text.



Click Here for Full Image

Next I am going to add a gradient overlay to the text and a small outer glow.

Gradient Overlay

Outer Glow

Here is my result



Copy and paste that layer style on all the other text.

Now for a little touch on the text I am going to use our brushes to add small vectors coming off of each text using the same method we did earlier.

Here is my result on the first text:



Just add little variations on each one if you want, I added some on and tried to show a different technique on each one.

Here is my final result:


Click Here for Full Image

I hope you learned some simple techniques on to add some originality to your web menus and design using brushes.

Thanks for reading!

Here is the .PSD file..(right click and save as)

1024X768

Click Here for Full Screen


1680X1050



Click Here for Full Screen

1600X1024


Click Here for Full Screen

For this tutorial I am just going to show you how to make the wallpaper using a 1024X768 canvas since that is a pretty standard size. Also I will provide other sizes.

*Because of this website’s restrictions I can only have small images for my screenshots so I will include links to make the screenshots bigger to see the full size.


SO start a new document with the size of 1024X768 or whatever your monitor screen size is.





Make your background black and start a new layer.


Now we need to prep our pen tool so we can stroke the path we make with it.


So first click on your brush tool





Now choose a 2px regular brush and photoshop only says 1 or 3 but just key in 2px





Now for your brush color choose a bright bluish color, my color is #0078FF.


Here is the color sample:





Ok so now that we have our brush settings chosen we need to grab our pen tool





Make sure it has these settings








In your new layer, using your pen tool click at the top left corner of your document.


I will show you the rest of my steps in screenshots:


Click at the top left…




Click Here for Full Screen




Click Here for Full Screen




Click Here for Full Screen


After the last screenshot just click at the top right of your screen to finish the squiggly line.

Next right click on your line with your pen tool and click stroke path




After that right click on your line again and click delete path





Here is my final line:




Click Here for Full Screen


Now duplicate your layer by right clicking on it and choose duplicate layer




After you duplicate it use your up arrow key on your keyboard and move the new layer up about 4 pixels or 4 presses on the up arrow key.


Duplicate and move them about 8 more times until you have something like this:





Click Here for Full Screen


Next merge all those layers into one layer except the background and duplicate the new layer 2 times and move them up so that the spacing in between the lines is the same.


To merge those layers together in my version of photoshop I can either lock all the layers together and go to merge linked or I can merge them down one by one until they are one layer altogether.




Click Here for Full Screen


That is a pretty cool result I think but to make it even better there we can erase parts of each layer to give a cool look.


So now get a 65px soft eraser out and erase parts of each layer. I am starting on my top layer (the last duplicated layer) and erase in random areas.








Do the same thing on the other layers.. here is my result:





Click Here for Full Screen


Now merge all those layers together except for the background and add a drop shadow to it:





My result from that:





Click Here for Full Screen


Now I am going to duplicate that layer and resize it and move it around so that it looks slightly different and choose a gradient overlay in the blending options





To choose from the default gradients (which is what I used) click on the box where you see your gradient





After you move your other duplicated shape around erase the parts of it that are on top of the other so that it looks like it is going underneath the other layer. I used a 35px soft eraser brush to do that and here is my result:




Click Here for Full Screen


I think that is a pretty cool result. I am going to use the same process we did in the past steps and create 3 or 4 more lines, using different colors.


My result:




Click Here for Full Screen


So you see how you can achieve a really impressive effective with this simple method.

Now I want to add some bluish streaks to the entire image for more added effects.


Start a new layer and create a really rough rounded outline around your image with the pen tool and make it a selection by right clicking on it with your pen tool and clicking “make selection”:





Click Here for Full Screen


Now choose your gradient tool





With these settings











The blue color in the screenshot is #0072FF but you can just use whatever blue you want.


Ok now that you have all that chosen take your gradient tool and drag it in areas all around the outline and in it as well like this:





This is the left corner of it.. Here is the rest




Click Here for Full Screen


After you have done that just click on your screen with your marquee tool to get rid of the outline and go to motion blur on your menu by going to filter>>blur>>motion blur.


use these settings:





Now move that layer below all of your others and that is it.


One final touch I did was duplicate the layer we just made, rotate it, and set it above the other layer and change its blend mode to vivid light.


Here is my final result:

1024X768


Click Here for Full Screen

1680X1050


Click Here for Full Screen

1600X1024


Click Here for Full Screen


I hope this tutorial has shown you some interesting techniques that you can work into a project you may have. Thanks for reading!

First I am going to start off wit a 300X300px canvas with a white background.

Before I get started I am going to activate my rulers by using the key combination ctrl+r on a windows keyboard or you can go to view>>rulers on your top bar.


Once you have this activated you will see rulers on the top and left side of your canvas.

I am using guides so when I draw my main circle it will be even on the canvas. The cool thing you can do with the rulers activated is being able to drag guides to any part of the canvas.

I am going to drag my first guide from the top ruler by clicking on the ruler and pulling down toward my canvas. When you do this a line will come down. If you drag it close to the center of your canvas the guide will automatically snap to the center.

**If your guide does not snap to the center then the snap feature is not activated. Just go to view>>snap.

Now drag a guide from the left ruler to the center. Then drag guides to each side and to the top and bottom of your canvas.

Now your guides should look like this:

Make a new layer and grab your elliptical shape tool

Draw a black circle or whatever color you want (since we will be changing that with blending options anyway) to fill up the entire canvas.

As you probably noticed the guides helped the shape easily stay within the boundaries and should be an exact circle.


Now add these blending options by double clicking on your layer or right clicking and going to blending options:

Outer Glow:

Gradient Overlay:

In choosing your gradient colors use these colors and settings (pull the arrow over the white color to the position in this screenshot).

On this next step we need to make a smaller circle in the center of the one we just made. I am going to drag my current guides that are on the left, right, top, and bottom into different positions so that I can make a smaller circle. I just eyeballed it to get what I wanted.

Now in a new layer draw your other circle using black again within these guides:

After that use this gradient overlay on the new circle:

Here is my result from that:

OK, now one more circle and we are done with circles. So yet again I am going to move my guides to be able to put a smaller circle within the previous one.


Start a new layer and draw another black circle.

We are done with the circles and the guides as well so just drag each guide off the screen.

Add these blending options to your new circle:

Outer Glow:

Inner glow:

Gradient Overlay:

Now we are getting somewhere. See how this makes the button look like it has depth.

Time to add a play button. This will be simple just using our shape tool. In a new layer draw a black rectangle in the middle of the new circle and turn it so that it looks like a play button.

Create another new layer. This layer will be for the web 2.0 feel. Change your color to white and make a circle overtop of your blue one

I am going to use the pen tool to cut off the part of this white circle I do not
need.

Get your pen tool

Click on the spot I am going to show in the next screenshot and while holding down shift (to keep a straight line) drag down to that spot.

Then click toward the center and drag diagonally toward the bottom right like this:

Now for the last click:

Then connect the rest of the line around below the circle:

Ok all we have to do now is right click on that line using the pen tool and click make selection.

Now with the selection just hit delete on your keyboard and you should have something like this

Next I am going to add a layer mask to our new layer. To do this I am going to click the little icon at the bottom of my layer palette.

I pointed to it with the red arrow. Or you can go to Layer>>Add Layer Mask>> Reveal All on your main photoshop menu.

After you have added your layer mask get your gradient tool from your tools palette.

*NOTE: After making this tutorial I added this little note in because I left out the settings you need to have on your gradient tool.

Make sure you have dither and transparency checked as well.


We are going to drag from the bottom up while holding down shift to keep a straight line to make the layer faded, but we still want to be able to see the curve at the bottom.

Result after that:

Now I am going to add lines to separate each part of the button. This is a really easy step. Just get your line tool out which is located in the same area as your shape tool.

Set its weight to 2px and use the color black. Start a new layer underneath our 3rd blue round circle layer. Draw one side of an X across the whole canvas. Hold down shift again while doing this to keep the line straight.

Do the same thing again to finish the X

Next, use your eraser brush to erase the excess of each line that are outside of the main circle layer. I am just going to use a regular eraser brush.

To make these lines look embedded into the button I am going to add a simple drop shadow to each line with these settings:

Your result from that step should look like this

This tutorial is pretty much done. I am going to add a fast forward and rewind buttons by using my shape tool to make small rectangles on each side. Also I will add a stop and pause button also using my shape tools. This step is very simple so I will not go over it.

Final Result:

Thanks for reading my tutorial. You can definitely expand on what I have shown you and design some really cool buttons for different uses. If you have any questions or suggestions please leave a comment. Thanks!