Subscribe to our rss feed

Web Hosting Layout Tutorial

Posted in Photoshop Tutorials, Web Layouts by John Ward on the October 16th, 2007

Here is the gradient settings. (double click on the bar next to “Gradient:” in the picture above to get to this window)
Web Hosting Layout Photoshop Tutorial

Apply the changes and you should get this.
Web Hosting Layout Photoshop Tutorial

Now click select the next box in the layers pallet and add the word silver in the same font. Apply these layer styles:

Drop shadow:
Web Hosting Layout Photoshop Tutorial

Gradient Overlay:
Web Hosting Layout Photoshop Tutorial

Here is the Silver gradient:
Web Hosting Layout Photoshop Tutorial

This is what your text should look like
Web Hosting Layout Photoshop Tutorial

Now add the gold header and apply the following layer styles:

Drop shadow
Web Hosting Layout Photoshop Tutorial

Gradient Overlay:
Web Hosting Layout Photoshop Tutorial

Here are the gradient colors
Web Hosting Layout Photoshop Tutorial

So now the layout should be looking something like this.
Web Hosting Layout Photoshop Tutorial

Now add the information for the hosting plans. For the features I will use Verdana Bold 12pt with #FFFFF as the color.
Web Hosting Layout Photoshop Tutorial

Popularity: 28% [?]

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • BlogMemes
  • Fark
  • Furl
  • Live
  • NewsVine
  • Reddit
  • Slashdot
  • StumbleUpon
  • TwitThis
  • YahooMyWeb

Pages: 1 2 3 4 5


Go Daddy $1.99 Domains

2 Responses to 'Web Hosting Layout Tutorial'

Subscribe to comments with RSS or TrackBack to 'Web Hosting Layout Tutorial'.

  1. Daniel said,

    on January 29th, 2008 at 11:43 pm

    Really thank u a lot for providing this tutorials with images even, No one use to give tutorials with images………..

    Hats off

    Daniel

  2. Pierce said,

    on February 12th, 2008 at 8:42 am

    This tutorial is simply one of the best I’ve come across so far. Excellent - Thanks

Leave a Comment