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 (8) Thread Tools Display Modes
  8 links from elsewhere to this Post. Click to view. #1 (permalink)  
Old 12-21-2006, 03:01 PM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,340
Blog Entries: 2
admin has disabled reputation
58 Architecture Web Template

Hello

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

Today i will try to make another layout for your business.



Open a new document in photoshop ( 760 x 700 pixels ) with a white background.

Select Rounded Rectangle Tool ( set Radius to 5 ) and make a rectangle like in the following image. (next image is resized )
I have used the following color: #dfefff



Then add the following layer style



Select Line Tool ( set the weight to 1 pixel ), and create one line ( use a grey color ) like in the following image



Press on Add Layer Mask



Select Gradient Tool , hold the SHIFT key pressed and make a line like in the next image



Duplicate this Layer ( line layer ) and add the following layer style



Then change the Fill settings to 0 %



Grab the Rectangle Tool. Change the Foreground color to white and make a simple rectangle, and place it above the lines



Very simple , and in my opinion it has a nice effect

Now i will add some images from my stock collection



Now you can buy this kind of images , or you can find on free stock images.

Now we will add some more details. I think it will be nice if i will add a house plan



You can change the opacity if you like in this way.
Now we will add some text buttons



Now add more lines near your text buttons



You can add some text alone



Then chose a small font , and with the Type Tool write some minus signs " ------- "



Now add a logo on your header



Then change the angle size . this is my final layout



Of course you can add also another details , and i am curious to see your ideas

Attached Files
File Type: zip layout58.zip (1.64 MB, 729 views)
__________________
3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )
Reply With Quote
  #2 (permalink)  
Old 12-21-2006, 09:00 PM
Junior Member
 
Join Date: Dec 2006
Posts: 10
vittosheva is on a distinguished road
Smile

yes man you really help me with this!!
Thanks
Reply With Quote
  #3 (permalink)  
Old 12-21-2006, 11:54 PM
Senior Member
 
Join Date: Dec 2006
Location: i live in norway
Posts: 312
haavard29 is on a distinguished road
Nice tutorial Admin!
Keep up the good work.
Reply With Quote
  #4 (permalink)  
Old 12-23-2006, 12:56 AM
Junior Member
 
Join Date: Dec 2006
Posts: 10
matthiasve is on a distinguished road
Nice tutorial!
Reply With Quote
  #5 (permalink)  
Old 12-23-2006, 10:34 AM
Junior Member
 
Join Date: Dec 2006
Posts: 9
ahmad is on a distinguished road
Thank you Mr. admin

It's wonderful
Reply With Quote
  #6 (permalink)  
Old 12-23-2006, 05:31 PM
Junior Member
 
Join Date: Dec 2006
Posts: 10
icewebart is on a distinguished road
v cool...nice job...where can i get those images :-?
Reply With Quote
  #7 (permalink)  
Old 12-23-2006, 07:09 PM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,340
Blog Entries: 2
admin has disabled reputation
i have the images from my stock collection
__________________
3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )
Reply With Quote
  #8 (permalink)  
Old 12-24-2006, 01:04 AM
Junior Member
 
Join Date: Dec 2006
Posts: 14
koshin is on a distinguished road
Lightbulb

very cool indeed i like how u used the orange-yellow paper as a background to ur slogan or logo area.

I think i will use that image on some other designs. thanks alot.

are we allowed to request tutorials or you good at doing your own thing and experimenting because thats how i am....i will show with u guys some templates that i made my biggest problem is lack of image stocking, so i always collect images from free templates etc....

does anyone know good image stock site cheap one?
Reply With Quote
  #9 (permalink)  
Old 12-24-2006, 01:09 AM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,340
Blog Entries: 2
admin has disabled reputation
IF you need some stock images i will give you this link with free stock images
http://www.sxc.hu/

But, if you really want to make something cool, you should buy a few membership accounts, or if you want cool designs , i recommend you to start learning 3dsmax or maya
Good luck
__________________
3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )
Reply With Quote
  #10 (permalink)  
Old 12-24-2006, 01:32 AM
Junior Member
 
Join Date: Dec 2006
Posts: 14
koshin is on a distinguished road
Question

Thanks for the information and tips; what tools do you mainly use to make your templates, you have mentioned maya and 3D Max, do you use that and what do you use that to make, i mean are they compatible with photoshop?

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/10345-architecture-web-template.html
Posted By For Type Date
www.4des.ru веб-дизайн - это просто - Дизайн сайта архитектурной компании - Веб графика - Уроки и статьи This thread Refback 09-01-2008 10:44 AM
"Наш форум" • Просмотр темы - сайт РІ Adobe Photoshop This thread Refback 07-30-2008 05:00 PM
Adobe Fireworks tutorials : Architecture Web Template - SOFTutorials This thread Refback 07-24-2008 06:14 AM
Adobe Fireworks tutorials : Architecture Web Template - SOFTutorials This thread Refback 07-21-2008 06:00 PM
CG Tutorials: Adobe Photoshop: Web Design: Architecture Web Template This thread Refback 07-05-2008 12:49 AM
2D Grafik > Photoshop > Web Arayьzleri: Mimari web sayfasэ tasarэmэ - GorselDersler.Net - En iyi CorelDraw, Photoshop ve Web tasarэm gцrsel dersleri kaynaрэ This thread Refback 06-30-2008 04:35 PM
Architecture Web Template This thread Refback 06-28-2008 02:56 AM
Дизайн сайта архитектурной компании -> Demiart - Photoshop Форум This thread Refback 06-27-2008 03:46 PM


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