UI design basics and JavaScript

"PS Foundation Case"

Figure revision. Adjust the size of the canvas, build 3 layers, put them in the canvas, fix the middle characters with the patch tool, cover the characters with the rubber stamp, then pull out the characters, put on the new blue sky, adjust the transparency with the eraser, erase the place of the water day handover, then adjust the color scale, the third layer, edit, content recognition ratio, Lengthen the leg and then use a filter to liquefy and modify the face.

Forest Light. Selection, color range, highlight, new layer, copy, radial blur, if the light sense is not strong continue to create new copy, satisfied with the layer to adjust the color scale, you can adjust the position of the light, through the eraser to wipe off unnatural light.

Expression Pack. The integrated use of pen and ellipse tools, ctrl+r open the ruler and draw with the ruler. Gif.

Various masks, Michael. Make a figure, then open the picture, create a clipping mask, then adjust it with a gradient, and then add the text. A total of 4 masks, directly create masks, through the black and white gray effect screen color contrast, create clipping masks, such as Michael's example, in the channel to create a mask, to buckle the contrast of the more obvious hair of the people, in the lower left corner there is a button to quickly mask the way to edit, You can do some edge processing on the selected area.

Perspective theory, transformers. Create a three-dimensional impression by distorting the deformation, duplicating multiple layers, erasing the lower part, and then opening another layer, drawing with a filter sketch, creating a sketch effect, erasing the part that blocks the hand, then opening another layer, overlaying it with the color of the layer effect, overlaying it in gray, then dragging the position, forming a shadow, erasing the excess.

The fabrication of the beam. Copy a black background, then create a new layer, turn on the gradient to select the second, choose white at both ends, press and hold SHITF crosswise to pull to the head, then ctrl+t, pull to half of the drawing, then copy the layer, select horizontal inversion, adjust position to form the beam, then merge layers, ctrl+t up and down, perspective, The top and left two corners pull into the middle.

Channel buckle diagram, channel, select a contrasting color, and then copy the layer to edit, the image adjusts the inverse, adjust the color scale to increase the contrast, and then use the foreground color as a white brush, paint the black portion, and then load the channel as a selection, and then back to the layer to create a mask directly.

Hair into the woods. The first button, the hair can be briefly buckle, and then delete the redundant parts, select the channel, choose a clear contrast color, copy the layer, adjust the color scale, CTRL left click on the layer's small pattern to create a selection, back to the original layer, create a mask, and then open another picture, adjust the size, put the position after the establishment of a clipping Adjust the eraser opacity to erase the superfluous parts.

Tiger Man. Regardless of the hair buckle face, select, adjust the edge, adjust the smart radius, select, save the selection, then open the tiger, buckle up the part, select, adjust the edge, repeat the operation, but not the selection, but the new layer, the tiger dragged to the face, and then ctrl+t to adjust, let it align, select the person, Point layer Channel path to the right of the button, copy the layer, the following column select New, and then in the newly-created characters to Blur, Gaussian Blur, and then save, back to the tiger, copy two, point channel, Ctrl left point just save the diagram, back to a tiger, create a mask, with the foreground color black brush wipe eyes and mouth , then select another tiger, create a mask, ctrl+i to black, and then wipe the edge of the beard with a brush with a white foreground color, then copy a character to the top and select soft light.

Action. window, action, create new action.

Snow. Open the action first. Open the image, build the layer, fill in black, filter, pixel, dot, size of the cell determines the size of the snowflake, image, adjustment, threshold, the size of the threshold determines the speed of the snowflake, filter, Blur, motion blur, determine the spacing and direction. Finally, select filter color.

Normal diagram, 72 resolution, RGB. If you print, cmyk,300 resolution.

"Ai Apps"

Paint automatically generates small groupings on the layer, and you can set colors and strokes directly.
To establish a clipping mask is different from PS, to put the shape of the picture on top, the original image is placed below, and then directly point to a picture, SHITF point another, right click, the creation of clipping mask, is in the image of the direct point, not point to the right layer of the small box.

Font effects. Typing, object, extension, can be broken down into a lot of small points, you can drag to change the font. Then copy one, draw a circle, block the part of the font, then right-click the circle, place it on the bottom, and copy a few circles. Then right-click, ungroup, select a word shift circle, then open the Pathfinder from the window, select the intersection, and then drag onto the original font to change the color and transparency to achieve the desired effect.

Rounded straight lines. window, stroke, end of round head.

Small pattern of the earth. New, 800*600 Canvas, open the picture, create a new 3 layers, draw a rectangle, 800*600, cover the background, drag the picture on the layer 3 to build an ellipse 128*128, fill no, stroke black, 6pt, and then build 106*106, two circles selected, horizontal center alignment, and then select the small circle inside, Use the scissors tool to split it into several pieces, and then choose not to delete, then the window stroke round the end of the head, and then build the ellipse 180*60, together, then select, rotate, and then draw a straight line, cut with scissors, and then draw 3 circle, two light yellow one orange, then a yellow and orange through the path finder minus the top layer , the moon teeth and the circle are superimposed, and then placed on the ground floor. Finally, a small pattern is drawn with a rectangular circular tool. Another diagram, below the blue trapezoid, you can draw a rectangle, and then pull into a trapezoid, and finally use the direct selection tool above the conversion of the rear arc, slowly adjust. The others are the same as the first one.

"Graphic Design"

Typesetting basics. Four elements of typesetting design, background, body, text, decoration.
Basic type. Skeleton type (web design), center type, full version, upper and lower split type, left and right split type, middle axis type (e-commerce typesetting), curved type, inclined type, symmetrical type, center of gravity type, triangular type, collocated type, free type, Four Corners type

The early practice must pay attention to leave white question!!
According to the text arrangement law, the user reading habit from top to bottom, from left to right.
Clear topic title, by color, thickness, font size, color block.
Note The line spacing and spacing.
The use of decorative frame, so that the copy is decorative.
Too little copy of the case through the foreign language to gather.
The layout should not be too consistent, so focus on the eye.
Copy and background should be clear.

All prints are left with 3mm of bleeding, with a resolution of 300.
Enterprise VI.
VI design generally includes the basic part and application of two parts of the content.
Logo Representational, representational, metonymy, marking, cartoon, geometrical structure, gradual change of character.
Standard size of business cards. 90*54,90*50,90*45. But with the bleeding up and down each 2, so the production size must be set to 94*58,94*54,94*48. The color mode is CMYK, and the image file is above 300dpi.

"Project Flow"

Set up the project team, the project manager to lead the formation of teams, the project manager to do the plan, open the project start meeting, interactive designers to do prototype, UI designers rich, H5 development.

Web Design classification. Functional Web Design (b/S software client), image-based web design (brand image station), information-based web design (portal station).
Web design goes through the following stages. According to the needs of consumers, market conditions, the situation of enterprises and other comprehensive analysis, so as to establish a marketing model. With the business objectives as the center of the function planning, to create a column structure diagram. To meet the user experience design goals. To the design of the Web page beautifully designed as the goal, adjust, use reasonable colors, fonts, pictures, styles to beautify the page, according to user feedback, page design adjustments to achieve optimal results.

A few points to note for customer needs.
The purpose of building a website. Column planning and each column of the form and function requirements. Website subject tone, customer gender preferences, contact information, old version URL, preferred URL. According to the industry and customer requirements, those to focus on performance. Whether to build in phases, consider the compatibility of the latter. Whether the customer has the desire to build websites strongly. The site type.

The company's main body color collocation best not more than 3 kinds. can be properly embellished.
Enrich the content first, then sub-block, then set the tone, and then deal with the details.
Overall consideration, fill in the fill, occupy position, then set the tone, sub-module design, finally adjust the partial details of dissatisfaction.
Summary, web design should be concise and clear, from the user experience.

Web page, must be 72 resolution.
The current universal page size is 1000px (now it's best to do 1200px) and the canvas size can be customized (1400,1440, max. 1920).
The top standard head, the bottom standard tail is the hard requirements. Under the head is usually the advertisement, then below is the content area.
Content area requirements are unclear, row about us. Products. News updates.
General three ad map, the need is not clear, it can be enterprise introduction, product case, corporate culture or social responsibility.

Content area. The banner can be covered with canvas, but the content cannot exceed the page size. Two columns, the space between the section and the section at least 20px, can be divided equally can not equal. The three columns are best divided into four columns.

The text of the Web page is always used in the 12th word (now basically all with Microsoft ya black, choose None), Microsoft Jas Black and blackbody, mainly used as the title.
It is recommended to use the mix and match of the 12+14 number.
English font from the beginning of the 10px can be used clearly, the choice of space is very large, 10px,11px,12,13 are common font size, fonts use the system comes with fonts, such as Arial.
Price text, cc0000, important text cc6600, general text 333333, secondary text 666666.

Note: The page header has the right side of the click Effect to leave space, click the effect area do not go out of scope.

[Three ways to use JS]

1, in the HTML tag, directly embedded JS (not advocating use):
<button onclick= "alert (' Little hooker hit! You're a bit of a man! > have the ability to point me! </button>
>>> does not conform to the requirements of content and behavior separation!!!

2. In the HTML page, use the <script></script> package JS code:
<script type= "Text/javascript" >
JS Code
</script>
The >>> script tag can be placed anywhere on the page.

3, the introduction of external JS file:
<script language= "JavaScript" src= "Js/01.js" ></script>

[Precautions]
①<script></script> can be embedded anywhere in the page. However, the different positions will lead to different execution order of JS code;
For example: <script></script> put in front of <body>, then the JS code will be executed before the page is loaded;

② the introduction of external JS code,<script></script> must be paired with the appearance of the label. Moreover, there can be no more JS code in the tag.

<script type= "Text/javascript" >

Multiple lines of comments in JS. ctrl+shift+/

A single-line comment in JS. ctrl+/
document.write ("

}
2. Precautions:
①else{} statement block. can be omitted according to the situation.
{} After ②if and else can be omitted, but after the {} is omitted, if and else after
Can only be followed by one statement (therefore, it is not recommended to omit {});

3. If the judgment condition in the (), support the situation: Key!!!!
①boolean:true is True, False is false.
②string: The empty string is false, and all non-empty strings are true;
③number:0 is false, all non-0 figures are true;
④null/undefined/nan: All is false.
⑤object: All is true.

"Multiple if, ladder if structure"
1, the structure of the wording:
if (condition i) {
When conditions are established, the actions performed
}else if (condition two) {
Condition one is not established, and condition two is established, the operation performed
}else{
When all of the above conditions are not true, the action performed
}

2, multiple if structure, each judgment condition is mutually exclusive, can choose only one of them
A road execution, after encountering the correct option and after execution, directly out of the structure,
No longer judge subsequent branches;

"Nested IF Structure"
1, the structure of the wording:
if (condition i) {
Condition One established
if (condition two) {
Condition one established and condition II established
}else{
Condition one is established and condition two is not established
}
}else{
Condition one is not tenable
}

2. In nested if structures, if {} is omitted, the else structure will always belong to
An if structure closest to him.

3, nested structure can be nested multiple layers, but generally not recommended more than 3 layers.
Nested if is generally not recommended for use with multiple if structures.

UI design basics and JavaScript