Front-end technology-PS cutting

PS cutting of page production part

From a technical level, the first step of web design is for the artist to make a web page rendering, and the second step is to cut the web page on the front end of the web page. Commonly used tools for cutting web pages include Fireworks and PS. PS is used here to cut web pages.

We get the output we want (such as .png, .jpg files) through the design draft, and provide image materials (HTML: img, CSS: background) for the web page.

1. Using PS tools

1.1 PS preference settings

Edit-"Preferences-"Units and Rulers, select pixels.

1.2 Panel

Open under the "Window" menu:

Tools (opened by default)

Options (enabled by default)

Layer (enabled by default)

Information (enabled manually)

History (enabled manually)

Close other unnecessary functions, place the above functions in the appropriate area, Window-"Workspace-"Save workspace, the set workspace is as follows:

1.3 Common tools for cutting pictures

▪Move tool

will automatically select the check box and change the group to layer

▪Rectangular Marquee Tool

▪Magic Wand Tool

▪Crop Tool + Slice Tool

▪Scale Tool

-Zoom In: Ctrl+Plus Sign

-Zoom out: Ctrl+Minus Sign

▪Color Picker

1.4 Auxiliary View

Open under the "View" menu:

▪Alignment (on by default) (there is an adsorption force when encountering guide lines and boundaries)

▪Ruler Ctrl+R

▪Display->Guide line Ctrl+ ; (Additional content needs to be displayed)

2. Obtain information

Open the design draft and obtain information:

▪Size information: Measurement

▪Color Information: Color Picking

The most important thing to obtain information is to stretch the canvas as large as possible to minimize the error.

Measurement

2.1 All numbers must be measured

Tools:

Rectangular Marquee Tool+Information Panel

Measurement content:

Width, height

Padding, margin

Border

Positioning

Text Size

Line height

Background image position

2.2 Measure the selection (Rectangular Marquee Tool)

Add to the selection: Press Hold Shift

to subtract from the selection: hold Alt

to intersect with the selection: hold Shift+Alt

##2.3 Text-related measurements

2.3.1 Separate text layer

Select the layer and click Tool T. The top option area displays as follows:

You can directly get the size of the text;

Click

to get some other confidence, such as line height:

##2.3.2 Non Separate text layer (select the larger font as the measurement)

Use the rectangular marquee tool, select the text, and the height is the font size;

Measurement of line height

Use For the rectangular marquee tool, the height from the bottom of the previous line of text to the bottom of this line of text is the line height, as shown below:

Color Picking

2.4 All All colors must be picked

Tools:

Color picker + eyedropper tool

Color picking content:

Border color

Background color

Text color

Enlarge the canvas as much as possible to obtain solid points and avoid jagged points.

2.5 The color of a separate text layer can be obtained directly, and other colors can be obtained using the "Color Picker + Eyedropper Tool"

Special attention is due to the overlay effect of the layers, the displayed color does not match the actual color. This is to use the color picker to get the color

2.6 Color picking tool Cleverly use

2.6.1 to determine whether the background is a solid color (color picker + eyedropper tool)

Keep clicking on different areas to see if the color changes

2.6.2 Determine whether it is a linear gradient (magic wand)

First select the layer, then select the magic wand tool, click to select the top line, the display is as follows:

Continue clicking and select one row downward at a time

Confirm it is a linear gradient.

3. Slicing

3.1 Content that needs to be sliced

Modifying (generally used in the background attribute):

icon , logo

Buttons, text, etc. with special effects

Non-solid color background

Content-based (generally used in img tags)

banner, advertising pictures

The pictures in the article...

For example, in the picture below, the red box needs to be cut, and the black box is obtained from the background No need to cut

3.2 The saving type of the cut pictures

The content-related ones are generally saved as .JPG,

Modified ones are generally saved as .PNG8, .png24

Both PNG8 and PNG24 support full transparency; PNG24 supports translucency (higher image quality), but ie6 does not support PNG24 translucency, which requires Be compatible.

3.3. Cut the picture

Hide the text and keep only the background

3.3.1 Text independent layer (hidden text layer)

Found Text layer

Remove the glasses icon

##3.3.2 Merging text and pictures (tiled background covering text)

The background image can be stretched

Use the rectangular marquee tool to select an area

Free transformation Ctrl+T

The background image cannot be stretched ( The background has texture effects, etc.)

Select an area with the rectangular marquee tool

Use the move tool + Alt

3.3.3 Get the slice

Cut image.PNG24

•Move tool to select the required layer (hold down Ctrl to select multiple)

•Right-click to merge layers (Ctrl+E)

•Email the drawing layer to a new file or drag it directly to an existing file (New: Ctrl+N)

Cut the image into .PNG8 (cut with background)

•Merge visible layers (Shift+Ctrl+E)

•Rectangular Marquee Tool selects content
•Magic Wand Tool removes excess parts (Subtract from selection: hold down Alt)

3.3.4 Tileable background cutouts

Select an area with the rectangular marquee tool

Copy and paste into a new file

Tile The content fills the width (x-axis) or height (y-axis) of the file: For example, if a new file is used to tile the x-axis, the width of the cut image must be consistent with the new file

3.4. Slicing tool (applicable to active pages that can be cut across the board)

▪

Pull the guide line

▪Select the slicing tool

▪Click the "Slice based on guides" button in the options bar

▪Select the slice selection tool

Double-click the slice to change the file name and other information

▪Save

Select all slices and set the storage format uniformly

4. Save

Save the required content (the background is usually transparent)

▪Copy, create, paste (Ctrl+C, Ctrl+N, Ctrl+V, or drag content to a new file)

Independent layer: directly Drag content to a new file

Merge together: Rectangular Marquee Tool selection, Magic Wand extraction, Ctrl+C, Ctrl+N, Ctrl+V

▪Save in the format used by the Web(Alt+Shift+Ctrl+S)

4.1 Save type one (JPG)

When When the picture is rich in color and does not require transparency

It is recommended to save it in JPG format and choose the appropriate quality

Note:Quality: 60-80; cannot be 100 ,80 is already good

4.2 Save type 2 (PNG8)

When the picture is not very colorful, regardless of whether there is transparency requirement

Save as PNG8 format

Note: When saving, you need to reset the no dithering and no matting

##4.3 Save type three (PNG24)

When the image has translucency requirements

Save it in PNG24 format

Default setting.

4.4 Save type four (PSD)

To ensure the quality of the picture

Reserve a copy of the PSD file, and any future modifications will be made on the PSD file

Five modifications and maintenance

As the project progresses, we may want to change the location of the icon, add new icons, delete old icons, and modify the size of the canvas, so we need to make modifications and maintain.

5.1 Change the canvas size

5.1.1 Add the canvas

Image-》Canvas size, select the anchor point according to the situation

5.1.2 Reduce the canvas

The first method: Select the area with the rectangular selection tool, Image->Crop to crop the canvas;

The second method: Use the crop tool directly to crop.

5.2 Move the icon

▪

If the icon is an independent layer

, just drag it with the move tool

▪

If the icon is not independent

Use the selection tool to select the icon area

Use the move tool to drag the icon

Note:If the icon is not independent, you can use the selection tool to select the icon area, press Ctrl+X to cut it, and then paste it to turn the icon into an independent layer.

5.3 Add icons

After organizing the icons, place them in the corresponding location.

Note:

To modify PNG8 pictures, you need to change the color mode to RGB color. How to do it: Image-》Mode-》RGB Color.

6 Usage

Image merging solution: Sprite image

CSS Sprites are called CSS sprites by many people in China. They are a web image application processing method. It allows you to include all the scattered pictures involved in a page into one big picture, so that when the page is accessed, the loaded pictures will not be displayed one by one as before. . Position the background according to the position of the specific icon on the big picture.

Advantages of Sprite puzzle: Reduce network requests and improve web page loading speed.

6.1 Size and quality (balance and trade-off)

Compression tool:

▪Lossy TinyPng: https:/ /tinypng.com/

▪Lossless Minimage: https://github.com/NetEaseWD/minimage

6.2 Merge

6.2.1 Arrange

Appropriate gaps must be reserved between images (to facilitate image modification and Css code writing)

Icon arrangement: horizontal and vertical

6.2.2 Classification

▪Merge pictures belonging to the same module (functionalization)

▪Merge pictures of similar size (save space)

▪Merge pictures with similar colors (reduce the number of colors and the file size will be relatively small)

▪Combined the above methods to merge

6.2.3 Merger recommendations

▪Only picture merging used on this page

▪Stateful picture merging (mouse over state change, etc.)

Seven browser compatibility solutions

7.1 IE6 does not support PNG24 translucency

Solution: Save two copies of sprite.png(24) and sprite_ie. png(8)

7.2 Css3

▪Advanced browsers use css3

▪Low-level browsers use cut images

7.3 Graceful downgrade

▪Supported display effects

▪No support, no effect

##More For articles related to front-end technology-PS cutting, please pay attention to the PHP Chinese website!