Photoshop creates compact players

Whether you want to design an application interface, skin, or the appearance of a player, you will find that the techniques in this tutorial will be the same for you. It is obvious that I cannot sit here, a word by word knocking out all the steps of creating an interface, because some are really the basis of the foundation. However, I think it is useful to tell you how to create a few components that will help you design a beautiful interface.

1. First, create a new document of the appropriate size. In this example, I use a 500x500 pixel size document with a resolution of 72 pixels per inch and a white background.

If you feel that working on a huge blank canvas is a bit empty, why not put a favorite wallpaper in the image or create a simple background? Of course, to ensure that the background image color is very light, reduce the opacity of the layer is a good way. (Figure 01)

Figure 01

2. Now start drawing the main shape of the player. In this tutorial, we want to make a small and exquisite player, the shape as simple as possible. Set the foreground color to a light gray #e5e5e5, select the Rounded Rectangle tool in the Shape tool in the toolbox, create a new shape layer in the toolbar, set the fillet radius to 50px, drag the mouse, and draw a rounded rectangle in the diagram, as shown in Figure 02.

Figure 02

Using the vector shape tool to determine the shape of rounded rectangles, in addition to convenience, more importantly, we can modify the path to edit the shape. Click on the layer clipping path thumbnail to display the path and click the path to display the node with the Direct selection tool (Figure 03).

Figure 03

Select the top right node with the direct Selection tool, click the arrow key to move up 5 times, move up 5 pixels, and select the lower right node to move 5 pixels down (Figure 04).

Figure 04

Next, use the Pen tool to add nodes to the diagram position (Figure 05), select the newly added node above with the direct selection tool, move 4 pixels down, and select the newly added node below to move up 4 pixels (Figure 06). After hiding the path, you can see the smooth shape, which is the shape of the player we want to build.

Figure 05

Figure 06

Tip: It's a good idea to create a panel shape with a vector shape tool. Not only the image quality will improve, but more importantly, you can edit the changes at any time.

3. The work below is to add a stereoscopic appearance to the shape. I want to make it look like a smooth metal, we do it through the layer style. Of course, you can do it in a variety of ways, but if you use the layer style, you will be able to apply the style directly when you encounter the same situation later. Double-click the layer and we start using the layer style:

Select gradient overlay, blending mode is normal, opacity is 10%, zoom to 34%, others remain default;
Choose Luster, change the blending mode to normal, the color is black, the opacity is 16%, others keep the default state;
Select the bevel and Emboss, in the structure, only the size to 9 pixels, softened to 6 pixels, in the shadow, the angle to 90 degrees, the height to 6 degrees, darkened the mode of the opacity of 0%, others remain the default;
Select inner Glow, blending mode to normal, opacity to 21%, light color black, others to keep the default;
Select the inner shadow, the opacity to 17%, angle-87 degrees, the elimination of global light, the distance of 5 pixels, blocking 16%, the size of 6 pixels, others remain the default;
Select projection, opacity is 17%, angle is 90 degrees, distance is 3 pixels, expand to 0, size is 3 pixels.

This way, the player's panel is finished. You can save the layer style and use it again next time. The following task is to add a variety of elements to the panel. (Figure 07)

Figure 07

4. Select Rounded Rectangle tool, set the foreground color to white, and still follow the settings just now, create a smaller rounded rectangular layer on the panel layer, add a gradient overlay style, set the opacity to 49%, fade from white to black, select Reverse, zoom to 93%, and effect as shown in Figure 08.

Figure 08

Now we need a bit less than the black rounded rectangle we just built. Copy just the shape layer, right-click the new copy layer, select clear layer Style from the pop-up menu, double-click the layer thumbnail, select Black in the Color picker, and the new layer color becomes black. We want to make it a little bit smaller, press ctrl+t, bring up the deformation box, hold down ALT, make the zoom symmetry, slightly drag the bottom of the deformation box, also, hold down ALT, drag the side of the deformation box inward. If it doesn't feel right, press ESC to cancel the transformation and press ENTER to determine the distortion. (Figure 09)

Figure 09

We still add a stereo effect to the layer style:

Select Bevel and Emboss: Depth is 1%, size is 1 pixels, angle is 90 degrees, remove global light, height is 80 degrees, high light opacity is 47%, others remain default, in Contour options, select Anti-aliasing, Range set to 100%;
Select the inner glow, the blending mode is normal, the opacity is 96%, the luminous color is black, in the Tusso option, the block is 20%, the size is 3 pixels;

In this way, your diagram should now look like the following figure (Figure 10).

Figure 10

5. Now, let's build a real LCD screen. The process you see below will be similar to the one above.

Select the foreground color as #86b7e7, use the Rounded Rectangle tool, set the fillet radius to 3 pixels, and draw a new blue rounded rectangular layer on the black panel, as a panel for the LCD screen (Figure 11).

Figure 11

It looks too flat, so we decorate it with a layer style:

Select the projection, the blending mode is set to normal, the color is white, the opacity is 30%, the angle is 56 degrees, the global light is eliminated, the distance is 3 pixels, the size is 1 pixels, and the other defaults;
Select the inner glow, the blending mode is set to normal, the opacity is 41%, the color is black, the rest is by default;
Select bevel and Emboss, depth of 211%, the size of 92 pixels, shading angle of-90 degrees, the elimination of global light, height of 45 degrees, high light mode for color reduction, color white, opacity for 30%, darkened mode for color reduction, color black, opacity for 0%;
Select a stroke with a size of 1 pixels and a black color, and the image is now shown in Figure 12.

Figure 12

The following steps are optional, but I often use it to add a high light effect to the image, just as it really reflects the light. Of course, to get the reflective effect is not the only way, but I think that this method to create the most realistic effect.

First, copy the Blue LCD screen layer, remove the layer style with the right menu, and repopulate the layer with white. Press Ctrl+t to deform the shape layer, and in the toolbar on the screen, set the width to 97% and the height to 87% to determine the deformation (Figure 13). Then, in the high and mixed options, reduce the fill opacity to 0, making it invisible. Restores the default foreground background color panel, reverses the foreground and background colors, enters the gradient overlay layer style, sets the gradient to foreground to transparent, selects the reverse, sets the scale to 123%, and the remaining options remain the default. In this way, we get a good high light, but there are still some imperfections that we have to further modify the high light.

Figure 13

In the high light layer, click the Add Layer Mask button under the Layers panel to add a layer mask to the high light layer, and the mask thumbnail is sandwiched between the layer thumbnail and the layer clipping path thumbnail. OK in the layer mask, select the Pen tool, draw the diagram path (Figure 14), press Ctrl+enter, convert the path to a selection, invert the selection, fill the mask selection with black, and deselect, and the high light layer is shown in Figure 15.

Figure 14

Figure 15

Select the appropriate font and add the display number for the LCD screen (Figure 16).

Figure 16

Finally, you need to play some imagination, and then add some other buttons and parts to make it more complete, this exquisite delicate player is completed. (Figure 17)

Figure 17