Hello

Today we will continue with our marathon. This is tutorial number 163. In this tutorial I will show you how you can create a simple design portfolio

layout. Or you can use this layout if you want to create a wordpress theme



Let’s start as usual with a new document. The size doesn’t matter. I m using 760 X 770 pixels
Copy the following image on your computer



Open this image in photoshop, then go to Edit > Define pattern. Chose a name for this grass pattern, and click OK.
Create a new layer ( press CTRL+SHIFT+ALT+N ) in the same time

Grab Paint bucket tool, and Set source for fill area to : pattern



Then on the layer we just created, add this gradient with Paint bucket tool



Set the foreground color to #120c0c , and with brush tool, you can draw at the bottom of your layout, until you have the following result:



Now with rounded rectangle tool, add some buttons



for all these shapes add the following layer style





Here is my result



Now i will add some images on the bottom part of the layout, and in the same time i will add also some text



Under the numbers, i will add a Grey rectangle. i will create this shape with rectangle tool



With type tool, i will write some minus signs



I will duplicate this layer with minus signs , and i will rotate it 90 degrees ( to rotate a layer first you need to select it, then go to Edit >

transform > rotate 90



this is my layout so far



On the header i will add a plane icon



If you have Photoshop Designer's pack you will find some nice brushes for the next step. i want to add like a scarf at the end of our plane
You will find this brush in the " banners " folder





I am sure you will find another type of banner/ scarf in this set

If you don't have the photoshop designer's pack, you can create this scarf with pen tool

In the next image you can see how i placed the scarf, at the end of the plane



To create a more realistic effect i will add some lines



I will select brush tool, and with a small rounded brush i will create a few points ( i will use the same color as the sky )
To select the same color you can use Eyedropper tool

this is my result



My final step is to add some text on this scarf



This is my final result



Please download this layout from attachment area to understand better how it's made

Attached Files

layout163.zip (1.11 MB, 30 views)

__________________
3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )

Very nice site, admin
This one's certainly on the list of sites that I need to make sometime...

I would probably change the airplane with an A380 or F-16 though...but that's just because I like those two aircrafts very well

__________________
Regards,
Anders Moen

Very good idea, thanks pal.

__________________
Talk-Mania's member

good work admin!

Unique, interesting idea mate
Keep em coming :P

Just like every of your works.

BEAUTIFUL

__________________
- Fabian Ruef
<--- Wanna creat something like this? Take a look at this Tutorial

thanx alot admin i really like it

good work admin

thanx alot admin like it

such a great tutorial but i guess the background is already been implemented Web Development Blog: Web Development Insights, Best Practices, Tips & Techniques : Viget Labs if you try to look into it.... anyway, i salute you admin for having this tutorial thanks.

__________________
Philippines Freelance Web offers Web Design, Logo Design, Web Redesign, Website Development, Website Maintenance in freelance rate.

For more information please visit our website.