Blue-Pink MPI(Exclusive Tutorial)

Oh wait, this is a Photoshop tutorial...excuses?? *puts headphones aside*.

Actually no, keep that music to the max, you're going to need it for this tut

This is what we will be creating:

Right. Now take the usual chips&chocolate&coke, cause we've got work to do :)

Here we gooooo!

In this tut we'll learn to create a media player interface in bold, modern colors :) Cause...you know, what's the point in being a good interface designer if you don't go with the times and color trends?

Step 1

Make a new document, say 450x450 pixels. Fill the background with a dark shade of blue, I chose for mine #02051e.

Create a new layer,name it "Center Orb" Now, take the Elliptical Marquee tool and holding down Shift key make a perfect circle, about 230px in diameter.

Set your foreground color to #48b4ff and your background color to #071947. Now take the Gradient tool (G), set it to Foreground-to-Background and to Radial Gradient, and positioning your cursor about a fourth of the way from bottom to top drag for about 150px. Like this:

Make a new layer. Right-click on it in the layers palette--->Create Clipping Mask. Take the Brush Tool (B), set it to a round, soft, approximately 200px in size.

Set your Foreground color to #63e0ff. With your newly created clipping mask as your "working on" layer, click once so that the brush's center is about in the same place where your gradient originated. Click once.

Now merge it with its parent layer.

Ctrl(Cmd on Mac)+click on your "Center Orb" layer thumbnail in the layers palette to obtain its selection. Now go to the bottom of your Layers palette and click the "Create new Fill or Adjustment layer" icon.

Go to "Hue/Saturation and add these settings:

Mmkay...mooo-vin' on.

Then create a new layer above all others and name it "Side Shadows".

Obtain a selection of your Orb Base layer. Now, take the Elliptical Marquee Tool (M) and set it to "Substract from Selection" . Now using this tool create an ellipse that would "eat" the center of the selection, so that only two half-moons are left on either side. Like this:

>Now set your Foreground color to #0b2668 and your background color to #040f37 and using the Gradient tool (G)? (Foreground to Background, Linear Gradient) drag from the bottom to the top of the half-moons selection. Deselect

This is what your image should look like till now:

Now, create a new layer on top of all others, and name it "Spiderman Pattern". Go to http://s0nkite.deviantart.com/gallery/#/d2xneb4 and download his awesome pattern.

Load the pattern in Photoshop and obtain a selection of your Orb Base layer. Fill this selection with any color on your "Spiderman Pattern" layer. Lower the layer's Fill to 0%.

Then double-click on the layer to enter its Blending Options. Click on "Pattern Overlay" and add these settings:

Now click "Gradient Overlay" and give it these settings:

Goooood.......now go, open the window and take a deep breath

...okay, break over, back to work, chop-chop

Now let's give our player some glasses shall we?

Merge all your Orb layers, so all you have in your layers palette is the Background and the Center Orb layers. Kaaaayyy....

Get a selection of your "Center Orb" layer. Make a new layer, name it "Ring Back 1" and then move it UNDER your Center Orb layer.

We are starting to create the border :)

Now, go to Edit--->Stroke, choose a dark desaturated blue as your Foreground color (I chose #2c3242) and setting your Stroke to "Center", give your selection a nice 15 pixels belt, hahaha >

Now go to the layer's Blending Options and give it these settings:

Gooood....now your player looks like a Spiderman with pink wig, right?

Well let's not keep him like that.....Make a new layer, name it "Ring Back 2" and move it under your "Ring Back 1" layer. Set your Foreground color to #2c3242.

Take the Ellipse Tool (U), set it to Shape Layers and holding down Shift, draw a perfect circle on your layer, so that it is some 20 pixels larger than what you drew till now. Like this:

Now give it these settings:

Awesome!

>Now your thingy should look similar to what I have here

Okay, let's deal with some electric blue business

Don't you just LOVE electric blues?

Kay, so lesse.

Grab a hold of your "Center Orb" layer and let's tinker with it

Get into its Blending options and add these settings:

M0ar awesomesauce coming this way! =D

Again ...get a selection of your "Center Orb" layer... hahaha....we do that a lot, don't we? xD;

Oh well, do it anyway, it's useful you'll see :)

Get its selection. Create a new layer on top of it, right-click on the new layer and choose "Create Clipping Mask"/p>

Set your Foreground color to #596dff and give your selection a Stroke of 3 pixels, Center.

Set the layer to Linear Dodge and lower itse Fill to about 70%.

Next, go to Layer-->Layer Mask--->Reveal All.

This will create a mask for our layer

Take the Gradient Tool (G), set it to Foreground to Transparent, set #000000 as your Foreground color, and the Gradient to "Reflected Gradient".

Next....click somewhere at the middle of your orb and drag vertically for about 100px. Do the same thing, only drag horizontally for about 100px, starting from the center of your orb.

Now you'll ask what was this good for, there's not much difference...well it's the slight difference that sets apart a blocky, beginner design from a subtly, professional one

Now we don't have that solid color circle anymore, but instead we have 4 areas or more intense "source of light".

Like this:

Moooo-vin' on.

Let's give our interface some lips gloss...err...glow xD

Lesse. Make a new layer (clipping mask) just above your "Center Orb" layer. Name it "Glow 1" Take the Elliptical Marquee (M) tool and draw a vertical ellipse inside your Center Orb, like this:

Set your Foreground color to #91b0fe. Take the Gradient tool (G), set it to "Radial Gradient" and position your cursor at about 2/3 height of the ellipse. Drag to its bottom.

Deselect, set the layer to Screen and lower its Fill to 29%/p>

Now make a new layer on top of your last and name it "Glow 2" Take the Elliptical Marquee tool (M) again and draw another ellipse, smaller, this time a horizontal ellipse, close to the top like this:

Set your Foreground color to #596dff and fill your selection with it. Set the layer to Linear Dodge and lower its Fill to 30%.

Now, your Interface should look..somewhat like..this:

Now let's work to get a biiiit more shine shall we? =D

Make a new layer, on top of your last two glow layers. Name it "Glow 3". Set your foreground color to #596dff and take the Gradient Tool (G), set it to Radial Gradient and positioning your cursor somewhere about 60px from the top of the Orb, drag for about 80-100px.

So that you get a color spot blur, like this:

Set your layer to Color Dodge.

Now, we'll be adding the pink glasses

So lesse.

Make a new layer on top of aaaall your other layers. Name it? "Pink Glass Bottom" . Take the Ellipse tool and set your Foreground color to #ce1586. Create an ellipse that stretches horizontally over the bottom of all your Orb and Rings layers, like this:

Now get a selection of your "Ring Back 2" layer, press Ctrl(Cmd)+Shift+I to invers selection, press Delete.

Now set your layer to Screen blending mode, and lower its Fill to 50%. Your image should now look somewhat likkkkkeeee...this! =D

Step 12

Now make a new layer on top of your? "Pink Glass Bottom" one, name it "Pink Highlights".

Take the Line Tool, set it to Fill Pixels, and set your Foreground color to #fae0f9. Now get a selection of your "Pink Glass Bottom" layer and, working on the Highlights one you just created,? draw two parallel lines, like this:

Don't Deselect!? Set this layer to Hard Light and lower its Fill to 25-30%.

Now with the selection still active, go to Filter--->Distort-->Spherize, use Normal and a value of about 60.

Mmmkay...we're NOT done with it yet

Grab the Elliptical Marquee tool (M). Set it to "Intersect With Selection".

Then go and start drawing a horizontal ellipse to intersect with your existing selection. Like this:

Kay! Good!

Now take the Gradient tool (G), set it to Foreground to Transparent, Linear Gradient, and with the same #fae0f9 color as Foreground , drag from top to bottom of your selection.

Set your layer to Hard Light and lower Fill to 40%.

Click OK, and now you CAN deselect, yey, joy!

Step 13

Now make a new layer above all others, name it "Border Pink Glass" and then get a selection of your "Pink Glass Bottom" layer.

Set your foreground color to #2c3242 and give it a Stroke of? about 6 pixels, Center.

Afterwards, give it these settings:

Step 14

Okay. Now duplicate all your Pink Bottom Glass related layers (you should have 4 of them), duplicate them and link them.

Then go to Edit-->Flip vertical and move it to the top of the orb, going a bit over the top of the largest Ring.

Delete the two Highlights copy layers. Using methods similar to before, create two new highlights, with the correct "direction" and positioning for this Pink Glass.

Your interface should now look somewhat like this:

Step 15

Good job!

If you want now, you can take all your Pink Glass-related layers and shove them all in a Group, to un-clutter a bit the layers palette, okay?

Now, let's move on, we're not done yet

Let's take care now of the two "Glasses", okay?

What will go in those...well what traditionally are the two most important things: name of the song, and the timer.

Let's look for a nice font with beautiful curves...well I chose the free font "Good Times" which you can download here: http://www.dafont.com/good-times.font

Now, set your Foreground color to #8cd1fd and make a new layer that is placed in between the "lens" of the pink bottom glass and its highlights layers. That means your newly-made layer will be the first layer above the pink glass bottom, kay?

Now take the Type tool (T) and type..the name of a song you like. I chose Avril Lavigne - Alice...haha =P

Mmkay. after you typed that, get into the layers Blending options and add this stuff here:

Now click OK.

Step 16

Goooood....now let's give our text a more snazzy look..if we're doing let's at least do it in style!

Lesse...click on your Text Type tool (T) and in the top-right part of the screen/tools you'll see a little icon named "Toggle the Character and Paragraph palettes"

Got it? Good.

Click it and add these settings in the pop-up that ..pops..up...hahaha xD

Duplicate your layer and move the duplicated layer to the top "glass" just between the glass layer itself and the highlights ones....and add some numbers in there. I added 01:29....that's our song timer :)

If needed, you can increase the font size slightly.

Now go back to your "Song Name" layer and right-click on it in the Layers Palette, Rasterize Type. The name has probably gone waaaay out of the margins of the "glass", so let's do this sneaky trick:? ------->after you've rasterized the type layer which is the song name, go to Layer--->Layer Mask--->Reveal All.

Take the Gradient tool (G), set it to Black-to-transparent, and place the cursor just a bit inside the leftmost corner of the "glass" and drag for just...10 pixels or something. Do the same for the right side

Now your image should look somewhat like this:

Step 17

Mooooo-vin' on.

Now let's take care of the equalizer hehehehe

Bet you've been waiting for this one

Set your Foreground color to #1a49a8.? Make a new layer between your Orb layers set and the Pink Glass layers set. Now make a vertical ellipse with the Elliptical Marquee Tool (M), like this:

Go to Edit-->Stroke, use a value of about 14 pixels and Center.

Then deselect.

Take the Rectangular Marquee tool (M) and delete from the top and bottom of the oval shape so you are left with two ...half-moons..kind of thing.

Now add your layer these settings (Attention! for Gradient Overlay, it is the same exact gradient from the previous step, only instead of #ffffff add #525eed) :

Step 18

Now take a 4 pixels Eraser (E) and erase (hold Shift key down to get perfectly straight erasings) so you create "tabs". Make larger "tabs" at the bottom, and make them smaller&smaller to the top.

To simplify this, and get exactly the same tabs on both sides, drag with the eraser from one sideee....to the otheeerrr...

Hehehe :) Now your thingy should look somehting like this:

Step 19

Kay, now our equalizer layer, go to Layer--->Layer Mask-->Reveal All.

Taking the Gradient tool (G), set to Black-to-transparent, drag a little bit....about 80 pixels, from the top of the equalizer downwards

This will fade the top part out a bit, so it looks more "real"

Now your interface should look somewhat like this

Now duplicate the "Equalizer" layer and transform the copy into a smaller version, moving it then a bit up and to the center. Keep the layer styles EXCEPT the Drop Shadow. Hide the Drop Shadow effect.

Lower the layer's opacity to about 75% and on the Layer Mask drag again with the Gradient Tool (G), to create a new top fade-out....for the sake of diversity hahahaha.

Step 20

Now take a short break...your head will clear and my hands will rest a bit from typing xD

Kay, break over.

Mmkay, now let's make'em buttons. Set your Foreground color to #1f58bc. Now take the Ellipse Tool (U) and set it to "Shape Layers"

Make a new layer on top of your Orb layers set. Take the Ellipse tool and holding Shift down create a perfect circle of about 30 pixels in diameter

Then make a new layer above it and right-click-->create clipping mask.

Now remember that "Center Orb" layer and all its clipping masks?

Go, Ctrl(Cmd)+click on the layer and all its clipping masks and link them as layers. Then with them selected still, drag them all to the "Create New Layer" icon at the base of the layers palette to duplicate them.

Now merge the "copies" into a single layer. Make sure you merge THE COPIES and not the original "Center Orb" layer and its clipping masks, those have to remain untouched in their place.>

Now drag the newly-merged layer so that it becomes a clipping mask of the blue circle we just created a bit ago.

Transform it to become smaaaaall, to fit in that circle exactly. Good...that's letting us "elope" the ordeal of creating a fresh new orb hahaha, we tricked it!

Step 21

Mmkay now don't think it's over. Remember the timer text layer? Duplicate it..for convenience...and then bring the duplicated layer as a new clipping mask of our button. Lower text size, keep the Blending Styles intact and, erasing the time, write the "||" symbol, for "pause"

Oookay...pause button is almost done.

Now set your Foreground color to #2f3753 and making a new layer over the rest of the button's layers, obtain the button's selection and go to Edit--->Stroke and give it a 4px, Center.

Good. Now add these layer styles:

Step 22

Alllmost done for now...patience...

At this stage your interface should look somewhat like this

Group all your Button layers in one group, name it Button..kay?

Now duplicate the Group and move it symmetrically on the other side of the interface. Copy the layer style (right-click on layer--->copy layer style) of the text "||" pause layer, discard it afterwards, make a new layer in its stead and right-click on layer-->paste layer style. Hide the Outer Glow of the layer.

Then take the Rectangle tool (U) , set it on Fill Pixels, set your Foreground color to #67b9d3 and draw a perfect square.

This will be the "Stop" button...although why would we ever want to stop the music heh?

Flatten the Group and flip the layer horizontally, for kicks...errr...I mean, more realism

Step 23

Kay, this is one of the last steps for this part.

Let's do some glowy stuff, kay?

Take a 6px hard edged brush (press B for Brush Tool or click it in the tools palette) and make a #e00eb6 colord circle, to which you will add these settings:

Then make a new layer on top of it and taking a 20-30 pixels brush, this time a soft one (hardness set to 0%) click on the new layer once right above the tiny ..thingy...we just made.

Set this layer to Linear Dodge. Then link the ..thingy...and the glow hahaha...and duplicate them 5 times, moving them around so that you get something similar to this:

Step 24

Okay, for the blue-lovers, I have an extra tip, to turn these glowy stuffiez blue

Select them all, together with their glows layers, and then on top of them make an adjustment layer of Hue/Saturation, setting Hue to -89 and Saturation to +100.

Now this is what it should look like:

Step 25

Just a bit more and we are done xD

Now make a new layer just above your "Ring Back 2" one. Kay...soooo....take the Lasso tool, (L) and set it to "Intersect with Selection".

Go to the top-left of the selection, about...where 10 o'clock would be, and make a trapezoidal selection, with the base being the exterior of the selection.

Like this:

Fill it with a #4663b1 to #161116 Linear gradient, with the lighter color at the base.

Step 26

Create a new DOCUMENT. Yes, document this time, not layer. Its dimensions must be 5px by 5px.

...don't look at me like that, yes you heard right, 5x5 pixels. Zoom in to 1600%.

Take the Pencil Tool (B), choose a square brush of 1px and draw, with the foreground color set to #000000, draw from the top-right to the bottom-left a diagonal, like this...(the image is at 1600% zoom so you can see the details.

Then go to Edit--->Define Pattern.

Name it "Scanlines" .

Now close the tiny document and go back to your Interface one.

Step 27

Remember the trapezoidal selection? That we filled with gradient?

Okay, now enter its Blending Options and add these settings:

Click OK.

Now get a selection of your trapezoidal shape and create a new layer.

Go to Edit-->Stroke and give it a 2 pixels Center stroke.

Then deselect, take the eraser tool and erase slowly the "base" of it, we won't need that. Then enter its Blending Options, add this:

Duplicate all the layers of the trapezoidal vent/thingy, and merge the copies into one single layer.

Now go to Edit; Flip horizontally, and then move that little bugger symmetrically?to the right of the interface.

dundundun,you are done

Now your Media Player Interface should look somewhat like mine :)

Of course, there are LOADS of stuff that can still be added, but hey....I want you to get through this tutorial alive, not with the brain on fire heh

Maybe we'll develop it more in a future tutorial

Let me know if you have any difficulties or need extra explanations

Have fun, and don't forget to give me your feedback

Final