The third part of the series on the skillful use of photoshop for front-end engineer skills - cutting pictures

Previous words

In addition to using photoshop for measurements, front-end engineers must also use this software for cutting. This article is the third article in the series of clever uses of photoshop - picture cutting

Picture cutting information

Which pictures need to be cut out in web page production? ? Mainly divided into two categories, one is decorative pictures, the other is content pictures

[1] Modified pictures

Modified pictures mainly modify the content of the web page, generally It is made as a sprite image, used in the background attribute, and is usually saved in png24 (IE6 does not support translucency) and png8 formats. Decorative pictures mainly include the following categories:

1. Icons, logos

2. Buttons, text, etc. with special effects (if the fonts designed by the designer are not very common, put the text When the picture is cut out)

　　3. Non-solid color background

　【2】Contentual picture

A picture is worth a thousand words, and the "picture" here refers to the content Sexual images mainly provide content for web pages and are generally used in the tag. Content pictures are rich in color, generally saved in JPG format, and require certain compression. Content pictures mainly include the following categories:

1. Banner, advertising pictures

2. Pictures in articles

[Note] Some content pictures are server data , no need to cut the image, just use placeholder

Steps to cut the image

【1】Hide the text and leave only the background

If there are special effects on the text that cannot be written in code, then cut out the text and background together

　1. If the text is an independent layer, hide the text image

　　First find the text layer, and then remove the eye icon

##　2. If the text and background are merged, the tiled background covers the text

　a. If the background can be stretched, use the rectangular marquee tool Draw a small rectangular frame on the background, use the Free Transform Tool (ctrl+t) to stretch the background to cover the text, then double-click or press the Enter key

#

b. If the background has texture and cannot be stretched, use the Rectangular Marquee Tool to draw a small rectangular frame on the background, use the Move Tool +alt to copy the current layer, and press it again and again. Use the arrow keys or use the mouse to move (when moving the mouse, hold down the shift key to ensure that the layer moves in a straight line) until all the text is covered

#【2】
Move the tool to select the required layer (ctrl+click the rectangular area of ​​the layer), and an ant line will appear

【3】

Merge layers (ctrl+e) (optional)

Check automatic selection, and then merge the multiple layers you need

【4】

Copy layer (ctrl+c) ->Create new file (ctrl+n), and press OK->Paste layer (ctrl+v)

#ACTUAL COMBAT

The following will be a practical explanation from the perspective of cutting different types of pictures

【Cut png8】

Since png8 pictures do not support translucency, they need to be cut with a background

1. Merge visible layers (shift+ctrl+e)

2. Select a large area with the rectangular marquee tool

3. Remove excess parts with the magic wand tool (subtract from the selection) Go: hold alt)

#

【Cut irregular small icons】

The cutting method is similar to that of png8

[Note] When selecting small hollow icons, be sure to cancel [Continuous] ]

#【 The background can be tiled】

1. Use the rectangular marquee tool to select an area

2. Copy and paste it into a new file (the tiled content fills the width (x-axis) or height of the file (y-axis))

　　If it is tiled along the x-axis, it will cover the x-axis; if it is tiled along the y-axis, it will cover the y-axis

【Slicing tool cuts across the board】

Applicable to active pages that can be cut across the board

1. Pull the reference line

2. Select the slicing tool

3. Click Guide-based slicing button

　4. Switch from the slicing tool to the slice selection tool (under the same button)

　5. Double-click the slice and change the required name

6. Save

[Note] Ctrl+a cannot be used to select all slices. You can only drag the rectangular box to select all slices. After selection, the color will become brighter, and then uniformly set the storage format

#################################################################################################################################################################################################################################### Chinese website! ###