We will give you a detailed analysis of the photoshop software and share with you the tutorial on creating the UI icon for the TV design.
Tutorial sharing:
First, let's look at the source image, a small image of 400*300.
Create a 1000*800 document, add a gradient adjustment layer, create a 90-degree radial gradient from # b4b097 to # 4e473a, set the scaling to 150%, and check the imitation color, prevent color blocks.
I think everyone must be curious about why the light color in the radial gradient of my screenshot is not centered, but is located in the center. Let's see our GIF demonstration.
In the gradient filling state, we place the mouse pointer on the screen. When the icon of the mobile tool appears, we drag and the position of the gradient also moves. This operation method, it is also available in the layer style.
Use the rounded rectangle tool to draw a rounded rectangle of 600*600 pixels, set the rounded corner to 140 pixels, set the horizontal center and vertical center.
I named this rounded corner rectangle as a "subject" and added a layer style to it.
Copy the "main" layer, change the layer name to "projection", place the "projection" layer to the lower layer of the "main" layer, set the layer fill to 0, and then add a layer style, let's enhance the projection effect.
The source image draws a shape similar to an elliptical shape. I am just a little lazy here. I still draw a rounded rectangle with a size of 130 X360 pixels and a radius of pixels. I will add a layer style.
Next, create a screen and set the foreground color to # b4b097. Use the rounded corner rectangle tool to draw a rounded corner rectangle with a radius of 420 pixels and 280 pixels.
Add a layer style for the screen layer.
Copy a layer of "screen", convert it to a smart object, add a color, and change the blending mode of the layer to "Soft Light ".
Subtract the rounded rectangle of the two screens to obtain the desired highlighted shape at the lower part of the screen. Set the color of this shape to # eaead2 and set a 1-pixel appearance in the attribute panel, and change the layer blending mode to "Soft Light" with an opacity of 34%.
Set the foreground color to # eaead2, and use the rounded rectangle of the screen to intersect with an elliptical shape to obtain the desired highlight shape at the top of the screen. Similarly, change the layer blending mode to "Soft Light ", opacity 34%, and add a layer mask, wipe the left and right sides properly.
Next, let's create a button, set the foreground color to # b4b097, draw a circle, and add a layer style.
Set the foreground color to # d9d0ca, draw a smaller circle, and add a layer style.
Copy a "button" layer, change the layer name to "projection", set the layer fill to 0, and then add a layer style to enhance the projection effect.
Select the three layers of the button, CTRL + G, create a layer Group, name it "button 1", copy the Layer group, get the four buttons, the rightmost button, I have changed the color, and no parameters are provided here. If you do not know how to change the color, you can simply read the tutorial without understanding it. If not, download our PSD.
Finally, I added our P-dot S LOGO and icon, and set an inner shadow and projection. This layer style is often used, and we often see it in our tutorials, I won't talk about it here.
Our final results:
All right, the above information is the detailed design of the TV theme UI icon creation tutorial for all photoshop users, I believe that the software users here are very clear about how to create TV icons, then you can follow the tutorial above to try to create the UI icon of the TV topic.
