ps怎么做网页设计教程？要掌握哪些基础知识

作为制作网页非常重要的一环，Photoshop 运用得当是可以让你的网页看起来非常漂亮。下面就来介绍下ps怎么做网页设计教程？要掌握哪些基础知识，之后展示我们如何运用它来设计网页，一起来看看吧。

ps怎么做网页设计教程？

1.选择合适的画板
打开PS，创建一个新的文件时，选择网页设计的尺寸，在画板中优先选择像素为单位，因为Web浏览器无法显示例如以英寸为单位的图片大小。

2.切好素材图片
对于网页设计，要想让图片质量保持为最高，则需要使用 RGB 彩色模式和 72 像素压缩/英寸分辨率。任何素材在拼贴成网页之前都应当先使用一个独立的图片编辑器进行编辑和裁剪，以保证图片素材皆为正确尺寸和位置。因此一开始需要提前准备好所有需要使用的图片素材。

3.画出网页结构框架
建立网页时，必须先有一个框架。使用矩形工具随意画出一个框架，并按照您的设计，在框架上安放组件（例如导航栏、标志、图片、文本框等等），以确定网站的基本布局。一般来说，你可以采用视觉元素较少的页面来设计。

4.选择合适颜色
运用吸管工具或选择颜色板来选择你想要的颜色。当设计网页时，颜色的选择非常重要。需要选择与公司风格相符的颜色并确保网站在视觉上达到平衡。

5.设计文本
使用文本工具添加文本框，对每一个部分逐个进行设计。对于网站文本，一定要注意字号，颜色，字体和对齐方式等等。

6.对各部分进行设计
每一个部分啊你都需要着手设计。比如添加标题、logo 等等。对各部分压缩，缩小和变形进行调整。不要重复浪费你的时间，不能随意更改你的布局。

7.组合图层
运用图层绘制出网页的每个部分，再设置其悬停状态（如 hover 效果），确保每个部分都可以顺序提升。

8.完善设计
调整每一个部分的位置和大小以确定布局的准确性。它可以自由调整网页的大小和样式。运用 PS 功能吸管工具和栅格对齐功能（在额外建立分割线wrap 所需的区域时非常有用），让你的设计风格更加统一，精美。

9.保存图像输出
最后输出为图片或切片。右键点击设计文件中的元素和其他组件，选择“保存为Web所用格式”，按照你选择的输出文件类型输出，然后再从素材目录中将每个输出的文件上传到你的网站。

标签：