Home > Tutorials > PhotoShop Tutorials > Various practice examples of Icon – the quasi-physical method

Various practice examples of Icon – the quasi-physical method

UI has got rapid development and UI is used everywhere; three styles of Icon production tutorials will be launched today and I hope they benefit everyone; I will first introduce the quasi-physical icon (film)

Step 1, Light is important for the overall unity. Bold use of chiaroscuro can enhance the visual impact of the icon; it is worth emphasizing that highlights and shadows never should be black and white; pay attention to the impact of environmental color.

Step 2, The quasi-physical icon puts emphasis on detail and chiaroscuro, in which perspective is also an important part; at the beginning of the design, first draw a wire-frame and establish unified perspective relation.

Step 3, First draw a rough outer contour with the pen tool in similar colors; as for combination of vector pens, make a lot of attempts in pen path operations.

Step 4, Make detailed characterization and increase or reduce some decorations. Materialized icon should be realistic and dynamic. At this point, all of our operations are still based on the pen vector tools; we can locate these steps as flattening.

Step 5, Next, as for details characterization, it’s good to use layer styles to make some effects. Make more attempts to use mixed mode to be miraculous.




Other parts are similar, so we will not take examples one by one; to maximize all applicable effects is important.

Step 6, For the yellow part, two sides of the cylindrical body use deep red to backdrop the corner and use bright yellow in the highlighted part.



Similarly, the film section and the middle details also use layer styles to adjust; replicate a layer of the film to increase thickness.

Step 7, The design of film base should make a lot of reference to the physical thing; the contrast of materialized and real things requires more consideration to reality of the property.

Step 8, Add shaded areas; no matter how small thickness, there will be a shadow. Attention should be paid that the color of the shadow should be close to the object’s ambient color; do not be all black and gray as it seems lifeless. There are many ways to paint shadow; I personally recommend drawing a shape with pen and then adjust the fill transparency and nested layers (press ALT in the intermediate layers) and vector feathering (CS3 or above version) .

Step 9, Sometimes, only one layer is not enough to show the shadow; it needs stacking of multi layers. Because if the shadow and bright contrast is treated more intensely, the stereoscopic sense of the materialized icon will be more intense.

Step 10, The way to add highlights is the same as shadows dealing; I like to deal with highlight later, because the highlight is always extracted in the end; from the figure we can see that the icon after finishing of high light shows different feelings.

Step 11, If you are designing an app icon, then add a liner to complete the course; of course, if you want more colorful, increase background details; we will not make detailed operation here.

Anyone is welcomed to redistribute and quote the content only if he or she notes its origin. http://4-designer.com/2015/01/various-practice-examples-of-icon-the-quasi-physical-method


Link to this page:

Pic link:


Important note:
Pin for file decompression: 4-designer.com