本篇内容纯前端小白向，仅供学习记录交流使用
第一部分：Logo 制作
（以下内容参考B站Pink老师前端学习教程）
要求
为了满足网站的SEO优化要求，我们需要做一个让搜索引擎认为的"好logo"。
怎么做？
-
logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要
-
h1里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可
-
为了搜索引擎收录我们，我们链接里面要放文字(网站名称)，但是文字不要显示出来
-
方法1：text-indent移到盒子外面( text-indent:-9999X)，然后 overflow: hidden,淘宝的做法
-
方法2：直接给 font-size:0；就看不到文字了，京东的做法。
-
-
最后给链接个 title属性，这样鼠标放到logo上就可以看到提示文字了。
Logo: 品优购
过程
Html：创建一个大盒子，放一个小盒子，在小盒子里放一个 <h1><h1>，再插入一个<a>,并且写上链接与文字。
<div class="header"> <!--创建一个大盒子-->
<!-- logo 制作 -->
<div class="logo"> <!--创建一个小盒子-->
<h1>
<a href="index.html" title="品优购商城">品优购商城</a>
<!--title: 实现鼠标放到logo上就可以看到提示文字-->
</h1>
</div>
</div>
CSS ：
/*给div设定了大小*/
.header {
position: relative; /*父级的header盒子,"子绝父相"*/
width: 1200px;
height: 63px;
}
/*在header的大盒子里创建一个logo的小盒子*/
.logo {
position: absolute; /*子级的logo盒子,"子绝父相"*/
top: 27px;
width: 171px;
height: 61px;
}
由于整个logo都是链接（<a>）且需要添加图片，此处<a>的CSS设置如下：
.logo a {
display: block; /*将行元素转化为块元素，以便赋给高度*/
width: 171px; /*宽高和背景图片一致*/
height: 61px;
/*font-size: 0px;*/ /*京东的做法，将文字大小设置为0，达到不显示文字的作用*/
text-indent: -9999px; /*淘宝的做法*/
overflow: hidden;
background-image: url(../images/logo.png); /插入背景图
}
以上整个品优购logo制作完成。
第二部分：PS切图
PS切图方式主要以下3种:
-
图层切图
-
切片切图
-
PS插件切图
方法一：图层切图：只需要将选择一个图层导出图片即可。
方法二：切片切图
-
选择切片工具，手动划出想要导出的图片（若要取消切片，选中按delete即可）
-
导出选中的图片
-
设置图片的格式然后导出即可。Ps.如果想要透明的图片，格式为PNG，且需要把背景图的小眼睛关闭。
方法三：PS插件切图😄：强烈推荐，非常便捷
选择想要导出的图层（或者直接拉一个选区，如下），然后Web => 选择导出文件夹地址 => 导出
注意：本插件一般只能是正版的PS才可以安装，不过：
当你下载好某个"cutterman"之后，安装并记住安装地址，打开PS，文件——脚本——浏览，然后添加 init.jsx,
重新启动PS，点击窗口——扩展功能即可看到 cutterman。
然后注册一个账号，可使用该插件。
以上就是前端静态网页制作中，关于logo制作以及PS切图的简单介绍。
如有建议，不吝赐教。