Home | Peanut Shaped Interface

Peanut Shaped Interface

For Use With Web Creation or Graphic Design

Below you will find various graphic design instructions as they relate to web design.

Step-By-Step Instructions:

1. Open a new document in Photoshop. 600x600 width/height.
2. Create a new layer. Name it "Peanut".
3. Select the Pen Tool



4. Use the pen tool to create a peanut shape or curvy object for your interface.



5. Select the Path Selection tool.



6. Move your mouse over any point of the path, then right click. Select "Make Selection" from the pop-up.
7. The "Make Selection" box will appear. Click OK to accept defaults (default should be Feather Radius: 0).
8. Select the Paint Bucket tool.



9. Fill in the peanut shape selection with a grey color. (Hex Color: #d7d7d7).



10. Click Ctrl+D to deselect.
11. Select the Pen Tool. Draw a paths inside the peanut shape to make the windows of the interface.



12. Select the Path Selection tool again.
13. Drag the Path Selection cursor over both paths, then right click. Select "Make Selection" from the pop-up.
14. The "Make Selection" box will appear. Click OK to accept defaults (default should be Feather Radius: 0).



15. Click the Delete key.
16. Right click the layer "Peanut". Choose "Blending Options" from the pop-up list.
17. Choose "Bevel and Emboss". Set to the following:



18. Choose "Drop Shadow". Set to the following:



19. Click OK to close out and return to your image.



20. Create a new layer. Name it "Screens".
21. With the Screens layer active, select the Magic Wand tool.



22. Make sure the Tolerance for the Magic Wand is set to "32" and the Contiguous checkbox is checked off.
23. Click in the Magic Wand tool inside the empty white holes within the peanut shape. Both holes should be selected now.
24. Select the Paint Bucket too. Fill in the two selections with black. (Hex Color: #000000).



25. Goto Select > Modify > Contract. Contract by "10" pixels.
26. Make sure that Black is your foreground color and White is your background color.



27. Goto Filter > Render > Clouds Difference.
28. Repeat Step 26 once or twice to get a nice even set of clouds within your selections.



29. Goto Image > Adjustments > Color Balance. Slide the color sliders to get the color that you want. In this tutorial, only the Red slider under "Midtones" was slid completely to the right.



30. Click Ctrl+D to deselect.
31. With the "Windows" layer still active, click the "Add Layer Mask" icon on the layers palette.



32. Select the Gradient tool.



33. Set the gradient from Black to White.



34. Using the Gradient tool, drag from the bottom of the peanut interface to the top.



35. Create new layers and add any buttons or text where you want it to go and you're done!