（返回课程列表）
Table of Contents
在上一节中，我们已经装好了网站主题和模板。
接下来，我们需要一点点把自己的内容同步上去，使用真实的产品/公司资料，替换掉默认的填充内容。
本节，先来把网站图标 和 logo 替换下。
如果你不想看文字，可以直接点视频：
1. Favicon 制作与替换
Favicon 是网站图标的学名，它就是我们访问网站时，标签页上面的这个小图标：
如上图所示，当我们什么都不做的时候，网站标签页上默认是 WordPress 程序的蓝色 logo（如下图所示），这不仅不好看，还会误导用户，所以要替换成自己的品牌元素：
别小看这小东西，稍微讲究一点的图标，既有尺寸要求，也有布局要求。像黄师傅随便拿自己的头像来放在自己的网站上，就很难看（其实只是我个人不怎么讲究罢了）。
1.1 Favicon 的规格特点
根据维基百科，这个小图标的最佳尺寸不固定，有很多：
同时，因为 iOS 那边的尺寸要求又比较大，所以有些主题干脆就要我们上传 256 x 256px 的，甚至 512 x 512px 的。
另外，图片尺寸虽然是正方形，但有很多小图标，都是做的透明背景，从而隐去了边角（例如谷歌等），这样更凸显主题：
如上图所示，要想让 Favicon 图标的边角“隐身”，就需要使用透明背景。
所以，我们等下制作的规格就是：512 x 512 像素的透明背景 PNG 图片。
要制作它，最好是从现有的网站 Logo 里面一起弄，这样，就能保持一致性，自己也能省一点工序。
如上图所示，很多网站其实都把这个图标和 logo 做成了一套品牌元素。
所以，我们也直接从自己的 logo 里面提炼这个小图标。
如果你还没有网站 logo，也没有美工协助的，就跟黄师傅一起弄下。
1.2 制作 logo（准备提炼 Favicon）
制作 logo 有很多工具，我们既可以用传统在线工具（如下面的 Shopify 免费工具），也可以叫 AI 帮忙弄一个：
当然了，也别指望这种工具能做出来很讲究的东西，你要是比较在意质感，就还是找个设计师帮你弄下。
假设你也使用这个 logo 制作工具，输入自己的品牌名，还有一些风格倾向之后，平台会帮我们推荐一些结果。
黄师傅自己也是用它搞的，最终下载下来就是这个样子：
如上图所示，它给了一张横的，一张竖的，还有两张方形的，其中一张是透明背景（右二）。我个人反正不介意，丑点就丑点，能用就行了。
既然透明背景图已经有了，并且还是正方形，我们直接用它可不可以呢？
目前来看，有两个问题。第一，标签页上面显示的图标很小，但我们这张图下面还有文字，根本看不清（所以其他同行也都约定俗成不放文字，只放图标）。
第二，这张图片的尺寸是 1200 x 1200 像素的，不是我们之前考虑的 512 x 512:
如上图所示，我们把鼠标放在图片上面，就能看到它是 1200 x 1200 像素的，尺寸也达到了 45 kb, 你可能觉得这不算啥，但为了这个小小东西，每个页面都要牺牲 45 kb 的加载资源，就太划不来了。
所以，我们等下要把它稍微裁剪下。尺寸裁小之后，占用空间大小也会跟着降下来。
1.3 裁剪 Favicon
如果你电脑里面没有图片工具，也不用另外装了，直接使用在线的 PS, 打开 photopea.com 就可以使用了：
点击中间的 “Start using Photopea” 按钮，就来到了它的主界面。你没有用过 PS 也没关系，跟着我依葫芦画瓢就行，很简单的。
我们首先把那张透明背景 PNG 图片从文件夹里面拖进来：
拖进来之后，你应该也能看到周边的背景是有灰白格子框的（如下图所示）。新手朋友看到这样不要惊讶，这是正常的，只是为了体现透明特性，不会显示在最终图片上：
接着，我们点击左边工具栏的裁剪图标 (Crop Tool):
点击选择了裁剪之后，我们还要约定一下裁剪规格。在顶部的裁剪选项里面，把默认的 Free（即自由裁剪），设置成 Fixed Size（即固定尺寸）：
既然设置了固定尺寸裁剪，那就还要在右边的 W（即 Weight 宽度）与 H（即 Height 高度）处，各填上 512，单位（像素）可以省略：
填好裁剪的固定尺寸之后，就在图片上拉动裁剪预览框，直到覆盖合适的位置：
如上图所示，像我这个拉到这样子就差不多了。之前说过，下面的字不要。感觉可以之后，回车确定实施裁剪：
如上图所示，这样就裁剪完成了。之后是导出这张图片。
现在，依次点击左上角菜单中的 “File（文件）” -> “Export as （导出为）” -> “PNG”：
如上图所示，选好之后，会出来一个弹框，我们保持默认，啥也不改，直接点击 “Save（保存）”：
点完保存，浏览器就开始下载这张图片了。
下好后，我们看到，比起原图，裁剪之后，主体明显凸显了很多：
另外，它的占用空间大小，也从之前的 40 多 KB，降低到了 20 多 KB (如下图所示)。
但这其实还不太够（23.7 KB 还是大了点），我们上传之前，可以继续使用 Squoosh 这样的工具压缩一下，或者转换成 WebP 格式。
还有一个视频中的细节，就是这张图片的命名我微调了下（加了 cropped 的后缀）。但这其实只是黄师傅的强迫症——图片的命名几乎不影响后面的优化，你自己分得清就行。
1.4 上传 Favicon
接着，我们就把这张裁好的 Favicon 图片传到网站上去。
回到网站后台，在左侧菜单中选择 “Appearance（外观）” -> “Customize （自定义）”：
点进来之后，选择 Site Identity（网站标识）：
注意，你可能找不到这个选项，甚至前面的 Customize 都找不到。这是因为主题模板可能存在不同。如果找不到，把你的主题告诉 AI，问它在哪里改 Favicon 就行了。
点开上面的 Side Identity 之后，就看到了 Select Site Icon （选择网站图标）按钮：
点它，然后就来到了图片选择界面：
如上图所示，默认是要在一个叫做 “Media Library（即图片库）” 的选项卡选择。这个图片库，是我们上传到网站上所有图片/视频的仓库。黄师傅录视频之前传过一次，所以在这里面能看到目标图片。但你们第一次做，这里是没有的。
所以，我们需要点左边的 “Upload files（即上传文件）” 来进行上传，如上图中蓝圈所示。点击之后，选择我们刚才处理好的这张图。
上传过去之后，预览面板的右侧，有一个替代文本 (Alt Text) 需要根据图片内容填一下，这是搜索引擎以及辅助设备了解该图片的主要方式：
如上图所示，填好 alt 替代文本之后，点击右下角的 “Select”（即“选择”）按钮，我们的网站图标就出来了：
如上图所示，预览差不多的话，就直接点上面的蓝色发布按钮（即 “Publish”）了。如果还是不满意，就重新裁剪了再上传。
发布完成之后，回来前台刷新（Ctrl + F5 深度刷新）：
如上图所示，这回，前台与后台的图标都换好了。不难想象，我们要是没有做透明背景，或保留了文字，这个图标就会更难看。
至此，网站图标 Favicon 就已经制作上传完毕了。
2. 整站 Logo 制作与替换
如果你跟黄师傅选了差不多的主题，那 Logo 有个难点，就是首页的顶部导航条是透明背景的。
这样的话，包括 Logo 在内的所有文字都是白色，但点进去任何一个内页，顶部导航条又成了不透明的，此时，又恢复了白纸黑字状态：
如上二图所示，首页的 logo 和其他页面不一样，所以我们要准备两套 图，对应这里的一黑一白。
另外，不难看出，图片最好也是透明背景，要不然，首页周围就会有难看的边框。
所以，我们就来准备下这两套图。
2.1 重新编排 logo 图
但摆在黄师傅面前的还有一道难题（希望你没有）——我之前用工具自动制作的 logo，全部是这种上下结构，导致出来的图都是方方正正的：
但通过常识也知道，顶部导航是一个长条，所以我们的 logo 也最好是长方形的。
所以，这里我就还需要裁剪编排一下，思路很简单，就是想办法把这个图标和下面的 “HSF Dress” 文字重新编排成左右形式（而不是现在这种上下形式）的。
接下来，我们就要：
- 裁剪出左半边图案；
- 裁剪出右半边文字；
- 左右拼接；
现在，重新把得到的这一张 png 透明背景图片拖进在线 ps 工具 photopea：
拖进来之后，我们首先裁剪顶部的图案。
还是点击左侧栏的裁剪工具，使用固定尺寸裁剪选项，但尺寸要求不用那么严格。黄师傅视频中使用的是 360 x 120，你可以大一点（如 600 x 200），或者小一点（如 300 x 100）：
填好长宽尺寸之后，和之前一样，拖动裁剪预览框，感觉差不多了就停下：
如上图所示，因为要给右边的文字留空间，所以裁剪框可以往右边溢出画布。另外，左边的图案最好顶住边框，要不然影响后面的对齐。
差不多之后，回车确定：
这样，就得到了 logo 的左半部分。先别急着保存，我们还要继续做右边的图片（从原图中裁剪右边的半部分文字）。
接着，把刚才的原图再拖进来一次：
如上图所示，拖到标签栏中靠近刚才左半张的位置，放手。
然后还是选择刚才的裁剪选项：
如上图所示，我们现在第二次裁剪的尺寸选项还是和第一次保持一致。
再拉动裁剪框到合适的位置：
如上图所示，边框可以稍微留一点间距出来，后面拼接的时候就灵活一点。
感觉差不多之后，回车确定：
这样，就得到了右半边的文字。
接着，我们要把左右两边拼起来。点击选择左侧栏的移动工具（Move Tool）：
点选这个移动工具之后，再把右半边的文字往左上角（截图文字有笔误）拖动：
一直拖动到左半边的标签页上面，悬浮 3 秒：
如上图所示，拖到左半边图片的标签页上面，悬浮等待三秒。然后就切换过去了。
自动切到左边之后，接着往右下角拖到左半边图上：
如上图所示，拖到差不多位置就可以放手了。这样，我们就把左右两边拼到了一起。
拖动微调到差不多之后，我们就点击“File（文件）”->”Export as（导出）”，然后选择 PNG，准备导出下载：
如上图所示，其实黄师傅这样直接导出是不太规范的，但我们随便搞搞，直接下载就算了。
保存选项还是跟之前一样，啥也不改：
点 save，就下载到了我们拼接好的这张透明背景原色 logo:
如前所述，我们要做两套 logo 图，还剩下一套白色的，就基于刚才做好的这一套原色图来继续弄。
我们先关掉刚才裁剪出来的两张素材图（其实你可以保存下来）：
然后，再把刚才完成的原色 logo 又拖进来：
我们编辑它的思路也简单粗暴，直接把上面有颜色的地方全部喷涂成白色就完了。
我们先选中目标区域。按住 Ctrl 键不动，然后点击右边的图层：
这样，就智能选中了图片中所有不透明区域（即主体图文）：
如上图所示，右边的文字部分（虚线）框选的很准，但左边的图片上部还有少量区域没有选进去。
所以，我们放大操作下。接着按住 Ctrl 键，然后按右边小键盘中的 “+” 号，把图片放大（需要多按几次 “+” 号）：
如上图所示，放大图片之后，我们要点击 “Rectangle Select”，即矩形选框工具，准备手动追加选区范围。
接着，一边按住 Shift 键不动，一边拖动框选之前漏掉的图片区域（即顶部半截）：
如上图所示，一定要按住 Shift 键再拖（Shift 这里表示追加），要不然，等你选中这上面的时候，下面的主体选框虚线又消失了（如果消失了，需要撤回，或者重做）。
也不用拖得太准，差不多之后，放手就是这样子：
如上图所示，边缘还没有拖好，所以，我们需要继续把图案放大，再进行微调。
继续按 Ctrl 加 “+” 号（多按几次 + 键）放大图片。之后，按住空格键，使用鼠标拖动图片到刚才的局部位置。我们就能看得更清楚了：
如上图所示，黄师傅刚才拖的时候手一抖，就多了这两个缺口。你的框框也许是超过了边线一些，这都很正常。
接着，如果你的跟我一样，是缺口，那就还是跟之前一样，在矩形选框状态下，按住 Shift，追加拖动，补齐它。
但你如果是之前拖多了，就需要按住 Alt 拖动框选多余的区域，Alt 这里的功能和 Shift 刚好相反，是减去选框。
如上图所示，我视频里面演示的是继续 Shift 拖动追加，但如前所述，你如果想要减去某个多余的部分，就应该 Alt 拖动减去。
修修补补完成之后，再按住 Ctrl 加 “-” 号（多按几次减号），把图片缩小，再预览下：
如上图所示，这次，选区刚好把主体图片框住了。
然后，我们需要对选中的区域删掉内容，然后再填充白色。
接着，按一下 Delete 键，删除选区内部内容：
如上图所示，按下 Delete 键之后，中间区域也成了透明的，但是选区框线还在。
接着，我们来填充白色。右键点击左侧工具栏中的渐变工具（Gradient Tool），右键展开它，再点选油漆桶工具 (Paint Bucket Tool)：
如上图所示，我们最终需要使用红圈中的油漆桶工具来进行白色填充。有些版本的侧栏上直接就是 Paint Bucket Tool, 所以不用展开。
选择了油漆桶工具之后，点击前景色块，然后指定白色——在 16 进制色号一栏填上六个 f（”FFFFFF”是白色）：
如上图所示，填好白色色号，再点 OK 确定。确定之后，前景色块也变成了我们刚选择的颜色：
接着，就开始多次点击选区内部，实施喷涂：
如上图所示，我们多点几次选区内部，一直到全部的主体部分变白为止。如果不放心，可以继续按 Ctrl 加 “+” 号放大图片，针对性喷涂没有纯白的像素点：
感觉差不多之后，再缩小（Ctrl + “-” 号）概览：
如上图所示，我们还能看到外侧有一些毛边。黄师傅再视频里面说不管了，是因为如果把它缩小到正常 logo 大小，也看不出来啥了。
不过如果你有强迫症，想把毛边修干净点，可以继续反选，然后删除。这算是家庭作业，你就尝试自己使用 AI 帮助完成吧。
所以，做到这里，我们就又直接导出为 PNG 了：
后面的到处选项和之前一样，直接 Save 下载。
至此，我们终于集齐了这两套 logo：
得到所有 logo 文件之后，就开始上传了。
2.2 上传 logo 图
上传的话，还是回来之前的 Favicon 网站图标界面，点击后退（如下图所示）。如果你已经关掉了这个界面，就重新进来 “Customize”（外观） -> “Apperance”（自定义）：
接着，选择 “Header”（即页头）菜单（如果你找不到这个菜单，可能是主题/模板构建有区别，可以尝试点击类似名字的菜单，或者问下 AI）：
点进来 Header 菜单之后，我们能看到有个 “Site Title & Logo” （即网站标题与 Logo）的选项（你的主题可能也不叫这个名字，实在找不到就问问 AI）：
点 “Site Title & Logo” 进去之后，就看到了一个 logo 图案：
如上图所示，因为这张图是黑色的，所以推断出它是用于内页。所以，我们点击下面的蓝色替换按钮，把它更换成刚做好的原色 logo 图：
如上图所示，也是和之前传 Favicon 网站图标一样，先切换到左边的 upload files，即上传文件面板，然后再选择原色 logo 图。
传好之后，在选择面板上填一下该图片的替代文本(alt text):
如上图所示，我们随便写上品牌名，然后加上 “logo” 后缀， 都要比完全不写好得多。
写好之后，右下角确定选择。接下来可能有个裁剪选项，我们尺寸大概没啥问题的话，直接点击跳过即可。
传完之后，就是这样子：
如上图所示，我们的彩色原图上传就位之后，发现右上角首页的 logo 预览也跟着变成了白色，但这里应该是模板的bug（或者是自带了图片处理规则，只是我还没注意到）。
无论如何，我们先点一下顶部的发布 (publish) 按钮，先看一下：
点击发布之后，再来网站前台刷新一下。此时发现首页还是之前白色的默认填充 logo（这很正常，因为我们还没有上传第二套白色图）：
接着，我们随便点一个内页进去，再看看里面的原色 logo：
如上图红圈中所示，这回我们发现，刚才传的彩色 logo 在内页已经生效了。
但你多浏览几个页面之后，可能会发现，内页里面的 logo 颜色是黑色的，就像这样：
如上图所示，如果你不喜欢这种黑色遮罩效果，就回去刚才的 logo 上传界面，然后切换到 “Design”（即设计）面板，然后找到 Logo Color（即 logo 颜色），清除一下预设即可。
黄师傅反倒觉得黑色也蛮好看，就不处理了。
接着，我们完成首页白色 logo 的上传，还是回来上传界面，我们看到上面有一块小字：
如上图所示，如果你的首页顶部导航条也是透明设计，这里应该会出来一块小字，提醒我们，如果想要更改透明页头，需要点下面的链接前往（而不是在这里直接改）。
于是，我们点击进去：
如上图所示，点进来之后，我们直接点黄圈所示的按钮上传白色 logo 图就好了。如果你有特殊需求，比如为手机和桌面端分开设置 logo，可以在红圈处单独设置。
传图的话，也还是切换到 Upload files（即上传文件）面板，再选图片：
传上去之后，还要填一下 ALT 替代文本：
我们一开始就要养成每传一张图，就立即填写 alt 文本的习惯。不要嫌麻烦，后面优化的成效，往往就是这些点滴工作的累积。
传好之后，预览区域可能看不出来，因为纯白加透明，所以只有一片白色。没关系，我们直接点发布：
发布完之后，再刷新（Ctrl + F5）首页看看：
如上图所示，现在首页的 logo 也正常同步了。
至此，页面上的 Favicon 网站图标和各页 logo 都做好了。
Leave a Reply