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 01-24-2007, 12:01 AM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,340
Blog Entries: 2
admin has disabled reputation
75 Personal Portfolio Layout

Hello

This is the Tutorial number 75 from the 100 Marathon Tutorial
As i have told you i will try to add a tutorial each day.

I will show you how to create a portfolio layout



Open a new document in photoshop

Size should be as usual 760x770 pixels.
Color background : #333333

Select Rounded Rectangle Tool ( set the radius size to 10 pixels )
Then create a simple rectangle



Add the following layer styles



















This is the result



Duplicate this shape and place it will a little bit to the right. In your next image you can see that i have already applied some layer styles which you can find it after the following image



This are the layer styles for the blue



















Now duplicate the blue shape, and move it to the right
Then apply the following layer styles



















This is the result



Duplicate this last rectangle and place it on the right side,
then add the following layer styles















This is the result



Then withe the same tool. Rounded rectangle tool, create another shape, please use the following color as the background. #333333



Then add the following layer styles







This is the result



Now add some text on the layout,



and also some images on the right side



Select ellipse tool , and create some small circles



Then select Rectangle tool, and make a simple rectangle



Then go to Filter > Distort > Polar Coordinates
You will be asked if you want to rasterize the shape. Press yes
use the following settings for the polar coordinates, and press OK



I have moved, and rotate this layer , and you can see the result in the following image



In the next image you can see 4 different shapes, you can duplicate the first one , and place it a little to the right

Then i have duplicate the first layer two more times, and i have flipped vertically, then with my mouse i have placed like in the next image



Then with the Rounded Rectangle Tool, i have created another shape, and place it like in the following image, then i have duplicate the circles from above, and place it on top of the shape



Now you have completed the tutorial from today. I will wait you tommorow for another new tutorial
This is the end result



I am sure you can do better then me. If you have question please ask me. i will try to answer as soon as i can
If you want to add extra details on this layout then you might be interested in Talk-Mania Big-Pack

Attached Files
File Type: zip layout75.zip (202.7 KB, 1364 views)
__________________
3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )
Reply With Quote
  #2 (permalink)  
Old 01-24-2007, 01:25 AM
Junior Member
 
Join Date: Jan 2007
Posts: 10
Eichen is on a distinguished road
This is done very well!
Reply With Quote
  #3 (permalink)  
Old 01-24-2007, 03:41 PM
Senior Member
 
Join Date: Dec 2006
Location: i live in norway
Posts: 312
haavard29 is on a distinguished road
wow admin!
i love this tutorial great design and a good idea
Keep up the good work
-haavard
Reply With Quote
  #4 (permalink)  
Old 01-24-2007, 08:28 PM
Junior Member
 
Join Date: Jan 2007
Posts: 10
fanio is on a distinguished road
nice tut, thanks
Reply With Quote
  #5 (permalink)  
Old 01-24-2007, 09:01 PM
Junior Member
 
Join Date: Jan 2007
Posts: 10
clovec is on a distinguished road
pretty cool layout
Reply With Quote
  #6 (permalink)  
Old 01-24-2007, 10:59 PM
Junior Member
 
Join Date: Jan 2007
Location: *"islamic repablic iran"*
Posts: 18
Reza is on a distinguished road
Lightbulb Best

hi admin

this tutorial is very nice

but i have a good idea
upload the fonts and give them to download please
__________________
Fine And Lucky
Reply With Quote
  #7 (permalink)  
Old 01-25-2007, 01:21 AM
Junior Member
 
Join Date: Jan 2007
Posts: 10
Joeeeuk is on a distinguished road
This tempate it smart
Reply With Quote
  #8 (permalink)  
Old 01-25-2007, 01:28 AM
Junior Member
 
Join Date: Jan 2007
Posts: 12
lz1apz is on a distinguished road
very nice tut mann, thanks
Reply With Quote
  #9 (permalink)  
Old 01-25-2007, 03:37 AM
Junior Member
 
Join Date: Jan 2007
Posts: 10
gangsta415 is on a distinguished road
not my style but it's nice
Reply With Quote
  #10 (permalink)  
Old 01-25-2007, 09:49 AM
Junior Member
 
Join Date: Jan 2007
Posts: 20
opelpitt is on a distinguished road
Great job

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 05:58 PM.


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