GRAFPEDIA 70.000+ resources graphics & tutorials for only $49

Grafpedia » Templates » Psd Themes » How to create a web hosting layout

07
Mar

How to create a web hosting layout

Psd Themes, Templates, Tutorials, Web layouts
47 Comments

Today will show you how to create another eye catching hosting layout. In this tutorial I will use only 2-3 colors, with small variations, and you can use this layout for any internet business you have. of course you need to make small changes.
Want to download this layered PSD layout ?
Register for a VIP account, and you will have 12 months free updates, this means you can download our next releases for the following months.


For start we will need to create a new document. the size is as always 1000×1100 pixels, and I will create this document with a white background.
I will select Rectangle Tool, and I will create two shapes. For the top shape I will use the following color: #393e43, and for the bottom one I will use another color: #373a3e

Then I will create another shapes like in the following image. Please click to see the full size image.

As you can see I have some layer styles applied to the layers:

With custom shape tool, I will add some arrows. And I will add the same layer style as above.

Now I will create a button, with Rounded Rectangle Tool.

For this button I will add the following layer styles.

This is how my button will look like.

I will set my foreground color to #25272a, and I will create two shapes with Rounded Rectangle Tool. please click on the following image to see the full size.

For both shapes I will add the following layer styles.

This is my result

Over the top shape I will add another shapes, and I will use the same layer styles. here I will create the hosting plans. If you have more than three plans you can create more shapes.

With Horizontal Type Tool, I will add some text, and in the same time I will add some images with some servers. please click on the following image to see the full size image.

I have used the following font: Myriad Pro ( italic )
In the middle of the layout I will add a nice image and another text.

My last step is to create a search box, where your customers will be able to search available domain names. I will use the same layer style I have used for the button.

In the footer of the layout, I will add there another shape ( use the same layer styles as above ), and some text. This is my final result. I hope you like it.

Want to download ALL Grafpedia Downloads including this layered PSD layout ? Register for a VIP account and you will be able to download 70.000 items + you will have 12 months free updates.

Our web design 642-436 tutorials offers huge collection of web designs to help you learn how to create web hosting layout. Download the 220-702 tutorials and expert 640-816 guides for complete learning of web designing.

Download OR Subscribe now to a VIP account

Responses to “How to create a web hosting layout”

  1. Eli 7.03.2010 um 11:03 am

    Nice design!
    It’s the little details like the reflection of these domino bricks that also reflect in the navigation bar that make the design strong :)

  2. Gfxtoolkit 8.03.2010 um 11:53 am

    Great one. I thought i am a good web designer, but when i see your layouts i am really impressed.

  3. imon 8.03.2010 um 6:35 pm

    yes awesome tutorial, I love how the searchbar and the background around it blend into each other so well

  4. Dipak Magar 13.03.2010 um 4:00 am

    Hello, this is nice tutorial, but their is one thing is wrong that
    in “Bevel & Emboss” effect it’s worngly displaying outer bevel.
    There is not outer bevel there have to be “Inner Bevel”.

    Thank You

  5. BBL 13.03.2010 um 9:22 am

    beautiful design

    Dipak Magar is right

  6. bagus 15.03.2010 um 7:26 am

    this is awesome. thanks for sharing..

  7. Sbuster 15.03.2010 um 11:04 pm

    Exelente tutorial / elegant design web

  8. buythecow 16.03.2010 um 4:33 am

    Great design!!

  9. Narendra Keshkar 3.04.2010 um 6:50 am

    Definitely it’s a nice design, simple but strong impact on viewer. Liked it.

  10. jeanny 17.04.2010 um 1:57 pm

    nice , can i use this layout for my website ? thx b 4

  11. help 18.04.2010 um 3:04 pm

    OK making layouts is easy. But how to make them actually work? I mean slicing doesnt solve the whole problem. He wrote the text etc.. But finally when you save everything its uneditable PNG content! Its not a real template.. How to make a real template with an editable text, interactive objects?

  12. ravi 20.04.2010 um 5:42 am

    Great design.. love the layout.

  13. adam 22.04.2010 um 12:22 am

    awesome tut thanks :) where i can find the cool domino picture?

  14. web hosting pakistan 23.04.2010 um 3:33 am

    simply nice and awesome tutorial. It will help me a lot.

    thanks mate.

  15. Web Design 28.04.2010 um 9:38 pm

    awesome design LOVE IT

  16. naseer 17.05.2010 um 4:38 am

    Nice design

  17. G13 Media 7.06.2010 um 6:11 pm

    Awesome tutorial you have some the best layout tutorials around excellent write up. Thank you very much.

  18. p90x sale 24.06.2010 um 1:01 am

    Thanks for sharing your article.

  19. ryo 15.07.2010 um 2:21 pm

    i like it but i think about how to integrate this great design in my website

  20. Courtney 8.08.2010 um 12:29 pm

    very nice design! Thank you
    My first time doing a website layout and it turned out amazing.
    thanks

  21. Artem 10.10.2010 um 4:30 am

    Awesome tutorial!

  22. VMTyel 16.10.2010 um 8:48 pm

    thansk, this tut expand my eyes :D

  23. Robin 5.03.2011 um 3:23 am

    I want to create hosting plan layout.. i think this tuts will be really useful for my project :)

  24. chong tham 1.06.2011 um 3:04 am

    Hi,
    Your guides are quite easy for me to follow. Especially, a beginner like me.
    Thank for your great work

  25. Danish usman 22.09.2011 um 1:01 pm

    realyy nice tutorials.thnx for sharing tutorials.

Trackbacks

  1. Hosting Web Layout
  2. How to create a web hosting layout
  3. Cum se creează un aspect de Web Hosting
  4. TreasureZone » Blog Archive » 51 Photoshop Tutorials
  5. Pattern Inc » 5 Fresh Photoshop Web Design Layout Tutorials
  6. 5 Fresh Photoshop Web Design Layout Tutorials
  7. March’s Fresh Photoshop Web Layout Tutorials
  8. 31个网站原型设计教程 | Booto'Blog
  9. 12+ Tutoriais de Web Design
  10. 5 Fresh Photoshop Web Design Layout Tutorials | Design Reviver
  11. 30 Fresh Web Layout Design Photoshop Tutorials | Web Design Cool
  12. 30 Fresh Web Layout Design Photoshop Tutorials
  13. 60 Web Design Photoshop Layout Tutorials « MoeMir
  14. 60 Web Design Photoshop Layout Tutorial |
  15. Design Spartan : actu, inspiration, tutoriels et ressources sur le graphisme, le webdesign, le digital painting...
  16. 80 Fresh Photoshop Tutorials For Creating Awesome Websites | Creative Nerds
  17. Ultimate Roundup Of Photoshop Web Layouts Tutorials
  18. 80 Fresh Photoshop Tutorials For Creating Awesome Websites | The New Drop
  19. 35 Creative Photoshop Layout Tutorials For Web Design | Design | Webdesign, website & webshop maken portfolio
  20. 29 Best Photoshop Tutorials to create a website layout : xWeb Designer
  21. 16 layout web photoshop có file nguồn PSD (P2)
  22. 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

.