PS网页界面设计入门攻略 - 零基础也能速成高颜值网页
大家好呀，我是小噢！今天给小伙伴们带来超实用的网页界面设计教程。很多小可爱跟我说想学设计网页，但一打开PS就懵了。别担心，跟着我一步步来，保证让你从小白变达人！
一、布局打底，打造清爽视觉
首先咱们要规划好网页的整体布局。就像收拾房间一样，得先把大框架定下来，不能一上来就乱放东西。
新建文档：
* 宽度设置1920px（现在大屏设计必备）
* 高度根据内容定，一般首页2000px够用
* 分辨率72像素/英寸
* RGB颜色模式
开启网格参考：
* 按Ctrl+R显示标尺
* 右键标尺选择“像素”
* 拖动参考线划分版面
贴心小提示：我一般喜欢把页面分成12栏，跟Bootstrap栅格系统一样，这样做自适应布局特别方便哦！
二、配色技巧，让网页高级感MAX
说到配色，很多小伙伴就头大。其实特别简单，我教你们一招：
主色调选择：
* 打开调色板（窗口-色彩）
* 选一个你喜欢的主色
* 用色相环找互补色或类似色
小噢私藏的配色公式：
* 60%主色（页面背景）
* 30%次色（内容区块）
* 10%点缀色（按钮、重点元素）
小技巧：不知道选什么颜色？去你喜欢的品牌官网偷师啦！用吸管工具直接吸取颜色，贼专业！
三、界面元素，细节决定质感
这部分算是网页设计的精髓了，咱们一个一个来搞定：
导航栏设计：
* 新建图层（Ctrl+Shift+N）
* 矩形工具画出导航条
* 添加投影效果（图层样式-投影）
* 设置不透明度80%，显得通透
按钮美化：
* 圆角矩形工具绘制
* 渐变叠加（双击图层-渐变叠加）
* 描边1px（内部描边显得精致）
Banner设计：
* 高度建议不超过800px
* 主视觉图片放在左边
* 文字内容右边，记得留白
四、文字排版，让内容更有格调
排版可以说是决定网页高级感的关键：
标题处理：
* 字号：28-36px
* 行高：1.5倍字号
* 字体：中文推荐思源黑体
* 英文搭配Helvetica
正文设置：
* 字号：14-16px
* 行高：1.8倍字号
* 段落间距：1.5倍行高
贴心提醒：字体不要超过3种，不然会显得很乱哦！
最后的小心机
留白很重要：
* 内容区块间距保持一致
* 边距至少30px
* 重要信息周围多留空间
统一性原则：
* 相同元素用相同样式
* 配色严格按比例来
* 间距保持规律
小可爱们，记住一点：简约不等于简单，克制才是真的高级！按照这些来做，你也能做出超惊艳的网页界面。
優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營(yíng)理念，誠(chéng)信務(wù)實(shí)的服務(wù)了近萬(wàn)家客戶，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長(zhǎng)期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長(zhǎng)網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營(yíng)銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開(kāi)發(fā)、移動(dòng)端應(yīng)用（手機(jī)站、APP開(kāi)發(fā)）、微信定制開(kāi)發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號(hào)：
專屬顧問(wèn)
