Shulou(Shulou.com)06/01 Report--

Front-end web design + static implementation case

Take a case (design + static implementation) completed for a company in two and a half days. Http://www.cnblogs.com/MuYunyun/p/5693615.html for static shadows using CSS3, I figured out what to use at the beginning of the design, the size of each box (accurate to 1 pixel), and color matching, and so on.

There are a lot of materials I will not demonstrate, designed a lot of web page templates, if you want to use PS for web page production, welcome to communicate.

Many people do the front-end only to master the most basic cut (not even cut), even small changes have to trouble the designer, which is a great waste of time.

Back to the top (go to top)

I did it during practice.

They are all my friends (Omuro)

Back to the top (go to top)

About PS Learning

Now I'm going to share how to learn PS.

1. The first thing I want to say is to be interested in it (this is nonsense). Anyone who can make fun of others is not interested.

two。 Don't believe such nonsense as a week of crash! I have gone through all the PS tutorials in Mutu.com, and I have practiced every material! You don't just look at it over and over again and then find your own material to practice. Sometimes it takes more than half a day to get a picture. You can't learn the essence of PS in less than 2 months, not to mention the use of innovation (personal opinion). If you just learn to cut pictures, forget it. I just want to say that just learning to cut pictures will make you think PS is so boring.

3. I feel that PS is simple and not simple, sometimes the difference is so little chromatic aberration, or lightness.

4. Look more at the pictures of the Great God P, looking for inspiration and material. Although we are the front end, we have to design and understand the background, so that we can be more efficient.

Back to the top (go to top)

PS notes from a long time ago

Picture name shows proportional color mode color depth

Alt+t: select a shape to deform it

1. 2-inch photo on 5-inch paper 2. Big head paste

Cutting tools: 1. Cut the oblique road sign 2. Horizontal ① (rotation trimming) for non-horizontal scenery

② uses a ruler

Mobile tool: 1. Restore two or more pictures

△: Ctrl: move selection Alt: move selection after copy

Selection tool: 1. The mirror watch inserts the face 2. The third eye of Erlang God

△: shift choose a circle or a square

3. Go to LOGO to fix the photos, go to the guardrail and so on.

① selection move (advantage: fast)

② selection alt+c alt+v or selection alt+j point layer (advantage: does not affect the original layer)

Tolerance: the smaller, the stricter, the bigger and looser.

The stroke can be used as a halo on the top of the head.

Filling + feathering allows ① to make weapons, lighthouses, etc., shine brightly.

Making projection with ②

Image distortion: ① puts the poster on the side of the road (perspective)

② reflects the face into the gourd (cucurbit) (deformation)

③ Aladdin Lamp (deformed)

④ reflected the clock into the orange (twisted)

⑤ reflects the picture onto the teacup (deformed)

Shift+ctrl+alt+t: copy and repeat the last move ① to make a fan

Put a square in a ② square

Enlarged selection: continuous (equivalent to magic wand continuous)

Select similar: discontinuous (equivalent to magic wand discontinuous)

The higher the opacity, the more solid it is.

The lower the opacity, the more virtual it is.

Ctrl+n: copy the original selection to the newly defined drawing (see Sunlight to Moon)

Layer save: you can use pattern Save

Gradient tool: ① Rainbow Bridge Rainbow (Linear gradient Radial gradient)

② Ray rendering (Radial gradient)

③ production CD (right-angle gradient)

④ Crystal Ball (Radial gradient + Linear gradient)

⑤ Rainbow Ring (ctrl+up then alt+up) (linear gradient)

Histogram: ① underexposed ② overexposed ③ undercontrast (tone homogenization) ④ overcontrast

(choose specific methods according to specific circumstances)

Color levels: black and white fields are pressed inward to increase contrast, while output levels are pressed inward to reduce contrast.

Gray field ("white balance" in the camera)

Color ① black-and-white photos

② cloud discoloration

Curve: the higher the slope, the higher the contrast, the lower the slope, the lower the contrast.

① for cosmetology of all parts (hair, eyes, skin, mouth, clothes)

② changes the color of the cloud

Ctrl+j = ctrl+c and then ctrl+v

Matching color; ① face like "peach" color

Advanced course

RGB (color-light mixing) is getting brighter and brighter.

CMYK (pigment mixing) is getting darker and darker.

C (cyan) M (grade) Y (yellow) K (black) color mode

Red, yellow, green, blue, purple

Red + green and yellow

Red + blue purple

Blue + green

Red + green + blue and white

Yellow + cyan + purple and black

Move tool: (ability to align distribution)

① quickly make a piece of stationery (ctrl minus a layer)

Crop tool: shift+o: transform Guid

Facial whitening (stain repair brush tool, repair brush tool)

Repair Brush tool: alt sampling

Red-eye tool (blackens the red eye)

Pencil tool: can make pixel words (1 pixel shift)

The Clone Stamp tool is similar to the repair brush.

Historical record Art Brush tool: mosaic function

Pen tool: ctrl selection, alt adjustment

(adjust both sides of the anchor point) (adjust one side of the anchor point)

Path selection tool: move selection path

Direct selection tool: alt copy and move

Path instance (making dial)

Shift+ctrl+alt+e: merge visible layers into a new layer

Mask: shift: disable mask (face reshaping)

Alt: viewing mask

PS advanced teaching

(fan Bingbing material): 1. The left cheek is too large for 2. The lips are not bright enough. Dark circles under the eyes 4. Stiff lines

Step 1: liquefaction (solve the left cheek)

Step 2: blur tool (deal with dark circles under eyes, lower corners of mouth, stiff lines)

Step 3: deepen tool (deal with eyebrows, show double eyelids)

Step 4: dodge tool (smear the highlights on the bridge of the nose to enhance the three-dimensional feeling)

Step 5: curve (contrast enhancement) brush (lipstick) smear tool

Ps face profile: women can be less, but boys' faces must have edges and corners.

Ordinary photos become cartoon effects:

1. Liquefaction: frozen zone mask (protected area from deformation), expansion tool (enlarge eyes)

two。 Add a solid color adjustment layer (white, 50% opaque) (when the picture is dark)

3. Create a new layer, Pen tool draw eyebrows, path fill

4. The pen tool marks the outline of the side face.

5. Stroke path Brush tool (hard circle 3px)

6. Special ambiguity

7. Blur tool (clear special blurred block marks)

8. Brush tool (smear the original eyebrows) to increase the contrast of the picture

Works: mother, vampire

High contrast retains abrasive skin:

1. Channel-create a blue copy (blue has the most obvious contrast)

two。 Filter-High contrast retention

3. Image-calculation (2, 3 times)

4.ctrl: select highlight invert selection

5. Layers panel-create a new curve layer (end of processing here, details later)

6.shift+ctrl+alt+e-copy the layer twice-

A copy is blurred on the surface (dealing with sweat on the nose)

Another copy for high contrast retention (extract skin texture, restore some of the lines blurred in the previous step)-linear light

Content recognition ratio: protect characters or some parts of your own design from being affected

People and wine with the same ①

A tall beauty in ②

Neutral gray dermabrasion: (this kind of dermabrasion can keep the skin realistic) (1 to 5 hours)

1. Create a new layer

two。 Edit-fill 50% neutral gray (mode is soft light)

3. Observation group {

Create a new solid color adjustment layer with black color (mode is color)

Copy the black adjustment layer (mode is overlay)

}

B. Select a soft angle brush with a diameter of less than 7 pixels. The opacity of the brush is set to 5%, the flow rate is 50%, and the canvas is enlarged to 500%.

C, set the foreground color to white, and gently rub the darker part of the gray layer with a single pixel to make it transition evenly with the periphery. Set the foreground color to black and gently rub the brighter parts of the gray layer with a single pixel to make it transition evenly with the periphery.

D, increase the brush, cooperate with the black and white foreground color to gently rub the light-dark transition area, so that the transition between light and dark is smooth.

E, shrink the brush, match the black and white foreground color to wipe the eyes black and white, and use the white brush to brighten the eyes

Write on the character:

One: open the material to be processed, and then Ctrl + L open the color level to adjust the shade of the character.

Second: then menu-filter-sketch-note paper

Third, after confirming, Ctrl+Alt+2 will bring out the highlight of the character, press Ctrl+Shift+i to reverse the selection, and then press Ctrl+J to create a layer.

Four: big print and small print

Five: gradual change

Then create a new blank layer on top of layer 2 white × ×, press Ctrl and click layer 1 to load the selection, and then pull a gradient to the new layer, using the color we just gave to the characters. When it's done-- filter-- blur-Gaussian blur.

Write Wheel eyes: B6414F overlay

Production company seal: combined with circular path typing (refer to Kingee Island Cake Seal)

Learn ctrl+Enter: convert paths to selections

(waterworks) think about the technology used in the simulation.

Making personal Seal: seal cutting Art

Common shortcut keys

Ctrl+shift+N: create a new layer

Ctrl+G: grouping

Ctrl+alt+2: select highlight

Alt+ mask: add a black mask

Crtl+h: hide / show shortcut keys

Back to the top (go to top)

Summary

If I can't find some material for practice, I can provide some material for practice. The code is tired of P pictures, which is actually a good way to relax, and P maps can make the heart very quiet. To you and me on the front road.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.