Let us start by making a new document. Since this will be an icon we need to make it 255x255 (this is the size usually is used when making an icon at high resolution). As always transparent background.
Select the Round Rectangle tool and draw a rectangle almost the same size as the document (leave about 5px space on all four sides + some more on the bottom so we won't get a square tablet). Color is not important but I recommend a dark gray.
Now go to Edit->Free Transform->Distort. Now move the top corners about 10 px to the center but make sure the top line is parallel with the bottom one. You should have something like this:
Now duplicate the layer and move the top one about 15px Up. If you don't have space than just lower everything down a little bit. Change the color to something lighter just so you can see the two distinct layers.
To the bottom layer ad a 1px Black Stroke and this gradient (angle is set to 0):
To the top layer also ad a 1px Black Stroke but this gradient (angle is 90 this time):
After completing al these steps you should have something like this (I know...it does not look very good but believe me it will):
Now let's make the screen.
Take the Rectangle Tool and draw a rectangle that will fit in the tablet. Almost the same with as the Rounded rectangle but make it a little smaller in height. After that select the Distort (from Edit->Free transform) and adjust the top corners. You should now have something like this. If not try to make it like this because it is important to get the screen right.
Ad a 1px white Stroke to it and the following gradient ( angle is 180):
Now hold Ctrl and Click on the screen layer (the one we just created). This will make a selection that has the same shape as the screen. With the selection in place create a new layer. Get the Gradient Tool and chose the gradient from Black to Transparent. Drag the gradient from the top left corner to the right bottom corner. Now set the Blend Mode to Overlay. Now you can deselect by pressing Ctrl+D.
Your result should be this one:
The next step is optional. It wasn't in the original design but while I was writing this tutorial it came in mind. Duplicate the screen layer, remove all Blending Effects from the blending Options Menu. Set the color to white and the opacity to 20%. Ad two anchor points at the top of the layer. Now using the Direct Selection Tool position the top 4 anchor points just like in the image below. Make sure the side anchor points are on the white line from the stroke. You will need to zoom in order to position them correctly.
Now position this layer under the gradient layer.
Now we will do some adjustments. In this case our tablet is a little to square. We need to modify it a bit. Select all the layers (Click on the first layer and after that click on the las layer while holding the Shift key pressed). Now scale them up a little bit until we have the desired dimension. Don't worry about the gradients. They will automatically adjust.
The result should be like this:
Now we need to draw a led. get the pencil tool and set the color to white. Zoom at 1600% and place your view near the bottom right corner. Using the pencil tool and some color variations from white to gray make this shape (pixel by pixel):
Make sure you made it on a new layer just in case you did not get the positioning correct. This way you can move it without disturbing the other layers. The result should be similar to this one:
Now let's ad some more effects.
Get the Elliptical Marquee Tool and make a selection at the bottom similar to this one:
Now carefully color between the black lines with white using the Brush tool. Zoom in in order to make it right. Don't worry not to color outside the selection area because you can't. Just don't color over the black lines. Also make a new layer for this as well. It is a good thing to learn to make a new layer for every element that you make.
Now deselect by pressing Ctrl+D. Go to Filter->Blur->Motion Blur. Set the angle to 0 and the distance to 12 (or even 15). Now lower the opacity to this layer to about 70%.
You should have something like this:
So far so Good. Just one more element to ad. The Pen.
Make a new Document about 150px height and 30px width.
Draw a rectangle that is about 15px width and almost the same height as the document. Zoom in and ad 2 anchor points just like in the image below.
Now move the bottom 2 anchor points to the center until you get an arrow head.
Ad this gradient to it (angle is 0):
Result should be this one:
Now carefully colorize the tip of the pencil with a light gray color. (remember to make a new layer). Result is this (or something similar):
Now using the Rectangular Marquee Tool select the entire pencil and Edit->Copy Merged.
Now go to your original Tablet design and past the pencil. Resize it and rotate it so it will fit the design. Duplicate the layer. The original layer make it really dark (Press Ctrl+U and move the Lightness slider to -100). For the next step set the pencil layer to invisible. Now distort it until it looks like this:
Now go to Filter->Blur->Gaussian Blur and set it to 3. Click OK! Lower the opacity to 60%.
Make the pencil layer visible again.
Now select all layer and center them.
Ad a background and you're done.
Here is the result:
As an effect i made a reflection but remember. This will only look good on a site. If you want to use it as an OS icon don't do this.







More Photoshop: