I want to learn Icon Design, looking at the beautiful icons designed by the predecessors, I copied one of them and attached the works and general design ideas:
The specific design steps are as follows:
1. Create a new document with a size of 283 x 152 pixels, and then select“ Ellipse Tool” Draw a circle, fill it with light gray, and the color value is“ F1f1f1 ", name this layer“ Grey Circle”.
2. Use the ellipse tool to draw a circle. This time, the fill color is blue, and the color value is” 3f84e2 ". Similarly, name this layer blue circle.
3. Now let's load the layer 2 (that is, the blue circle layer) selection area (the specific method is to press and hold the CTRL key and click the layer to load the selection area), and then click“ in the top menu; Select”=>& ldquo; Modify=>& ldquo; Shrink”, Shrinkage is 1 pixel.
4. When the selected area is loaded, return to the originally created layer, which is“ Grey True Circle” Well, click“ on the main menu; Layer” --& ldquo; Rasterization” --& ldquo; Shape”. Next, go to the Edit menu and select“ Clear”, To eliminate the gray circle in the middle. Now you can cancel the selection (shortcut key: CTRL+D); Blue Circle” Drag the layer to“ Gray layer” Below.
5. Now double click“ Grey True Circle” Layer, start to set the layer style, first“ Internal luminescence”: Normal, 35%, 0%, # 000, Soft, Edge, 0%, 4px, and other parameters remain unchanged.
6. Continue to design the layer style, and select“ Bevels and reliefs”, The parameters are: Inner Bevel, Smooth, 100%, Top, 2px, 0px, 113 degrees, Use Global Light, 30 degrees, Color Filter, 100%, Multiply Positive, 21%.
7. Set“ Gradient Overlay”, The parameters are: normal, 85%, # 747474 - # c6c7c7 - # ffffff - # ffffff, linear, aligned with the layer, 90 degrees, 100%.
8. Now come to“ Blue Circle” Set the layer style. Double click the layer to pop up the layer style settings. Let's set the“ Inner Shadow”. The parameters are: color fade, # 008aff, 100%, - 11 degrees, and other parameters remain unchanged.
9. Now set“ Gloss”, The parameters are: color fade, # 0d619c, 59%, 19 degrees, 3px, 3px, and other parameters remain unchanged.
10. Set“ here; Gradient Overlay” Yes, the parameters are: normal, 80%, # 20a7ed - # 042b3a, radial, 90 degrees, 100%.
11. Now select“ Rounded Rectangle Tool” Draw a rounded rectangle with a radius of 3 pixels, and the color value is“ 3f84e2 ", name this layer“ Bell”. This layer is the prototype of the two small ears at the top of the clock, so you should measure the size by yourself
12. Now we want to give this“ Bell” Set the layer style of the layer. First, set“ Projection”, The parameters are: positive underlay, # 000, 73%, 113 degrees, 0px, 0%, 1px, and other parameters remain unchanged.
13. Now set“ Inner Shadow”, The parameters are color fade, # 008aff, - 11 degrees, 1px, 0%, 0px, and other parameters remain unchanged.
14. Continue to set the layer style. Now it is“ Internal luminescence”, Parameters: Normal, 36%, 0%, # 000, Soft, Edge, 0%, 2px, 50%, 0%.
15. Now click“ Gloss” To continue setting, the parameters are: color fade, # 0d619c, 59%, 19 degrees, 3px, 3px, and other parameters remain unchanged.
16. Set“ Gradient Overlay”, Parameters: Normal, 78%, # 20a7ed - # 042b3a, Linear, - 45 °, 100%.
17. As you can see, our clocks usually have two“ Bell” They are all tilted at the top of the clock. Now let's go back to“ Bell” For that layer, select“ from the main menu; Edit” --& ldquo; Free transformation” (In fact, CTRL+T is OK here.). Then, press and hold the Shift key to rotate the layer until you see that the display angle on the panel (the top line) is“ - 30 degrees”. Copy“ Bell” This layer, CTRL+T, right-click, and select“ Flip horizontally”. The“ Bell” And the previous“ Bell” Move to the appropriate location. Of course, these two layers need to be in the“ Grey True Circle” Under the layer of
18. Select“ Ellipse Tool”, Draw a flatter ellipse with the color value of“ 3f84e2 ", name this layer“ Clock Leg”. This layer is placed under the“ Gray Circle Layer”. Then we need to adjust the anchor point of this“ Clock Leg” to make the initial ellipse look like a clock leg.
19. Now let's check“ Clock leg” To set the layer style, first set“ Projection”, The parameters are: Normal, # 000, 73%, 113 degrees, 0px, 0%, 1px, and other parameters remain unchanged.
20. Now click“ Inner Shadow” The parameters are: color fade, # 008aff, 100%, - 11 degrees, 1px, 0%, 0px, and other parameters remain unchanged.
21. Click“ Internal luminescence”, The parameters are Normal, 36%, 0%, # 000, Soft, Edge, 0%, 2px, and other parameters remain unchanged.
22. Now set“ Gloss”, The parameters are: color fade, # 0d619c, 59%, 19 degrees, 3px, 3px, and other parameters remain unchanged.
23. Now use“ Pen Tools” Draw the needle of the clock. For those who are not familiar with pen tools, you can use the needle shape. After finishing the needle, remember to put the needle in the center of the clock, and then add a layer style“ Projection”, The parameters are: angle: 113, distance: 1, size: 2
24. Now select“ Ellipse Tool”, Draw a flat ellipse in black, and name this layer“ Clock projection”, Put this layer under all layers. (It is the projection of the clock. Please pay attention to the size when you draw it.)
25. Now double click“ Clock Projection” The layer style is set for the layer. Blending options (default): Normal, 28%, and other parameters remain unchanged.
26. Click“ External luminescence”, The parameters are Normal, 100%, 0%, # 000, Soft, 0%, 9px, and other parameters remain unchanged.
27. Finally, you can make some adjustments to your own maps, such as the shadow transparent The degree, fuzziness, and highlight are not detailed here.
