本教程介绍较为合理的网站设计的流程和方法

1、本教程介介绍较为为合理的的网站设设计的流流程和方方法。在在操作之之前需要要对网站站的性质质有一定定的了解解，并画画好架构构图。然然后根据据架构图图慢慢用用PS或或其他图图像软件件着色及及排版，需要注注意好整整体效果果协调及及颜色的的搭配。大致架架构做好好以后再再安排素素材图片片即可得得到总体体的效果果，后期期稍微调调整一下下细节即即可。实实际操作作中不同同人操作作流程可可能有所所不同，只要能能做出好好的作品品用什么么方法都都是可以以的。最最终效果果1、下面面让我们们用线框框来着手手布局。下图就就是我们们绘制的的简单布布局，这这么做的的目的是是要确定定每个元元素的位位置。确确定主导导航栏包包含几

2、个个部分、以及最最新增加加的内容容在主页页面中的的展示位位置。2、新建建文件，宽9660pxx、高112000px。这对于于屏幕分分辨率为为10224*7768的的朋友来来说是黄黄金尺寸寸。前景景色设为为#8558488c，背背景色设设为#44140048. 拉一一个径向向渐变当当背景如如下图所所示。3、新建建图层，重命名名为“Heaaderr”。使用用钢笔工工具，绘绘制帽子子形状的的路径如如下图。右击“Heaaderr”图层，选择“混合选选项”。勾选选“渐变叠叠加”，选择择”线性渐渐变”,把从从上到下下的颜色色设为#24224299-#36336400。技巧巧：使用用钢笔工工具绘制制直线的的

3、同时按按住Shhiftt键，能能保证线线的平直直度。4、新建建图层，重命名名为“Conntaiinerrs”。使用用颜色#2e22d333继续根根据之前前设计好好的草图图，绘制制线框。5、输入入文字。6、新建建图层，重命名名为“Navv Diividder”。使用用铅笔工工具绘制制垂直分分界线。选择铅铅笔工具具，直径径设为11px，颜色#00000000，绘制制另外一一条1ppx的垂垂直分割割线。然然后绘制制另外一一条，颜颜色#66e6ff74。7、按QQ进入快快速蒙版版模式，点击“渐变工工具”，选择择“反射渐渐变”，拖拽拽出一个个小的反反射渐变变如下：8、再次次按Q推推出快速速蒙版模模式，这

4、这时候我我们取得得选区。按Deelette键，你将获获得分割割线上下下两边缘缘隐去的的效果。9、新建建图层，重命名名为“Higghliightt”。前景景色设为为#24423229，绘制一一个圆角角矩形，右击图图层，选选择“混合选选项”。勾选选“内发光光”，混合合模式设设为“正常”，颜色色#00000000，不不透明度度30%，内发发光半径径5pxx。10、新新建图层层, 重重命名为为“Seaarchh Boox”。重复复“Higghliightt”图层的的做法，绘制圆圆角搜索索框框时时，前景景色设为为#5004f557。11、绘绘制搜索索框的右右半部分分。(从从上到下下，颜色色设置为为#b8

5、8b7cc5 -#9559499c)。12、放放置必须须的文章章和搜索索图标。13、现现在看起起来页面面还很粗粗糙，让让我们继继续制作作中间的的滑动模模块。14、新新建图层层，重命命名为“Sliidesshoww Boordeer”。使用用钢笔工工具绘制制左上角角、右上上角突出出的边框框。取得得“heaaderr”选区，点击DDeleete键键得到边边框。15、在在滑动模模块的两两次绘制制两个黑黑色的小小圆角矩矩形按钮钮。16、拼拼合所有有的黑色色图形到到同一图图层，右右击图层层缩略图图，选择择“混合模模式”。勾选选“渐变叠叠加”，渐变变色设置置如下（从左到到右依次次是：#8d88e922,

6、#cbccbcdd, #32331377, #c3cc5d44）勾选选“外发光光”，混合合模式设设为“正常”，外发发光颜色色：#00000000，不透明明度4%，外发发光大小小5pxx。17、绘绘制左侧侧箭头，复制“水平翻翻转”得到右右侧箭头头。18、现现在看起起来好多多了。让让我们继继续为图图片展示示区和短短文区制制作边框框。19、新新建图层层，重命命名为“Thuumbnnaill Boordeer”。在原原图形下下方绘制制圆角矩矩形如左左一，按按住Cttrl键键取得原原图形的的选区，按Deelette键删删除，只只留下边边框。先先复制之之前做过过的滑动动模块边边框的图图层样式式，右击击“S

7、liidesshoww Boordeer”图层粘粘贴图层层样式，效果如如下：20、在在“Thuumbnnaill Boordeer”图层上上方新建建图层，沿边框框外边缘缘绘制一一条1ppx宽的的环绕边边框，右右击图层层样式，勾选“渐变叠叠加”，颜色色从上到到下设置置为#ffffffff-#66666666，使使用相同同的方法法为内部部矩形块块添加边边框，渐渐变色与与前面相相反。21、通通过复制制得到其其他几个个边框，这里不不细说了了。下面面我们接接着来补补充文字字内容。22、现现在我们们来到标标题这。字体颜颜色使用用黑色#00000000，然后后为文字字添加投投影，投投影色#ffffffff，角度度90，