雀盔啊涝 肺弊牢
傈眉 (22)  软件 (4)   皮肤 (10)   网页 (2)   图片 (2)   其他 (1)   意语 (3) 
    Susy
   http://www.susyskin.com
   [网页教程] 如何分割psd图片到html

我们家的某同学想知道这个教程
虽然我很囧,不知道该怎么写才好
但我的确好久没更新这里了,所以今天上班偷懒,就写个大略版的出来吧。
希望能看得懂 ^^''

[Photoshop CS2以及以下版本请使用Imageready;CS3版本就直接使用(囧or,本来就合在一起了么...)]

1) 打开已经做好的psd文件,我就用这一版的图片来做示范


2) 选取工具栏中这个图标
(厄,我不知道它中文叫什么,总之这个就是专门用来切割的工具)
这时候你会发现,psd图的左上角出现了一个灰色的01现象。

3) 鼠标右键点在psd图片上,出来这样一个菜单,选择Divide Slice (抱歉是英文版的)


然后出来的框架是选择水平or垂直分割,数字是说要分割几份 :)


4) Bingo!
看见操作结果了吗?psd图上出现了几条线、把图片分割成了几个区域,它们分别写着01.02.03.04..等等数字,它们就是已经分割好的区域了。
*在每个已经分好的区域内都可以重复这个步骤(也就是可以把1分成01.02.03;01再分成001.002;02再分成001.002.003....不知道能不能看明白我说什么?)

可以把线条上下左右的调整,来对应psd图片最适合的位置:)
*提醒:如果事后再来调整的话,记得把线条连接的几个分区用ctrl按住都选择起来,否则会出现差误哦

分割好的就是这样子的(虽然图片有点小,但可以看出大致的分割)


5) ok,到了这一步基本就已经完成了,现在要做的是,点每一个区域的图片,来调整它们的保存类型(jpg.gif.png)和大小(jpg选择0-100的质量; gif选择2-256的颜色; png选8、24、32色),这一步的目的是为了更好的调整图片的重量,以便让网页尽可能的“轻盈”^^v

6) 最后一步是什么?Yes,保存。
记得要保存成File-Save for web&Devices这一款哦,它会自动生成一个html的页面,外加一个包含所有分割图片的文件夹。

嗯,基本上就是这样了吧。
我也不知道大家能不能看得懂,看不懂再问我吧^^
就酱。

 
格废

 推荐Winamp版本和皮肤制作软件下载 [1053]  Susy 2004/01/10 9524 
   [网页教程] 如何分割psd图片到html [1554]  Susy 2007/11/12 4780 
 20  [意语教学] 第三堂课,完成女生版的游戏 [2257]  Susy 2006/10/26 6689 
 19  [意语教学] 第二堂课,真人配合示范哦~~ [7449]  Susy 2006/10/19 5525 
 18  [意语教学] 第一堂课:BRAVO [1272]  Susy 2006/10/19 4366 
 17  [FW教程]如何在fireworks描边 [3555]  Susy 2006/10/02 4880 
 16  [WSkin]怎样调整歌曲显示栏的位置 [215]  Susy 2006/09/18 26314 
 15  [其他]关于带宽的一些聊天纪录 [3565]  Susy 2006/07/20 4825 
 14  [网页教程]写给新手的话 [6181]  Susy 2006/07/11 4649 
 13  [WSkiN]如何去掉skin中间那条白线 [1844]  Susy 2006/05/31 12667 
 12  [WSkiN]如何制作skin的透明效果[region] [30358]  Susy 2006/05/01 4193 
 11  [软件]Skin制作相关软件--Maron [795]  Susy 2006/01/15 4937 
 10  [WSkiN]如何修改skin中的鼠标 [397]  Susy 2005/08/21 78853 
 9  [软件]透明skin制作软件--Region [7215]  Susy 2005/04/07 17857 
 8  [软件]做图片边边的软件--PhotoWorks[很实用哦] [639]  Susy 2005/03/29 41258 
格废 1 [2]
Copyright 1999-2018 Zeroboard / skin by RuVin