比方说,我有一个网站的标志,大小为 120x50px。
Favicon 应该是 16x16px 以被主流浏览器支持。
怎样才能对一些图像进行返工,使其缩小近 10 倍,并保存基本外观?
比方说,我有一个网站的标志,大小为 120x50px。
Favicon 应该是 16x16px 以被主流浏览器支持。
怎样才能对一些图像进行返工,使其缩小近 10 倍,并保存基本外观?
如前所述,您需要以正确的大小重新绘制图标。
我发现这在 Photoshop 中有点困难,所以我所做的就是以全尺寸导出图像,然后使用favicon.cc生成器手动调整像素。您可以在任何程序中执行此操作,但我发现此工具非常有用。
如果您查看任何好的网站,您会发现它们favicon
不是他们的徽标,它是一个很小的版本,足以与该网站看起来很相似。
我发现的最简单的方法是在网站图标中一致地传达品牌信息,使用两种最显眼的颜色或徽标的配色方案和公司名称的第一个字母。在一个单一颜色的简单背景下,你可以有两个字母,比如 SE GD favicon。
回应您的评论:
问题是徽标上有火车,火车不可能用 [a] 正方形表示,并且试图在 16x16 内表示它会使 [the] 主要元素太小而没有任何意义
没有更多信息,我只能推测;但考虑一下:
看看火车,找出定义它性格的主要特征。尤其是正面的造型,滚滚浓烟。使用这种形状即使是 16px x 16px 也能传达火车。
我并不是说要这样做,但我确信您可以从徽标中提取一些特征来以很小的尺寸表示它。
只是为了证明可以通过很少的返工和自动过程来制作一个网站图标,这里有一个徽章,由我关联的一个小组使用。这是一颗心和一朵百合花。
为了创建图标,我删除了百合花中的细线,并加厚了它穿过心脏顶部的“轮廓”线。它可能有点厚,但我在图像周围保留了一个白色轮廓,它适用于浏览器标签栏中的彩色背景。
然后我使用 Paint Shop Pro 将 150x150 图像粘贴到 16x16 选择中(大概使用其“智能尺寸”算法,无论如何),将其缩小为 16x16,最终得到以下结果:
这种方法适用于简单的图像,而我的图像是单色且相当粗体。它对复杂的图像尽其所能,并且结果可以使用。并不总是需要单独计算 256 个像素中的每一个。
要使其适用于更复杂的图像,您需要简化该图像。这可能与在主要房屋颜色中使用轮廓一样基本。
一般来说,你不能“返工”任何东西。最好的方法是通过专门绘制每个像素来重新创建收藏图标。试图将任何图像缩小到 16x16 像素的图像本质上会导致无法识别的斑点。