视觉创意 | 京东超市“美食长卷”案例分享
南京/动画师/13天前/340浏览
版权
视觉创意 | 京东超市“美食长卷”案例分享
京东超市联合《国家宝藏》IP,发起“京东上潮日”美食文化战役。核心视觉载体是一幅横跨殷商至明清、涵盖12个朝代的互动长卷——它既是H5小游戏的主场景,也将落地国家图书馆线下展出。
HMS视觉创意团队承接了整幅长卷的插画绘制与视觉统筹。从选人、定风、考据,到分层绘制、互动嵌入,再到色稿输出与H5适配,我们经历了一场长达数月的“视觉马拉松”。以下从前期、中期、后期三个阶段,还原这幅16米工笔长卷的诞生过程。
⭕️ 前期:选人、定调、溯源
项目启动时最核心的决策是:谁来执笔?长卷要求宋代工笔国画基调,融合朝代色彩与年轻化表达。评估五位插画师后,锁定央美中国画硕士韦秋紫为主笔,辅以历史顾问。
以西汉“胡椒调味”试稿,明确现代梗必须中国化——“撒盐哥”替换为李白举杯、祖冲之算油等本土符号。视觉风格定为“新国画风”——工笔为基,设色素雅,每朝代叠加代表色(汉赭红、唐暖金、宋青绿、元冷蓝);背景参考《千里江山图》,连绵山水串联朝代。
“可溯源”是硬性要求。每朝代建立视觉参考库:殷商用枸杞祭祀;西汉张骞带胡椒;魏晋油灯下吃饭配芝麻地,融入祖冲之;唐代陶工制桃酥、闺蜜饮蜜水,植入李白与牡丹;宋代文人斗茶;元代忽必烈吃奶冰;明代桂花糕与糖画;清代赏丈菊嗑瓜子。每朝代匹配代表性植物,构成文化密度。
画面布局采用前景—中景—远景三层结构,朝代过渡通过山体延续、人物串场、植物更替实现。最终12组画面,展出尺寸1600×57cm,手卷520×18cm。
⭕️ 中期:从面到点的工笔攻坚
进入中期绘制后,团队遵循“从面到点”的流程。先以大构图统领全局:以宋代山水为背景骨架,每朝代植入对应古画的建筑与人物风格,远景山脉参考《千里江山图》,在12画面中连绵不断。
然后逐层深入:人物五官匹配时代神韵(汉憨厚、唐丰腴、宋清瘦);衣纹参考出土实物;建筑添加阴影;远山近实远虚;最后加入时代植物前景,强化纵深。
绘制过程中,我们根据审核意见持续调整画面细节,例如:
殷商时期,我们在画面中补充了小舟、士兵和远处渔村,让祭祀活动更具生活气息。
西汉时期,在胡椒宴调整人物位置,去掉桌子改为每人面前餐盘,中间聚集多样食物,强化“众人围观”的叙事感;腊肉场景将人物前移,增加仪仗队,突出皇家巡游的偶然发现。
魏晋时期,在油灯晚餐基础上,增加军官催促榨油、小孩拿芝麻穗奔跑、军营帐篷等元素,让“植物油从照明到食用”的演变更加生动。
明朝时期,桂花糕将书斋缩小,增加桂花树、小贩递糕点的动作,去掉凉亭和山石,让故事更聚焦;糖画场景强化市集造景。
团队每日汇报美工进度,例如优化人脸与形体、添加清朝孩童与昭君侍女底色、完成水体铺地。同时预留互动接口——每朝代的国宝器物为可点击热区,留出高光引导与对话框位。
文案同步创作对话,采用古今混搭语气。这些对话既保留了历史知识点,又用“续命神器”“代购网红”“凡尔赛”等当代语汇拉近年轻用户。
H5开发同步推进,完成主框架(加载、主页、规则、长卷、互动、图鉴页面),并在10个工作日内前完成1-2个互动展示。
⭕️ 后期:色稿、UI、互动、落地
后期进入色稿与输出。此时严格按“宋代工笔设色”原则,淡墨分染结构,再层层罩染。
每朝代色板提前确定,整卷颜色从暖到冷再回温,形成“起承转合”的节奏。同时输出线上H5的RGB版和线下国图展出的CMYK打印版。画布精度不低于300dpi,图层保持分层。京东超市Logo与品牌元素有机植入画面(如汉代屏风、唐代陶罐标签、宋代茶具底托),不破坏古画氛围。
H5的UI设计同步完成。整套界面包括:加载页、主页、长卷页、互动页、图鉴页、结束页、海报页,每页延续“新国画风”,按钮与图标采用古风纹样但保持现代触控友好度。
12个互动场景覆盖干货、调味、腊肉、粮油、水饮、饼干、蜂蜜、茗茶、牛奶、糕点、糖果、坚果十二大品类,每个品类对应一个朝代、一种互动形式(如摇手机撒胡椒、按压倒油、吹气制冷、绘制糖画等)和一件国宝。用户完成互动后解锁文物讲解与美食故事,获得徽章,全部解锁后生成“5000年美食家”证书分享至社交平台,实现文化科普、品牌曝光与社交裂变的三重目标。
后期收尾阶段,对整卷进行统一光影调整与细节优化。对话气泡区、点击热区、高光引导区全部标注交付开发。同时为线下展出准备高精度喷绘文件,对接打样校色,确保印刷色彩与屏幕效果接近。
⭕️ 结语
从前期朝代考据,到中期工笔线条下的眼神流转,再到后期色稿与UI互动的层层落地——这幅美食长卷是文化考据与视觉创意的深度融合。HMS团队以画笔为媒,让殷商的枸杞祭、西汉的胡椒宴、唐代的桃酥炉、宋代的斗茶盏、元代的奶冰碗,在16米画幅中重新活了过来。
我们画的不是过去,而是过去从未离开的生活。当用户滑动屏幕、摇一摇手机、解锁国宝的那一刻,五千年的烟火气,便与当代的指尖产生了奇妙的共鸣。
0
举报
声明
收藏
分享
相关推荐
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
你可能喜欢
相关收藏夹
登录注册
推荐登录即可同步推荐记录哦
收藏登录即可加入我的收藏
评论登录即可评论想法
分享分享





















































































































