GRAFPEDIA 70.000+ resources graphics & tutorials for only $49

Grafpedia » Templates » Psd Themes » Create a Hosting Layout In Adobe Photoshop

31
Jan

Create a Hosting Layout In Adobe Photoshop

Psd Themes, Templates, Tutorials, Web layouts
37 Comments

If you want to earn some money online a hosting business is always a good choice. If you have a good design , and some money to promote your products you can earn some good money with such a business. This layout can be used for any internet business you have: an ISP provider, a domain registrar, or even a intranet website.

Today I will show you one more time how to design a layout for a hosting company.

Want to download this PSD layout ?
Register for a VIP account

Things you need to complete this tutorial

As usual we will need to create a new document ( press on CTRL+N ) and use the following settings: Width :1000 pixels , Height: 1100 pixels.
I will set my foreground color to #ebebeb and with Paint Bucket Tool I will press one time over my document. If you want to use another color for the background you can choose from the color picker, or you can use one of our pixel patterns.
200 Photoshop patterns – Pixel patterns

For the next step you need to turn on the Grid.

It is very important because you will need to create a strange shape. Grab your Pen Tool, and create a shape similar with mine

If you want to see the full size layout press on the following image

For this shape I will add the following layer styles

The gradient from above is from our biggest set of gradients: 27.000 Photoshop Gradients

This is my result

On the top of my hosting layout I will create three buttons.

All the buttons have the same layer styles

I will duplicate the big shape, and I will go to Edit > Transform > Flip Horizontally. With Move Tool ( or you can use the arrow keys from your keyboard to place the second shape to the bottom of the layout )
Click on the following image to see the full size

In the middle of the layout I will create 4 shapes. Click on the image to see better my result.

For all these shapes I will use the following layer styles

And here is my result. It will be good if you will click on the following image to see better my result.

I will use Horizontal Type Tool to write some text on my layout

This step is very simple but it will take you over 10 minutes. One think I would like to show you how I made that indented text.
I will select the layer with price, and I will use the following layer styles:

After you will apply the settings from above you will have the same result as mine

I will add some icons on my layout. If you don’t know already we have a VIP membership which allows you to download all our resources for a small price.  After you register you will be able to download the following icons:

Computers and electronics icons in vector format

Universal icons for your website, application, or presentation

Open both files in Adobe Illustrator, and select the icons you like most. For example in the following document I will use Selection Tool to select the macbook pro icon. Then I will click on CTRL+C to copy the icon on my clipboard.

I will switch to Photoshop, and I will press on CTRL+V to paste the icon over my layout. Photoshop will ask you how do you want to paste the icon. You can choose raster, or vector object.
I will use the Computer icon, the Pen icon, the network icon, the desktop icon, and the megaphone icon. With the same technique I will add the icons over my layout. Feel free to transform them ( CTRL+T ) if the icons are too big.
Click on the next image to see the full size hosting layout.

My last step is to add a image with a Mac Book Pro on the header of the layout. here you can use it also as a slide show, or any other thing you want. Be creative and impress your audience. The more unique website you have the better will be your earnings. This is my final result.

Want to download the layered PSD layout ? Join VIP membership, and you will be able to download our huge collection of premium downloads: over 70.000 items, for an incredible price of 49 $
If you believe in us and if you think we will release more goodies , I highly recommend you to apply for a bigger plan. The bigger plane you choose the more you save. For example if you purchase a membership for one year you will bring the month to month cost to almost 5.50 $
(you save almost 50 %)
Thanks

Learn how to create web layouts in adob photoshop with our RH302 web designing course. Download the 642-145 photoshop tutorials and 70-648 study guide to learn about web design basics.

Download

Responses to “Create a Hosting Layout In Adobe Photoshop”

  1. Steve 31.01.2010 um 2:55 pm

    I’m always a fan of your tuts, this is another really nice one.
    Clean and fresh styling, many thanks.

  2. Razvan 31.01.2010 um 2:59 pm

    Hi Steve. I am glad you like my tuts. i will keep an eye to see when your website will be online. i am very curious : cooca.net

  3. Tom Ross 1.02.2010 um 8:50 pm

    I love this layout, it’s really fluid. The header shape is really unique.

  4. Duy 2.02.2010 um 1:57 am

    awesome!! ;)

  5. Søul 2.02.2010 um 11:29 am

    this is really good template. ty Grafpedia

  6. Jonathan 7.02.2010 um 10:43 pm

    Hello Ravzan, I really like the tut and layout, there is one thing I want to remind you (because I know you just forget it or leave it purposely), customer support space (phone number and/or live chat link). I believe every hosting company must have one on homepage.

    On other side your layout is completely awesome, I really like it. thanks for sharing these techniques.

  7. Webdesign Rosenheim 8.02.2010 um 2:38 am

    Really a very nice howto! keep up the good work – and thank you for that!

  8. Luis Ahmed 8.02.2010 um 3:28 pm

    really nice, is amazing what you can do with simple and plain use of imagination and photoshop. great work.

  9. Matthew Heidenreich 8.02.2010 um 7:27 pm

    nice results, thanks!

  10. دليل 8.02.2010 um 8:21 pm

    Good
    Thank you

  11. Anna Dadan 9.02.2010 um 11:00 am

    I’m just converting over from Fireworks, loving your tutorials. Thanks for sharing them

  12. Bert 16.02.2010 um 9:03 am

    I’m sure a lot of people could work out the settings for the inner shadow on the indented prices but I just wanted to point out that you display the settings for drop shadow twice instead of drop shadow and inner shadow.

    Minor thing, really really nice tut otherwise.

  13. Peter 25.02.2010 um 10:55 pm

    Nice tutorial, thanks for sharing, some good tips and tricks.

    All the best

  14. jojo 11.03.2010 um 3:46 am

    so good, i like this style and i will learn how to make a website layout like this.

  15. Hawk Designs 23.04.2010 um 2:46 am

    Very nice tutorial. Thanks for sharing the icon elements aswell :) appriciated

  16. Alba Cooney 27.04.2010 um 11:01 am

    Adobe Photoshop is simply the best photo editing tool on the market. I often use it a lot on my photo studio and also in webpage design “

  17. Wyatt Richardson 2.05.2010 um 12:13 pm

    We have a photo studio in our town and Adobe Photoshop is our primary software for photo editing. “”

  18. sanal şirket 19.05.2010 um 11:06 am

    its cool thanks for all

  19. Jacob Johnson 10.07.2010 um 1:23 am

    those who are in the graphics business could never live without Adobe Photoshop.-:;

  20. Gracie Hayes 11.08.2010 um 12:50 am

    there is no other photo editing tool that is as good as Adobe Photoshop, It is simpy the best ‘

  21. Can Crusher  17.10.2010 um 12:44 pm

    adobe photoshop is the best photo-editing tool that we have used~,.

  22. Nursery Decoration · 7.11.2010 um 12:19 pm

    of course there is no other software that can beat Adobe Photoshop, this is the best photoeditting tool ever “

  23. Melatonin 7.07.2011 um 2:31 am

    Adobe Photoshop is great but sometimes it just takes too much memory and processing power from your pc..  

Trackbacks

  1. 5 Adet Web Site Oluşturma Dersi | Voon Teknoloji Blogu
  2. 18個完整的photoshop網頁設計模板教學 | Zimo9
  3. 30 Fresh Web Layout Design Photoshop Tutorials
  4. 60 Web Design Photoshop Layout Tutorial |
  5. Web Design Photoshop Tutorials « MoeMir
  6. 30 Fresh Web Layout Design Photoshop Tutorials « Design Invader
  7. 30 Tutoriales Photoshop para Diseño Web « ——— BLOG ADESIGNS ———
  8. Design Spartan : actu, inspiration, tutoriels et ressources sur le graphisme, le webdesign, le digital painting...
  9. Best of Web Layout Design Photoshop Tutorials
  10. Round-up of some 50 Best Layout Photoshop Tutorials « Andrei Melencovici Graphic and Web Design Blog
  11. Web Design Photoshop Tutorials
  12. Fresh Website Layout Tutorials Created in 2010 | Joel's Designs
  13. Best Web Design Tutorials to Take Your Creativity to the Next Level - Part 1
  14. Aprende a Diseñar Web con Photoshop | Fotografía y Diseño

Leave a reply

  • Sign up for Grafpedia VIP
Suscribe to Grafpedia's RSS feeds!

© 2011 | Grafpedia is proudly powered by Wordpress edited by GrafikNetwork

.