2 篇博文 含有标签「html」

不破不立​

上一个封面设计经历了4天开发，上线5天后，于今天正式退役了，我很不舍。特别是我参加了几次面试，闲聊的时候让对方看了下，反馈很不好。。。 虽然在技术方面它是成功的，但是在功能和体验方面真的很糟糕！所以我决定再做一个，纯净的，合格的封面。

从色彩出发​

抛开复杂的技术和呈现，人是视觉动物对色彩特别敏感，所以此次我打算使用颜色传达信息。

Pub\生啤酒\小麦\啤酒花​

• Pub vs. Bar
  • Pub
    • 英式酒吧（pub，是public house的缩写）是一种主要盛行在英国、爱尔兰、加拿大、澳大利亚、新西兰的酒吧形式。在许多地区，特别是在乡村，英式酒吧是当地社交活动的中心。塞缪尔·皮普斯曾形容英式酒吧是英格兰的心脏。英式酒吧的历史起源于罗马时期的酒馆。现在英国各地拥有超过50000处英式酒吧。除了饮食之外，大多数英式酒吧也提供游戏等娱乐服务。
    • 向公众开放，没有会员资格或居住权
    • 提供生啤酒或苹果酒，无需食用食物
    • 至少有一个室内区域未布局供用餐
    • 允许在酒吧购买饮料（即，不仅仅是餐桌服务）
    • 
  • Bar
    • 酒吧，也被称为沙龙，小酒馆或小房子，或者有时作为酒吧或俱乐部，是一个零售 商业场所，供应酒精饮料，如啤酒，葡萄酒，烈酒，鸡尾酒和其他饮料，如矿泉水和软饮料。
• 生啤酒
• 小麦
• 啤酒花

蓦然回首​

其实Pub(public house)一词已有共享、开放的意思，啤酒、小麦、啤酒花已经提供了丰富的视觉参照，真是。。。😅

反璞归真​

很快的，依靠这些信息，我建立了一个新的封面，看起来好很多。

戳这里看到底弄了个嘛？

乡巴佬​

一直对图形技术感兴趣，特别是涉及到平面、立体、色彩和光影的部分。之前也学过一些这方面的知识，工作用不上，更没有在实际项目中使用过零碎不成体系。

最近在为本页的首页封面犯难，只知道需要一个首页封面，先不说用什么技术呈现，就连该呈现什么效果我都没有概念。

启蒙​

在‘参观’了几个我常去的几个网站后，我确定了我的首页需要有 logo、标题。这两个元素我都有，直接套用 Infima 的 hero 组件，效果还行，能看，我不喜欢！看起来干巴巴的，不知道这个网站是做什么的，可能是动物保护相关的吧。。。

主题 Them​

为了在首页突出网站主题 Baku、Pub 和分享，我想了几个点子。

1. 描述性文字
   • 在副标题 logo 下面写了很长一段话描述网站——从开场白聊到貘——Tapir[英]——バク[日]再到啤酒。。。🤐
2. 主题相关的配色
   • 酒吧配色。。。雨林配色。。。😒
3. 制作一个场景
   • 制作一个场景——吧台、调酒、射灯。。。就像《VA-11 HALL-A:Cyberpunk Bartender Action》营造的氛围一样。😈
   • 
4. 改变 logo
   • logo 是一定要改的，但不是现在！

偏离主题​

当然不能直接照搬游戏的场景，我又搜索了不少吧台的图片，直到我看到了：

点错科技树​

制作一个这样的场景，我需要一面墙 一块招牌 一个Logo 一个标题 灯光 阴影 和一些 魔法

魔法​

• 在网页上呈现可视的元素一般有这些技术
  • HTML+css
  • img
  • embed
  • canvas
  • canvas-3d
  • SVG

最后我选择了 SVG，因为它方便，功能比纯 html 强大，还能直接嵌入 html。

布局​

Logo 和标题已经有了，布局的话就交给 svg 软件，墙就使用贴图。

灯光和阴影​

svg 支持光照滤镜，简单学习后就工作了，成稿后，看起来非常奇怪，所有东西都像是纸糊的，很不和谐。

光影进阶​

实现了所有的元素，但是怎么看起来还是不对？最后我把原因归结为光没有和其他元素作用。在研究了各路大神的例子后，我为场景加入了凹凸贴图，这样看起来光和场景内的元素就有了互动。

动画​

为了体现我的光影‘大法’，我为光源加了摇摆动画，并且只有在使用暗黑模式时才显示光照，最后场景在灯光下呈现一种浮雕效果

戳这里看效果

优化​

摇摆的光源在桌面设备运行很好。但在移动端，特别是在手机端运行时，非常吃配置，会引起卡顿甚至是手机发热，折中考虑我改为了一个单向的变亮动画

戳这里看效果

后知后觉​

虽然这次集齐了平面 立体 色彩 光影，也有了baku和pub元素。正如上一节的标题《偏离主题》，主题早就成了‘技术’而不是‘适合的主页封面’。