Wednesday, 2017-12-13, 9:47 PM Welcome Guest

THE HALL OF GREAT GURUS

Site menu
Section categories
Software Blog [17]
This blog is for software gurus to display their talent.
Hardware Blog [13]
This blog is for all hard ware Gurus and those who want to be gurus in hardware
Programming Blog [10]
This blog is for all programming Gurus and those who want to be gurus in programming.
Internet Blog [88]
This blog is for all internet Gurus and those who want to be gurus in internet
Computer Zone [97]
This blog is for all computer Gurus and those who want to be gurus in computer
Tutorials Blog [34]
This blog is for all tutorials Gurus and those who want to be gurus in tutorials
Education Blog [18]
This blog is for all book Gurus and those who want to be gurus in future
Gurus Admins Blog [1]
This blog is for only Admins
Gurus Guide Blog [9]
This blog is where all members can help others or for others to post their requests for assistance.
Society, Entertainment And Discussions. [3]
This category is all about Society, Entertainment And Discussions by Gurus.
Gurus Politics And Culture [1]
This blog is all about politics and culture.
Gurus Sports Blog [0]
This blog is where Gurus discuss about all aspects of sports.
Gurus Health And Fitness Blog [1]
This is where all Gurus discuss about health and guidelines to improve upon ones health.
Tag Board
200
Gurus Poll
Rate Gurus site
Total of answers: 15
Gurus Online

Total Gurus online: 1
Guests: 1
Users: 0

Login form
GurusShopping Cart
Your shopping cart is empty
Gurus Tag
hacking Gurus Facebook vpn internet INDIAN WEB PROXY Latest PC Tunneling Software s60v3 python Handler Apps FLASH UR PHONE UPGRADE MTN MODEM Registry Exe files MODEM SIGNAL Pc Tricks Animted Logo Security Enhancements firefox COMPUTER VIRUSES IWP SERVER s60v3 Phones HAcking Windows Yahoo Messenger Unblock Websites Circuit Diagram Biology of Vertebrates Gurus Biology Satelite Dish Gurus Chemistry Connectivity Gurus Phones Gurus Java Gurus Technology Gurus Software Gurus Tutorials Gurus Browsers Computer Tutorials Gurus Windowa Gurus Internet Gurus Browsres Gurus Windows Gurus Hack Facebook Status Hardware & Drivers
Gurus Shoutroom
Main » 2011 » March » 10 » Learn how to create an Attractive website layout in Photoshop
0:55 AM
Learn how to create an Attractive website layout in Photoshop

Learn how to create a website layout in Photoshop

NB: Credit Goes To TrendyPacks.com

Currently in this tutorial I will teach you how to create a similar web layout in Photoshop but I will not cover the conversion PSD to XHTML. The tutorial on how to code this layout in XHTML it will be available on conversion of PSD to HTML 

To create this web layout I have used:

Let’s start the tutorial.
Open Photoshop and create a new document (Ctrl + N), dimensions: 1020 by 1300 as a background choose "Transparent”

Next select Rectangle Tool and create this 3 shapes

For the first shape (1) I have used this color # 474b4c, dimensions: 1020 by 370px
For the second shape (2) I have used this color # 2e2e2e, dimensions: 1020 by 679px
For the third shape (3) I have used this color # e6e6e6, dimensions: 1020 by 251px
Tip – to create shapes with fixed dimensions, please take a look at this screenshot


Step 1 – Creating the logo and navigation

On the left side I will add my logo (here you should add yours) and on the right side using Rounded Rectangle Tool (with a radius of 15px) I will create this shape , dimensions: 627 by 84px

Then I will apply this layer styles



With type tool I will add the links for navigation also.

As you can see the navigation is quite big, but you don’t need to worry because we will fix this when we will create the slideshow area.
To finish the Navigation, I will select Rounded Rectangle Tool and I will create a shape over the Home link. This shape it will serve as a Hover. I will apply also this layer styles

Here is my final result for navigation

Step 2 – Creating the slideshow (featured area)

Select Rectangle Tool and create this shape. Dimensions: 947 by 395px. The color doesn’t matter at this moment because we will apply some layer styles. Also please make sure that on your layer palette you will place this layer above the navigation layer, to cover a small portion of the navigation. Please see the screenshot

Next apply this layer styles:




My result

On the left side I will add an image

Underneath the image, using Ellipse Tool I will create this shape

and I will apply a Gaussian blur (Filter>Blur>Gaussian Blur, with a radius of 10px) to create a nice shadow. Underneath the shadow, using Ellipse Tool I will create the navigation for slideshow (I will add 3 circles)

Next on the right side, using Type Tool I will add some text. For the title I have used Verdana font with 30 px in size, than for the paragraph I have used Tahoma font with 12 px in size, next underneath the paragraph I will create a button using Rounded Rectangle Tool (radius 30px)

Now apply this layer styles for the button




Than with Type Tool add some text on it (I have added "Learn more…”), with Ellipse Tool create a circle (I have used this color # 313139), than with Pen Tool create an arrow. Here is my result for Featured Area

Step 3 – Creating the content area

To create the content area, select Rectangle Tool and create this shape. Dimensions: 947 by 514px and the color doesn’t matter because we will apply a gradient

Once you have something similar, apply this layer styles:


Then with Type Tool I will add some text. I will use also some images and some vector icons from our free vector icons pack created by TrendyPacks.com. Here’s my result

As you can see I have created 3 columns of text, but now I would like to make a separation between them. To do that I will select Line Tool and I will create this separators. Each separator has 2 lines of 1px width.

Please look at the zoomed image to understand better how to create this separators

Next at the bottom of the content area with Ellipse Tool I will add this shape

Then I will apply a Gaussian Blur (Filter>Blur>Gaussian Blur) with a radius of 7px and with Rectangular Marque Tool I will make this selection.

Once you have a similar selection hit Delete on your keyboard than press Ctrl + D to deselect.

Next I will select Line Tool and I will add a black line, dimensions 852 by 1px. Please see the screenshot

As you can see I have created a nice shadow at the bottom of the content area as well.

Step 4 – Creating the footer

Well, to create the footer is quite easy. All you have to do is to use Type Tool and to add some text, than with Rectangle Tool I have created the Newsletter forms.
Here is my final result for footer


Category: Tutorials Blog | Views: 446 | Added by: seniorkoa | Gurus Tags: Gurus Windows, Gurus Tutorials | Gurus Rating: 5.0/1
Total comments by Gurus: 2
0   Spam
1 seniorkoa   (2011-03-10 1:00 AM)
Hope this is a simple and interesting tutorial!!!!!!!!!!!!!!!!!!!!!
Post your comments on it.
happy wink smile

0   Spam
2 LittleProf   (2011-03-10 3:30 AM)
This is fantastic. It sounds toooo awesome.
Am off to try biggrin wacko happy

Only registered GURUS can add comments.
[ Gurus Registration | Login ]
Your IP
Gurus Search
Gurus Calendar
«  March 2011  »
SuMoTuWeThFrSa
  12345
6789101112
13141516171819
20212223242526
2728293031
Entries archive
Gurus Beloved Coun
  • Gurus Beloved Country
  • Gurus Content
    Gurus Informers
    "Guests" are not permitted to view this module.
    Gurus Facebook Ads
    Bessle Pandorine

    Create Your Badge
    Seniorkoa And Gurus Copyright MyCorp © 2017