web design tricks and tutorials in photoshop

Learn How To Design The Perfect Website Using Adobe Photoshop

Note: If you are very new to photoshop or web design you may have some trouble with this tutorial. Here is the end result: Start by making a new canvas around 950×950 pixels. Fill it with light gray. Select the top with the Rectangular marquee tool and fill it with a darker grey like so: On the dark gray layer go to Layer- Layer Style- Gradient Overlay and use a gradient like this: Now select the pencil tool and a 1px brush. Make a line above the light gray layer. To keep it straight you can hold shift. Make a new Layer and select the Rectangular Marquee Tool and make a selection like below. Now select the Gradient Tool. If you can’t see it right click on the Paint Bucket Tool and it should appear. Select the 2nd gradient option and make sure that the foreground color is white. Hit OK then drag your mouse down like below: Here we have the result quite nice no? I feel the white is abit strong so i lowered the opacity a little bit. Make a new layer and select the Pencil Tool again with a 1px brush. Draw a white line like below: This gives it a cool kinda “ingraved” effect. Off to the navigation! Select the Rounded Marquee Tool with a radius of 5 and make a selection like below: Fill it with white and it should look something like this: Cut of the lower part of the button with the Rectangular Marquee Tool. Make the color of the button just a bit darker so it doesn’t stand out too much. Go to Select- Load Selection then go to Select-Modify-Contract and select 2px. Then Select the Gradient Tool again and now make sure the foreground color is black. Drag down just like before. Should look something like this? Getting better right? Lower the opacity of the gradient layer to suit your taste. Now make a new group called button. Click on the layers while having ctrl pressed down. Now click and drag them into the button folder. Now go to Layer- Duplicate group and move all the buttons around the way you like. I decided I am going to modify one of the buttons and make it a rollover button. Click the button group you want to edit and select the FIRST layer in that group. Go to Layer-Layer Style-Color Overlay and pick an orange color. Slap some text in thoose babies and no way…it’s starting to look like a navigation! Select a dark gray color for the text. It should look something like this now… Make a new layer and using the Rectangular Marque Tool make a black shape like below. Select the FIRST layer in the rollover button group and go to Select- Load Selection. Using the Gradient Tool set on white to transparent make a gradient. Set the layer Blending Mode to overlay to give it a more orangish color. I’ve also just putt in some text. Select the text layer and go to Select- Load selection and move the selection up by about 1-2 pixels. Select the Gradient Tool and on a new layer drag up. Set the layer to overlay. Here’s the result: I have duplicated the gradient layer to give it a stronger transition from yellow to orange. Select the text layer again and go to Select- Load Selection and move it up by 1-2 pixels. Now select the Gradient Tool, but we won’t use from white to transparent now we will use black to transparent. Drag it up on a new layer and it should look like something below: Select the Rectangular Marquee Tool