使用ASP.NET从零开始制作设计网站之五

[align=center]使用ASP.NET从零开始制作设计网站之五[/align]
[align=center]（蒋惠全　楚东明）[/align]
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ 
　　四个任务：使用photoshop完成设计与切图
　　第三天，小问号又准时地来到我的办公室。
　　小问号：蒋老师，要是上学时就是这样，我一定不是现在这个样子，自己动手做一下，真是不一样！解决了以前很多迷惑，以前总感觉隔靴瘙痒！一切准备就绪，请进一步指示！
　　蒋老师：你打算怎么做呢？　　
　　小问号：昨天晚上回去我研究了一下他们的资料，感觉我还是有信心做出来的，我准备今天开始设计数据库，明天开始写代码……
　　蒋老师：等等，你上学的时候是不是也这么努力啊，昨天晚上还加班了，精神可嘉！你是不是打算一个月后如果客户看不上你做的，重头再来！你会photoshop或者fireworks吗？
　　小问号：在蒋老师的教导下，只许成功，不许失败！我会photoshop，但这与photoshop有什么关系？
　　蒋老师：你去找美工部刘燕经理，她会告诉你如何做的，一定要自己动手啊！

 ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ 
　　

严格来讲这个任务主要是网站美工的任务，你可以选择跳过，当然也可以了解一下并不多。
1、使用photoshop完成设计
　　一个网站能否被客户看中，往往第一感觉并不是功能，而是界面！

　　很多朋友往往误解为使用Dreamweaver开始设计网页，而第一步实际上是用photoshop或者Fireworks来完成的。这可是下面是小问号在刘燕部门的指导下，用了三天的功夫才搞定的主界面！如果你也打算试试，请继续。

　　

　　


　（首页内容页面下载） （首页空白页面下载）

2、使用photoshop进行切图
　　小问号在刘燕的亲自指导下，经过三、四个小时的努力，终于完成了！小问号在给“中原市国土资源管理局”演示的时候还受到了表扬，小问号自语道：我也不笨啊，关键在于引导和用心啊！

 

首页切图过程

　　首页切图源文件下载　切割好的图片　


　　第一步：启动Photoshop并打开首页效果图。

　　

 



 
第二步：使用“切刀”工具根据需求开始切割首页效果图。
　　先打开Photoshop的工具箱，然后我们选择“切刀”工具



　　然后我们先分析一下页面布局再开始切割图片，在此我们要先清楚切割图片的几项重要原则：

　　1、切得细致：我们切割图片时要尽量切得细致一些，不要为了自己省事就粗略的切割几下了事，我们要时刻清楚一件事情，就是我们把图片切得越精细，网页运行时加载的速度越快越不失真，如果切得块太大或者切得时候多一像素少一像素的，那么网页显示的时候速度会慢很多而且非常毛糙，造成网页和设计图差别很大，失去设计图原有的美观。相信大部分浏览者都是喜欢看网页打开速度快、设计精美的网站，所以如果你不想被浏览者骂和图片设计者指责，那么请你用心去切，越精细越好。

　　2、切得合理：这一点我们主要是为程序编写者考虑。图片切得越合理编写程序越省事，反之可能会给程序编写者或图片设计者增加很多工作量。以下我们以小问号的两位同学的做法进行举例比较，现在让他们二人开始“PK”：

　　举例比较1：
　　

同学A的切法
　　

同学B的切法
　　我们分析一下这两位同学的切割方法，同学A是把整个网站菜单的背景图只切割了一刀，同学B切割了三刀。同学A的做法是把整个菜单部分的背景图切割成一张图片放在网页中，编程者在上面设置菜单时全部按照背景图片中菜单的个数和菜单的间距来设置。同学B的做法是把菜单的背景图分成三部分，切刀03作为整个菜单的背景色，切刀04作为鼠标经过的背景图片，切刀05作为鼠标离开时的背景图片。这样编程者放置菜单时可以根据菜单的个数和显示要求自由放置。
　　优缺点：网站开发前客户要求网站上面有8个菜单，而制作的过程中客户突然提出要求增加两个菜单或减少两个菜单，那么根据同学A的做法，我们只能重新设计网页效果图并更改网站程序了，因为同学A把整个菜单背景图做成了一张，想改都改不了。而根据同学B的做法我们只需要单独增加两个或删除两个菜单的背景小图就行了。因为同学B是单独切割的，菜单的多少不受背景图片的约束，所以“来去自由”喽。
　　本次PK,同学B胜。

　　举例比较2：

　　

同学A的切法

　　

同学B的切法
　　我们分析一下这两位同学的切割方法，同学A是把新闻版块的背景图只切割了一刀，同学B切割了三刀。同学A的做法是把整个新闻版块的背景图切割成一张图片放在网页中，编程者在上面设置文章列表时全部按照背景图片的高度来设置文章显示的条数和行间距。同学B的做法是把新闻版块的背景图分成三部分，切刀03作为新闻版块标题的背景，切刀04作为新闻版块的中间背景可以自动无限延伸或缩小，切刀05作为新闻版块尾部结束的背景图片。这样在上面设置文章列表时可以根据需求自由设置文章显示的条数和间距。
　　优缺点：网站开发前客户要求网站首页中的新闻版块每块显示6条新闻，行间距为20px，而网站快要制作好了客户突然提出要求每块显示8条新闻，间距还要20px，那么根据同学A的做法，我们只能重新设计网页效果图并更改网站程序了，因为同学A把整个新闻版块背景图做成了一张，而当初设计者是根据显示6条文章的高度来设计的，现在显示8条的话要超出边界了，要想更改只能重新设计图片并让编程者重新更改程序了。而根据同学B的做法我们只需要让编程者设置一下显示8条就行了。因为同学B把背景图的中间部分单独切割出来可以根据内容显示的高度自动调整高度，文章显示条数的多少不受背景图片的限制，所以“来去自由”喽。
　　本次PK,同学B胜。

　　3、重复利用
　　在网站首页中有很多地方是完全相同或者十分相似的，比如我们要做的这个网站首页中部的文章版块就是完全相同的，那么我们在切割图片时相同的地方只切割一次就行了，与其他的板块公用。这样会减少编程者很多工作量。
　　举例比较1：
　　





　　同学A的切法
　　





　　同学B的切法
　　我们分析一下这两位同学的切割方法，同学A在相同的新闻版块中选择了一处进行切割，同学B把所有的新闻版块都进行了切割。同学A的切法考虑到了重复利用，编程者只需要制作一块新闻版块，其他相同的地方复制一份就可以了，调用的图片都一样。同学B的做法是把所有的新闻版块都进行切割，编程者需要多次重复制做相同的新闻版块，每一块都用自己区域的图片。
　　优缺点：
　　最初设计时版块的大小样式颜色都是现在这样的，制作完后客户突然嫌不好看，需要改变版块的大小和背景颜色。按照同学A的做法，编程者只需要重新切割一个地方的图片，其他相同版块的背景图片会全部更换（因为它们调用的是同一张图片）。而按照同学B的做法，编程者需要把所有的新闻版块重新切割。

 

　　本次PK,同学A胜。

　　清楚了切割原则后，我们现在就知道该怎样切了。好，现在开始切割……

　第三步：完成切割并导出网页所需图片

　　现在我们已经切割好了首页，估计现在很多同学已经把我们的首页效果图切割的“面目全非”了，没关系，因为这次我们是学习，希望大家以后在工作中要多珍惜网站美工的心血成果。下面是我们一位专业美工的切割方法，供大家参考学习：



 

下载切割好的PSD图
 

　　首页切割好后，我们接下来的工作就是导出我们做网页时需要的图片，好，请开始跟我做。
　　首先点击Photoshop菜单栏中的“文件”---->再点击“存储为Web所用格式(w)”，如图：



此时会出现导出界面：



现在我们使用“切片选择工具”

来选择我们要导出的切片，选中的切片边框会变成黄色，如果需要多选，那么只需要按下“Shift”键再选择即可。使用“缩放工具”

可以放大/缩小切片，使用“抓手工具”

可以拖动切片。

　　选择好所需的切片后，点击窗口右上方的“存储”按钮

，此时会出现存储页面，



我们首先选择切片所存储的路径，然后选择保存类型为“仅限图像”如图

，接下来在“切片”选项中选择“选中的切片”如图：

(如果此处选择“选中的切片”那么只导出我们选中的切片，如果选择“所有用户切片”那么会把我们之前手工画的所有切片全部导出,这一点大家根据情况自己选择)，最后点击“保存”按钮即可导出选择的切片。需要说明的是在切片的存储位置PhotoShop会自动创建一个名字为"images"的文件，我们刚才导出的图片就存在这个文件夹中，如果存储位置中已经有名为“images”的文件夹，那么图片会自动存在已有的“images”文件夹中。

 

下载导出的images文件夹

　　到此我们的Photoshop切图工作全部完成了，给自己庆贺一下吧。
上一篇：使用ASP.NET从零开始制作设计网站之四  　　下一篇：使用ASP.NET从零开始制作设计网站之六