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 06-09-2008, 10:31 PM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,340
Blog Entries: 2
admin has disabled reputation
159 Web 2.0 vector layout

Hi.

I am sure you are mad on us because we haven't posted a tutorial lately. we are working for a new version of www.downplazza.com
We will release soon a commercial version for this script with more advanced features:
It will be a hybrid between sitepoint marketplace , and deviantart plus a lot of new features. until then i will continue to write tutorials more often.

Today i will write tutorial number 159 from our marathon.
I will create a website only with vector brushes, you can use this type of website for a portfolio website, or an agency layout. of course you can change the design a little and you can use one what type of website you want

This is my final result



Please open a new document. As usual i will chose my standard sizes: 760 pixels wide x 770 pixels height
I will use a blue #154681 background for this layout

for this layout we will use brushes very much. please bookmark the following link: www.photo-shop-brush.com ( for the next 2 months we have placed schedules posts in this website, and you will have available for download at least 2 - 5 new brush sets per day.

Please download the following set of brushes :

Design elements brushes

load these brushes in photoshop, then create a new layer ( press CTRL+SHIFT+ALT+N ), and with brush tool make a simple drawing on your layout



Select Rounded rectangle tool, and create a new shape. place it like me



Then download the following set of Vector brushes
Select a brush you like most, then
Create a new layer ( Press CTRL+SHIFT+ALT+N ) and with brush tool, add some details on our background



please look at the following image. you can see some red arrows. on that area we need to fill the empty holes.



you will see in this image exactly what i want to make



this step is very important because we will create a continuity in our layout

Now comes the funny part. please select a Hard round brush ( already in photoshop )

and on this layout, please add different details like me. use different colors if you want a nice effect



Now set the foreground color to white, and with a smaller brush add another circles over the colored circles



Now it is time to add some text, on our layout, and of course some text



You can see that i have placed 4 buttons at the top of the layout. i consider there are a little to simple, that's why we need to add another details for that buttons

Create a new layer ( press CTRL+SHIFT+ALT+N )
then with another set of brushes : Tech Brushes
add some minor details



Of course on this layout can be added a lot more details. If you have time I want to see layouts you can made using photoshop brushes. the best layout with a unique idea will receive a VIP subscription for one year

this is my final result


Attached Files
File Type: zip layout159.zip (754.3 KB, 400 views)
__________________
3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )
Reply With Quote
  #2 (permalink)  
Old 06-09-2008, 11:33 PM
CLassMaN's Avatar
Junior Member
 
Join Date: Oct 2007
Posts: 5
CLassMaN is on a distinguished road
very good admin number one
Reply With Quote
  #3 (permalink)  
Old 06-10-2008, 08:06 AM
Junior Member
 
Join Date: Apr 2008
Posts: 10
flipper4u is on a distinguished road
nice... i like it.
Reply With Quote
  #4 (permalink)  
Old 06-10-2008, 01:08 PM
Member
 
Join Date: Apr 2007
Posts: 39
zbexworld is on a distinguished road
thank ya ravzn another good easy tuto
Reply With Quote
  #5 (permalink)  
Old 06-10-2008, 04:11 PM
VIP Member
 
Join Date: Jun 2008
Posts: 18
Calligan is on a distinguished road
my eyes are bleeding lol a bit too much vector and color , but still another good tuts !
Reply With Quote
  #6 (permalink)  
Old 06-10-2008, 06:54 PM
Junior Member
 
Join Date: May 2008
Location: Romania
Posts: 3
Gabri3l is on a distinguished road
Send a message via MSN to Gabri3l
Great tutorials admin, i like it, and thanks!

-Gabri3l
__________________
Quote:
Īnţelepciunea nu este produsul şcolarizării, ci al īncercării de o viaţă pentru a o căpăta.
Reply With Quote
  #7 (permalink)  
Old 06-10-2008, 09:31 PM
elmodather's Avatar
Junior Member
 
Join Date: Jun 2008
Posts: 5
elmodather is on a distinguished road
wow , good tutorials
Thanx
Reply With Quote
  #8 (permalink)  
Old 06-23-2008, 02:59 PM
Junior Member
 
Join Date: Mar 2007
Posts: 12
lukyjay is on a distinguished road
Hey, when coded it looks like crap on a widescreen, because of the massive gap on the right hand side!

Please take a look at the screenshot: http://www.imagehosting.com/show.php..._temp.JPG.html

What do you recommend that i do?
(Don't worry, your copyright is still at the bottom )
Reply With Quote
  #9 (permalink)  
Old 07-23-2008, 02:24 AM
Junior Member
 
Join Date: Jul 2008
Posts: 6
Ocean is on a distinguished road
I love it, thanks for the tutorial
Reply With Quote
  #10 (permalink)  
Old 07-23-2008, 07:46 AM
Junior Member
 
Join Date: Mar 2008
Posts: 14
alexphamnguyen is on a distinguished road
Thank for good tutorials

Reply With Quote
Reply

Bookmarks

Tags
layout, template, vector

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


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