Article written

  • on 21.09.2007
  • at 07:30 PM
  • by Admin
  • with 17,909 views
  • 1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
    Loading ... Loading ...

White & Orange Portfolio 7

Pages: 1 2

Create an attractive white portfolio with an orange pattern where the content could be placed. The design consist of a few “papers” stacked on each other with a drop shadow.

1. Create a new document (640*480).

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

weblayoutb1

3. Now create a new layer and select a rectangle shaped box (about 450*300 pixels) and fill it with white #ffffff and then adjust the bleding options of your layer (layer – layer style – blending options) to add a drop shadow.

weblayoutb2

4. The next step is easy… You have to duplicate the layer created above 2 times (layer – duplicate layer) and then you should transform all of them exept the top layer (edit – free transform) and rotate them a little bit so you end up with something like this… Note that the top layer should have another color, so fill it up with #e3892e to achieve the same result as me!

weblayoutb3

5. Now it’s time to create another layer adjust the blending options of the top layer (layer – layer style – blending options) with the other color you’ve chosen to use. The drop shadow should have copied itself when you duplicated the layers, though we have to add a few more blending options…

weblayoutb4

weblayoutb5

6. The next step is to add some text in this #e3892e color to display the name of your site or anything you want! So we use the horizontal type tool and type something (I used arial black with a size of 60px). Then we want to make it a bit more attractive so we adjust the blending options of this text layer.

weblayoutb6

weblayoutb7

weblayoutb8

weblayoutb9

7. Now it’s time to add a menu under the ‘shadowpapers’… Create a new layer, place it just above the background layer and select a rectangle shape with your selection marquee tool, fill the selection with #fffff and copy the layer style of the ‘shadowpaper’ layer (right click the ‘shadowpaper’ layer – copy layer astyle – right click the menu layer and paste the layer style)! You should have something like this for now!

weblayoutb10

Pages: 1 2

subscribe to comments RSS

There are 7 comments for this post

  1. kagitin says:

    You’re the best! It’s my first lesson and i’ve done it! Once more, thank you…

  2. Janky says:

    Looks nice :) !

  3. malcolm says:

    Hey this is one of the best and creative not to mention fresh web layout I have ever seen! This is really sweet.

  4. j0s says:

    Very good.

  5. tartanmartin says:

    Stunning end result even for me! Is there a tut for how to go about setting up the pop up window that you have for showcasing the example files? I’d really like to know how you did that. Thanks!

  6. Admin says:

    No problem, I really appreciate the comments!

  7. ANDREJ says:

    Thanks :) . Very good lesson!

Please, feel free to post your own comment

* these are required fields

PhoNuts is powered by WordPress.
Back to Top