Part of the designers who read the article came to me to tell me how to cut images. Sorry? In my opinion, this is a cut-out, but what they mean by “cut-out” is how to make a design into AN HTML page.

This shows that now people are wrong about the front end. I think the front end is a cutout (which it is, and I don’t want to hear it called “cutout” emotionally) so I might think I’m writing this for designers. In fact, this article is applicable to the front end of the computer background or even the back end, for ps and other design software without the foundation of the use of the people, used to submit the designer to the front engineer of the design draft or PSD source file extraction, sorting, into the layout page when the use of the picture.

Moreover, the front end of this career, do not want to be considered as a cut map, the front end of today’s work, is not simply cut ps map so simple things. What this article shows is just a drop in the ocean of front-end work…

As a front-end designer, touching ps is like touching a keyboard. I can’t think of the tutorial, small white also not quite understand the details of the problem, so do not understand the place welcome message. Where there are problems, please correct them.

The text is as follows:Copy the code

I’m using the PS CC version, and everything I use in this tutorial is the same as the lower version except the interface and placement.

1. Cut JPG images

1. The procedure for opening Photoshop and importing images is set in stone

2. Select “Slicing Tools” in the left toolbar

3. Use the “slice tool” to cut out the range you want, box selection range as usual with QQ screenshot tool. Here, I need this little icon, so I box it. Selection box:

Like the above, remember that the ps slicing tool’s most recent selection is wrapped with a yellow box, while the other front edges are all blue. At this time, you can’t use the “Slicing Tool” to adjust the selection with the blue edge.

This is where the Slice selection tool comes in

4. “Slice Selection Tool” adjustment range:

Slice selection tool is under “slice tool”, see the above solution for finding methods. Click to select the blue line of the slice to be adjusted, and adjust the range after it turns yellow.

Section selection tool can only select and adjust the range, not slice.

5. A. Save method: File – Save it in web format [CTRL + Shift + Alt + S]

In general, photoshop will automatically create an images folder, you have to go to the location you just set, look for the images folder, in which you will find the image you just cut.

E. Name the file name

F. “Format” — Images only

G. In the “Slices” area, you can select whether to store all slices or only selected slices.

Generally, the default is to store all slices. Sometimes, when only a small slice is needed, you can choose to store the selected slice, and it will save only one of your current slice, so as to save yourself to pick out the slice you need from a lot of slices.

2. Cut PNG images

The idea behind a transparent cut is that you hide the background you don’t need, leaving only the ones you do, and making the background look like a Mosaic at the bottom.

It has to be layered. 2. First, select the Move Tool

Sometimes there would be multiple layers, and he would make multiple layers of background with different transparency on top of what you were cutting for light or whatever,

Just use the Move Tool (V) and click on it and turn it off. Do a few more steps for each layer until all the background you don’t need is hidden.

But conscience design will usually put the background on a layer, you find a layer of background, all in a group with him, you turn off the small eyes of the group

(ctrl+shift+alt+s)

png-8/png-24

“PNG8” refers to an 8-bit indexed color bitmap, and “PNG24” refers to a 24-bit indexed color bitmap.

Png8:

Each “PNG8” image can display a maximum of 256 colors, so the “PNG8” format is more suitable for images with a single color.

For example, solid color, logo, icon, etc. There are fewer colors, so the size of the image is smaller;

Png24:

Each “PNG24” image can display far more colors than “PNG8”, the maximum number of colors can be displayed up to 16 million;

So pNG24 will be able to display more colors, better resolution, higher quality images, and of course the size of the images will increase accordingly.

So pNG24 pictures are suitable for pictures with rich colors like photography;

This is the difference between the two. Choose according to your needs. 10. Then make sure you check transparency, and the other default Settings are fine.

Transparency position of PNG-8

Transparency position of PNG-24

One more thing to note here is that sometimes IN a page, I can use the slicing tool to select several PNG ICONS to cut, and then save them in PNG format.

But when YOU go to the save location dialog box, it says “Save all slices”,

When you save the image, only the one you cut or selected with the slicing tool is PNG, and everything else is JPG with a white background

** So cut PNG images, again recommended, one by one "save selected slices" better.Copy the code

Or your icon and white background difference, you can also ignore, let him save into JPG and then go to PS magic wand matting, but it is more trouble is not.

Also, what about background images and ICONS on each layer? To do that? Look for the design. Or you can choose your own tool buckle, buckle and save as PNG is also a way

Three, other skills:

1. Ctrl+ + sign to enlarge the picture,

2. CTRL – Zoom out

3. Hold down the space and the mouse icon becomes a gripper tool to move the page

Four, heavy egg!!

There is also a method for hanging the sky - for a single small icon cut into PNG

  1. “Move Tool” click on the icon and select the layer on which the icon is located.
  2. Right click on this layer and choose Convert to Smart Object. (Ps does not react at this time, do not be surprised, is you can not see it)Copy the code
  3. And then on this layer again, right click edit Content
  4. Dialog box, click OK

Ps will automatically generate a new file, only that icon, and is transparent oh!

It’s amazing!

It’s very labor-saving!

One second!

Here is the illustration:Copy the code

It’s clicking on a little icon

Select the layers panel next to the icon

Right click on this layer and choose Convert to Smart Object

Layer Style before conversion:

The converted layer styles:

So don’t say things like “I switched to PHOTOSHOP and it didn’t work”, there are, you don’t look carefully

And then right click — Edit content

Click OK

Look, he just created a new “Shape 8” page with the little PNG icon I needed,

This method may save only one icon