PhoNuts

In this tutorial we’re going to create a clean black and green webdesign which can be used for anything and everything!

1. Create a new document (800*600).

2. Fill the background with #4399d1 and look at the guides I’ve created in the screenshot below.

3. Use your rectangular marquee tool to select a content box like shown below where you’ll be able to add text and pictures when this layout is coded. Now fill the selection with #333333 on a new layer (layer – new layer).

4. Go to the blending options of this layer (layer – layer style – drop shadow) to add a shadow! Use these settings…

5. Create a new layer and select a box right under the top (use your guidelines)… Fill the selection like shown in the screenshot with any color you like because we’re going to add a gradient so it doesn’t matters! Then go to your blending options (layer – layer style – gradient overlay) and adjust the gradient of this layer to match the settings from the screenshot below.

6. Create another new layer and select a box on the top using your rectangular marquee tool just like we did in the previous step. The selection is shown in the screenshot below. You should also fill the selection with any color and then adjust the blending options to add a gradient overlay (layer – layer style – gradient overlay). The selection and the gradient overlay settings can be seen in the screenshot below!

7. Also add a stroke to the layer from step 5 with the following settings! The second screenshot shows you what you should have for now… Ofcourse you might have selected larger or amsller boxes so yours can look different.

8. Create a new layer and make a selection like shown below using your elliptical marquee tool. fill it with #ffffff white using your paint bucket tool and change the opacity of this layer to 25%. Now we’ve created a shiny gloss ofr the clean black and green webdesign.

9. Create (another, yes yes yes) new layer and make a selection using your rectangular marquee tool at the top of your design above the green header layer. Make sure it has the same heigth and fill your selection with #000000 like I did but change the opacity of this layer to about 25%. The picture of this 9th step is shown below.

10. It’s almost time to start adding the (demo) text but we’re going to add some finishing touches to this design… A search box would be nice so grab your rounded rectangle tool and create one like shown in this picture (make sure your radius is about 4px to give the box rounded, smooth corners and change your foreground color to #f0f0f0). Create another one for the button but make this one a lot smaller than the search box itself.

11. We’re going to adjust the blending options of this search box and the button so go to (layer – layer style – blending options) and add a drop shadow with these settings. Make sure your copy the layer style (layer – layer style – copy layer style) from one rectangle to the other one so they both have a shadow effect!

12. In this step I’ve created very tiny bars on a new layer to use between every menu button using my rectangular marquee tool and my paint bucket… This makes the design cleaner and more professional! Take a look at the screenshot to see what I’ve done. Basically I’ve just created two 1px strokes with a heigth of 35px and duplicated (layer – duplicate layer) them as many times as I wanted to create the menu! The left bar is in #e4e4e4 and the other one in #ffffff. If you can’t figure this one out you can also just skip it or download the .psd file at the bottom of the page!

13. Now I just added a little bit of text using the font microsoft sans serif in different sizes… the title is just white #ffffff, the green text in the search box and the content box is #99ff00, the blue text is #00ccff (used for links and stuff like that) and the grey text for the menu etc is #666666… And there you go, a good looking and clean webdesgin with mainly green and black colors!

Learn about adobe photoshop using testking self paced design guides. Download the testking HP2-E32 videos and testking 70-270 design tutorials to learn how to create inspiring designs for your web page.

Please Login or Register to download the source files.