how to slice the psd for web with photoshop CC——three ways

First step to become a front-end web developer is mastering how to slice the psd file and convert it to html. Here is my summary about how to do that. 
The application: Photoshop CC . 
The psd file which I download from the Internet. You can download my example psd file from https://pan.baidu.com/s/1mhEAzva
Way1. It's the traditional way based on the basic function in PS called slice tool.
Slice each part you want like this .gif

Then ctrl+shift+s or store as web format.
 change the slice into all user slice.

My slice file is shown below.All the pictures are saved in the file images.
Way2. more advanced function called Script.
export to file... 

open the object file to save pictures and type as PNG-24. Then click run.wait...You may wait a while depends on the psd content and size. 
Then,my slice file is shown below.
Way3. The most convenient way only supplied on Photoshop CC version. 
 Edit>>Preference.
click the first .
Then click the File>>生成>>图像
Ok,now it's easy to generate pictures in the file according to the format of the layers.
Then,my slice file is shown below.
Cool. Each way has advantages which should be combined in the future slice psd work. Hope this can help you. I'm a beginner in front-end web developer field,moving up together with you. 

Popular posts from this blog

Fancyapps — easily build overlay windows with carousel

Meet Mantine: A TS-Based Open-Source React Components Library

Meet Tippy.js: The Complete Tooltip Popover Plugin