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