adv banner
Photoshop  Home Photoshop Web Layout Design Studio Layout
rss

Design Studio Layout

Author: PhoNuts.org More by this author


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

2. Fill the background with #ffffff using the paint bucket tool.

3. Now use the following picture and save it to your computer by right clicking on it when you view the picture in high resolution! Add the saved file to your layers and position it like this!

image 1

Click to enlarge
Click to enlarge

4. In this step we're going to add a few clouds to the background so create a new layer behind the layer with the picture we've just added to the scene! Select your brush tool with a clouds brush and change your foreground color to #e6ebf7, also use #8395bb as your foreground color to make it look more interesting!

Click to enlarge
Click to enlarge

5. In this next step we're going to create the content box where you will be able to add text and pictures! Take your rectangular marquee tool and select a rectangle like this and fill it with #e4e4e4 using your paint bucket tool on a new layer (layer - new layer).

Click to enlarge
Click to enlarge

6. Adjust the blending options of the previous layer (layer - layer style - blending options) with the following settings!

image 5

7. Now on the same layer select a rectangle like you can see on the screenshot, this will be your menu. The effect we added in the previous step is automatically applied.

Click to enlarge
Click to enlarge

8. This next step is very simple… Create another new layer (layer - new layer) and again select a rectangle under your content boxes with your rectangular marquee tool on the new layer we've just created. Fill this box with #b9b9b9 and adjust the blending options like shown below.

image 7

image 8

Click to enlarge
Click to enlarge

9. Of course, the menu we've created in step 7 is not complete without text! So we're going to create a few green buttons first in #427b09… Pick your rectangular marquee tool, select a box and fill it with green, after that you can just duplicate that layer a few times. Make sure you do this on a new layer, otherwise the effect of the previous steps will be added to your buttons and we don't want that!

image 10

10. In this step I just added some white #ffffff text to our menu (the font is just microsoft sans serif 10px), so now it looks like this if you did everything like instructed!

Click to enlarge
Click to enlarge

11. Now take your horizontal type tool again and change your foreground color to #427b09 and start typing a title to end up with the following! The font I used is called one stroke script let with a size of 26px.

Click to enlarge
Click to enlarge

12. Create a new layer and select a rectangle on the place shown in the picture below and fill it with #e4e4e4. After that go to filter - blur - gaussian blur and use these settings. Now you have a soft shadow under you content box that looks very attractive… Make sure you deselect the box before applying the blur effect!

image 13

Click to enlarge
Click to enlarge

13. In this last step I've just added a little bit of demo text and a picture. Click the picture below to view the final result.

Design Studio Layout Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: phonuts.org

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Design Studio Layout"