Photoshop icoFavicons是一种看起来很小但却很重要的在你的网站上推广你的品牌的方式。我们天生就是视觉型的,这意味着当我们浏览书签栏时,我们更容易认出Twitter上的小蓝鸟图标,或者Gmail上的红色信封,而不是他们的名字。你可以通过在Photoshop中制作ICO文件自己创建favicons。像快速入门指南Photoshop CC会教你关于图标和许多其他你甚至不知道Photoshop可以做的事情。

Having a unique favicon for your website will make it easier for consumers to locate your site on a busy bookmarks bar, or among a series of tabs, and also reassure them when they do make it to your page that they’re at the right place.

毫无疑问,Favicon对网站的任何人都是必不可少的。唯一的问题是,你是如何制作的?嗯,它始于Photoshop ICO文件格式。

什么是Favicon?

首先,什么是Favicon?短缺最喜欢的图标favicon是一个小的,通常是16×16的迷你logo,你可以在你的网站上使用。如果浏览器支持它,它会在地址栏,书签栏,标签,页面历史,浏览数据等地方显示favicon。

Udemy Photoshop ICO 01

Udemy.com的Favicon是具有首都U的小型绿色广场,如上所述在标签中显示。

Favicons保存为ICO文件,该文件格式以不同的大小保存多个图像以进行缩放目的。Windows中的所有图标,从桌面可执行文件开始菜单应用程序,保存为.ico文件扩展。

在Photoshop中创建ICO文件

Photoshop是一个伟大而灵活的图形编辑程序,用于创建自定义Favicons。但是,为了保存在Photoshop中的.ico文件扩展名下的文件,您必须下载单独的插件。幸运的是,这真的很容易。

步骤1—安装插件

您可以在一个名为电报。你要找的是ICO (Windows图标)格式Mac和Windows都可以使用。

要安装插件,首先确保Photoshop是关闭的。解压缩下载的文件,并将其放在插件>文件格式子文件夹中,在您指定的Adobe Photoshop位置。

Udemy Photoshop ICO 02

现在,当你打开Photoshop,创建一个新文件,点击Save As,并展开下拉菜单,ICO文件类型应该是一个选项。

步骤2 -在64×64文档中创建favicon

如果你是一个完全专业的,并能够在16×16像素的范围内工作,无论如何,去吧!但是如果您需要更多的空间来工作,您可以从64×64像素的文档开始,然后再缩小它。

Udemy Photoshop ICO 03

如果你知道如何在Photoshop中所有的图形设计和编辑功能,你应该没有问题设计一个基本的图标。如果您不知道任何调色板工具是如何工作的,那么您应该首先考虑阅读它!尝试这个Photoshop基本课程然后一旦你是一个平面设计大师,就会回到本教程!

Udemy Photoshop ICO 05

对于我们的示例Favicon,我们创建了一个简单的渐变背景和单个字母“a”来表示我们的“品牌”。

步骤3 -缩小到16×16

Udemy Photoshop ICO 09

现在是时候调整Favon大小,因此它与Web浏览器兼容。转到映像>上面的菜单中的图像尺寸,或按Alt + Ctrl + I,并将大小更改为16×16。确保像素,而不是英寸。

打开下拉菜单也很好,在那里它将编辑重新选中并选择双方锐利选项。这可确保图像在调整大小时不会模糊模糊,但如果仍然丢失过多的清晰度,则可以始终使用过滤器选项调整这些属性。

Udemy Photoshop ICO 06

如果完成,您应该看到您的64×64图标转换为16×16 Favicon!

Udemy Photoshop ICO 07

舍入你的Favicon的角落可以给它一个全新的外观。取决于您所需要的样式,可能值得学习如何做。

快速入门指南Photoshop CC展示如何使用Photoshop CC的新功能轻松进行。对于较旧版本,请考虑此掌握基础知识的Photoshop培训课程

第4步 - 将Favicon保存为ICO,或.ico文件类型

Udemy Photoshop ICO 10

这一步很简单。如果您正确安装了插件,现在是时候进入File > Save As,打开下拉菜单,选择ICO (Windows图标)(*.ICO)选择。点击Save按钮,应该会提示您有关图标格式的信息。

Udemy Photoshop ICO 11

建议您将文件保存为标准ICO,因为PNG (Vista)格式不太兼容。

击中OK后,您可能会感到困惑。为什么Photoshop应用程序仍然将我们的Favicon称为.PSD,当我们刚刚将其保存为ICO时?这是因为ICO文件在Photoshop中不可编辑。试着打开它,看看。一旦您将Favicon保存为ICO,ICO文件是最终的。如果要对其进行更改,则必须继续编辑.psd文件,直到您对最终产品满意,并再次将其保存为ICO。

在你的网站上使用ICO文件

所以你让你的美丽新的Favicon保存为ICO文件,但你真的如何让它在网站的书签栏和标签中显示出来的?

这个第一个规则很重要:你的ICO文件应该保存(或移动到)主页所在的目录,通常是根文件夹。如果将其保存在单独的图像目录或其他地方,则浏览器将无法找到它。

接下来,确保您在主页的HTML文档中的标记之间插入以下内容:

  

FaviConnameRee将用您的.ciCon文件的名称替换。默认情况下,浏览器将搜索“favicon.ico”,因此最好保存它。


你已经完成了!您为您的网站创建了一个独特的Favicon,并学会了如何使用它。有关Web和图形设计的更多提示,请通过UDEMY考虑以下一些课程:

Photoshop顶级课程

Adobe Photoshop CC-照片处理和修饰
CADCIM技术
4.4 (43)
Adobe Photoshop CC - Essentials培训课程
Daniel Walter Scott,教练总部
4.7 (14,881)
畅销书
Adobe Photoshop CC Essentials | Photoshop Masterclass
克里斯帕克
4.6 (1851)
畅销书
Photoshop CC初学者:Adobe Photoshop教程
Jeremy Deighan,概念课程
4.6 (511)
Adobe Photoshop cc 2020课程从A-Z初学者到大师
Mirza Muhammad Usman Baig
4.6 (72)
Adobe Photoshop CC - 高级培训课程
Daniel Walter Scott,教练总部
4.8 (4,789)
评价最高
绘画数字与Photoshop的力量
哈基福勒
4.6 (420)
使用Photoshop创建手绘角色动画
Pablo Stanley
4.8 (407)
一切Photoshop大师类
吉布森史密斯
4.5 (707)
终极Photoshop训练:从初学者到专业
克里斯蒂安·多鲁Barin
4.6 (20985)

更多Photoshop课程

ps学生也能学到

让你的团队。领导行业。

通过Udemy为Business获取组织的在线课程和数字学习工具库的订阅。

请求一个演示