FW Making Apple Crystal Graphics

Graphics Mac style Everyone must be familiar, and more and more popular in recent years







I do software skin design work, of course, more deepen have experience. But icons like this style, buttons are not so easy to find. I used to waste a lot of time trying to find some suitable crystal icons.

After a simple analysis of their own, I found that the production of this icon is actually very simple. Can completely put their own graphics, symbols in my own way to do and the same as above, crystal clear

Drawing first to choose a graphic image processing software, now there are many such software, there are many professional icon production software

This was previously posted in a third party software area.

But I am using Frieworks (FW), the software is very flexible operation, more suitable for the Web page button

If you want to use PS, of course you can

No more nonsense, I'll talk about the production process of the crystal icon under the FW

1, the new file, parameters from the set, the canvas do not open than the icon small on the

2, draw on the canvas you need to make graphics, text can also (only text in the future to convert to the path)

3, I do is the text, the font is: Cooper Black (if there is no such font, find a thick, round some, so that the text looks better, and more lovely), text good after the text into the path, if it is more than one text, conversion path, you need to dissolve the word group



4, select one of the text, in the property panel to change its fill color, changed to a linear gradient



5, then click on the fill color of the color box to adjust its gradient color, the side of the slider is white, one side is red, the Red slider dragged to the position of the diagram. Then use the Black Key tool to select the text, adjust its gradient tone bar to change the direction of the gradient.



6. Next, you need to change the border color of the text. Click the border color box on the right side of the property panel to set the color to #aa0000, so that the reflective effect below the text is made



7, next to do the upper part of the text of the high light, so that the crystal smooth sense of permeability. Use the Pen tool to check out a graphic, if the edge of the graphic is not satisfactory, use the white arrows to change the curved force of the curve. As shown in figure



8, the text selected, ctrl+c,ctrl+v this everyone should know is doing. Then select both the text and the path just drawn, and choose the Intersect command under combine paths in the Modify menu.

//

This is a set of commands that modify the path.

The first join is a combination of paths, similar to Group (group) between graphs

The second split, which corresponds to the command and join, is to dissolve the path

The third union is a fusion of paths, and unlike joins, two paths are completely combined into a graph and cannot be reversed except ctrl+z.

The fourth intersect command is the part that takes two intersecting graphs

The fifth punch draws a hole in the graph drawn after use

The sixth crop and intersect effect is similar, specifically what is different, I temporarily forget

//

OK, then we'll take our crystal word, using the Intersect command, we get a new graphic, which is the high light part of the text.

9, the color of the high light part of the adjustment. First, remove this part of the border color, (this is not my nonsense), and then the fill of the carefully adjusted, where the fill is also a gradient fill, from white to white, but one side of the opacity is 80, such as the figure to adjust the gradient direction control lever, the overall opacity is 90.



OK, basically finished, the last step, give R plus a projection effect, so that looks more beautiful



In this way, the first word is done. The following word approach is the same as the first one. Everybody do it yourself, my hands are already sour

Final effect Diagram



This is the source file