一、界面布局准备
首先咱们要准备一个合适的画布。我建议用1920×1080的尺寸，这样的比例最适合现代显示器啦。打开PS后按Ctrl+N，记得把分辨率调到72像素/英寸，颜色模式选RGB哦。
小贴士：为了方便对齐，记得打开“视图-显示-网格”，再按Ctrl+R显示标尺，这样我们设计起来就贼方便啦！
二、网格系统设置
很多小伙伴一开始都随便摆放元素，结果做出来的页面歪七扭八的。其实利用网格系统，分分钟搞定整齐布局：
按Alt+Ctrl+；调出参考线 把页面横向分成12栏（这是行业标准啦） 两边留白80px，中间区域平均分配
这样做出来的界面，那叫一个舒服~
三、配色方案选择
选色这件事可把好多小伙伴愁坏了。小智教你一招：
先选一个主色调（比如#2196F3这种蓝色） 用PS的“色彩和色调”面板（在窗口菜单里） 选择“单色”，瞬间就能生成一套完美配色！
记住一点：主色调不要超过3个，强调色不要超过2个。不然你的页面就像七彩棒棒糖一样花哨啦！
四、质感细节处理
想让界面看起来高端大气，关键在细节：
阴影效果：
* 右键图层-混合选项-投影
* 距离设为2px
* 大小设为4px
* 不透明度调到40%
这样的阴影才不会看起来太重！ 2. 渐变背景：
* 新建图层按Shift+F5填充
* 选择渐变工具
* 角度45度
* 透明度设置30%
就能做出特别舒服的底色。
五、字体处理
排版可是大有讲究的：
标题：
* 字号24-32px
* 行高1.5倍
* 字间距+50
正文：
* 字号14-16px
* 行高1.8倍
* 段落间距20px
小技巧：中文正文最好用微软雅黑，英文用Roboto，这样搭配起来超级专业！
六、响应式布局准备
现在的网页必须要考虑手机端，所以我们要：
新建3个画板：
* 电脑端 1920px
* 平板端 768px
* 手机端 375px
快速转换技巧：
* 选中要调整的元素
* 按住Alt拖动控制点
* 自动等比例缩放
这样三端布局分分钟搞定！
最后的小建议
多用图层组整理元素 养成给图层命名的好习惯 常用样式可以存成样式预设 多把玩混合模式，能做出意想不到的效果
優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊、品質(zhì)服務(wù)" 的經(jīng)營理念，誠信務(wù)實(shí)的服務(wù)了近萬家客戶，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動端應(yīng)用（手機(jī)站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號：
專屬顧問
