Web Hosting Deals Holiday Logo Design Webcam Chat Website Header Templates Register domain Search Engine Optimisation Web Hosting
Go Back   Talk Mania Forum > Tutorials > Photoshop Tutorials > Web Layouts

Web Layouts Create professional webpage layouts with this very detailed, step by step tutorials.

 Image
Buy Sell Downloads

Reply
 
Submit Tools LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 04-17-2007, 09:43 PM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,340
Blog Entries: 2
admin has disabled reputation
116 Portfolio Layout #6

Today i will create Tutorial number 116 from 500 Tutorials Marathon.
I will create a Portfolio layout.



Let's start with a new photoshop document
Size 760 x 770 pixels
Background color : White

Select Rounded Rectangle Tool ( set the radius size to 10 pixels )
then create 2 big shape like in the following image



Now please rasterize the black shape



Then Load the selection for the red shape ( to load the selection you need to hold the CTRL key down and with your left mouse click press on the red layer thumbnail ( in your layer palette )
then you can see a selection around your red shape



In your layer palette select the black shape layer
then hit Delete on your keyboard.
Delete also the Red shape layer and you should have something like that
Press CTRL+D to deselect



Select rectangular Marquee Tool and make a selection at the bottom of our layout



Then hit " Delete " key from you keyboard, then Press CTRL+D to deselect
you should have something like that



Now for this shape please the following layer styles





















This is my result



Now select Rounded rectangle Tool one more time , and try to create 4 new rectangles . Please place it like me



Now add the following layer styles for the top shapes









here is my result



now for the bottom shape please add the following layer styles







This is the result



Select Ellipse Tool and create a small shape , and place it like me



For this small circle you can add the following layer styles









This is my result



Duplicate this small circle and place it on the right side of your layout



Now go to www.free-photoshop.com and download the Brush #8 Set
Load the brushes in photoshop ( i assume you know how to load the brushes. if not please reply and i will teach you )
If you have already a few good brushes please use them .

After you have this brushes please create a new layer ( press CTRL+SHIFT+N ) Then use a brush which you like most. Set the foreground color to a light green: #7fe600
And with brush tool press one time on your canvas



Duplicate this layer ( ctrl+J ) and use this layer style



Then choose a small rounded Brush and delete some parts of this last layer. This will create a nice effect for our flower



In the brush #8 set from www.free-photoshop.com you can find more brushes and you can use them for this layout.
please add as many flowers you want on your layout

This is my result



now it is time to add some text and images. I am sure everybody on talk-mania knows how to add some text.



Now Select Rounded rectangle Tool and create some small shapes. Place them like me. You can see that i have used a red color for this shapes



then for all this red layers add the same layer styles





This is my result



Then near each shape add a small black line



Then drag this layers right above the background layer
This is my result



Do the same for the other part



Now select the background layer, and with the Gradient Tool dra a line from top to bottom of the layout

this are the settings for the gradient



And this is my result



Then you can download the Brush #5 -Clouds Set from www.free-photoshop.com
Load the brushes in Photoshop, then create a new layer right above the background layer and add some clouds on your layout



Then select line Tool, Set the line weight to 10 pixels, and the foreground color to Black, and make a line under the layout



then go to Filter > Blur > Gaussian blur
You will be asked if you want to rasterize the shape. please click OK

Then in the Gaussian blur window use the following settings



You can reduce also the opacity value for this layer to 30 $
This is my result



Now you can add a image on your header, and i will add a butterfly
This is my finale result



If you want to add extra details on this layout then you might be interested in Talk-Mania Big-Pack
I hope you like it. Thank you

Attached Files
File Type: zip layout116.zip (824.4 KB, 675 views)
__________________
3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )
Reply With Quote
  #2 (permalink)  
Old 04-19-2007, 12:12 AM
Junior Member
 
Join Date: Apr 2007
Posts: 6
winly is on a distinguished road
amazing, thanks
Reply With Quote
  #3 (permalink)  
Old 04-19-2007, 01:20 AM
Turbocharged_06's Avatar
VIP Member
 
Join Date: Mar 2007
Posts: 151
Turbocharged_06 is on a distinguished road
not my style but nicee design admin
__________________
OUTLAW-WEB.NET
Reply With Quote
  #4 (permalink)  
Old 04-19-2007, 01:58 AM
Junior Member
 
Join Date: Apr 2007
Posts: 3
aolmedo is on a distinguished road
This is my first post. Very nice. good tuto
Reply With Quote
  #5 (permalink)  
Old 04-19-2007, 10:14 AM
Junior Member
 
Join Date: Apr 2007
Posts: 28
djven_om is on a distinguished road
I'm amazed
Reply With Quote
  #6 (permalink)  
Old 04-19-2007, 08:44 PM
Junior Member
 
Join Date: Apr 2007
Posts: 3
maros7 is on a distinguished road
nice work gj !!!
Reply With Quote
  #7 (permalink)  
Old 04-19-2007, 10:00 PM
Junior Member
 
Join Date: Apr 2007
Posts: 4
Emilie159 is on a distinguished road
Thumbs up

Very nice!!
Reply With Quote
  #8 (permalink)  
Old 04-20-2007, 03:52 AM
Junior Member
 
Join Date: Mar 2007
Posts: 7
bolabenoit is on a distinguished road
good, nice!!!
Reply With Quote
  #9 (permalink)  
Old 04-20-2007, 10:15 PM
Junior Member
 
Join Date: Feb 2007
Posts: 26
Fragz is on a distinguished road
Wow this one awesome, imo one of your best ^^.

Here's my outcome, didn't follow your tutorial step by step like i usually do, but added my own touch. Hope you like it It's my best layout yet i think.

Comments are appreciated

http://img140.imageshack.us/img140/140/layout4ae5.jpg
Reply With Quote
  #10 (permalink)  
Old 04-20-2007, 10:30 PM
Junior Member
 
Join Date: Apr 2007
Posts: 4
Iron is on a distinguished road
very nice.. thanks

Reply With Quote
Reply

Bookmarks

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump


All times are GMT +2. The time now is 08:45 AM.


Fake ID

Powered by vBulletin® Version 3.7.1
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
SEO by vBSEO 3.2.0 RC8
Forums Copyright © Talk-Mania.com