Web Content $0.006/word Register Domain
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

Reply
 
Submit Tools LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 10-01-2006, 01:09 AM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,220
Blog Entries: 2
admin has disabled reputation
5 Business - Corporate template

Hello
Today i will show you how to create this layout ( tutorial number 5 )

Create a new document with a white background.the size should
be 760 x 700 px.
Create a new layer by pressing Ctrl+Shift+Alt+N in the same time.

Then select Rounded Rectangle Tool ( be sure you have the radius = 5 px )
And draw a rectangle like mine.
I have used this color to fill it: #535353

You can see a small image of my first step:



Then you have to rasterize this layer: Go to Layer > Rasterize > Shape
After you have rasterized you have to duplicate this layer.

To duplicate the current layer using the Layer menu, choose Layer > Duplicate Layer

Select the first layer:



Now go to Edit > Transform > Perspective and set this value:



You will notice that the top of the rectangle will go to left.
Do not forget to press on Enter.

This will be the shadow for the second rectangle.

Now with the same layer selected go to Filter > Blur > Gausian Blur and set the radius to 7 px.

After you press ok change the opacity for this layer to 25%.



Now select the top Layer ( Shape 1 Copy ) and let's change the layer style.
Please use this settings:



For Inner Glow settings use the color #003399







Set the Gradient color for the left #66CCFF and for the right #0066CC





Now we have to add another Rectangle. Select the Round Rectangle Tool ( radius 5 px ) and Draw a rectangle like mine:



On this Rectangle we will create the buttons and we will have also place for logo.

But first of all we have to create one more time a shadow. i will not explain one more time. please folow the steps from above.

After you have created the shadow we will add a layer style for this rectangle.



And for the gradient use this colors:

Left = #fcfcfc Middle = #d1d2d5 Right = #9c9ea5



Now select the Rectangular Marquee Tool ( be sure you have selected the rectangle you have already applied this layer style )

With Rectangular Marquee Tool make a selection like this:



Now press on Delete.
You can do this as many times you want. After you press delete you can move this selection with your arrow keys and when you are happy with the distance press one more time delete.

Repeat this steps as many times you need. I will create 4 buttons.
After you have created this buttons press Ctrl+D to deselect
You will notice that the selection is gone

This is my result:



Now we will add another details for this buttons. With rounded rectangle tool create small rectangles and place them like me:

For this small rectangles use the same layer style as the big blue rectangle.



Now you can add your logo on the remaining place ( i will add a logo which you can have it form our paid forum area - VIP members - the price to access this area is 29.95 $ and you can download all the logos.This is a limited time offer. we will add more logos and the price will be bigger. ) Access VIP Download Area
Here are some examples of logos you can download them from VIP download Area:







For more previews please acces
VIP Download Area
After you pay the subscription please contact ADMIN

Now let's come back to our layout. here is the image with the logo.



We have finished the buttons and the logo. Now let's start to work on the other part of the website.

Now create a new layer ( Press Ctrl+Shift+Alt+N ) and with the
Rectangular Marquee Tool make a selection like this:



Create a new transparent document (3x 3 pixels) Zoom
it by 1600 %.With the Pencil tool create somethng like this:



Then go to Edit > Define Pattern . Choose a name and press Ok.

Now let's come back to our template.Select Paint Bucket Tool.
On your top side of the window select the pattern you just made.
Use this settings:



To learn more about patterns please go on this link:
http://www.talk-mania.com/buttons-web-graphics-banners/37-professional-patterns-general-use.html

Now press on time with the Paint Bucket tool inside the selection on our layout.

this is the result.



You can change the color if you want. Go to Layer > Layer style > Color overlay

I will choose a white color. now please add as many details as you want.
I have duplicated this line and with my arrows keys i have placed under the first one.

Now it is your choice. You can add as many as you want. first think about the content you will have on this website.

Select the Rounded Rectangle Tool and create something like me:



You can notice that the rectangle is biiger on the bottom part. you will see in my next steps why i have created this.
Rasterize this Layer: Layer > Rasterize > Shape

Select the Rectangular Marquee Tool and make a selection like mine. ( be sure you have this rectangle selected )



Then go to LAyer > New > Layer via Cut
Photoshop will select automaticaly this layer. Now please select this layer and drag it on Layer pallete above the Background layer:



After that the image will look like mine:



Now press D on your keyboard. ( this will reset your colors )
Select one more time the Rounded rectangle Tool and create a small rectangle.

please see the next image:



Place this rectangle like in my next image. be sure you drag the layer on second place :



Then with the arrow keys place it like me:



Let's add a layer style for this small black rounded rectangle



. now we will add another details.
The most important think is to add one more time shadow on the grey rounded rectangle. Please follow the firts steps from this tutorial.

Now create another document 30 x 30 pixels with a green
background (it is not important the color but it should be
something different from white so you can see better what i am doing)
Zoom this document at 1600 %
Then with the Pencil Tool and with an white color create
something like this:



The image from above is resized at 50 %

Now with the Rectangular Marguee Tool select the white
line and with the Gradient Tool make something like this:



Then Make another selection:



With this selection press Ctrl+C and then Ctrl+V .Then
press on Move Tool,
then go to Edit > Transform > Rotate 90 CW.
Then place the new layer like me:



You can notice that i have used the blue color instead of the black one.
When you drag this document to our layout it will look very good, and this document will blend very good on our layout.

With the Magic Eraser Tool delete the green color.Select the Move Tool and drag this on the template.Now place the new layer like on the
folowing photo (I have duplicated a few times the layer (the one we have just made before) and i have rotate to fit with my template)

If you have question please register and ask me . i will answer to all your question.

If you want to download the PSD file view Attachments

this is my final image:



I want to invite you to take part on our contest. We will give you access to VIP download area if you have 100 post or threads created. More infos here

Attached Files
File Type: zip layout-corporate.zip (800.8 KB, 1007 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-2006, 04:54 PM
Junior Member
 
Join Date: Sep 2006
Location: Lombard,Illinois
Posts: 13
czech-kid is on a distinguished road
Send a message via ICQ to czech-kid Send a message via Skype™ to czech-kid
thats preaty cool!!thanks for that!!
Reply With Quote
  #3 (permalink)  
Old 10-01-2006, 10:44 PM
Junior Member
 
Join Date: Sep 2006
Posts: 5
perad is on a distinguished road
yes this tutorial is very very nice. i like all the tutorials from this website
keep up the good work
Reply With Quote
  #4 (permalink)  
Old 10-09-2006, 10:14 AM
Junior Member
 
Join Date: Oct 2006
Posts: 2
ajlaluan is on a distinguished road
Send psd file in my email

Hi this is my first time in opening this thread. I like your tutorial very much. can i have the psd file for this tutorial?
Reply With Quote
  #5 (permalink)  
Old 10-09-2006, 10:23 AM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,220
Blog Entries: 2
admin has disabled reputation
Quote:
Originally Posted by ajlaluan View Post
Hi this is my first time in opening this thread. I like your tutorial very much. can i have the psd file for this tutorial?

You can download the PSD file from the first post.
If you have problems downloading please let me know and i will send you directly in your e-mail

Thanks

3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )
Reply With Quote
  #6 (permalink)  
Old 10-09-2006, 10:28 AM
Junior Member
 
Join Date: Oct 2006
Posts: 2
ajlaluan is on a distinguished road
Unhappy Reply to post 'Business - Corporate template'

Hi i got your message in my email but unluckily i am not allowed to send msg. Just send it in my email please. Coz when I click on the link or zip i am always redirected to the log-in page which i am currently logged in,
Reply With Quote
  #7 (permalink)  
Old 10-09-2006, 10:33 AM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,220
Blog Entries: 2
admin has disabled reputation
I think you have a problem with your cookies.i will send the file in a few minutes.Thanks

3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )
Reply With Quote
  #8 (permalink)  
Old 10-10-2006, 06:59 PM
Member
 
Join Date: Oct 2006
Posts: 36
Ember is on a distinguished road
It's my first time visiting this site and the template looks really nice, i will try the tutorial out sometime. It looks very well written and the steps are simple to follow.
Reply With Quote
  #9 (permalink)  
Old 10-10-2006, 07:07 PM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,220
Blog Entries: 2
admin has disabled reputation
Quote:
Originally Posted by Ember View Post
It's my first time visiting this site and the template looks really nice, i will try the tutorial out sometime. It looks very well written and the steps are simple to follow.
Wellcome to Talk-mania.com
Right now i am working on another tutorial.
I will create the third tutorial from 100 Tutorials Marathon

We make the tutorials very simple because it will help you to learn better.
And i will try to insert all the steps

one more time welcome
Thanks

3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )
Reply With Quote
  #10 (permalink)  
Old 10-12-2006, 12:35 PM
Junior Member
 
Join Date: Oct 2006
Posts: 1
Ahmad ziton is on a distinguished road
thanks alot it's a great tut

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 07:42 PM.



Powered by vBulletin® Version 3.7.1
Copyright ©2000 - 2010, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC8
Forums Copyright © Talk-Mania.com