PS transduction of page making part

PS transduction of page making part

<--this tab, through page production, page architecture, JavaScript program design, DOM programming art, product front-end architecture five parts to share summary notes, summary notes will be shared--

Reproduced in http://www.cnblogs.com/jingwhale/p/4396235.html

NetEase Cloud Class Course notes

Web design on the technical level, the first step is to make a Web page, the second step is the Web page to cut the front page. Web page cutting tools are commonly used fireworks, PS, where the use of PS for Web page cut diagram.

We use the design drafts to get the products we want (such as. png,.jpg files), to give the webpage a picture material (html:img,css:background).

I. Using the PS Tool 1.1 PS Preferences settings

Edit-"preferences-" unit and ruler, select to pixels.

1.2 Panel

Under the Window menu, open:

Tool (default turned on)

Option (default turned on)

Layer (default turned on)

Information (open manually)

History (Open manually)

Turn off other unwanted features, place the above function in the appropriate area, window-"workspace-" to save the workspace, set the following workspace:

1.3 Common tools for cutting graphs

? Mobile Tools

Automatically select the check box to change the group to a layer

? Rectangle Marquee Tool

? Magic Wand Tool

? crop tool + Slicing tool

? Zoom Tool

-Zoom In: Ctrl + Plus

-Zoom Out: Ctrl + MINUS sign

? Color Picker

1.4 Auxiliary views

Under the View menu, open:

Align (default on) (with reference line, boundary has a adsorption force)

? ruler Ctrl+r

? display and guide Ctrl +; (Additional content required)

Two. Access to information

Open the design draft for information:

? size information: Measurement

? Color information: Take color

The most important thing to get information is to make the bra as large as possible and minimize the error.

Measurement 2.1 All numbers are to be measured

Tools:

Rectangle Marquee Tool + Information Panel

Measurement content:

width, height

Inner margin, margin

Border

Positioning

Text Size

Row height

Background picture Position

2.2 Measuring selection (rectangular marquee tool)

Add to selection: Hold down Shift

Subtract from selection: Hold down Alt

Cross with selection: Hold Shift+alt

2.3 Text-related measurements 2.3.1 Individual text layers

Select the layer, click on the tool T, and the top selection area appears as follows:

Can directly get the size of the text;

Click, you can get some other confidence, such as line height:

2.3.2 non-separate text layers (select larger words as measurements)

Using the Rectangle Marquee tool, the text is selected, and the height is the font size;

Measurement of line height

With the Rectangle Marquee tool, the height from the bottom of the previous line of text to the bottom of the bank text is row height, such as:

Color 2.4 All colors must be color-taken

Tools:

Color Picker + eyedropper tool

Color-fetching content:

Border color

Background color

Text color

Try to zoom in on the canvas to get real points and avoid jagged points.

2.5 Individual text layers can get the color directly, other colors are obtained with the Color Picker + eyedropper tool

It is especially important to note that the color of the display does not match the actual color due to the overlay effect of the layer, which is to get the color with the eyedropper

2.6 Using 2.6.1 to determine if the background is solid (color Picker + eyedropper tool)

Different areas of the constant click to see whether the color changes

2.6.2 determine if a linear gradient (magic wand)

Select the layer first, then choose the Magic Wand tool, click to select the top row, and display the following:

Continue tapping, select one row at a time

Determines the linear gradient.

Three. Slice 3.1 needs to slice the content

Cosmetic (generally used in the background attribute):

icon, logo

buttons, text, etc. with special effects

Background of non-solid color

Content (typically used in IMG tags)

Banner, advertising pictures

The picture in the article ...

For example, the red box is required to be cut, inside the black box is obtained from the background does not need to cut

3.2 Save type of cut-out picture

The content is generally saved as. Jpg

The general preservation of the modifier is. Png8,.png24

PNG8 and PNG24 both support full transparency, PNG24 support translucent (image quality is relatively high), but IE6 does not support PNG24 translucent, need to do compatibility.

3.3. Cut diagram

Hide text retains background only

3.3.1 Text-Independent layers (hidden text layers)

Find a text layer

Remove the glasses icon

3.3.2 Text and Picture merge (tiled background overlay text)

The background map can be stretched.

Rectangular Marquee Tool Select an area

Free Transform Ctrl+t

Background map can not be stretched (background with texture effect, etc.)

Rectangular Marquee Tool Select an area

Using the Move tool +alt

3.3.3 getting slices

Transduction. PNG24

• Move the tool to select the desired layer (CTRL + multiple selection)

• Right-click merge Layer (CTRL+E)

• Re-mail the mapping layer to a new file or drag directly to an existing file (NEW: CTRL + N)

Transduction. PNG8 (with background cut)

• Merge visible layers (shift+ctrl+e)
• Rectangle Marquee Tool Select content
• Magic Wand Tool to remove excess (subtract from selection: Hold ALT)

3.3.4 transduction with tiled backgrounds

Rectangular Marquee Tool Select an area

Copy and paste in a new file

Tiled content fills the width of the file (x-axis) or high (Y-axis): For example, the new file is used to tile the x-axis, and the width of the graph is consistent with the new file

3.4. Slicing tool (for active pages that can be cut one-size-fits)

? Pull Reference Line

? Select the Slice tool

In the Options bar, click the slice based on guides button

? Select the Slice Selection tool

Double-click a slice to change information such as file name

? Save

Select all slices to set the storage format uniformly

Iv. Preservation

Store the required content (the background is generally transparent)

? copy, new, paste ( CTRL + C, CTRL + N, CTRL + V, or drag content to a new file)

Standalone layer: Drag content directly to a new file

Merge together: Rectangular marquee tool selection, magic wand extraction, CTRL + C, CTRL + N, CTRL + V

? Save as Web Format (alt+shift+ctrl+s)

4.1 Save Type One (JPG)

When the picture is rich in color and no transparency is required

Suggest saving to JPG format and choosing the right quality

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

4.2 Save Type Two (PNG8)

When the color of the picture is not too rich, whether there is no transparency requirements

Save As PNG8 format

Note: When saving, you need to reset no dither and no matte

4.3 Save type Three (PNG24)

When the picture has translucent requirements

Save As PNG24 format

Default settings.

4.4 Save Type Four (PSD)

To ensure picture quality

Keep a psd file, and any subsequent changes will be on the PSD file

Five modifications and maintenance

As the project progresses, we may want to change the position of the icon, add a new icon, delete the old icon, modify the size of the canvas, so modify and maintain it.

5.1 Changing the canvas size 5.1.1 Add Canvas

Image-"canvas size, depending on the situation, select the anchor point

5.1.2 Reduce the canvas

The first method: The Rectangle selection Tool selected area, image-"crop to cut the canvas;"

The second method: crop directly using the Crop tool.

5.2 Move icon

? If the icon is a separate layer

You can use the Move tool to drag

? If the icon is not independent

Select the icon area with the selection tool

Dragging icons with the Move tool

Note: If the icon is not independent, the icon area can be selected using the selection tool, Ctrl+x cut, and then pasted to make the icon a separate layer.

5.3 Adding icons

After organizing the icons, put them in the appropriate position.

Precautions:

To modify the PNG8 picture, you need to change the color mode to RGB color, how to: Image-"mode-" RGB color.

Six use

Picture Merge scenario: Sprite picture

CSS sprites in the domestic many people called the CSS Wizard, is a Web page image application processing way. It allows you to include all the scattered images of a page in a large image, so that when you visit the page, the loaded picture will not be shown as a picture of the past. Based on the position of the specific icon on the large map, position the background.

Sprite Puzzle Benefits: Reduce network requests, improve page loading speed.

6.1 Size and quality (balance and trade-offs)

Compression tools:

? lossy tinypng:https://tinypng.com/

? non-destructive Minimage:https://github.com/neteasewd/minimage

6.2 Merging 6.2.1 Permutations

You must keep the appropriate space between the pictures (for image modification, CSS coding)

Icon Arrangement: Horizontal and vertical rows

6.2.2 Classification

? Merging images that belong to a module (functional)

To merge images of similar size (save space)

To merge pictures with similar colors (reduce the number of colors, the file size will be relatively small)

? Combined with the above methods

6.2.3 Merger recommendation

? Only images used on this page are merged

? stateful picture merging (mouse over state change, etc.)

Seven browser compatibility Scenarios 7.1 IE6 does not support PNG24 translucent

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

7.2 CSS3

? Advanced Browser Using CSS3

? A low-level browser uses a cut graph

7.3 Graceful Downgrade

? supported display Effects

? does not support no effect

for a specific sprite use example, please refer to another blog post: http://www.cnblogs.com/jingwhale/p/4280073.html

End of this section!

The next section of the "Page production development and Debugging Tools"

PS transduction of page making part