To the users of the illustrator software to detailed analysis to share the design of the Web page tutorial.
First, set all units to pixels
By default, Illustrator uses metric units of dimensions and points. These are all the settings that are designed in most cases, but for web design, you need to set them to pixels. So, before you start working, make sure your unit is set correctly.
How to set the unit: 1, open Edit menu 2, select Unit 3 from the Preferences submenu, set all units to "pixel"
Ii. New Document profile type Select Web
When you start your new design, it's easy to browse through new documents and some important details, and if you tell AI you want to create Web objects, then you won't select CMYK colors and blurred edge objects. Be sure to select the Web profile settings in the new document window and everything will be all right.
Third, turn on the aligned pixel network
This feature is a life saver if you ever have a problem with Photoshop blurred edge shapes. He can adjust the vertical and horizontal objects so that they exactly match the pixel grid while maintaining the jagged and oblique segments. This presents the perfect pixel you want in the web design.
How to set: 1, click the window-Transform 2, tick-aligned pixel grid If you do not have the following options click on the upper right corner of the small triangle, show hidden options
The pixel preview feature will make the AI look like PS, when zooming in over 100% of your work will appear like pixel rather than perfect vector mode.
How to set: 1, click View 2, check pixel preview
Let's say you have two cameras pointing at your design. A camera at the normal level, to 100% of the proportion to show your work. Another camera, when you are working, is aligned with a specific icon in a 400% zoom, similar to a surgeon. You use the enlarged camera to observe the details, the pixel changes in the icons, and the actual size to see the whole. This feature is especially handy when you want to draw small details.
How to set: 1, click the Window-New window 2, click the window-floating in the window 3, you can freely adjust the Zoom window size, to more efficiently cooperate with your work
Use the symbol library (symbols tool) to quickly create buttons, icons
How many times have you created the same (close) button or widget in PS? If you are a web designer, you may be doing it every single day. AI can help you save time and avoid this repetitive work. In the symbol, you can add and use the symbol button by simply dragging and dragging. Instead of creating it all over again. You can also modify the same symbol synchronously. But there is another powerful feature of the symbol, and that is the example.
Basically, when you change the original symbol, these changes are immediately reflected in all the symbols. Do you want to look for a different form on all pages? Just change the symbol on the line. Tip: If you don't want to change a particular symbol at the same time, just select it, right-click-Disconnect the symbolic link. When you change the original symbol, it will not be updated together.
Use existing symbols: 1, click the window-sign 2, drag and drop the symbol from the symbol window to create a new symbol: 1, click the window-symbol 2, create a new symbol 3, drag the new symbol to the Symbol window 4, pop-up dialog box Click confirm Edit Symbol: 1, from the Window menu to open the symbol panel 2, Double-click into edit mode 3, and when you are done, double-click the symbol to launch edit mode anywhere else
This is an advanced feature of the symbol that allows you to scale a specific part of the symbol.
Left: a button that stretches without an example of a 9-slice zoom setting. Right: Create a 9-slice scaling that tells the AI which parts of the object are protected and which parts can be scaled. A real example is a fillet button, and if you want to make it longer, you can't simply stretch it because it distorts the entire object. Instead, you must manually move the shape points. Then the advantage of the 9-slice is revealed.
Round corners are everywhere.
You can create rounded rectangles in PS, but in AI you can create any shape of rounded corners. This is a non-destructive effect, which means you can turn it on and off without affecting the underlying original image.
To create a fillet effect:
1, create a rectangle or sharp corner of any other object 2, in the Effect menu, select the fillet, enter fillet radius and preview 3, click to determine the effect of the application to change a rounded corner: 1, select a rounded object 2, from the Window menu Open Appearance panel 3, Locate and double-click the fillet effect to change its settings or click the Eye icon to turn it on or off
Nine, quickly create a bitmap pattern fill
Subtle background patterns are used in web design, but many designers don't think they can be easily applied in AI. But in fact the solution is simple.
1, drag the image into your work 2, click the top function bar embedded (very important) 3, drag into the swatches 4, apply samples to any object to fill the pattern
The use of text automatically suspended around the image
Text editing in PS is a real headache, and if you want to wrap text around a picture, you have to create two or three different text boxes to mimic the effect. Fortunately, AI can do it directly.
Methods: 1, the AI in the implementation of text wrap must be text box in the text can be, that is, you must be dragged out of the text box with the text to enter text to wrap 2, enter or paste text into the dragged out of the text box 3, place the picture, or draw a figure 4, Place a picture or graphic above the text box where you want to put it, idea, must be in the text box above 5, select the picture or graphics, execute-"Object Menu"-"text wrap"-Create a command if you want to adjust the spacing between pictures and text, or to perform-"object"-"text wrap"-"options", In the pop-up panel there is a "displacement" input box, which is the spacing between the picture and the text
Xi. use of text to automatically hover around the image
The appearance panel in AI is similar to the layer style in PS, and you can add effects such as projections, strokes, and more.
Well, the above information is a small series to give you illustrator of this software users to bring the detailed design of the Web page to analyze the content of the share, you see the users here, small knitting believe that we now see here is very clear the production method of it, Then you go to follow the small series of the tutorial to make a try.
