Web Hosting Deals Holiday Logo Design Website Header Templates Register domain Search Engine Optimisation Web Hosting
Go Back   Talk Mania Forum > Tutorials > Photoshop Tutorials from Talk-Mania members

Photoshop Tutorials from Talk-Mania members Got something you've done and want to share it.Post it here.

 Image
Buy Sell Downloads

Reply
 
Submit Tools LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 07-07-2008, 06:25 PM
Member
 
Join Date: May 2008
Posts: 30
tutmaster is on a distinguished road
Perspective Lines Web Layout Tutorial

Hello friends. today i will show you how to create another layout.



1) Open a new document in Photoshop, and fill the background with the color #10100c. Search some grunge brushes and paint with one of them on a new layer (flolow the next link to download the brushes which I used Go Media Spills & Splatters - Photoshop Brushes - Free Photoshop Brushes at Brusheezy! ). Use the color #202018.



2) Create a new layer, select Rectangular Marquee Tool and use the Fixed Size 10px * 150px to make a rectangular selection. Fill the selection with any color, then make sure you have Rectangular Marquee Tool selected, hold down Shift and press two times the right arrow button on your keyboard. This will move your selection 20 pixels to right. Now fill the selection with another color. Keep doing this on the same layer until you have 12 rectangles.



3) Go to Edit > Free Transform and in the option bar set the horizontal scale to 93%.



4) Select Rectangular Marquee Tool, make sure that the style is set to Normal, and make a selection like the one from the image bellow. Press right-click on the image and select Layer via Cut. Everything you have selected will be placed in a new layer. Change the name of this layer into Perspective Lines and the name of the first layer into Straight Lines.



5) Now with the new layer selected (Perspective Lines) go to Edit > Free Transform and move the right bottom point to left. When you`re happy with your result press Enter.



6) Select the Straight Lines layer and press Ctrl+J to duplicate it. Press Ctrl+T and transform it like I did in the next image. Change the name of this layer into Middle Lines.



7) Select the Straight Lines layer and the Perspective Lines layer (hold down Ctrl and click on this two layers) then move them above the ‘Create a new layer‘ button in the Layers window to duplicate them. Press Ctrl+E to merge this two layers, then go to Edit > Transform > Flip Vertical. Select Move Tool (V) and move this layer to the bottom part of our layout. Change the name of this layer into Bottom Lines.



8) Place all the lines layers into a folder (select them all then press Ctrl+G). Duplicate this group by bringing it above the ‘Create a new layer’ button. Set the blend mode for this group to Color Dodge. Add a layer mask for each of this two groups (Layer > Layer Mask > Reveal All), then use some grunge black brushes to cover some parts of the lines. Use different opacities for the brushes. Take a look at the result which I obtained in the image bellow.



9) Now we are going to create the menu. Create a new layer, set the foreground color to #e9dd71 then select Rounded Rectangle Tool and create a rounded rectangle with the radius of 10 pixels. Add a mask to this layer and use some grunge black brushes to cover some parts of the button. Type the name of the page, then open the Layer Style window of the layer text and use the settings from the next image. Create another three buttons using the colors #11a60b, #bf25df and #0d34ca.





10) Create a new layer, select Rounded Rectangle Tool, set the radius to 20 pixels and make a rounded rectangle which is going to be our content background. Then open the Layer Style window and use the settings from the next image. Set the opacity for this layer to 70%.





11) Create a few rounded rectangles for the sidebar. Copy and paste the layer style from the content background, but set the opacity to 100% (just for the sidebar rounded rectangles).



12) Add the content for our layout. You can make a separator between posts and create some text effects.



13) Create a small rounded rectangle with the radius of 20 pixels which will be the footer. Place there the copyright information.



Final Result



PSD File

The .psd file can be downloaded by following the next link FlyUpload / Share Files

Reply With Quote
  #2 (permalink)  
Old 07-07-2008, 06:40 PM
Lenkrad's Avatar
VIP Member
 
Join Date: Jan 2008
Location: Burghausen
Posts: 84
Lenkrad is on a distinguished road
Send a message via ICQ to Lenkrad
Great tutorial.
Great guy.
Great outcome.
Just great!
__________________
©2008 Fabian Ruef -Lenkrad
Reply With Quote
  #3 (permalink)  
Old 07-17-2008, 07:38 PM
sdavis891's Avatar
Junior Member
 
Join Date: Jul 2008
Location: Canada
Posts: 28
sdavis891 is on a distinguished road
I like it. But I don't see me using it for a portfolio, its not my cup of tea... 8/10
Reply With Quote
  #4 (permalink)  
Old 07-19-2008, 01:51 AM
Junior Member
 
Join Date: Nov 2007
Posts: 2
randomizer94 is on a distinguished road
hoho. was that lines part idea from tutorial9.com? u should state where u got it if u got it from somewhere else and its not entirely your idea.s
Reply With Quote
  #5 (permalink)  
Old 07-21-2008, 02:59 PM
Senior Member
 
Join Date: Jul 2008
Posts: 111
ramy-ahmed is on a distinguished road
Thank you
Reply With Quote
  #6 (permalink)  
Old 08-07-2008, 09:47 AM
Junior Member
 
Join Date: Jul 2008
Posts: 28
musukashi is on a distinguished road
Thank You .....more layout tutorial.
Reply With Quote
  #7 (permalink)  
Old 08-25-2008, 06:42 PM
Junior Member
 
Join Date: Jun 2008
Posts: 26
jackald is on a distinguished road
i needed this effect for my website thanks for tut.
Reply With Quote
  #8 (permalink)  
Old 08-26-2008, 12:48 PM
Junior Member
 
Join Date: Aug 2008
Posts: 27
aa85 is on a distinguished road
looks good
Reply With Quote
  #9 (permalink)  
Old 09-17-2008, 02:46 AM
Junior Member
 
Join Date: Feb 2007
Location: toronto, Canada
Posts: 26
sintax is on a distinguished road
I like this way of adding depth and lines
Reply With Quote
  #10 (permalink)  
Old 09-18-2008, 05:18 AM
Junior Member
 
Join Date: Sep 2008
Posts: 1
Xager is on a distinguished road
the colored line effect was actually taken from the Adobe.com website. Apart form that effect it looks pretty ordinary.

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 02:55 PM.



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