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 (4) Thread Tools Display Modes
  4 links from elsewhere to this Post. Click to view. #1 (permalink)  
Old 07-10-2008, 12:22 AM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,223
Blog Entries: 2
admin has disabled reputation
162 Hand drawn layouts - hottest design trends

Hello My friends
Today I will continue our marathon with tutorial number 162. I have seen over the internet a lot of hand drawn layouts which I like very much.

This is my final result :
You can see a HTML / css version here ( THIS layout is available for VIP members Here )



You can create these types of layouts with different methods. Today I will show the simplest one. We will manipulate some photoshop brushes to create a great looking layout.
If you don’t have already Photoshop Designer’s pack already you can purchase it from our SHOP. In this package you will have over 4000 different brushes in 3 different sizes = almost 12.000 brushes
So let’s start with a new document. Go to File > New



Fill the background with the following color #f7f6f2 ( use paint bucket tool )
Select Rectangle tool, and create a new shape, and place it like in the following image:



Download the following image and open this image in photoshop
This image is very small. I hope you can see it



After you open this image, go to Edit > Define pattern. Chose a name for this pattern and click OK. You can close this small image. We will return to our hand drawn layout. Select the white shape, and add the pattern we have created on this layer.
To add this small image to the shape is very simple. Go to Layer > Layer Style > Pattern overlay… and use the following settings



And for the Color Overlay use the following settings



For Outer glow settings use the following settings



This is my result



Now comes the funny part. We will add some nice flower brushes under this layer.
All the brushes I will use are from Talk-Mania Designer’s Pack
You can find this brushes in the following folders :



Inside this folder you will find : Flowers-2 , Flower-3, Flower-6, and Flower-7. Load all this brush sets, and create some random brush artwork



Now right above the background layer , create a new layer ( press CTRL+SHIFT+ALT+N ). Grab Brush tool, and be sure you have “ Airbrush Soft Round 300” brush selected. Change the opacity to 40-50 %, and on this layer add some random colors



This is my result



On the top part I will add another brushes also from Photoshop designer’s pack ( you will find this brushes in Ornaments folder



Now on the right part of the layout I will add some post note papers, and some clips



On the top I will add some text with type tool, and on the bottom note paper, I will add some text with a Wacom Tablet. I am not writing so beautiful with a tablet. You can write on a piece of paper, and then you can scan it, and place the scanned images on your layout.
In the same time I have placed a few banners. You can see that 2 banners are with our newest websites
www.graphic-host.com and www.wordpress-mania.com



I have placed a little with my Wacom tablet and I have created a nice RSS icon



Now I will add some text and images on my layout



What I don’t like is that our text looks not clear with that patter behind. For this we will add a new layer under the text. Select Rectangular marquee tool, and set the radius to 40



With rectangular marquee tool, create the following selection



Then fill this selection with white ( use Paint bucket Tool ). Press CTRL+D to deselect



This is my final result. I hope you like it. This layered layout is available only for VIP members



3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )
Reply With Quote
  #2 (permalink)  
Old 07-10-2008, 09:43 AM
Senior Member
 
Join Date: Jul 2008
Posts: 112
ramy-ahmed is on a distinguished road
very nice
Tank you
Reply With Quote
  #3 (permalink)  
Old 07-10-2008, 01:52 PM
Lenkrad's Avatar
Member
 
Join Date: Jan 2008
Location: Burghausen
Posts: 76
Lenkrad is on a distinguished road
Send a message via ICQ to Lenkrad
really great!
deamn i need this packet^^ but at the moment I don't have enough money for it.

© 2008 Fabian 'Lenkrad' Ruef - Talk-Mania.com
Reply With Quote
  #4 (permalink)  
Old 07-10-2008, 02:35 PM
Junior Member
 
Join Date: Mar 2007
Posts: 26
Tom12361 is on a distinguished road
Quote:
Originally Posted by Lenkrad View Post
really great!
deamn i need this packet^^ but at the moment I don't have enough money for it.
Yeah, I need that pack too, a lot, but it is too expensive for me...

Talk-Mania's member
Reply With Quote
  #5 (permalink)  
Old 07-11-2008, 01:35 PM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,223
Blog Entries: 2
admin has disabled reputation
You can see a coded version on this link
The html, css are available for VIP members

3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )
Reply With Quote
  #6 (permalink)  
Old 07-12-2008, 09:56 PM
Lenkrad's Avatar
Member
 
Join Date: Jan 2008
Location: Burghausen
Posts: 76
Lenkrad is on a distinguished road
Send a message via ICQ to Lenkrad
Is there a way to ONLY buy the Brushes?!

© 2008 Fabian 'Lenkrad' Ruef - Talk-Mania.com
Reply With Quote
  #7 (permalink)  
Old 07-13-2008, 11:56 AM
andersmoen's Avatar
Member
 
Join Date: Mar 2007
Location: http://www.andersmoen.com
Posts: 27
andersmoen is on a distinguished road
Send a message via MSN to andersmoen
I think this is some of the best you have ever done.
Damn, this just looks so good!

Regards,
Anders Moen
Reply With Quote
  #8 (permalink)  
Old 07-17-2008, 02:21 AM
Member
 
Join Date: Jul 2008
Posts: 36
agneepath is on a distinguished road
it is great
Reply With Quote
  #9 (permalink)  
Old 07-17-2008, 03:23 AM
Junior Member
 
Join Date: May 2008
Posts: 3
mwright is on a distinguished road
Thanks. Here it is. Need little help with the post notes and don't have a scanner or tablet yet.


Last edited by mwright; 07-20-2008 at 04:17 AM.
Reply With Quote
  #10 (permalink)  
Old 07-17-2008, 04:15 AM
Junior Member
 
Join Date: Jul 2008
Posts: 11
alroqi is on a distinguished road
Thanks

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

LinkBacks (?)
LinkBack to this Thread: http://www.talk-mania.com/web-layouts/43582-hand-drawn-layouts-hottest-design-trends.html
Posted By For Type Date
CG Tutorials: Adobe Photoshop: Web Design: Hand drawn layout - Hottest design trends This thread Refback 07-11-2008 12:38 PM
Photoshop, 3Ds Max Tutorials and more! - Hand drawn layout - Hottest design trends This thread Refback 07-10-2008 09:53 PM
CG Tutorials: Adobe Photoshop: Web Design: Hand drawn layout - Hottest design trends This thread Refback 07-10-2008 05:26 PM
Technorati: Discussion about “Hand drawn layouts - hottest design trends” This thread Refback 07-10-2008 05:57 AM


All times are GMT +2. The time now is 08:51 AM.



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