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 12-14-2006, 12:17 AM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,340
Blog Entries: 2
admin has disabled reputation
53 Create simple Business templates

Hello

Today we will continue with the 100 Marathon Tutorials
For our newest members this means that each day i will add a new tutorial.
This is Tutorial 53

This is my final result:



So let's start.
Create a new document with a white background.the size should
be 760 x 770 px.
Create a new layer by pressing Ctrl+Shift+Alt+N in the same time.

Now with your Rectangle Tool create a simple Shape



Select Ellipse Tool and create a small Circle and place it on the left top side



We will not use this small circle in our layout. I will try to make some rounded corners.
You will see in the following steps

Press on The Layer Thumbnail ( circle layer )



Your circle will have a selection around it. Now press on CTRL+SHIFT+I
This will inverse the selection

Now select the rectangle layer



Go to Layer > Rasterize > Shape

Grab the Eraser Tool and start deleting the corner ( see the next image for example - I have zoomed in the image to see better what i am doing)



Press on CTRL+D to deselect
After you delete the corner you should have something like this:



Then you can hide the red circle and this is my result



Make a selection with Rectangular marquee Tool on the black rectangle



Then hit delete on your keyboard, and press CTRL+D to deselect



Now with the same technique as above change the following corners to this nice looking round corners



Now add the following layer styles







This is my result:



Duplicate this layer ( press CTRL+J )
GO to Edit > Transform > Flip Horizontal
Then go to Edit > Transform > Flip Vertical

With your down arrow key i will place this new layer as above ( please note that i have changed the color alone - so you can see better )



Now apply the following layer styles:







This is my result



Now we will add some text buttons and some stock photos



Next step is to select the Line Tool and to create over 15 lines ( set the Weight to 1 pixel ) . please place the lines like in the following image



Select all the layers with lines and press CTRL+E
This will merge all the layers

Select this layer and go to Edit > Transform > Warp and use the following settings



Then hit Enter and this will be your result



Now press on Add layer mask



Select Gradient Tool and draw a line from bottom to top. in the next image you will see the result and also the way you should draw the line with gradient tool



Select the blue shape layer. Make a selection like mine with Rectangular marquee tool



One more time be sure you have selected the blue layer
Go to Layer > new > layer via copy

Now go to Edit > transform > rotate 180 and with your arrow keys place this piece of rectangle like in the next image



Then drag the layer before the background layer and add the following layer styles





Then add some text





Create a new layer and select Custom Shape Tool
Choose the Arrow 6 custom shape



Then make 3 different shapes and place them like in the next image



Create a new layer , select Brush tool , find a star brush and make some simple start on your layout. This is my final image



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

Attached Files
File Type: zip layout53.zip (856.3 KB, 423 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-14-2006, 03:03 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
Its alrigth i woulded use it thoe
Reply With Quote
  #3 (permalink)  
Old 12-14-2006, 12:34 PM
Member
 
Join Date: Oct 2006
Posts: 67
scorpion is on a distinguished road
lol that guy on the chair is hilarious

it's ok ..no use for it though thanks mate
__________________
<(^,^<) <-- kirby
Reply With Quote
  #4 (permalink)  
Old 12-14-2006, 12:41 PM
Senior Member
 
Join Date: Dec 2006
Location: Lisbon-Portugal
Posts: 256
amitk is on a distinguished road
Talking Expected

One more Excellent and Five Star Tutorial by you.... we can only expect this kind of Quality Tutorials from you...
Where do you get all of your Imagination, to provide this kind of Tut ???
Congrats a lot.

Keep it up...we just love it...


P.S. The only problem is: I've to translate it in Portuguese, to use in the Classroom....Don't you know Portuguese ???

Amit
Reply With Quote
  #5 (permalink)  
Old 12-14-2006, 03:05 PM
Senior Member
 
Join Date: Dec 2006
Location: i live in norway
Posts: 312
haavard29 is on a distinguished road
Another excellent tutorial by Admin.
I have now become VIP member . Thanks :P
Here is my result on this tutorial:

- Haavard.
Reply With Quote
  #6 (permalink)  
Old 12-14-2006, 09:00 PM
Junior Member
 
Join Date: Nov 2006
Posts: 28
igormath is on a distinguished road
Thumbs up excelent

This is what i need.
kip on gooing. Whit tut like this we can learn alot
Reply With Quote
  #7 (permalink)  
Old 12-14-2006, 11:43 PM
Junior Member
 
Join Date: Sep 2006
Posts: 11
braveman is on a distinguished road
nice tutorial !!
can I have the picture of that guy on the chair ?
Reply With Quote
  #8 (permalink)  
Old 12-15-2006, 06:09 AM
Junior Member
 
Join Date: Nov 2006
Location: I live in New Zealand
Posts: 19
sharzy is on a distinguished road
Send a message via MSN to sharzy
hmmm shiny bitz...i like it, how's the marithon going.
__________________
Sharzy
Reply With Quote
  #9 (permalink)  
Old 12-15-2006, 07:40 AM
oterror's Avatar
Senior Member
 
Join Date: Dec 2006
Posts: 103
oterror is on a distinguished road
I really like the way this one looks, will give a crack at it tomorrow.
Reply With Quote
  #10 (permalink)  
Old 12-16-2006, 01:12 AM
Junior Member
 
Join Date: Dec 2006
Posts: 13
edwerd is on a distinguished road
OH~! very 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


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