Things you need to create this layout:
- 200 Pixel Patterns
- 325 Bullet Icons
- 30 minutes from your precious time
To create this Internet service provider layout you need to create a new document with the following sizes: 960 x 900 pixels. I will use a dark color for this layout. A few days ago I received an e-mail from someone asking how he can change the color of the background. To change the background color is very simple.
Double click on the foreground color.
On the color picker window select which color you want. In my case I will use the following color for the background: #101318
With Paint Bucket Tool I will click one time on my document, and this is the easy way to add a color to the background. Please note that you need to select the background layer, and after that you can add the color with Paint Bucket Tool. Now let’s start assembling this tutorial with some basic techniques.
For start I will use the Brush Tool, to create a white point on the top left corner of this layout
I will select the layer in my layer palette, and I will modify the opacity value to 30 %
I will select Rounded Rectangle Tool, and I will create a shape like in the following image. For this shape I will use the following color: #313841
I will select the layer in my layer palette, and I will press on CTRL+J (this shortcut will duplicate the selected layer, and a new layer will be created on top of this shape. I will right click on this layer and I will choose Rasterize Layer
Then I will select Rectangular Marquee Tool, and I will create a selection like in the following image
I will hit the Delete Key from my keyboard, and I will press on CTRL+D to deselect
With this layer style selected I will go to Layer > Layer style > Inner Glow and I will add the following styles for this layer
This is my result
With the same technique I will add another shape at the bottom of this layout. Click on the image to see the full size layout.
Now you have to download the following set of 200 Photoshop patterns
If you don’t have access to the VIP files I am sure you will find other free patterns over the internet. Load the set of patterns in Photoshop. If you don’t know how to do it please leave a comment and I will explain how to do it.
I will create a new layer (press CTRL+SHIFT+ALT+N), and with Rectangular Marquee Tool, I will create a selection like in the following image.
I will select Paint Bucket Tool, and I will select the following pattern.
I will click one time inside the selection, then I will press on CTRL+D to deselect
I will change the opacity value to 30 %
I will select Eraser Tool, with a big smooth brush and I will delete the middle part of this stripe pattern
On the right side I will add four buttons with Rounded Rectangle Tool. The easy way is to create a single button, then you can create a duplicate of this layer and with Move Tool, you can place the other buttons where you want. In this way you will create some perfect
buttons.
For all these layers you can add the following layer styles
The pattern is from this set: Seamless pixel patterns
This is my result after I will write down some text over these buttons
With Horizontal Type Tool I will write some dummy text. Click on the following image to see the full size layout
I will add some images on top of the layout, and also a button
I will select the layer with the globe image in my layer palette, and I will click on CTRL+J to duplicate this layer. I will go to Edit > Transform > Flip Vertically
With Move Tool I will place the globe like in the following image
With Eraser Tool delete the bottom part of the globe. In this way you have a very nice reflection. Please note that you need to use a smooth brush when you erase the globe
The same you can do it for the blue button
I will download the following set of pixel brushes
On a new layer (press CTRL+SHIFT+ALT+N) I will add one of the 325 pixel icons
This is my final result
discuss this topic to forum
