前两天有粉丝私信问我psd设计咋入门，正好我上周刚帮朋友公司整了个官网首页，今儿就把实操过程从头捋一遍。
零基础踩坑实录
刚开始连psd是啥玩意儿都不知道，以为就是个高级图片格式。跑去问度娘才知道这玩意儿是网页设计稿的源文件，像搭积木似的把所有页面元素分层堆着。
抖着手安装了Photoshop，打开直接懵圈：
- 左边工具栏像兵器库——文字工具像个"T"字
- 右边图层面板叠得比煎饼还厚
- 中间画布白得晃眼
血泪总结的五个关键点
1. 尺寸要掐准命门
第一次建画布随手填了1920x1080，结果被程序员骂惨。原来得揪着设计总监问清三件事：用户屏幕最小多大？内容区域多宽？要不要做手机适配？定了1440px的宽度，左右留白自适应。
2. 图层命名比快递单还重要
第三天发现图层堆了二百多层：
- 给LOGO层改名叫"顶部_狗头标志"
- 按钮层写成"首页_紫色按钮"
- 文字层标上"广告语_20号微软雅黑"
改完顿时神清气爽，感觉能多活五年。
3. 切图像做外科手术
切导航栏图标时发现个坑：
- 用切片工具像切豆腐块
- 导出时选"存储为Web所用格式"
- 必须勾上"透明背景"的PNG-24
手抖没勾透明选项，图标直接带白底，前端小哥气得给我发了二十个刀片表情。
4. 间距标记得拿尺子量
有次偷懒没标文字间距，前端凭感觉调的：
- 标题离副标题差15px愣写成20px
- 按钮间距宽得像隔着银河
- 行距挤得文字快叠罗汉
返工时被要求用标尺工具挨个量出像素值，写在PSD备注里。
5. 动效得画火柴人示意图
下拉菜单想做展开动画，光口头说"要丝滑"结果做成弹簧跳。后来在画布旁边另建个动画帧图层：
- 第一帧画菜单闭合状态
- 中间帧半透明过渡
- 一帧全展开画红箭头示意方向
前端看了直呼内行！
交稿时真香了
磨了十天的设计稿，导出一份psd压缩包扔给前端。隔天收到回复："图层分得真细！" 暗爽着把PSD文件塞进网盘备份，突然理解为什么老司机都说：没被切图逼疯过的设计不是好厨子！
