本篇內容純前端小白向，僅供學習記錄交流使用
第一部分：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切圖的簡單介紹。
如有建議，不吝賜教。