Give your illustrator software users a detailed explanation to share the tutorial on making the UI design series.
The strength of AI lies in the processing of vector graphs. The Sage has a cloud: "If you want to" generate "an image from scratch in your computer, vector graphic authoring software is usually more suitable, except for special occasions like the use of digital hand-painted. Especially in the field of UI design, Web design, most of the time does not need the structure and color is very complex graphics. Most of these are simple geometric shapes that require rectangles, ellipses, rounded rectangles, and so on. Therefore, at this point, PS and other image processing software relative to the AI, there is not much advantage.
In AI, it is easy to finish from layout, drawing graphics, coloring, Chettu export such a whole set of processes. It means that when you design with AI, you don't need to change the software environment halfway. For example, many designers use PS design to open an AI, first with the AI painting basic shape, and then the AI in the graphics as a smart object copied to PS, and then continue to create with PS. AI can almost completely avoid such a change of software in the middle.
AI offers a range of features that are most suitable for layout layouts. For example, in PS, the guide line is just a vertical straight line, and in the AI, the guide line can be any shape. Is the guide not infinitely long? The guide line is a slash? No problem! Draw a rectangle and even draw a circle to use as a reference line? No problem!
Because the creation of AI is mainly based on vector objects, so in AI, most of the operations are reversible, can be modified in the later. For example, to draw a button, you can easily adjust the radius of the button fillet, while keeping the button's graphic style unchanged. Draw a hexagon you can also add rounded corners and change the fillet size at a later stage.
AI in the vector based on the absorption of objects, alignment function is quite good, and in the UI design is quite common.
Because Ai has a rich vector effect (similar to the PS filter and layer style), so the AI can be done flat, into the can do the fitting. The following two diagrams are drawn with AI and do not use any software other than AI:
Of course, the flat design of the AI is even more.
The AI's export based on vector objects is very useful, as will be described in a later tutorial. and AI can export artwork to an SVG-formatted finished product, which is ideal for use on the Web.
What the AI does can be exported to any large size without a "dummy edge". This is especially useful for designing icons with different resolutions and for Retina adaptation.
AI's support for Retina MacBook Pro is excellent.
Yes, AI in CS5 can do the vector graphics to the pixel, so do not worry about the exported Chettu, the line does not accurately on the pixel, resulting in hollow situation.
The AI is far more suitable than PS if you have to make a copy of a booklet occasionally.
There are many advantages that can not be thought out ...
Therefore, even if the PS function is very powerful, and there are more learning resources and material resources on the internet, for me, AI is still irreplaceable.
Next I'm going to write some of the tutorials that focus on the AI's advanced use techniques in UI design.
Therefore, these tutorials may be more suitable for the AI already have a certain understanding of the user to read, may not be for the basic use of AI features will not introduce too much. One is because most of the basics of AI can be described in Adobe's official documents: Illustrator help; the second is due to space and personal time, energy constraints; third, I believe that learning a software, ability the best way is to learn it the hard way, that is, in a certain Under the pressure or difficulties to complete the study, such as learning AI encounter such a certain function can not find such difficulties, their own through the search engine or official documents or through their own attempts to find solutions, than directly ask others effect is much better.
The most current version of Adobe Illustrator is CC, Creative Cloud. I will write a series of tutorials that require you to use the minimum version of AI for CS6, because some of the very basic features of CS6 are not available in previous versions. Of course, if you use the CC version is the best.
UI Design using Adobe Illustrator (ii)--Multiple fills and multiple strokes
Before that, talk about some basic knowledge of computer graphics (note: non-images). If you use PS or AI more, you may know that the most basic elements of computer graphics are two: fill and stroke. Fills and strokes can be solid colors, textures, or gradients. In short, after a shape determines the fill and stroke, the style of the graphic is determined.
Naturally, as a vector drawing software, AI can also handle the fill and stroke of graphics. However, Ai has a very powerful place--in AI, a graph can have several fills and several strokes. One might ask, is this feature useful? In fact, this is a fairly practical and powerful feature. Let's take a look at the following: Use AI to draw such a button with a known style:
First, before you create a new document, make sure that the AI uses pixels, not inches, dots, centimeters, or anything else. This is important in relation to whether the exported Chettu is pixel-perfect. In your preferences, you can set what units the AI uses:
To make sure that the unit that the AI uses is pixels, create a new document, the size of the document is 480 pixels, the color mode is RGB, and confirm that "make new object Snap to pixel grid" is not checked. As shown in figure:
To illustrate here, AI starts at CS5 and supports the alignment of objects to the pixel grid, which is important in UI design. But why don't you check the "Make new object and pixel grid snap" option when you create a new document? I found in many creations that getting the object up to the pixel grid from the start was more of a hassle than a convenience. Also, the alignment to the pixel grid can be done at a later time. So let's not hook up here.
In general, do UI design, poster design, if not a special need, it is best not to use black, white, pure red (#FF0000) such color. One is because the contrast between pure black and white color makes people feel very uncomfortable, the second is that the nature of almost no look black and pure white objects, not in line with people's life experience. So we add a light gray color to the background. That looks similar to white, but not pure white, but slightly darker color. Creates a new rectangle in the default layer, overwrites the entire artboard, sets the fill color to #E6E6E6, removes the stroke, changes the default layer name to Backgound, and locks the layer to prevent future misoperation. After doing well, it should look like this:
Then, start to draw the button. We want to draw a rounded button with a size of 72x32 pixel near the center of the screen. So, create a new layer and name it "button." Create a new rectangle, and then set the size of the rectangle to 72x31. The width of the rectangle is set to 31 instead of 32 because the next step is to draw a sunken effect on the rectangle, which takes up an extra pixel height and is set to 31 instead of 32 pixels high.
Because the human eye has the illusion, if the button is painted in the center of the drawing board, the human eye looks like a little below the center. Therefore, to balance the visual illusion of the human eye, the button position is slightly higher than the center of some. Set the positive center of the rectangular button to (160,209.5). The reason for setting the vertical coordinates to a decimal is that this allows for pixel alignment. Of course, if you use the alignment to the pixel grid function can also be done. After these two steps are completed, the rectangle should be this position (for the convenience of viewing the position, I have replaced the rectangle with a fill color):
Next, the rectangle is rounded to the effect. Select the rectangle, and then use the effect "-›" to style the "-›" fillet ... this command gives the rectangle a rounded effect of 5 pixel size. Add the following effect as shown:
Now in the Appearance panel, you can see that the effect of rounded corners has been added. In the next step, always keep the rounded corner at the top:
Give the button a different background, the color is #8CE01E. Next, go to the play. Click the "Add New Fill" button under the "Appearance" panel (that is, the "FX" button on the left), and then create a new fill layer, the color is white to pure black gradient, the direction is from top to bottom, transparency is 20%, blending mode is "lightness". When finished, the artboard and the appearance panel should look something like this:
In this way, you can see through a background fill layer, and a dark and light gradient fill layer, we have successfully made a color light and shade gradient effect. This is one of the applications of multiple fills. In addition, the blending mode selection "lightness" means that the hue and saturation of the layer object is removed, and the brightness (luminance) of the upper object is taken as the final color output. Therefore, you can make a gradient of a color that is only on the lightness, without affecting the hue and saturation.
The stroke of the rectangle is set to one pixel, and the color is #7F7F7F stroke. This way, the basic strokes of the button are made. But there is one problem: when you turn on the pixel preview, you find that the stroke is virtual:
This occurs because the stroke is not aligned to the pixel grid, but is clipped to the middle of two pixels. Also, after the shape is stroked, the size exceeds the predetermined 72x32 size. The way to solve this problem is to set the stroke alignment to align the stroke inside. When set, the stroke is clear. Now the graphics and appearance panel should look like this:
Next, create a new stroke, with the color set to white, still inside aligned, with a transparency of 50%. And in the Appearance panel, place the stroke below the gray stroke, as shown in the figure:
By this step, the button does not look any different. But then, it's time to witness the miracle. Add a "transform" effect to the semitransparent white stroke, and the move parameter is set to 1 pixels:
After this step, the button is painted well, there is a high light, and the simulation of the concave effect:
The appearance panel at this point should look like the following illustration:
The button is ready, and then, let's talk about what's good about it.
First, the button itself uses only one layer, and it's just a vector object that keeps the file neat. No, you can look at the layers panel with only two layers of buttons and backgrounds.
So far, the size of the button is exactly the size of the predetermined 72x32 pixel, and is pixel-accurate:
Then, if I'm not satisfied with the size of the button, I can adjust it at will, without worrying about the gradient and fillet size or whatever. As shown in the figure, although the button size is larger, but the edge is still 1 pixel weight, and the fillet is still 5 pixel size, the gradient has not changed:
If you are not satisfied with the size of the fillet, you can also adjust at will, do not worry about the other changes will follow:
Put the button in a different color? Simple, the bottom of the fill layer to change a color on it, the other do not have to change, the gradient or what is still in:
When you export, you can easily, strictly according to the button size to build slices, cut out of the size of a lot of just 72x32 pixel size.
Design for a Retina screen like the IPhone 4? It's OK to export the set by 200% percentage.
There are several buttons? Well, you can use a way to get all the buttons done like this. Even better, when you change the style of a button, you can change the style of the other buttons. This method is left to study after the class inquiry question.
Okay, the above information is small make up to you illustrator of this software users brought to the detailed production of the UI design series of tutorials to share all the content, you see the users here, small series believe that we are now very clear the production method of it, Then everyone will go to follow the small part of the tutorial to share with you to try it.
