Futuristic Navigation

Create a new document 800×230 pixels with any color background i find a light colored background works best. Now theres 2 ways you can rough out the main shape, one is using a rectangle and using the warp tool and the other is the pen tool, for this tutorial il use the pen tool due to the fact that not all versions of photoshop have the warp tool. So using the pen tool create this shape.

Now duplicate this layer, flip it and place it the other side, this way both sides are the same. (merge both layers when done).

Now add these layer styles to your main shape, also label your layer “main shape”.

You should end up with this.

Now dudplicate your main shape then drag the duplicated layer under your original layer, rename layer to “shape2” remove all layer styles apart from the gradient overlay and the drop shadow, leave the drop shadow settings as they are but change the gradient overlay to the settings below.

Now select the move tool and using the keyboard arrow keys press down arrow 17 – 20 times, now press ctrl + T and move the sides only inwards reducing the length, you should end up with this.

Create a new layer inbetween your shape layer and shape 2 layer, name this layer “blue neon” with the pen tool or polygon lasso tool create this shape, (please note some of my layers are hidden to show you the shape)

Now add this layer style to your blue neon layer.

You should end up with this. (no hidden layers)

Now duplicate your main shape layer (keep on top of other layers), delete all layer styles and make sure it is the color white, set layer opacity to 50% and blending mode to soft light, press ctrl + T to transform the shape, just reduce the size and move up to create a highlight.

Now using two 1 pixel lines and the colors shown below create a divider.

Add a outglow using the default settings, you should end up with this.

Now create a new layer and create a black circle like the image below.

Add these layer styles to your orb.

Now add a small highlight using the elliptical marquee tool. You should have something like this.

Repeat the steps listed above to create more buttons.

Now add your button text and logo’s

With abit more inspiration you could even animate the glow

CD & CD Jewel Case Tutorial

Create a new document 600×350 pixels with a background color of #232426. Select the rounded rectangle tool and create a box to the right of the canvas fill with the color #d2c79a.

Add these layer styles to your box.

Your image should now look like this.

Duplicate your box and move it over to the left, placing them side by side.

Now create a egg shape with the “elliptical marquee tool” fill with any color, place the shape similar to the image below.

Now we need to select our egg shape layer whilst holding down the ctrl button to make a selection, click our left rounded rectangle layer and hit the delete key, hide your egg shape layer for later use. Your image should now look like this.

Now create a new layer underneath your “TWO” rounded box layers, select the rectangular marquee tool and draw a square behind your left box fill with the color white.

Set the white boxes layer opacity to around 8%. Now create a new layer above your white box layer, select the “polygonal lasso tool” and draw this shape at the top of the right rounded box. (see image below).

The color i used for the shape is #989070. Duplicate and flip your shape and place at the bottom of your box, also add a small drop shadow.

Now create another layer above your rounded boxes, goto your custom shapes libary and select this shape.

Draw out the shape inside one of your boxes, fill with the color #c7bd93.

Duplicate the shape layer and move across so it matches in the other box.

You will notice the shape on the 2nd box overlaps where you cut out the egg shape. Repeat the steps at the begining of the tutorial using the egg shape to remove the shape from overlapping. For this next step you will need some grunge brushes, using the color #938b75 randomally add some grunge effects to one side of the case. Set the layer opacity to 38% and blending mode to difference. You should have something like this.

Duplicate your grunge so it matches on the opposite side. Again you will have to use your egg shape where the grunge overlaps.

Now its time for our cd, Draw out a circle on the right side of you box fill with the color #8d512d.

Now add these layer effects.

You should have something like this.

Now find a picture of some sort, this could be a picture of band or a logo, place it over the cd and set the layer mode to linear dodge and opacity to 20%. Also add 2 cirlces in the middle of your cd, the smallest one being black and the biggest one being white, set the white circles opacity to 20%. You should end up with this.

Also add some text to your cd and a white band going around the edge. The font i used for the text is “base02”.

Thats it all done, Now build the case up abit more by adding a few extras here and there.

Techy Navigation Bar

Create a new document 600×150 with black as your background. Select the “rounded rectangle tool” and draw out a rectangle fill it with the color black also, now add these layer styles.

You should now have something like this.

Now create a new layer above your rectangle then select the pen tool and create a box like this.

Right click and goto make a selection. Then fill with the color white.

Select your rectangle layer whilst holding the “ctrl” key on the keyboard now click your white box layer that you created in the last step. Goto “select > inverse” then hit the “delete” key on the keyboard, you should be left with this.

Add this layer style to your white box and set layer opacity to 65%.

You should now have this.

Select the type tool personilze your navigation with the sections you require. The colors ive used are #ffffff & #d9ff3f.

Select the type tool once again and just type out some dash’s ( ——– ), Now goto “edit > transform > rotate 90 cw” place one of these next to your text.

Now draw a small white box above your text.

Now add a number inside you white box.

Now select the type tool again and whilst holding shift press “¬” key, on my keyboard its under the “esc” key and above the 2tab” key. Add this symbol to the right of your text.

All done.

Pump Up The BASS!

Open up adobe photoshop with the image you want to animate.

Now select the pen tool OR your desired cutting tool and draw around each speaker, i find it best to use the pen tool.

Copy your speakers twice onto a new layer, label them speaker 1 and speaker 2.

Select the speaker 1 layer goto “filter > blur > motion blur” dont blur by more than 10 pixels.

Press ok to apply the blur, repeat this step for layer speaker 2 but only this time CHANGE THE ANGEL of the motion blur. Once you have blurred both speaker layers hide them by clicking on the little eye icon. Now goto “file > edit in image ready”

If its the 1st time using image ready, your animation window may not be open so goto “window” at the top and see if there is a tick next to “animation”. Your layout should look like this, althou ive moved the 3 boxes together as these are the only things we need to use, ive also labelled the icons we will be using so use the below image AS A REFERENCE.

You will already have one frame in the animation window, we need to duplicate this “4” times so click layer one then click the duplicate frame button 4 times. You should now have 5 frames.

Select frame 2 and unhide speaker layer 1.

Click layer 4 and unhide speaker layer 2.

Now on layers 2 and 4 click where it says “0 sec” there should be a little black arrow. On layers 2 and 4 set the delays to 2.0 sec.

Now you can click play at the bottom of the animation window to see what it looks like. Heres how mine looks.

You can adjust the rhyem of the bass by changing the delay time and adding more frames. You could even turn it into a signature.