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 02-05-2007, 11:45 PM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,340
Blog Entries: 2
admin has disabled reputation
81 Web design company layout

Hello

Thank you for visiting talk-mania.com. As you know i have tried to add each day a new tutorial. Today i will add Tutorial Number 81 from 100 Tutorial Marathon.
Soon this marathon will end, and we will start another one. I will not disclose how many tutorial i will make in the Next Marathon. I assure you that you will have a big surprise.

Today i will create another website layout. This one will be for a web design company.
If you will follow all my tutorial i am sure you can start a web design company very soon

So let's start working on our new layout. This is the result



open a document in photoshop
Size 760 x770
background color : #333333

Then add a nice image on your layout.



Then Select the rectangle tool and add a shape on the right of the image



Now select Line tool, and start creating some simple lines. When you create lines be sure you will use different weight



Now create a new pattern
Now Create another document:


Zoom this document to 1600% and with the Pencil Tool Draw 3 points:



After that go to Edit > Define Pattern...
Choose a name for your pattern and press OK
To learn more about patterns , please visit the following link.
http://www.talk-mania.com/showthread.php?t=37

Then you can close this document.
Create a new layer ( CTRL+ALT+SHIFT+N )
Select Marquee Tool and make a selection like mine



Then grab Paint Bucket Tool. Be sure you will select the pattern we have created , and press one time inside your selection with the paint bucket tool
In the next image you can see more changes. This is done with the same technique



Now add some text on your layout



Then create another document.
The size should be 5 x 5 pixels
With a transparent background

Zoom the document to 1600 % , and with the Pencil Tool create the following arrow
Be sure that you have the brush size = 1 pixel



Now select Move Tool and drag this arrow on your layout. Duplicate the arrow a few times and place it like in the next image



Now create another document with transparent background
Size should be 11 x 10 pixels
Zoom the document to 1600 % and make the following drawing with the Pencil Tool ( brush size 1 pixel )
Be sure you set the color of the pencil tool to #333333 ( the color should be the same as your background



Now Select Move Tool one more time and drag this small pixel art image to your layout. Duplicate this layer a few times and place it between your text from navigation bar



Now add more text on your layout and also some image. i will add a image with another tutorial you can find on Talk-mania.com



You can add another details on your layout. For example select rectangular Marquee Tool , Create a new layer then make a selection like in the following image



Then go to Edit > Stroke and use the following settings



Click ok. then press on CTRL+D to deselect
This is the result



Select Line Tool. Set the weight to 20 pixels and make 2 vertical lines like in the following image



Then Create another document . Size should be 15 x 15 pixels.
With a transparent background

Zoom it to 1600 % , Select pencil Tool and make this pixel art drawing
I will make the drawing with black, but please use a white color in your document



Then With The move tool drag to your layout and place it in the same way i did



I think i am ready with this layout. i can add as many details i want. but i am sure you can add more details then me
This is my final 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. If you need this layout please download it.

Attached Files
File Type: zip layout81.zip (967.6 KB, 1052 views)
__________________
3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )
Reply With Quote
  #2 (permalink)  
Old 02-05-2007, 11:52 PM
Junior Member
 
Join Date: Feb 2007
Posts: 11
hazeaccord is on a distinguished road
This tutorial is very easy to follow, I like the simplicity of this template. The best part that i like is the latest work idea u used. I might have to use that on my new layout for my upcoming site...


Good Job Man!
Reply With Quote
  #3 (permalink)  
Old 02-06-2007, 12:48 AM
Member
 
Join Date: Jan 2007
Location: Glasgow, Scotland
Posts: 30
XenizE is on a distinguished road
Send a message via AIM to XenizE Send a message via MSN to XenizE
Wow, awesome man.
Sorry I haven't been here for a few weeks but my laptop wen't all bums on m...and me internet died. But now it's all good =]
9/10
__________________
I don't care aout my sig and the fact that it sucks...I just can't be bothered uploading any of my sigs
Reply With Quote
  #4 (permalink)  
Old 02-06-2007, 01:32 AM
Lukeintosh's Avatar
VIP Member
 
Join Date: Oct 2006
Location: I live in New Zealand
Posts: 249
Blog Entries: 13
Lukeintosh is on a distinguished road
Send a message via MSN to Lukeintosh Send a message via Yahoo to Lukeintosh
Good!

Just what i have wanted. i can not do ratings as i do not have my computer and have the symbols i need soo oooo1/2 out of ooooo well done (4 1/2 out of 5)
Reply With Quote
  #5 (permalink)  
Old 02-06-2007, 07:11 AM
oterror's Avatar
Senior Member
 
Join Date: Dec 2006
Posts: 103
oterror is on a distinguished road
My version, thanks to the admin

Reply With Quote
  #6 (permalink)  
Old 02-06-2007, 07:16 PM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,340
Blog Entries: 2
admin has disabled reputation
Your layout looks good
Keep up the good work oterror
__________________
3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )
Reply With Quote
  #7 (permalink)  
Old 02-06-2007, 07:22 PM
Junior Member
 
Join Date: Jan 2007
Posts: 10
Natrix is on a distinguished road
Thumbs up

WOW! You are a wizard, admin
Reply With Quote
  #8 (permalink)  
Old 02-06-2007, 09:24 PM
oterror's Avatar
Senior Member
 
Join Date: Dec 2006
Posts: 103
oterror is on a distinguished road
Quote:
Originally Posted by admin View Post
Your layout looks good
Keep up the good work oterror


thanks, not to happy with my toolbar but I always try to do something a little different.
Reply With Quote
  #9 (permalink)  
Old 02-06-2007, 11:07 PM
Junior Member
 
Join Date: Feb 2007
Posts: 1
criminal is on a distinguished road
nice job
Reply With Quote
  #10 (permalink)  
Old 02-07-2007, 01:05 AM
Junior Member
 
Join Date: Feb 2007
Posts: 18
Shady1 is on a distinguished road
Great Tut Admin, you da man!

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 09:00 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