UC8.0 Browser Product Game Center icon design experience sharing

Article Description: The birth of UC8.0 – Application Center icon Design Small tutorial.

The age of application is coming? The undisputed answer is "yes!. ”。 Whether it is PC, web or mobile terminals, all ushered in their own "application" of the spring. Of course, with the UC8.0 line browser products released, UC browser fans are not difficult to find, "application" on the road appeared on the people of the beloved UC, welcome to congratulate!

Find your own style! This is what we need to think about before we start the icon design. The plane? Three-dimensional? A realist? A cartoon? Wait a minute. The process may be long, perhaps very short. Inspiration is hard to ponder. When we think about the shape of the general, we can start to draw a number of "simulation" icon, this time the icon painting does not have to be too complex, can have a feeling good. Finally, we UC selected a more solid icon style to carry out the design.

Today we will draw a simple "game Center" icon, to share with you some of the icon drawing process of some methods and experience it. Then let's get started! First of all, we use a pencil ballpoint pen what to draw a sketch, find a satisfactory shape, haha, the second figure is set. (The painting is ugly--everyone will see!) ）

STEPT1: This is the "Game Center" icon we're going to draw together today. The first step is to "undress" the icon first. This icon can be decomposed into two parts, one "outer frame" and one "game handle".

STEPT2: First, with the rounded rectangle tool to draw two overlapping rounded corner three-dimensional rectangle, this is our outer frame of the basic shape. Next we'll make a gradient coloring of it. Add high light at rounded corners, making the whole stereo graphic more natural and smooth, at the same time to distinguish between strong and dark color area to increase the 1px of high light line, making the icon more texture.

STEPT3: We started to draw the high light from the dark bottom area, and here it's worth noting that we draw the highlight region in the dark bottom of the selected region on the basis of the contraction of 1px, so that there is a clear gap between the high light and the dark, and in order to make the painted high light area more colored, we have to do "secondary mixing mode superposition", The first time you use the "overlay" blending mode, and the second time you use the blending mode of "color filter". In order to make the high light area more rich texture, we in the original high light area based on the addition of 1px high bright edge, so that, the icon is more crystal clear slightly.

STEPT4: Next we start drawing the Blue Game tab in the lower right corner. Simple Blue side 45-degree gradient can complete the basic type color, but for the icing on the cake, we need to add the blue gradient on the basis of the same direction with the highlights of the high bright side, the drawing method and the previous reference to the rendering of the highlight area of the same method, the same need "secondary mixing mode Next add "GAME" text, the effect of using a gradient + projection can, it is worth noting that the gradient is not too large, the light can be, the projection selected black "Multiply", distance 1px, size 2px can be. At the same time in the upper layer of the dark blue plus the high light, you can give the icon to bring a different texture.

STEPT5: After drawing the outer frame, we begin to draw the game handle. First draw the shape of a game handle with the mouse. Add a simple linear gradient. Then in the handle of the boundary of the shadow, let the handle three-dimensional up.

STEPT6: Now we start drawing the left-hand action bar of the game handle. To make it more "bump," we choose to add a gradient stroke to the outer side of the dark gradient that is the opposite of the handle body color. In the dark direction of the operation of the plate to draw up and down the direction of the key, note that the gradient use, and the background color can not be too contrast, light of the interval can be.

STEPT7: As for the right side of the operation of the button and the left-hand side of the operation of the drawing method also have similarities. First draw Four "groove", and then put four buttons inside, in the button layer property configuration, you can only use a solid color plus "bevel relief" effect, simple display of high light. Then you can complete it with a different color for your button. It is worth noting that the outer layer of each button can add a darker color value to the property, making it more nuanced.

Stept8: Next draw is the handle of the bottom lever. This part of the processing we can simply imagine a stereo button to draw. Summed up is "two graphic translation." That is, draw a circle first, and then copy a copy, and move it up, simple bar of the high light part of the operation, we also use a simple "bevel relief" effect can be. The main body of the handle is basically complete, then we add some "accessory" small objects, game handle to finish!

STEPT9: The last step is "packing". We loaded the game handle into the outer frame we had drawn before. Note here, the need for the outer box in the dark area of the selection, in the handle four weeks shadow, pull out the handle and the outer frame distance, make the whole more layered sense. Then we just need to add a little light dot as embellishment, and then pull a reflection, it is done!

Concluding remarks: I do not know whether this article will be helpful to everyone's icon design, drawing the icon is a meticulous life, we usually have a lot of practice, a lot of drawing icons, who can be born Qiao ~ everyone fighting!