tutorials 2073
TRANSCRIPT
-
8/6/2019 Tutorials 2073
1/33
Grafpedia
Premium graphics for smart webmasters
Home News
Tutorials VIP Downloads
RSS Feed
About Us Advertise
Grafpedia Tutorials Create an awesome portfolio layout
Create an awesome portfolio layout
Search
-
8/6/2019 Tutorials 2073
2/33
in Tutorials, Web layouts by admin on May 28th, 200921 Comments
Hello my friends. Today I will show you how to create another website portfolio.You can use this tutorial to create also a professionally blog layout. Apply for a VIP account if you want to download the PSD file and XHTML /CSS template for this tutorial.The most important think in this tutorial is the Damask texture i have used.
Preview full size layout
Lets start by creating a new document with the following sizes: 960 x 900 pixels. For start I will use the following color for the background #3b2f26If you dont know how to add the color, I suggest you to use Paint Bucket Tool, and after you select the foreground color click on your canvas.
retweet
22tweets
Webfetti.com Ads b Goooooo le
-
8/6/2019 Tutorials 2073
3/33
One of the most importation parts of this layout is to the background. I will give you a nice seamless damask pattern for you to use. Download thefollowing image on your computer, and then open it on Photoshop
After you have the texture opened, go to Edit > define pattern. Choose a name for this pattern and click ok. You can now close this document. On ourlayout please create a new layer above the background layer. The shortcut to create a new layer is (CTRL+SHIFT+ALT+N). Select Paint BucketTool, and on the top of your screen select Pattern.
-
8/6/2019 Tutorials 2073
4/33
Click on time inside your document, and then change the blending mode to Overlay
-
8/6/2019 Tutorials 2073
5/33
With Rounded Rectangle Tool, I will make some shapes
-
8/6/2019 Tutorials 2073
6/33
I will right click on the grey shape layer (and I will choose rasterize layer)
-
8/6/2019 Tutorials 2073
7/33
Then I will grab Rectangular Marquee Tool, and I will make a selection on the bottom part of the grey shape
Then hit the Delete key from your keyboard, and press CTRL+D to deselect
-
8/6/2019 Tutorials 2073
8/33
I will add the following layer styles for this shape
-
8/6/2019 Tutorials 2073
9/33
This is my result
With Ellipse Tool, I will create a dark shape. I will place this shape under the orange navigation bar
-
8/6/2019 Tutorials 2073
10/33
Then I will go to Filter > Blur > Gaussian blur. You will be asked if you want to rasterize the shape. You can click on OK, and then on the Gaussianblur window set the radius to 3.
I will lower the opacity for this shape to 20%
-
8/6/2019 Tutorials 2073
11/33
I will make one more time a selection on the bottom part of this shadow, and I will hit the delete key from my keyboard
Then I will press on CTRL+D to deselect my selection
-
8/6/2019 Tutorials 2073
12/33
With the same technique as above I will create on the bottom of the header a similar effect. I will not explain one more time the steps. This is myresult so far. Click on the following image to see the full size layout
-
8/6/2019 Tutorials 2073
13/33
-
8/6/2019 Tutorials 2073
14/33
I will use one more time Rounded Rectangle Tool, to create another 3 shapes
-
8/6/2019 Tutorials 2073
15/33
For all these shapes I will add the following layer styles
-
8/6/2019 Tutorials 2073
16/33
This is my result so far
Now I will add some text and images. Please click on the next image to see the full size layout
-
8/6/2019 Tutorials 2073
17/33
I will work further on the header. ON the right side I want to create a slideshow. I will create there one round shape
-
8/6/2019 Tutorials 2073
18/33
I will cut the left side of the shape, and then with Warp tool I will modify the shape to look like mine
Then with Ellipse Tool I will create s small circles.
-
8/6/2019 Tutorials 2073
19/33
I will drag these small shapes under the white shape. The one where you will see some random images from your slideshow
I will duplicate the orange shape, and I will rotate it to the right. You can see that I will change the color for this shape to black
Then I will go to Filter > Blur > Gaussian Blur, and I will change the radius value to 2 pixels
I will select Custom Shape Tool, and I will add a small arrow over this orange shape
-
8/6/2019 Tutorials 2073
20/33
With The same technique I will create a similar design on the right side
I will create a new layer above the damask texture layer, and with Brush Tool I will add a simple drawing
-
8/6/2019 Tutorials 2073
21/33
Then I will change the blending mode for this layer to Overlay. This is my final result
-
8/6/2019 Tutorials 2073
22/33
Please note that you can change the look of this layout very easy. If you dont like the Damask texture used in tutorial, you can use another seamlesspattern from our set of Photoshop Pixel Patterns.If you want to download this PSD layout you need to apply for a VIP account. You can download the layered PSD layout, with ( xhtml / csstemplate ) and also our entire collection ofPSD layouts, and premium resources
Login/Register to Download
Digg Del.icio.us StumbleUpon Technorati
Reddit
-
8/6/2019 Tutorials 2073
23/33
Responses to Create an awesome portfolio layout
1.
Nykeri 28.05.2009 um 9:56 am
awesome layout, man it looks so cool
2.Hiu 28.05.2009 um 1:21 pm
Damn that looks so pro.Thank you so much for making this tutorial.
3.Ashley 28.05.2009 um 1:31 pm
How can I use the texture on a black background?
-
8/6/2019 Tutorials 2073
24/33
4.admin 28.05.2009 um 2:15 pm
Do not change the blending mode to overlay. If you want to change the color of the damask texture, you can press on CTRL+U to bring the
Hue/saturation window. Play with the sliders until you are happy with your result
5.joyologo design shop 2.0 28.05.2009 um 6:41 pm
very nice portfolio layout I like this, thanks for tut. and inspire..
6.Anthony Alexander 28.05.2009 um 10:32 pm
A tutorial for a portfolio huh? I wonder what kinda person needs a tutorial for a portfolio.. perhaps the kind that needs tutorials to fill it also.No negativity, just saying, makes no sense. Still nice though.. even though a portfolio should reflect something personal I might be wrong
7.Web Design Quote 29.05.2009 um 12:10 am
Nice to read you post and know that we can use this tutorial to create own professionally blog layout. Thanks for the detail information givenin the tutorial and hopefully it would be help me for my next project. Keep it up.
-
8/6/2019 Tutorials 2073
25/33
8.Adam 29.05.2009 um 1:52 am
Very nice tutorial, thanks
9.Adam 29.05.2009 um 5:39 am
Very nice tutorial, thanksOopsforgot to say great post! Looking forward to your next one.
10.divix 29.05.2009 um 2:20 pm
the menu bar is way too long, but anything else is great mate ;]
11.royroy baroroy 29.05.2009 um 6:33 pm
Hi admin, thanks for the nice tutorial.
I have a question though: What font did you use for the headings (Latest Work, Grafpedia Blog, etc.)? Thank you!
-
8/6/2019 Tutorials 2073
26/33
12.JT 30.05.2009 um 12:55 am
I like the clean look of the design. have you tried the 960 grid?
13.FreewareMatter 30.05.2009 um 2:10 pm
A good tutorial. Thanks.
14.admin 30.05.2009 um 3:46 pm
Myriad Pro - Condensed. Please let me know if you need more details
15.Justin 30.05.2009 um 7:16 pm
Whoa this site is pretty awesome your layout is really well designed, and your blogs are (judging from what ive read) very interesting.
heehee consider yourself favorited.
16.
ETW Grumpy 31.05.2009 um 6:41 pm
-
8/6/2019 Tutorials 2073
27/33
Very good tutorial. Great step by step instructions. I love the style of the layout.To Anthony Alexander, someone who is semi handy with Photoshop might need a portfolio tutorial to show pics of stuff he has made.
One question, where can I find the code to add pictures to, and automate the slideshow? Thanx again.
17.Aleksandar Tasevski 1.06.2009 um 6:41 am
I like the slideshow control buttons very much, thanks for this tutorial.
18.
CgBaran Tuts 1.06.2009 um 8:57 am
Great tutorial thanks
19.flashfs 6.06.2009 um 10:45 am
Good tutorial. I personally liked the details in the header.
Trackbacks
1. Best Photoshop Tutorials, Brushes and Textures of May 2009 | CrazyLeaf Design Blog2. 45 awesome Photoshop website template/layout tutorials | [Re]Encoded.com
Leave a reply
Name (required)
-
8/6/2019 Tutorials 2073
28/33
Mail (will not be displayed) (required)
Website
Learn More | Sign up
Advertise Here
submit comment
-
8/6/2019 Tutorials 2073
29/33
-
8/6/2019 Tutorials 2073
30/33
Login
Username
Password
Remember me
Register Recover password
Grafplus lates downloads
Vector missile launcher Vector bug - Vector grasshopper
vector bombs - vector torpede Vector bilboard Old style retro car in vector file format Vector army tank ACrobatic vector plane Vector military tank Vector acrobatic plane Vector speed boat
Subscribe to Grafpedia
Subscribe to our RSS feed and you can download unique premium downloads
Login
gfedcb
Enter your emailaddress:
-
8/6/2019 Tutorials 2073
31/33
Categories
Actions Brushes Contests Designing Drawing Gradients Icons Illustrator Layer Styles News Patterns Photo Effects Stock Images Swatches
Textures Tutorials Vectors VIP Downloads Web layouts
Advertise here
Advertise Here
Subscribe
-
8/6/2019 Tutorials 2073
32/33
Recent Comments
admin on Draw Fairy Tale Characters in Photoshop klavins21 on Draw Fairy Tale Characters in Photoshop George on Design a realistic website layout in photoshop
Nick on Design a two color website layout in Photoshop StriderGax on Design a two color website layout in Photoshop
Pages
About Advertise Contact us Vip Membership
Most downloaded resources
-
8/6/2019 Tutorials 2073
33/33
27.000 Photoshop Gradients
Last Posts
Draw Fairy Tale Characters in Photoshop Hi-Res Square pattern brushes Design a two color website layout in Photoshop 35 Seal Brushes - Badge Brushes
Vector ink drawings
2008 | Grafpedia is proudly powered by Wordpress