当前位置：首页 → 问答吧 → photoshop制作网站流程图解

photoshop制作网站流程图解

时间：2006-11-07

来源：互联网

说点题外话,这篇教程是网络上找的,为了找到他的图,我起码找了10个以上网站,这十多个网站转载别人的文章图片全是用的盗链,源头的网站把图片地址改了,导致这十多个网站都无法显示图片了,无语....盗链已经如此之严重了.还好有的站把图片上传到自己空间了,总算找齐了这些图片。教程作者已经无从考究了,如果你知道请联系我.

1.规划：不管是乔客，还是用动易、风讯，我们都应该考虑两个问题：
a、版面要分出头、中、底三个部分。
b、中间部分要考虑两种情况，一是两栏（乔客左窄右宽，动易左宽右窄），二是一栏，两种情况显示不能变形。有些朋友想每个板块的头部不一样，这也是可以的，你可以在程序代码中做文章，那是编程的问题，按下不表。
如果我看到别人的版面想拿下来，那就做个截图，建立一个photoshop文件，把截图放在最底层，作为最初的草图。
2、制作。
a、即使不用别人的版面，最好也还是找一个同类系统的网站截一个图，放在最底层。拉三根垂直辅助线：左边线，中间虚线位置，右边线。
b、建立头、中、底三个图层组。有些人用photoshop不喜欢建立图层组，这不是好习惯，一个版面，少则几十层，多则上百层，不分开图层组管理就很乱，影响工作效率，更影响多人合作。

c、制作的时候最好尽量把文字内容也放上去，可以更接近实际效果，等切图的时候隐藏这些图层。
d、标题样式。一个版面除了头、底要特别制作外，中间部分应该考虑制作三种标题样式：左栏、右栏、通栏，也可以统一风格。还要考虑表头背景、一些常用到的边框等。我自己把许多喜欢的边框样式用js作了一个样式包，随时调用，而标题样式我是使用flash来做的一个样式，使用不同的参数调用，就可以有不同的样式和颜色，改版的时候就改一个js文件和flash文件，做版面的时候会节省一些时间。

e、常用的按钮样式。常用的按钮其实不用在版面制作的时候做的，可以找回原来的按钮图片一个一个修改。
f、特殊字体的使用。不管是链接还是内容，我都主张尽量使用样式表来控制字体样式，但有些地方要用到不常用的字体，为了使所有的浏览者都能看到自己的设计原意，就要把文字制作成图片，这一类的图片要适当使用，因为使用了图片，对搜索引擎的访问是无益的。

g、像素图。尽量使用像素处理，例如一些边框、小图标，会使图片的字节数大大减少，显示快，容易透明处理。

3、切图切图要在imageready中完成，先要把完稿的作品保存，最好还要做一个备份，然后跳转到imageready工作。
a、有朋友切图时要合并图层，这是没有必要的，图层合并了，以后修改和编辑都麻烦，而且有时候切图还要按一些图层的大小定位来做，例如要切出一个468x60的广告横标，你可以把这个横标的图层载入选定区域（load selection），然后从菜单select把选定区域转换成切片（create slices from selection）。
b、不要把整个版面同时切图。一般来说，头部的色彩很丰富，而中间和底部的色彩比较少。例如一个版面头部的切片，调色板可能要256种颜色，而中间和底部只要18色就能搞定，如果同时切片，就变成同一个调色板，中间的部分也使用了256色，就会使文件大小增加，但如果折中，让头部256色减少为128色或32色，又会影响效果。所以要分别处理，方法是在ps中分别选择头部、中间（中间有时候还可以分出几个板块）、底部，裁切，另存为几个不同文件，然后切图。
c、切图要考虑清楚，你准备使?
来定位还是使用
定位，不同的html图片分割是不同的。例如新阳江网站的两边灰色框，如果使用
来做，背景图只要切一个高1像素宽791像素的背景图，而如果使用
，就要切出左边背景和右边背景。

d、gif和jpg。在同一个文件中切图，photoshop是允许不同的切片使用不同的文件格式的，但gif格式和jpg格式结合的地方，有时候肉眼都能可能看出颜色的差别，所以同一部分的切图最好使用同样的格式。颜色较少、较单纯的图片，文字图片，从矢量图转过来的小图标、边框背景等图片，一般用gif格式比较好，文件小，颜色不失真。摄影图片、三维软件做出来的彩色立体文字，一般用jpg格式。如果切片是准备做flash用的，文字部分和矢量图标等就不用了，在flash中使用字体和矢量图比做成位图占用的字节小，动画效果更流畅。e、有链接的图片。有链接的图片处理方法很多，你可以每个链接切一个图片，也可以切一个大图，在网页编辑器里面编辑的时候添加链接热区。现在更好的做法是使用文本链接，把图片变成背景就行了。

图片链接还可以用flash来做，可以有很酷的动态效果，切一个大图，倒入flash文件中作为背景层，上面添加透明按钮就可以了。要注意的是flash里面的图片，可能会与页面其他图片的色调有些差异，位置也有一个像素的位移，一定要小心处理。

使用了图片或flash作链接，对搜索引擎支持都不大好，作为补救措施，你可以在页面其他内容使用一些文本链接引导搜索引擎找到这些页面。
引用：(切图如果这样切，使得图片名子很乱，或是必需在切片上重命名。我的办法是：
先将大图，切为top片，left（或right）片，bottom片，这样整体出来了，导出切片。
用table或div部局。整个网上就出来了。
这时再对top图进行分切，然后把top形成的table嵌入到首页的top区，原top整图就可以删除了。而后其它也类同。
这样可以避免整个图切完后导出网页和图后，图的名子不可区分，整个导出的网页代码基本也不能用，因为在程序员在嵌入程序时，不可避免的可能对网页某区域进行高度调整，（例如新闻列表可能调整行数），这时网页就会出现断裂，不好修复。
好多初学者就是用ps导出的网页做最终页，这样后期不好维护，最好是自己用上述方法重新部局一下)

教程作者已经无从考究了,如果你知道请联系我.
小虫设计，俺的主页就是这样制作的！还有我的论坛小虫设计论坛，里面还有很多好东东，欢迎大家访问。

作者: nydx 发布时间: 2006-11-07

我自己先顶一下，这么好的贴，同志们不要让他沉下去了。

作者: nydx 发布时间: 2006-11-07

好东东

学习

作者: yuannan 发布时间: 2006-11-07

不要让好贴子沉下去了呀。

作者: nydx 发布时间: 2006-11-07

在顶一下。

作者: nydx 发布时间: 2006-11-07

不错，专业高效的网页设计制作流程

作者: wlxhhr 发布时间: 2006-11-07

学了,以前只看到有FW的切片教程，感谢LZ的分享

作者: dwcon 发布时间: 2006-11-07

学习～～～保存拉

作者: kmlxk 发布时间: 2006-11-07

好象很规范啊

作者: xxcn2006 发布时间: 2006-11-07

顶啊。。。。

作者: skybot 发布时间: 2006-11-07

在顶一下。

作者: winkissui 发布时间: 2006-11-07

哈哈。如果对自己有帮助的话，希望大家帮着顶呀。

作者: nydx 发布时间: 2006-11-07

作者: xbx 发布时间: 2006-11-07

顶上去。

作者: nydx 发布时间: 2006-11-08

这个东西有什么好啊
用非本质的东西误人子弟

作者: wuxinzhi 发布时间: 2006-11-08

顶~~~~~~顶~~~~~~顶~~~~~~顶~~~~~~顶~~~~~~顶~~~~~~顶~~~~~~顶~~~~~~顶~~~~~~顶~~~~~~顶~~~~~~顶~~~~~~顶~~~~~~顶~~~~~~顶~~~~~~顶~~~~~~顶~~~~~~顶~~~~~~顶~~~~~~顶~~~~~~顶~~~~~~顶~~~~~~顶~~~~~~顶~~~~~~顶~~~~~~顶~~~~~~顶~~~~~~顶~~~~~~顶~~~~~~

作者: hxyyxl520 发布时间: 2006-11-08

很不错的教程哦，谢谢楼主了！呵呵！

作者: junly0626 发布时间: 2006-11-08

不错的教程

作者: 190235282 发布时间: 2006-11-08

这个教程对于初学者是很有帮助的。

作者: nydx 发布时间: 2006-11-08

切片我觉得 Fireworks 很好使

作者: luby 发布时间: 2006-11-08

反正我是不会这样切的方法不同效果都是一样的
好帖子啊

作者: hkysj 发布时间: 2006-11-09

zhichi

作者: cartoon 发布时间: 2006-11-10

不错的教程

作者: tamadeya 发布时间: 2006-11-10

顶顶顶顶顶顶

作者: cinderellaxb 发布时间: 2006-11-10

贴子不错吧。:rolleyes:

作者: nydx 发布时间: 2006-11-11

经典之！收藏之，，，，

作者: ehu268 发布时间: 2007-01-21

顶，

作者: lushaoen 发布时间: 2007-01-21

学习～～～

作者: Forest8 发布时间: 2007-01-21

好，頂一下

作者: xwzsky 发布时间: 2007-01-21

哇哈哈
不错哦~

--------------------------------

各位,灌水请适可而止,谢谢... - Hutia

[ 本帖最后由 hutia 于 2007-1-22 13:18 编辑 ]

作者: irencerong 发布时间: 2007-01-22

这篇文章不错
适合于初学者，也同样适合于其他设计人员的习惯养成

作者: zhaomz2008 发布时间: 2007-01-22

非常不错。
如果能再详细点然后做成chm或者pdf那就十全十美了

作者: oldhen 发布时间: 2007-01-22

不错，学习了！
我就不用图层组，弄的好多层复制隐藏的，最后找什么都不好找。以后要改改了！！！

作者: ycmln 发布时间: 2007-01-22

多谢这样的教程：）学习

作者: SmoothJazz 发布时间: 2007-01-22

好真的很好收藏了哦!!!!

作者: deepseafish 发布时间: 2007-01-25

不错的教程，谢谢楼主，期待更好的教程

作者: feng51 发布时间: 2007-01-26

真的很不错,如果有打包下载和示例就更好啦!谢谢LZ

作者: kts2tt 发布时间: 2007-01-26

由衷的感谢您!!!!

--------------------------------
东边日出西边雨,道是无晴却有晴。

作者: xxxhubo0000 发布时间: 2007-01-26

切图如果这样切，使得图片名子很乱，或是必需在切片上重命名。我的办法是：
先将大图，切为top片，left（或right）片，bottom片，这样整体出来了，导出切片。
用table或div部局。整个网上就出来了。
这时再对top图进行分切，然后把top形成的table嵌入到首页的top区，原top整图就可以删除了。而后其它也类同。
这样可以避免整个图切完后导出网页和图后，图的名子不可区分，整个导出的网页代码基本也不能用，因为在程序员在嵌入程序时，不可避免的可能对网页某区域进行高度调整，（例如新闻列表可能调整行数），这时网页就会出现断裂，不好修复。
好多初学者就是用ps导出的网页做最终页，这样后期不好维护，最好是自己用上述方法重新部局一下

作者: xuxu2004 发布时间: 2007-01-27

好东西啊！！
收藏了！！

作者: zilaiyebbs 发布时间: 2007-01-27

好详细.收藏了。支持。

作者: wkcom 发布时间: 2007-01-27

学习了，感觉还是无从下手，楼主的网站打开好慢，不过也挺有特色的。

作者: wwufengg 发布时间: 2007-01-27

真的是好东西，学习中

作者: dengxiao 发布时间: 2007-01-29

dddddddd

作者: uljihc 发布时间: 2007-02-13

我会注意的。哈哈。我把你这段添在教程的下面。你不会介意吧。