Super Widget Interface Tutorial
6. Add the Wires and Left Side Module
- Make a new layer above main base shape, and call it "main stroke".
- Ctrl + click on the "main base shape layer" to activate it selection. Then, ctrl + shift + click on the bot curve shape layer within the Bot Curve Area Layer Set,
to add its selection to the main base shape selection. Also, add the top base shape's selection by ctrl + shift + clicking on it.
- Once you have all three shapes with one big selection, and your current working layer is main stroke, give it a black, 1 pixel outside stroke.
- Keep that selection active, and create a new layer right above the background and call it "main drop shadow".
- Fill the selection with black and deselect. Give it a gaussian blur of 5.
- Then lower the opacity to 70% and with the move tool (V) using the arrows on your keyboard, move it down 4 and to the right 7 pixels.
Left Side Module
- Make a new layer set above the main drop shadow layer and name it "Left Side Module".
- For the shape of the module area, I used a path. Take a look at it in the path's pallete, to see how I made it.
- You can drag and drop it into your interface and place it as I have.
- Once you have it placed like mine, activate its selection and create a new layer within the Left Side Module Layer Set called "base shape".
- Fill the selection with #DADADA.
- Make a new layer called "inner stroke" and with your foreground color as #909090, give the selection a 3 pixel stroke inside.
- Keep the selection active and make a new layer called "outer stroke". Apply a black, 1 pixel outer stroke to the selection now.
- Make a new layer named "buttons".
- Activate the base shape's selection, and contract by 7 pixels.
- Then take that new selection into a new channel and fill with white.
- Make black as your foreground. Grab the line tool and put 6 for the line's weight and check antialias. Draw a line on your channe like the screen shot below:
- This will break up the button area giving you two buttons. Gaussian blur the channel by 1.5.
- Open the Levels Dialog (ctrl + L) and drag the sliders to the middle until the channel is smooth.
- Activate the channel's selection and with your current working layer as "buttons", fill the selection with #909090.
- Apply the following Bevel and Emboss Layer Style to the buttons:
Bevel and Emboss:
- Next, activate the buttons' selection and make a new layer called "button stroke". Give the selection a 1 pixel, black stroke outside. Lower its opacity to 83%.
This is what we have now:
Looking pretty good huh? Let's move on to the absolute last addition... the wires. Don't worry, they are a piece of cake!
The Three Wires
- Make a new layer set above the main drop shadow layer and call it "Wires".
- I have included the the two paths that I used to make the three wires. One of them was just rotated slightly with the free transform tool to make it look
different.
- So, drag and drop the two paths from my psd file into yours and position them like I have:
Wire 1:
Wire 2:
I encourage you to use the pen tool yourself to either try to create the same path as mine, or make your own wire shapes. This is your interface, so do what you want to do with it and have fun!
- Activate the Wire 1's selection by ctrl + clicking on the Wire 1 path.
- Create a new layer in the Wires layer set called "wire 1 base".
- With your foreground color as #818181, stroke the selection with 1 pixel, centered. Lower the opacity to 20%.
- Change the foreground to black; then, activate the wire 1 bases' selection, and give it a black, 1 pixel stroke outside. Lower the stroke's opacity to 70%.
- Make a new layer called "wire 2 base".
- Ctrl + click on the wire 2 & 3 path, and then with your current working layer as wire 2 base, and your foreground color as #818181, give the selection
a 2 pixel stroke inside.
- Duplicate the wire 2 base layer by dragging it to the new layer icon at the bottom of the layer's pallet.
- Rename the new layer to "wire 3 base". Press ctrl + T, and rotate it counter clockwise slightly and hit enter when you get it how you like it.
- Make a new layer above wire 2 base, called "wire 2 stroke" and give a black stroke of 1 pixel, outside. Lower its opacity to 60%.
- Do the same thing with wire 3 (make a new layer, and stroke).
- Apply the following Bevel and Emboss Layer Style to wire 2 base and then to wire 3 base:
Bevel and Emboss:
- Make a new layer called "connector".
- Go back to the path's pallete and activate the Wire 1 & 2 selection.
- Then, go back to the layer's pallete and make sure your current working layer is connector. Stroke the selection with the color #E3E3E3 by 8 pixels, center.
- Once you have the stroke, deselect, grab the eraser and pick the 13 pixel, hard brush. Proceed to erase two solid lines as shown to make the connector:
- Make a new layer called, "connector stroke", activate the connector's selection and give it a 1 pixel, black stroke, outside. Lower its opacity to 60%.
- Change your foreground to black and make a new layer called "connector shadow" below the stroke layer you just created.
- Activate the connector layer's selection (if it's not already) and hide it by pressing ctrl + H.
- Take the airbrush, with the 13 pixel soft brush, and 30% opacity and apply soft shadows around the edges except for the left side.
Practice makes perfect on this step. Take your time and start over, or redo if you have to; zooming in to about 300% helps. Try your best to make it look like my shadows:
On to the insets in the wires...
- Activate wire 2's selection, and hide it (ctrl + H).
- Make a new layer called "wire 2 insets".
- Now grab the line tool, and with 100% opacity and antialias checked, draw lines that follow the wire:
- Now, deselect, and duplicate the layer you just made by dragging it to the new layer icon at the bottom of the screen, on the layer's pallete.
- Lock the duplicated layer's transparency by pressing the forward slash (/) key, and fill the layer with white (with white as your foreground, press alt + backspace).
- Then, with the move tool and the arrows on your keyboard, move the layer down 1 pixel and to the right 1 pixel.
- You can now merge the duplicated layer down with the black lines, or leave it. It's up to you.
- Now, do the same steps for wire 3 and wire 1, but for wire 1, add the insets above the the wire 1 stroke layer.
Your wires should look like this:
- Now, activate the wire 3 base selection, then ctrl + shift + click on the wire 2 base layer, and then ctrl + shift + click on wire 1 base. This adds all the bases
of the wires together in one selection.
- Make a new layer called "wires drop shadow" and place it at the very bottom of the Wires Layer set, below wire 1 base.
- Fill the selection with black, and deselect.
- Gaussian Blur it by 3, and move it down and to the right by 3 pixels each.
Here's how everything should look now, and the Wires Layer Set should be:
Summary
Hey, guess what? You're done! That does it for the Super Widget Interface. Congratulations for making it this far and I hope you had a great time learning the techniques I have shown you. Remember, if you have any questions whatsoever, please email me at , or post a message on the forums.
Thank you again very much for trying the tutorial. Please take a look at the other tutorials. I will be making many more so if you like this one, stay tuned and happy interfacing!
Sincerely,
Page 1 - Page 2 - Page 3 - Page 4 - Page 5 - Page 6