Super Widget Interface Tutorial

Before we begin, I would like to thank you very much for trying this tutorial. Your continued support will allow me to create more incredible and useful tutorials for you to benefit from. When you complete this tutorial, I would appreciate any feedback you wish to give me. PLEASE post on the forums if you have a chance. Once again, thank you.
I assume that you have a basic understanding of Photoshop such as how to create and delete layers and channels etc. However, if you do get stuck on a step, or have questions about ANYTHING, please contact me at: . I will be more than happy to answer your questions about how to do a technique or step. Also, the units used in this tutorial are pixels. Thanks again, and have fun!

Please open your copy of SuperWidget.psd in Photoshop so you can have it handy and be able to use it as a reference when you need to. Download the .psd in zip format, and unzip it to get to the psd file. This helps you to see where a certain element of the interface needs to be on the document. A tip I recommend is to set your screen resolution to 1152 x 864 or higher. Of course this is not mandatory, but I have found that when working in Photoshop you need all the desktop space you can have.

1. Create Main Base Shape

To begin, we need to first create our "base shapes". These are what we will use to build off of. They are like the foundation of a house and need to be just right before we can proceed to the other things.

- Start by creating a new document (ctrl + n) and have the document size be 750 x 600 pixels with a white background, a resolution of 72 pixels/inch, and RGB Color Mode.

The reason the document size is so big, is because we want enough room to work with, and then we can crop out the extra space at the very end.

We'll focus on the biggest shape first, then work on the others.

- Create a new layer, don't name it anything.

- Select the neutral gray color, #B4B4B4, for your foreground color.

- With the Rectangular Marquee Tool (M), draw a rectanglular selection of 335 x 114 in the middle of the document.

- Fill this rectangle (alt + backspace) with your gray foreground color.

- Create a new layer, don't worry about naming it anything either, and draw another rectangle of 90 x 67 and fill it with the same color, then deselect (ctrl + d).

- Hit V on the keyboard to use the Move Tool and drag the smaller rectangle so that it matches up perfectly with the bottom right corner of the larger rectangle.

Next, merge the layer of the small rectangle with the layer of the larger rectangle.

- Do this by selecting the small rectangle layer in the layers palette (Just click on the text of the layer name to highlight it. This represents your current working layer.) and press ctrl + e or select Layer-> Merge Down.

Now the two rectangles are one shape on one layer as shown below:

- Name this new layer "main base shape". Do this by double clicking the text in the layer's palette and typing, or right click on the text, select "layer properties" and changing the name attribute.

We now need to round off the right angles.

- Create a new layer, no name, and draw a circle (select the elliptical marquee tool and shift + drag to draw a perfect circle) that is 29 x 29. Fill this selection with black, then deselect (ctrl + d).

- Zoom in to about 300% and position the circle so that its straight edges match up with the edges of the gray shape.

- Then, duplicate the layer (drag the layer's text in the layer's palette to the new layer icon at the bottom) 2 times and position the other two as in the picture below (again, using the arrows gives greater precision to aligning elements than the mouse):

- Go ahead and merge the three circle layers, to where they are all on one layer.

These circles are going to be guides, and we will use their outer edges as the new edge for our shape.

To do this, we're going to create a selection that, when we clear it, will cut out only the right angles.

- Create a selection (with the Polygonal Lasso Tool, L) like the one below (notice how the selection crosses the circle where it is flat):

- Now that you have your selection, make the "main base shape" layer your current working layer, and hit the delete key. The right angles should now be deleted.

- Select the contents of the circles layer (ctrl + click on the text in the layer's palette), and making sure your current working layer is still "main base shape", fill the circle selections with #B4B4B4.

- Deselect the selection, and delete the circles layer. This is what you should have as a result:

Now, we have one more angle to work on.

- Create a new layer, and on that layer make a black circle of 29 x 29, and deselect the selection (ctrl + d). Position it similar to the way you did before and as in the picture below, and make a selection that crosses the two shapes right where the straight part of the circle is, like so:

- With your current working layer as "main base shape", fill the selection with your gray color.

- Now, load the circle's selection, and hit delete. This deletes the excess of the main base shape and rounds off the right angle.

-You can now deselect the selection and delete the circle layer. It should end up rounded, just like we want it to be:

- Next, create a new layer, no name, and draw a circlular selection that is 72 x 72 and fill it with black, then deselect. Put it close to the top left corner of the main base shape.

Now we have to position the circle, with greater accuracy, with rulers.

- Hit ctrl + R to bring up the rulers on the borders of the document.

- Make sure there is a check next to View-> Snap and View-> Snap To-> Guides.

- Make main base shape your current working layer.

- Place your cursor inside the ruler area at the top of the document, and drag straight down until it "snaps" to the top of the main base shape.

- Then, make the circle layer your current working layer, and with the move tool, drag the black circle close to the line until its exact center "snaps" to the ruler.

- Now position it horizontally to where its right edge matches up with the left edge of the main base shape like so:

Pressing ctrl + ; makes the ruler lines (guides) invisible, and ctrl + R hides the rulers at the top and side of the document.

- Once you have that circle aligned like the picture, move the circle to the right 31 pixels, and up 13. Remember that using the arrows while you have the Move tool as your current tool, will move the circle with pixel precision, and holding shift + the arrows will move the circle 10 pixels every time.

- Create a new layer, and draw an oval selection of 95 x 77, and fill it with your gray color then deselect.

- Create another layer, and draw an oval of 101 x 111 and fill it with gray also and deselect.

- Position the two ovals like the picture below. The first oval is on the top, and the second oval is on to the left. We're interested in using these ovals to make a smooth transition from the main base shape to the circle, combine them, and thus add to our main base shape.

- Now, make a new selection with the Polygonal Lasso Tool like in the picture. The concept is the same as the above two times we used this technique.

- With that selection active, hover your mouse over one of the oval layers in the layer's palette, then hold down ctrl + (a little square with a dashed border should pop up over the hand) alt (a minus sign will now be inside that square) and click on the layer's text.

- Then, do the same with the other oval layer.

- Make "main base shape" your current working layer, and fill the selection you just made with your gray #B4B4B4 color.

- Deselect (ctrl + d) and, you can now delete the two ovals, and merge the black circle layer with the main base shape.

- Hit the forward slash (/) key on your keyboard. If you look over in the layers palette now, there should be a lock icon next to the words "main base shape". This turns on "preserve transparency". That just means that only what is not transparent (in this case, our main shape) on that current layer, will be edited. Preserve transparency is really useful when you need to edit only what is currently on that layer.

Now that preserve transparency is on, we will be able to fill in the entire main base shape with a solid color.

- With your #B4B4B4 gray color as the foreground color, fill (alt + backspace) the main base shape with that color, and this will make the black circle turn gray.

If, for some reason, your main base shape doesn't look like mine, don't be afraid to hit ctrl + alt + z to go back a multiple steps and get everything right.

- Select the Rounded Rectangle Tool (U), and make the radius 13 px

- Make sure the "Fill Pixels" button is depressed. It is the fourth icon from the left, on the rounded rectangle toolbar, as shown in the screen shot:

- Create a new layer, and draw a black rounded rectangle that is 129 x 46.

- Align the rounded rectangle to where its top edge is flush with the bottom of the main shape, and its left edge is perfectly lined up with the left side of the main shape.

- Move the rounded rectangle straight up, 28 pixels. Fill it with the #B4B4B4 color, and merge its layer with the main base shape.

- Create a new layer, and draw a black oval that is 47 x 54, deselect, and align it as shown:

- Also, create a selection that looks like the one above. We're going to use the oval's edge to blend the rounded rectangle seamlessly with the rest of the shape.

- With your current working layer as "main base shape", fill the selection with your gray color (make sure preserve transparency is turned off on the main base shape layer for this step).

- Then, activate the oval's selection (ctrl + click on the oval layer's text) and hit the delete key. This deletes the excess of the selection we just used. Deselect the oval selection (ctrl + d) and delete the oval layer.

Grab yourself something cool to drink, and pat yourself on the back. We are done with the main base shape! You should have something practically identical to the screen shot below. Everything from here on out, is an extension from this shape. We'll go on to the bottom right curve shape on the next page. So when you are ready, head onto page 2. Just a reminder, save now, and save often!

Page 1 - Page 2 - Page 3 - Page 4 - Page 5 - Page 6