Super Widget Interface Tutorial
2. Create Other Shapes
The bottom right curve shape can be tricky for a Photoshop beginner since I used the pen tool to create it. But, we'll get through it, so don't worry.
- First of all, with your copy of SuperWidget.psd open, drag the layer called "bot curve shape", from the layer set called "Bot Curve Area", into the psd you are building your interface in.
- Place that layer above the main base shape one. Align it to where the top edge is flush up against the main base shape, and the right point is lined up
evenly with the right side of the main base shape like the picture below:
- Once you have that lined up perfectly, move the bot curve shape left 10 pixels and up 5.
- Now drag the bot curve shape below main base shape in the layer's pallete.
- The next few steps are purely optional. However, if you want to learn the pen tool, they will help you quite a bit.
- With the Pen Tool (P) as your active tool, place 6 anchors roughly in the same place as the screen shot (zoomed in at 300%):
- With the Convert Point Tool, convert the middle-left anchor to a curved point and try to get the path to follow the line of the
shape as closely as possible but don't take more than 10 seconds. Then, with the Direct Selection Tool (A), we can fine tune our path. So, spend a little time
dragging the direction points (those points at either side of the anchor point) so that the path closely follows the line of the shape. Do this with the
middle-right anchor point as well. You want to trace the curve shape with the path.
- Once the path is just like you like it, click on the paths pallete, and ctrl + click on the path that you were working with to load its selection. It's Practically
the same process as selecting a layer's selection. Then you can create a new layer and fill it with a darker gray color. Of course, like I said before, you can
use the bot curve shape that I have already made. It is completely up to you, I just want to be able to give you a couple of options.
- The circle part at the very bottom, is just a 63 x 63 circle on its own layer, then I positioned it to where it ran smoothly into the curve and merged it when it was right.
- In the layer's pallete, drage the bot curve shape right below main base shape, and now you should have the bot curve shape in place and ready to go.
We will now start on the top shape. I used the pen tool on this shape as well, but it was easier to create than the bot curve shape.
- Start by dragging the layer called "top base shape" from the layer set called "Top Shape Area" in the SuperWidget.psd into the psd you are working with.
- Place it like in the picture shown below, to where it is flush with the top edge of the main base shape:
- You can now use the pen tool and trace the shape to re-create it like you may have done earlier with the bot curve shape, or just use mine (I have provided this path for you to study as well).
The top right corner is just a 15 x 15 circle, using the technique for creating main base shape, and the bottom right corner is a 22 x 22 circle.
You should now have something similar to the screen shot below, with only these layers in this order: "background" at the bottom, then "bot curve shape", "main base shape" above that, and at the very top is "top base shape".
Now we are done with the base shapes! It is time to move onto what I call, the eyecandy part, of the interface. Things like adding shading, buttons, gradients,
and so on. Go on over to the next page when you are ready, and I'll see ya there.
Page 1 - Page 2 - Page 3 - Page 4 - Page 5 - Page 6