Create a professional dark web hosting layout
Black web hosting layout
This tutorial will show you how to create a layout for a web hosting company using Adobe Photoshop. This layout will be very easy for you if you follow exactly my tutorial. If you have problems please leave me a comment. You can use this layout for other business types. For example you can create a clean Drupal template
Want to download the PSD layout ? Join our VIP membership and you will be able to download the PSD file for each tutorial
For start I will create a new document with the following size: 960 x 900 pixels. I will use a black background: #1f1f1f
I will select Rounded Rectangle Tool, and i will set the corner radius to 6 pixels
Then I will create a few shapes on my layout. I will use a white color. It will be better for you to see my result.
For all the layers from the bottom, I will add some simple layer styles
This is my result
I will duplicate all these black shapes. The easy way to duplicate the shapes is to select all the layers, and then you need to drag them to the “create a new layer” icon
You will see new copies of each shape above the original ones
The next step is to right click on each duplicated layer, and choose rasterize
For all this shapes add the following layer styles
Select Rectangular Marquee Tool, and make a selection like mine
Be sure you have the right layer selected, and hit Delete key on your keyboard. Then CTRL+D to deselect. Please do the same for the other parts of the layout
You can add the same layer styles also for the top navigation bar.
Right click on the big white shape, and choose Rasterize Layer
The next step is to go to Select > Load selection. In the load selection window simply click on OK
Create a new layer (press on CTRL+SHIFT+ALT+N). Grab Brush Tool, and choose a big smooth round brush. Change the opacity value to 10 %
With this brush you can click a few times inside the selection. Please add the details on the corners of the white shape. The result will be not so visible.
Now comes the funny part. I will select the Pencil Tool, and on a new layer I will create one line (be sure you set the brush size to 1 pixel)
Set the foreground color to white, and create a very thin line.
IMPORTANT: Place the white line under the black one
Please look careful on the following screen shot to see exactly how you need to place the line
With Eraser Tool I will delete some parts of the line. Try to use also a smooth round brush. This is my result so far
Duplicate this line, and go to Filter > Blur > Gaussian Blur, and use the following settings:
This is my end result for this light.
I will create the same effect on all of the shapes
One more time I will create a few lines with Pencil Tool. I will set my foreground color to #1a1a1a, and on a new layer I will make another line. Hold down Shift when you draw the line. In this way the line will be perfect horizontally.
I will select Dodge Tool, and I will highlight the left zone of the line
Then I will do the same for all the other parts of the layout
Now I will work on the header of the layout. On the right side I will resize the buttons. To rasterize a layer you need to right click on the layer then choose Rasterize layer. Please select Polygon Tool, and set the number of sides to 3.
Create 3 shapes, and place it like in the following image
Now select the top two layers in your layer palette
Press on CTRL+E to merge the layers. Repeat the steps for the other two buttons, and then please apply the following layer styles to all the buttons.
This is my result
Now I will grab Horizontal Type Tool, and I will write some text. These steps it will take you some time. In the following image you will see my end result
Now place some images from your own stock collection
I will create a new layer, on top of all layers (press CTRL+SHIFT+ALT+N) and with Brush Tool, I will add a smooth drawing over my logo.
Then I will change the blending mode to Soft Light
On the top navigation bar I will create a search box, where your users can search for domain names.
Then I will create another light on my buttons
This is my final web hosting layout. I hope you like it. You can apply for a VIP account if you want and you will be able to manipulate this layout better.
Apply for a VIP account to download this hosting PSD layout.
Responses to “Create a professional dark web hosting layout”
Trackbacks
Leave a reply
-
Web design jobs- Nonpublic project #609030 by SeoWebLogix
- Blog writer by acerothstien
- Fading pictures and flash navigation by wiliss87
- Banners for musicshops by BasepointMedia11
- Video Views by marcuskw
- Private Project PTJ 13 - WebGallery Only by simonix
- Private Project PTJ 12 - WebGallery Only by simonix
- php guys needed by Pascal79
- Joomla template purchase and integrate by bnmagic
- W3C validated xhtml conversion with script integration by begwise
-
If you can upload the files fonts, I need MyriadPro Bold
This font is already in your windows
Nice tutorial. Would be interesting to know on what to do with it next xD But this is a GFX site
Thanks for the tutorial I love the screen shots, I also create drupal tutorials but not as advanced as this, and I know it can take a long time to create a tutorial like you have done. By the way will this work as a drupal theme? will this also create
page.tpl.php
node.tpl.php
block.tpl.php
comment.tpl.php
I appreciate your time and creativity.
* Drupal Home Study – Drupal For Beginners
drupal training
The tutorial is only for Photoshop. But it can be transformed into a drupal theme if you know how to code it
Thanks for preparing this excellent tutorial. I think this shows how to add value to quality content in a site with a beautiful theme. I have been looking for a tutorial that shows how to use layers in Adobe Photoshop, thanks again.
Gracias. Una retoque de fotografico muy interesante!
thanks for sharing!
Good one. I’m bookmarking this for later!
Hey all,
I’m new in photoshop and i would like to make a layout with this tut but I don’t get a thing…
For start I will create a new document with the following size: 960 x 900 pixels. I will use a black background: #1f1f1f
Where can i setup this background color?
I go to New… there i can edit the size but there says Background Contents -> White – Background color – Transparent
Where or how can i add this #1f1f1f… ?
Hope someone can help me out here.
Best Regards
You can create e a new document with a white color. Then you can select Paint Bucket Tool, and you can add any color you want.
Please note that you need to change the foreground color.
if you find this method difficult, then you can go to Edit > fill
Set the color you want and press on OK
Please let me know if you still have problems
Hey admin
The problem with the background is fixed now, thx for the reply, but I have another issue now…
Tutorial says:
I will select Rounded Rectangle Tool, and i will set the corner radius to 6 pixels.
Then I will create a few shapes on my layout. I will use a white color. It will be better for you to see my result.
But this is my result i get:
http://users.telenet.be/De.Manu/photoshop/test.jpg
As you can see my corners are not rounded and the 3 dark gray shapes on top I can’t place + all the shapes have different size and how can I set the shapes with the same space between them? I tried with just my mouse but thats impossible.
Hope you can help me with this.
Best Regards
I think you have a problem with the resolution of your document. when you start this tutorial be sure to use the following values :
960 pixels ( width )
900 pixels ( height )
and the most important in your case Resolution ( 72 pixels / inch )
i think this is your main mistake and that’s why you don’t see the corners like mine
You can align very easy with the mouse tool.
Go to View > Show > grid
View > Show > Pixel Grid
View > snap
View > extras
After you check these features, you can hide them by pressing CTRL+H after you have all the shapes in place
You can also align the shapes with Move Tool ( please note that on top of the screen you have another features for this tool ) try to play with them
If you still have problems please let me know.
Ok admin.. you helped me so far but I got another question.
Tutorials says:
I will duplicate all these black shapes. The easy way to duplicate the shapes is to select all the layers, and then you need to drag them to the “create a new layer” icon.
THAT WORKED FINE
You will see new copies of each shape above the original ones.
THAT WORKED FINE
The next step is to right click on each duplicated layer, and choose rasterize.
THAT WORKED FINE
For all this shapes add the following layer styles.
THAT DIDN’T WORK
When i choose to click rasterize the copies become like this:
http://users.telenet.be/De.Manu/photoshop/test.jpg
And i don’t get the Gradient Overlay Menu.
What did I do wrong?
Hope you can help me.
Best regards,
Do not worry Manuel. I will guide you until you will finish this tutorial.
Select only a single layer, then the Gradient overlay menu will be available. You need to add the same layer styles for each layer / shape
after you add the layer styles for a single layer, you can right click on the layer and choose Copy layer style
Select another layer, and right click on the layer ( in your layer palette ) , then choose Paste Layer styles
I am sure you will finish this tutorial. From what i see you are a beginner. Try to follow over 5 tutorials from Grafpedia and i am sure you will learn a lot of stuff.
Please show me the final result when is done
Thx alot for the great support!
Indeed i’m just a beginner but i love to finish this tutorial. I promis i’ll show you the final result when it’s online
So i need to do that what you’ve explained above on the Duplicate (copie) layers or the original one’s?
Best Regards
Exactly. Copy and paste the layer styles for the other layers
Sorry admin, still got trouble with this part :-S
So i have duplicated those 6 black shapes and dragged them into ‘create a new layer’ icon and now i have this in the layer menu:
http://users.telenet.be/De.Manu/photoshop/test.jpg
Then i have to right click on the (for example) Shape 8 copy (if you follow from the test.jpg) and then i go to Blending Options -> Gradient Overlay and then fill on like pictures 94 from your tutorial? Is that correct? and then i do copy / paste layer style for all 6 Shape copies? Or also copy / paste on the original one’s?
And then I can’t find the menu like pictures 102 in your tutorial and what to do next.
Can you please help me step by step what to do on this part please?
Sorry for the time/trouble i cost you mate.
Best regards
It is no problem Manuel
Yes you have to copy the layer styles on each layer you want. this is only a shortcut to help you speed up the process. If you don’t like it you can add the same layer styles for each shape
To access that menu click on the gradient from the following image
http://www.grafpedia.com/wp-content/uploads/2009/04/94.jpg
Double click between the Gradient and Reverse on the black gradient
Does this help ?
This is the sort of tutorial everyone could do with reading.
Thank you for the hardwork you must have put into it. I play around alot with adobe photoshop but you can only get so far. This will help be expand my knowledge and hopefully come up with some better looking designs.
Thanks
Mike
Thank you for a great tutorial.
Nice one, although I miss some more color to point out the important areas…
Amazing tutorial! Do you know how to convert this photoshop file into html?
It is a great tutorial! Thanks for the informacion. I’m bookmarking this for later! Thanks for sharing!
Can someone show me how I could code the glow part ? both around the name and around the “starter host, shard host, vps host” ?
Would be great if it was possible to add such effect with css or html.