昨天下午收拾旧硬盘，翻到十年前做的企业官网psd源文件，差点没笑背过气。这玩意儿现在拿出来看，简直就像用脚丫子抠出来的。一上头决定重做博客页面，正好把网页美工那点事捋一遍。

启动阶段就翻车

刚开始特别自信，想着半小时搞定排版。结果刚打开编辑器就懵圈——准备用的素材图全是竖版手机截图，横过来插进网页里活像在裤衩上缝燕尾服。赶紧扒拉以前收藏的网页设计参考站，发现人家早用上宽屏素材了。得，只能临时去设计平台搜「科技感网页模板」截屏，光这个就耗掉四十多分钟。

• 建个叫「偷师素材」的文件夹
• 浏览器截图直接拖进去
• 用系统自带的画图改文件名
• 什么「01_蓝色导航栏」、「02_卡片阴影」乱标一气

上手就被颜色抽耳光

参考图堆满半个屏幕，突然发现所有图都带深蓝底色。我这老博客主题偏偏是米白色调，直接换深蓝背景的话，导航栏文字立刻变身隐形墨水。打开调色板瞎折腾：

1. 原想搞渐变蓝紫配土豪金文字

2. 预览时差点闪瞎眼

3. 换灰蓝底+橘色按钮

4. 同事路过说像消防报警器

抄了参考图里的藏青当主色，把标题文字换成奶白色才顺眼点。调色过程里咖啡渍还溅到数位板上，现在ctrl+z键黏得跟嚼过的口香糖似的。

素材处理变打地鼠

最要命的是产品展示位。原本打算放四张轮播图，结果产品图尺寸乱七八糟：

• A图带超大水印
• B图在阴影里黑成煤球
• C图拍歪了还带着手指头
• D图背景居然是宾馆床单

气得我直接开了在线图片编辑器，暴力处理手段包括：

▷ 用裁剪把手指头斩首

▷ 拉高亮度让阴影区曝光

▷ 滤镜调成冷色调盖住床单纹路

▷ 实在搞不定的用毛玻璃效果糊弄

本来想加个精致边框，结果手滑点成荧光绿描边，整得跟九十年代婚纱照似的，赶紧撤回保平安。

收尾时遭遇现世报

憋到晚上九点半终于调顺眼，上传时发现忘了适配手机屏。在电脑上是端庄大小姐，到手机里变成疯婆子——导航栏挤成俄罗斯方块，按钮叠在标题上玩叠罗汉。只能咬着牙进响应式设置：

1. 把三栏排版改成单栏瀑布流

2. 字体缩水成蚂蚁腿尺寸

3. 图片宽度拖到100%

4. 侧边栏挪到底部当脚垫

手机预览时大拇指划了三屏才到底，同事探头说：「你这页面长得够解闷的，划着划着都忘记要干啥了」。

今天早上再看成品，导航栏hover效果像接触不良的灯泡，产品图锐化过度能看见马赛克毛边。不过嘛..比昨天那锅粥强点，至少能拿出来晾晾——虽然晾的是洗破洞的袜子。