Design a Sleek and Modern Hosting Layout

by Alan - Templates, Tutorials

About the author

Alan is the original creator of this site and now a valued contributor. He is a college student studying finance - more specifically, corporate finance (not what you were expecting, right?) and he really loves long walks on the beach.


Visit Alan's Website | All Articles From This Author

Seeing numerous host startups around the web, we decided it was time for a hosting layout tutorial. This layout features dark elements with bright text and cool buttons. It’s got a slightly futuristic feeling to it, to me it feels like some sort of portal. As always, don’t forget to download the free PSD that comes along with the tutorial!

We’ve been thinking, “what kind of layout can we do that will please a lot of people, but isn’t a portfolio layout?”, and voila!  We decided to do a hosting layout!  The inspiration was drawn from various hosting websites, mostly the placement of elements.  We hope this satisfies your needs for a hosting layout and don’t forget to download the free PSD at the end of the tutorial for your own copy!

Final Product:

Hosting Preview

Step One: The Background

Create a new Photoshop document, size 1000×1000 px. Fill it with #101010.  Head on up to Filter > Noise > Add Noise and apply the following settings:
Hosting Noise

That’s it for the background.

Step Two: The Top Bar

Time to add the “Top Bar” where the logotype will be.  Create a new selection, 968×55 px and fill it with #131313.  Name this layer “Top Bar”.
Hosting Top

If you followed the pictures and used the same Pen Tool settings, your top bar will just be an outline, to make the top bar shape an actual layer you need to click the Paths box and right click “Work Path” then select “Make Selection”. This will make a new selection based on the shape of your path and you’ll see the marching ants. Make sure to create a new layer for this shape (Layer > New > Layer)!
vcardpaths

Let’s create a glow beneath the Top Bar.  Make a new rectangle selection with the Rectangular Marquee Tool (M) with a size of 968×55 px and fill the new layer with #5bace1 and name it “Top Bar Glow”.  You’ve got a nice sharp-edged rectangle, but not for long.  Select your Rectangular Marquee Tool again and set it’s feathering to 10px.  Make a selection on the side and just press [delete].  Now you should have a semi-faded edge.
Hosting Marquee

Time to make this bar glow!  Apply these settings to the “Top Bar Glow” layer:
Hosting Outer Glow Hosting Inner Glow

Slide the glowing layer, “Top Bar Glow” underneath the “Top Bar” layer so you get something like this:
hostingglow

We’re going to finish off the top bar in this step.  Add some text to the center of the top bar, whatever text you like best.  We used Nevis which can be downloaded from our 15+ Excellent Free Fonts article.
Hosting Logo

Add the following layer styles to the text layer:
Hosting Text Drop Shadow Hosting Text Gradient Overlay

Now create a new selection with your Rectangular Marquee Tool (M) and make a new layer.  Fill the new selection with #000000 (black) and set it’s Blending Mode to Overlay and it’s Opacity to 30%.  Add some basic text (Arial, Verdana) in the center of this layer to serve as your navigation.

Let’s compare:
Hosting Navigation Overlay

Step Three: Creating the Buttons

Let’s go ahead and make some sleek buttons that will control a jQuery carousel.  You can add however many buttons you’d like.  Select the Rounded Rectangular Tool (U) and create a new button shape, we used 150×33 px.   Select your Gradient Tool (G) and with your foreground set to #191919 and your background set to #282828, fill the button shape with a linear gradient.
Hosting Gradient

Apply these styles to the new button layer:
Hosting Drop Shadow Hosting Inner Shadow

For different colored buttons, just make the gradient a different color.  Apply the same layer styles as above.
For the blue button- foreground: #1987cd, background: #5eaee2.
For the gray button- foreground: #c4c3c4, background: #dedddd.

Add some text to the buttons and those are finished.

Step Four: The Content Boxes

Let’s go ahead and add content boxes to the layout.  First we’ll tackle the jQuery carousel box.  The information appearing in each box is supposed to change for each button that we just made.

Start off by creating a new rectangle layer with the Rounded Rectangular Tool, 700×265 px.  If you don’t remember how to make this shape a selection, repeat the steps above.  Fill the new selection with #FFFFFF (white) and set it’s Blending Mode to Overlay.  Add a faint Drop Shadow to this rectangle.  Create another rectangle the same way as before, but make it slightly smaller than the first, about 5px smaller all around.  Fill this rectangle with #0f0f0f, set it’s Opacity to 50% and place it above the previous white rectangle.

Here’s where you should be now:
Hosting Check

Add some text to your content box.  For title text, we used the font “Calibri” which is standard on most Vista machines.
Hosting Text

Add these layer styles to the title text:
Hosting Drop Shadow Hosting Gradient Overlay

Then we simply added some icons to make a cool little diagram, it’s completely up to you what you do with the content box.  You can fill the entire thing with text or add an image of servers or whatever.  For the “Order Now” button, we simply duplicated one of the buttons we made previously.

It’s time to add the arrow that will point to the proper button for the jQuery Carousel.  It’s a small detail but it really pulls this area together.  Select the Custom Shape Tool (U) and select the curved arrow, “Arrow 9“  Create a small arrow shape, making sure you hold [shift] so it’s proportional.  Once you’ve made the shape, create a new layer and convert the shape to a selection.  Fill the selection with #FFFFFF (white). You may have to flip the arrow horizontally to get it pointing in the right direction.  Cut the tail off of the arrow so you’re just left with the triangular head.  Set the Blending Mode to Overlay.
Hosting Arrow

Add this Drop Shadow to the arrow:
Hosting Arrow Drop Shadow

Step Five: Creating the Plans and Pricing Box

This part is really easy.  Repeat the processes in step four to achieve the same look for the box, only this time make it slightly bigger, 885×425 px.  To create the grid look, we just took our Eraser and with a 1px pencil selection we erased lines.  Again, we duplicated buttons from step three for the “Order” buttons and we simply filled in the new grid with our plans and prices.

So we have something like this:
Hosting Grid

Step Six: The Footer

This part is simple also, we just duplicated the “Top Bar” we made in step two and flipped it vertically.  Doing this with the footer is what gives me the feeling of a portal.  Call me weird but that’s what I get from it.  Anyway, once you’ve duplicated the “Top Bar”, flipped it vertically and moved it to the bottom, add some text that you’d like to appear i the footer.  We just added the (mt) Media Temple logo for the purpose of this tutorial.  You’re free to add your text, whatever you want–it’s your template!  However, if you choose to also use the Media Temple Logo, be sure to read their usage policy here as they’re very strict about how their logo is diplayed (they’ve built a strong brand this way).

Finally, we’re done and this is what it should look like:
Hosting Final

If you didn’t get the same outcome, don’t worry… just download the fully layered PSD below!  Thanks for reading and come back soon!

Check out these other tutorials we’ve written:

Download!
(hosting.psd)

23 Comments


Add your comment - (need a gravatar?)

Enable CommentLuv?

Sponsors

Sponsors

Sponsors

Write for us!

Write tutorials for us and make money! Check out the details and submit your tutorial.