Create a communication layout in Photoshop
Looking for a professional layout created to meet design requirements of communication service providers? Follow our easy tutorial on how to create an internet service provider layout. In this Photoshop tutorial I will use patterns, to change the overall look for this design.
Apply for a VIP account. For 9.95$ you can download all our VIP resources including this layered PSD layout
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
If you want to download this Layered PSD layout please apply for a VIP membership. Together with this layout you can download all our resources from our blog.














































Wow, very impressive. Good job.
Ha, you make it look so easy, but that would have taken me days to get the quality you’ve produced.
Nice post
sweet.
nice sleek simple
well done, hope to see more
Excellent. You guys make the best tut’s . . .
i usually avoid websites that look like that.
It’s pretty decent but you might wanna watch for spelling errors in tutorials, and also, the glossy black buttons are too big for the text that is in them, and should be smaller with the text on a single line. Then the nice globe image with accompanying text will breathe better and it’ll look more balanced. But it’s an alright layout overall, thanks for sharing.
Excellent tutorial, very detailed and thorough, thanks for sharing! I really like the simplicity and elegance of the design. The lighting effect helps highlight the header title. Love the blue accent color as well.
how to download 200 patterns in adobephotoshop
you have to apply for a VIP membership and you can download all the VIP resources from Grafpedia
Excellent tutorial, I am web developer.. and started learning photoshop as a hobby your article boost my interest for learning photoshop…
one question, what font u used in this tut?
Myriad pro
can you please how to show how to load the patterns?
@ell – To load a pattern you go to Edit -> Preset Manager, and select ‘Patterns’ from the drop-down menu. Then you click the ‘Load’ button on the right, navigate to the pattern file, hit ‘OK’, and it should be in the list to use.
how were the vertical and horizontal lines added in the top menu bar and in the main content area to separate the text?
It is very easy.
1. Create a thin line with Line Tool ( line should have 1 pixel ) and choose white color
2. Right click on the layer inside your layer palette, and then choose Rasterize Layer
3. Select Eraser Tool, and with a smooth round Brush delete the extremites of the line
4. With the same technique create another line near the previouse one ( use a dark color )
Please let me know if you still have problems creating this small line
Wow. This is one of the best I’ve seen from you guys.

keep up the good work
might use this design as a reference to my own
thanks guys.
very nice
very goog
thank you