探索在线PS设计平台：掌握网页设计技巧的秘诀指南

如何以Photoshop进行网站设计

若是私人定制，随心所欲即可。但在企业为客户设计时，这一步骤不可或缺，完成效果图后需展示给客户。待客户确认无修改需求后再进行网页制作，旨在避免客户频繁修改，动布局！

此外，掌握网页效果图制作，能体现你的设计实力。若直接用Dreamweaver制作，则容易边想边做，导致设计思路混乱！

据我所知，此类教程极为罕见。因为制作网页效果图主要依赖基础操作，有时只需从其他网页截取部分内容处理后，直接应用于自己的效果图。

此类教程较为罕见，因为网页效果图制作主要涉及基础操作，有时只需从其他网页截取部分内容稍作处理，即可直接用于自己的效果图。

一般显示器分辨率宽：1024高：768，宽度减去滚动条宽度，通常为1003-1004，横拉条高度根据页面而定。

网页设计所需的Photoshop操作技术并不多，只需掌握基础即可。

但若想制作出优秀的作品，并非易事。

这其中既有天赋的成分，也有大量的学习过程。

你可以从模仿他人作品开始，逐渐融入自己的风格。

要成为一名优秀的网页设计师，必须多观察、多学习，并吸收其中的精华，观察高手如何处理细节，这样才能逐步提高。

如何利用Photoshop制作网页，应从何入手呢？

界面设计遵循一定的规范，在此基础上，可以更快地入门和进阶。

【页面构成】

一个网页通常包含导航栏（nav）、页脚（footer）和内容区域（body）。各页面（二级页面）通过导航栏链接访问，通过内容区域的链接和列表访问其他详细页面（三级页面）。因此，一个简单的CMS（内容管理系统）通常包含【首页index.html】【列表list.html】【正文/详情show.html】三个页面。

【页面模块区域】

了解页面结构和组成后，可以着手内容设计。内容设计和制作遵循一定规范，简单来说，就是链接看起来可点击，按钮看起来像按钮，文本框看起来可输入，保留默认控件的识别性和可用性（单选、复选，手机端通常为左右滑动式，PC端则多为纽扣式，这种设计符合设备操作体验的变化和设计），注意观察网页范例，可以整理出诸如【页面头部：logo+导航+其他】【主导航】【下拉菜单】【搜索框】【幻灯片】【文字列表】【图片列表】【选项卡/滑动门列表】【评论列表】【表单区域】等多种展示方式的模块。

【页面规划和设计】

从严格意义上讲，页面设计不仅需根据设计师的创意，还需包含需求分析设计。需求分析是根据实际需求（假设我是做新闻的，希望多以列表形式展示；我是做商城的，希望多以图文列表形式展示等）进行分析设计，以内容的权重（哪个模块更重要或更有意义）进行布局。设计师的创意相对灵活，只需将整理好的模块按照自己的想法布局即可。

页面的尺寸没有严格限制，但常规布局的页面（如微博、腾讯等门户）都是按照显示器的实际尺寸（适应1024768分辨率）进行设计，这就是960grid栅格，Flash整站则没有太多要求（它可以适时缩放，就像播放的电影），手机端设备则需要考虑普通分辨率尺寸（320480等）。

因此，设计师通常建立一个尺寸适中的新文档，然后建立相应尺寸的页面文档，后者作为辅助图形拖入第一个文档中，然后开始建立辅助线，例如：新建14403000的文档，保存。再建立9603000的文档，按下【V】键，点击文档，不松开鼠标拖动到第一个文档中，使用对齐方式居中顶对齐，从标尺拖出辅助线即可。

【细节和效果】

页面设计不同于排版，设计时还需考虑实际制作。有些效果看起来很炫酷，但通过代码无法实现（网页通常使用html文件编写），那么，我们就需要对一些效果有所了解，知己知彼，才能游刃有余。

良好的视觉效果可以让站点更具冲击力和亲和力（不同风格有不同的感受），而视觉效果的设计除了灵活运用素材混合模式、滤镜和调色外，还需具备一定的审美情趣，以前是说“眼高手低”，而今，则要“眼低手高”，很多效果看到懂，就是想不到，总是看到别人的东西时惊叹“这样也可以啊？”

细节把握能力值得锻炼，推荐你观看一些图标和UI设计案例（iconfans），你可以学会如何使用铅笔调整像素级的细节，也可以学会使用钢笔画笔绘制天马行空的图形，还可以学会输出清晰、锐利的图形图像，还可以学会设计更有体验意义的模块和结构（不要小看体验和设计，试想，太小的文字或图标，不仅看不清，相信你也无法点击，这就是体验）。

【其他】

Photoshop网页设计不仅要求你具备设计功底，还需养成良好的工具使用习惯，以下主要说明两点——【素材整理和图层操作】。

素材整理，PS中较为灵活的素材有【字体】【笔刷】【样式】【图案】，其中【样式】尤为重要，除了使用网上下载的素材外，平时自己常用的也可以新建到样式列表中，并注意及时备份样式列表（偶尔重装系统或更换电脑，你也不想重新建立样式库吧）。图案通常可以快速铺设复杂的背景纹路（如：古典图案和格子、像素点阵等）和图片背景（如：木纹背景），字体就不必多说了。

图层操作，除了简单的图层样式控制外，还需学会使用【Ctrl+G】，图层打组。图层打组可以很好地管理图层和设置（一个网页通常会有很多图层，打组可以压缩图层列表的高度，还可以将相关的模块整合在一起），给予适当的命名，你就能轻松地找到所需的图层了。

图层面板操作，图层面板操作不仅包括基础的图层样式调整，还需掌握【Ctrl+G】快捷键，进行图层分组。图层分组能够高效地整理你的图层及设置（一般网页会有众多图层，分组能缩小图层列表的体积，同时也能将关联的模块集中管理），取个恰当的名字，查找信息也就变得游刃有余了~~~

就先聊到这里，一大早的阳光照耀着我敲字~~