如何制作网站图标?

平面设计 adobe-photoshop adobe-illustrator 网站图标
2022-02-09 09:20:52

这是我正在使用的徽标,也是我试图将其转换为网站图标的 PSA 部分。

我正在尝试为我正在构建的网站制作带有徽标第一部分 (PSA) 的网站图标,但我很难过怎么做?当谈到 Photoshop cc 和 Illustrator cc 时,我还是个新手,所以任何帮助都会很棒。

3个回答

在 Photoshop 中:

首先使用裁剪工具将其裁剪成只有圆形的正方形。不要扭曲它以使其成为一个完美的圆形 - 将其保留为椭圆形,并在两侧留出额外的空间。(确保保存原始作品的副本)

然后使用魔棒选择删除所有白色 - 使其透明(如果你不这样做,它最终会在浏览器上看起来很奇怪(因为大多数浏览器颜色不是白色)

在此处输入图像描述

请注意,将白色留在内部并让外部透明可能看起来更好 - 这取决于您。

在此处输入图像描述

然后将图像大小调整为 16x16px 或更高,在 Stack Overflow 上阅读更多相关信息。.

将文件另存为 png(以保持透明度 - jpg 和其他格式不会这样做)


然后,您可以使用在线工具将您的 png 转换为 favicon(一些流行的简单网站建设者会让您将其作为 png 放入)

值得注意的是,一些网站创建工具只允许您上传 favicon 的高分辨率 png,它们会为您进行缩放 - 您只需上传图像,系统会处理其余的事情。

不要自己做,尤其是当您不确定如何进行时。为了完全兼容(因此有用),必须以各种格式和大小创建网站图标。

一旦成功裁剪图像(使用其他答案之一),我建议使用在线解决方案/生成器,例如https://realfavicongenerator.net/ 。另一种选择是遵循http://www.emergeinteractive.com/insights/detail/The-Essentials-of-FavIcons-in-2017上的(长,包容,使用 Photoshop)教程

我在另一个答案中提供了更多面向网站管理员的技术细节

使用 Photoshop 中的裁剪工具,根据需要设置高度和宽度,通常为 16x16、50x50 或 150x150。这将创建裁剪正方形 在此处输入图像描述

向右拖动图像,使裁剪方块适合左侧 在此处输入图像描述

裁剪图像并保存为 PNG 在此处输入图像描述

完毕!