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 (1) Thread Tools Display Modes
  1 links from elsewhere to this Post. Click to view. #1 (permalink)  
Old 09-29-2008, 01:15 PM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,340
Blog Entries: 2
admin has disabled reputation
168 Lawyer layout

Hello my friends

Today we will continue our 500 tutorials marathon with a new layout. this time i will create a layout for a lawyer bureau. This is tutorial number 168



As usual we will start with a new document: 760 x 770 pixels
For background i will choose the following color : #282828

With Rectangle tool, i will create 2 shapes



Then with the same tool, i will create another small shapes. I will choose a white color



Then for all these small white layers modify the opacity value



this is my result



Select the big white shape, and in your layer palette right click on the layer , then choose Rasterize Layer



Then you need to download the following set of brushes : Corner Brushes



Load the brushes in photoshop



Then on a new layer ( to create a new layer press on CTRL+SHIFT+ALT+N in the same time )
then with black color add one of the corners like in the following image



now select the big white shape, then grab Polygonal lasso tool, and make the following selection



Then hit the Delete Key from your keyboard, and press CTR+D



The next step is to add some text and images. this is a very simple task, and i will not explain how to do it.



For my eyes this layout looks very simple. I will add a shape with rectangle tool
please note that this layer is placed right above the white layer



For this grey shape add the following layer styles







This is my result



On the left side i will place an stock image



Then with Ellipse tool, i will create some round shapes, and i will place them like in the following image



for all this small shapes i have used the following layer styles





Grab Pen Tool, and create a similar shape



i have used the same layer styles as above
then i will duplicate this layer several times ( to duplicate be sure you have the layer selected , then press on CTRL+J )

After i have placed this small shape, this is my result



This is my final result



I hope you like it. please download this PSD file , after you have created the layout. Only in this way you will learn how to do it

Attached Files
File Type: zip layout168.zip (404.9 KB, 41 views)
__________________
3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )
Reply With Quote
  #2 (permalink)  
Old 10-01-2008, 05:07 PM
Junior Member
 
Join Date: Sep 2008
Posts: 1
trhuijgen is on a distinguished road
Woaw what a great looking Tutorial! Keep up the good marathon
Reply With Quote
  #3 (permalink)  
Old 10-01-2008, 06:15 PM
Junior Member
 
Join Date: Jun 2008
Posts: 26
Cesto Ode is on a distinguished road
Very Nice, thank you!
Reply With Quote
  #4 (permalink)  
Old 10-06-2008, 05:33 PM
VIP Member
 
Join Date: Oct 2008
Posts: 1
paradoxxx is on a distinguished road
Where did the .psd file go ?
Reply With Quote
  #5 (permalink)  
Old 10-06-2008, 10:38 PM
Junior Member
 
Join Date: Feb 2008
Location: EgypT
Posts: 26
ahmedmansour is on a distinguished road
thanks man
Reply With Quote
  #6 (permalink)  
Old 10-06-2008, 10:40 PM
Junior Member
 
Join Date: Feb 2008
Location: EgypT
Posts: 26
ahmedmansour is on a distinguished road
where psd ?
Reply With Quote
  #7 (permalink)  
Old 10-09-2008, 12:08 PM
Junior Member
 
Join Date: May 2008
Posts: 26
maro is on a distinguished road
Thank you...
__________________

I Can Fix It...
Maro0o
ونهدي مفاتيح قلوبنا لمن هم جديرون بتقديرها..
عندئذ.. نشعر بأننا مدينون.. لمن علمونا كيف يمنح ذلك الشعور الدافئ الساحر
Reply With Quote
  #8 (permalink)  
Old 10-10-2008, 10:02 AM
Junior Member
 
Join Date: Oct 2008
Posts: 3
mirkozzo is on a distinguished road
Quote:
Originally Posted by ahmedmansour View Post
where psd ?
Reply With Quote
  #9 (permalink)  
Old 10-10-2008, 11:49 AM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,340
Blog Entries: 2
admin has disabled reputation
The PSD is now available at the bottom of this tutorial
__________________
3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )
Reply With Quote
  #10 (permalink)  
Old 10-13-2008, 04:37 AM
Junior Member
 
Join Date: Oct 2008
Posts: 26
james1234 is on a distinguished road
nice tutorial, the design looks good

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

LinkBacks (?)
LinkBack to this Thread: http://www.talk-mania.com/web-layouts/46370-lawyer-layout.html
Posted By For Type Date
CG Tutorials: Adobe Photoshop: Web Design: Clean Lawyer Layout This thread Refback 09-30-2008 03:17 PM


All times are GMT +2. The time now is 07:01 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