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 02-27-2007, 11:46 PM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,220
Blog Entries: 2
admin has disabled reputation
95 Night club layout

Hello my friends

Today i will show you how to create a night club layout

This is the Tutorial Number 95 from our 100 Tutorial Marathon
Soon this marathon will end, and i will start another one. I will not tell you how many tutorials i will create in my future marathon

This is what we gone do today



So let's start with a new document
Size 760x770 pixels
Background color: #3a3a3a

Select Rounded Rectangle Tool and make a big shape



Then open the following image in photoshop
This image is a PNG image without background. be sure you have the same images when you want to create something like that



Set the foreground color to #00b4ff

Now go to Filter > Sketch > Stamp and use the following settings



This is the result



Now drag the girl on your canvas



Then with the same methods find some other images and add then on your layout
This is my result



now create a new document ( size should be 100 x 100 pixels )
With pencil Tool, create something like this



Then go to Edit > Define pattern
Choose a name for your pattern and click OK

Now go back to your layout

Create a new layer ( press CTRL+ALT+SHIFT+N )
Select rectangular marquee tool, and make a selection like mine



Select paint Bucket Tool , use the following settings



Then click one time inside the selection
Press CTRL+D to deselect



Now go to Edit > Transform > Perspective
Move the right top corner of your image to modify the horizontal skew



Then you can change also the vertical scale of that layer, and drag under the blue girls layers in layer palette.



Grab eraser Tool, use a square brush, and start deleting some parts of the floor
You can add in the same time a disco ball image



Select pen Tool, and start creating something like me



Then select all this layers which you have created with pen tool and merge down all this layers into a single one
To merge the layers be sure you have selected the layers, then press CTRL+E

Drag this layer under the other layers with disco ball and with blue shapes



With this layer selected, press on " Add layer mask button "
Select Gradient Tool and use the following settings



Then draw a simple line from the middle of the disco ball to the end of the rays
This is the result



Now for this rays add the following layer style





This is the result



Now find some brushes with small stars , and make some randoms stars on your layout



Now create another rounded rectangle



Then add the following layer style





Drag this layer under the floor layer, This is my result



Now grab rectangle Tool , and draw a simple rectangle for a navigation bar



Then add the following layer styles





this is the result



We will create a new pattern
Open a new document in Photoshop
This document should be 40x40 pixels with a transparent background.

Now create a new layer ( Press CTRL+SHIFT+ALT+N )
Select Paint Bucket Tool and fill this layer with black

Now zoom your document to 1600 %

Create another layer ( press CTRL+SHIFT+ALT+N )

Select Pencil tool. Change the brush size to 1 pixel and make the following drawing with a white color.
The next image is zoomed by 1600 %



Delete the black layer



Then Go to Edit > define pattern
Chose a name for your pattern and click ok

Now let's come back to our layout
Make a selection like mine



Then Create a new layer ( press CTRL+ALT+SHIFT+N )

Select paint bucket tool and select the pattern we have created
press one time inside the selection



Press CTRL+D to deselect, then press on " add layer mask " button from the bottom of the layer palette

Select Gradient tool.
Please use the following settings



Then with gradient tool , make a small line ( follow the green line from the next image )



Now duplicate this layer, ( press CTRL+J )
then go to Edit > Transform > Flip Vertical
This is my result



Now add alone some text on your layout, and also some image



Now with a small font, create some dots on your layout, rasterize the type layer, and place the dots like me ( or you can use patterns for this small dots ) Please see my other tutorials



Now create a new document
Size should be 3 x 3 pixels with a transparent background
Zoom your document to 1600 pixels , and with the pencil toll create the following drawing



Go to Edit > define pattern
Choose a name for your pattern and click ok
Now create a new layer above the background layer, Grab paint bucket tool and fill this layer with the pattern from above

This is the result



And here is my final result



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

Attached Files
File Type: zip layout95.zip (784.1 KB, 789 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-28-2007, 12:16 AM
Junior Member
 
Join Date: Feb 2007
Location: New Jersey
Posts: 19
Ryan™ is on a distinguished road
Send a message via AIM to Ryan™
This is one of the best I've seen, great outcome and an amazing technique on the header. Just pure exclence.

Need CSS, HTML, Forum, Java, C++, PhotoShop, or some PHP help? Send me a PM.

Sorry, If you need a template I can only make them on the weekends for now, untill I fix my laptop that I use on the weekdays.
Reply With Quote
  #3 (permalink)  
Old 02-28-2007, 12:29 AM
zoro's Avatar
Junior Member
 
Join Date: Dec 2006
Posts: 20
zoro is on a distinguished road
awsome

It's cool, I think it will great example to a person, who want to do a web site about dance.

Live is candy.
Reply With Quote
  #4 (permalink)  
Old 02-28-2007, 02:13 AM
Junior Member
 
Join Date: Feb 2007
Posts: 9
ediab is on a distinguished road
Looks great, I love your designes and Tutorials, they simple and nice.

Thanks
Reply With Quote
  #5 (permalink)  
Old 02-28-2007, 05:14 AM
Lukeintosh's Avatar
Senior Member
 
Join Date: Oct 2006
Location: I live in New Zealand
Posts: 197
Blog Entries: 13
Lukeintosh is on a distinguished road
Send a message via MSN to Lukeintosh Send a message via Yahoo to Lukeintosh
Nice!!!!!!!!!!

GREAT 9/10!!! Well done nice effort linke the colours and its just... GREAT!!! Well done!
Reply With Quote
  #6 (permalink)  
Old 02-28-2007, 06:49 AM
Istil3k's Avatar
Junior Member
 
Join Date: Feb 2007
Posts: 26
Istil3k is on a distinguished road
Well Done Admin Good Work
Reply With Quote
  #7 (permalink)  
Old 02-28-2007, 09:56 AM
Junior Member
 
Join Date: Feb 2007
Posts: 10
zedtek is on a distinguished road
awsome i love this design
Reply With Quote
  #8 (permalink)  
Old 02-28-2007, 12:28 PM
Junior Member
 
Join Date: Feb 2007
Posts: 11
Modnaja is on a distinguished road
Awsome tut. I will try it later and post result...
Reply With Quote
  #9 (permalink)  
Old 02-28-2007, 05:53 PM
[N] [N] is offline
Junior Member
 
Join Date: Feb 2007
Posts: 10
[N] is on a distinguished road
thats nice but some things i disliked.
Reply With Quote
  #10 (permalink)  
Old 02-28-2007, 10:57 PM
Junior Member
 
Join Date: Feb 2007
Posts: 8
Maxibon is on a distinguished road
I realy love this template exept the disco ball

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:20 PM.



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