Smooth Curve Interface

Step 1

First let's reset your colors. Create a new document

Width: 450 Pixels
Height: 200 Pixels
Background: White

Step 2

Duplicate the current layer and name it "Base". Make sure you are on the "Base" layer, take the Rectangular Marquee Tool and we are going to make the selection for the base of your interface. You want to make a selection like what we've shown below.

The basic technique for making this selection is to first make selections for the boxes that are coloured in the image below. You can select multiple areas and add onto your initial selection by holding SHIFT and making the selection.

Step 3

Now we are going to make cutout selections inside the Base interface. The selection from step 2 should still be selected.

The technique for making the cutouts is to hold ALT while making the cutout selections. The parts you want to make cutouts for are the coloured ones shown in the image below.

Step 4

Now that we've got the Base selection for your interface take the Paint Bucket Tool and fill it with black(#000000).

Step 5

We are going to create the smooth corners now by applying a Gaussian Blur to the Base layer with Radius: 8.8

You can play around with the radius number, generally the higher the radius number the more rounder corners you'll get.

Step 6

Let's get rid of the blur now by bringing up the Levels Box

Note: Make sure the preview checkbox is checked.

What you want to do is drag the far Input Level(circled RED in the Levels mouseover image) triangles on either side of the bar towards the center until you see the blur slowly disappear.

Step 7

Now because the base is all in one big layer we have to create a selection for our new smoothed curve base. We do this by first going to the Channels tab which is by the Layers palette. Hold CTRL and click on anyone of the channels that is listed in the tab to create a selection.

All the white is selected right now but we want only the black so lets Inverse our current selection so that only the black is selected.

Step 8

Go back to the Layers tab and create a new layer named "Interface".

Now take the Paint Bucket Tool and fill it with black(#000000) again.

Note: Make sure Anti-aliased box is checked

Now you hide the Base layer by clicking on the eye to the left of the layer.

Step 9

Lets add style to this Interface layer now by editing this layer's Blending Options. We want to add the following styles:

Outer Glow:

Inner Glow:

Gradient Overlay:

and Stroke:

Step 10

Create a New Layer named "Blue Panel" and move it below the "Interface" layer by clicking and dragging the layer down below the "Interface" layer in the layers palette.

Step 11

Let's fill the top cutout now by holding CTRL and clicking on the "Interface" layer so that a selection of the Interface is made. Once again we want to Inverse this selection so we have the cutout parts selected.

Step 12

Still one problem though, the white background and the bottom cutout are still selected. Let's get rid of them by taking the Rectangular Marquee Tool, holding ALT and deselecting those areas. Your selection should look like what we got below now.

Step 13

Take the Paint Bucket Tool and fill the top cutout with black(#000000).

Step 14

Open the Blending Options for the "Blue Panel" layer and apply a Gradient Overlay.

Step 15

Repeat steps 10-13 but instead of making the panel for the top cutout you want to make the panel for the bottom cutout and name the button cutout layer "Green Panel" instead of "Blue Panel.

Open the Blending Options for the "Green Panel" layer and apply this Gradient Overlay to the "Green Panel" layer.

Step 16

The final finishing touches we are going to add is a shine to the coloured panels. I'm going to add the shine to the "Green Panel" first then you can use this technique to apply it to the "Blue Panel".

Make sure the "Green Panel" is the active layer and then hold CTRL and click on the layer. The "Green Panel" should now be selected, take the Pen Tool.

Settings:

To the left and middle of the "Green Panel" make the first node by left clicking.

Then about halfway through the "Green Panel" make another node but this time click then drag while creating the node a little to the right and down so the line is curved upwards.

Finally make the final node by clicking to the far right of the "Green Panel" and dragging it a little to the right and up but make sure you position the node a little higher then the other nodes to ensure you get a nice curve going down.

We need to close this path now so simply click around the top and work your way back to the first node to complete the path.

Step 17

We need to make this an actual selection now so go to the Paths Tab and while holding CTRL + SHIFT + ALT click on the "Work Path" under the tab. Now the selection for the shine should be made.

Reset your colors, create a new layer named: "Bottom Shine", and then take the Gradient Tool with the Foreground to Transparent preset and click and drag down to create the shine. You may have to try multiple times to create a nice shine effect.

Step 18

Repeat: 16-17 but instead make the shine for the "Blue Panel".

Final Product

That's it, hope you enjoyed this tutorial!

I also wished that you were able to learn something useful in this tutorial. This tutorial isn't just limited to interfaces like that, you can use these techniques you learn and apply them to different graphics and create different types of "interfaces". Below are some examples of final products. Buh Bye!