How to create a web hosting layout
|
ADVERTISE HERE ? CONTACT US |
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.
Responses to “How to create a web hosting layout”
Trackbacks
- Hosting Web Layout
- How to create a web hosting layout
- Cum se creează un aspect de Web Hosting
- TreasureZone » Blog Archive » 51 Photoshop Tutorials
- Pattern Inc » 5 Fresh Photoshop Web Design Layout Tutorials
- 5 Fresh Photoshop Web Design Layout Tutorials
- March’s Fresh Photoshop Web Layout Tutorials
- 31个网站原型设计教程 | Booto'Blog
- 12+ Tutoriais de Web Design
- 5 Fresh Photoshop Web Design Layout Tutorials | Design Reviver
- 30 Fresh Web Layout Design Photoshop Tutorials | Web Design Cool
- 30 Fresh Web Layout Design Photoshop Tutorials
- 60 Web Design Photoshop Layout Tutorials « MoeMir
- 60 Web Design Photoshop Layout Tutorial |
- Design Spartan : actu, inspiration, tutoriels et ressources sur le graphisme, le webdesign, le digital painting...
- 80 Fresh Photoshop Tutorials For Creating Awesome Websites | Creative Nerds
- Ultimate Roundup Of Photoshop Web Layouts Tutorials
- 80 Fresh Photoshop Tutorials For Creating Awesome Websites | The New Drop
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
Great one. I thought i am a good web designer, but when i see your layouts i am really impressed.
yes awesome tutorial, I love how the searchbar and the background around it blend into each other so well
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
beautiful design
Dipak Magar is right
this is awesome. thanks for sharing..
Exelente tutorial / elegant design web
Great design!!
Definitely it’s a nice design, simple but strong impact on viewer. Liked it.
nice , can i use this layout for my website ? thx b 4
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?
Great design.. love the layout.
awesome tut thanks
where i can find the cool domino picture?
simply nice and awesome tutorial. It will help me a lot.
thanks mate.
awesome design LOVE IT
Nice design
Awesome tutorial you have some the best layout tutorials around excellent write up. Thank you very much.
Thanks for sharing your article.
i like it but i think about how to integrate this great design in my website
very nice design! Thank you
My first time doing a website layout and it turned out amazing.
thanks