最近想捣鼓个电影推荐网站,顺手就把折腾过程记下来了。工具这块真心踩了不少坑,贵价软件买不起,全用免费货凑齐的。
脑子一热开搞
大清早刷手机看到个酷炫的电影网站,拍大腿决定自己也整一个。打开电脑就懵了——这玩意儿该从哪儿下手?搜了堆教程,发现得先弄这些:画网页草稿、做海报动效、压视频体积、搭前端界面。
重点来了:兜里半个铜板都不想花。立马翻出收藏夹里吃灰的免费工具,挨个开整。
草稿阶段差点劝退
本想用纸笔画布局,结果手残画得跟狗啃似的。突然想起去年下过的桌面白板软件,打开直接拖预设框框:
- 顶部导航条塞搜索框+分类菜单
- 中间大横幅搞电影推荐
- 底下用瀑布流堆海报墙
五分钟排得明明白白,还能导出PNG存参考图。这步要是卡住我估计当场就放弃了。
动态海报愁死人
想学人家搞悬停放大效果,结果美工软件打开就傻眼。图层概念都整不明白,干脆用网页神器糊弄:
- 扒豆瓣电影页偷海报图
- 扔进模板工具自动加阴影边框
- 导出时勾选悬停放大动效
生成代码直接复制粘贴,鼠标移上去果然会弹,虽然效果有点生硬...管用就行!
视频压得像马赛克
首页想插预告片,4K原片传上去肯定卡爆。试了三款压缩软件:
- A软件压完色彩失真
- B软件压完音频不同步
- C软件终于正常但水印超大
发现视频剪辑软件自带的导出功能,码率调到8Mbps,720P画质勉强能看,关键没水印!
拼界面差点气哭
把海报图和视频塞网页时全乱套了!改代码改到眼冒金星:
崩溃实录:
- 海报墙总自动换行
- 视频把底部内容顶飞
- 手机上看排版全崩
直接改用模块化搭建工具,像搭积木拖组件:
- 选个电影主题模板
- 海报区右键选瀑布流模式
- 视频框尺寸锁定50%宽度
- 全局开启自适应开关
虽然特效简陋了点,起码电脑手机都能看了。
血泪总结
折腾两天得出真谛:免费工具就是拆东墙补西墙
推荐给不想花钱的冤种们:
- 原型:桌面白板+截图软件
- 图片:模板工具批处理
- 视频:剪辑软件自带压缩
- 前端:模块化搭建省命
成品粗糙得像山寨货,但没花半毛钱!凌晨三点终于搞定时,家里猫都睡醒两回了。
(搞完才发现忘做搜索功能...算了下次再折腾)