What I know about Web development (2)-PS slicing

Source: Internet
Author: User

PS is an indispensable tool for web design and front-end development, the basic purpose is to deal with the website logo, Banner and button icons, but once the whole PSD file to be turned into a Web page makes people very headache, may not be too professional.
Later in the company to do a website project, art generally can give transduction and CSS files, solve a lot of problems. I didn't think of that at the time. PS also has a very important tool "slicing", which provides a very useful function to export slices to the div+css layout.
Here is a excerpt: http://www.blogjava.net/algz/articles/297304.html

After modifying the corresponding text and image, we will output the PSD file (X) HTML file.

First you have to slice the PSD file, there are two ways:

① using the Slice tool on the toolbar,

Then carve a piece of area on the image.

② use reference line-based slices, press Ctrl+r to bring up the ruler bar,

Move the mouse over the ruler, hold down the left mouse button, move to the image, you will see a green reference line,

Set the reference line, arrange it, then click the Slice Tool chart on the toolbar and click

"Slice based on guides" in the options bar. So on the original reference line has become a piece of slicing.

********************************************************************************

The next step is to output:
① in the menu bar, select file → save as Web format → save.

② the next step is to pop up a window that "stores optimization results as".

At "Save Type" There is a drop-down box can be selected, because we want to save the format of the Web page, so select "HTML and image (* html)", and then select "Save" to output a Web page format of the HTML file and a folder containing the image named "Images".

③ if we need to output "Div+css page" We can also do this:
In the drop-down column box at settings, select Other

A window with the output settings will pop up.
Select "Slice" in the 2nd drop-down column, select "Generate CSS" and click "OK" → "save" to output an HTML page that is currently popular "Div+css".

What I know about Web development (2)-PS slicing

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.