# 七、切圖技巧

## Photoshop 下載流程

常用的切圖工具

* PS
* 以拉
* Sketch

注意事項

* 操作細節
  * 滾輪上下移動
  * ctrl 滾輪縮放
  * alt 滾輪左右移動
* 先使用 CC 試用版本
  * [https://www.adobe.com/tw/products/photoshop.html](https://www.adobe.com/tw/products/photoshop.html)
* 免費的 CS2 在新系統已失效 (自己去找別人備份的載點)
  * [\[免破解\] 免費正式版 Adobe CS2、Photoshop、InDesign、Illustrator、Acrobat Pro… 12 套正版軟體下載＋序號 – 【重灌狂人】](https://briian.com/9213/)
  * [(52) 如何免費獲得 PHOTOSHOP ?? (正版) - YouTube](https://www.youtube.com/watch?v=0fpfDlvDMXE)   &#x20;

課程需要用到的圖片

* [https://www.dropbox.com/sh/qf94qnvsohk7fjx/AABQOuSmi142NQ-t9jME1mLEa?dl=0](https://www.dropbox.com/sh/qf94qnvsohk7fjx/AABQOuSmi142NQ-t9jME1mLEa?dl=0)

## 7-41 備註

## 7.42 Photoshop 切圖流程

* 有範例網站 psd 檔要下載
* 左邊是工具列
* 右邊有圖層，按眼睛可切換圖層
* 左邊有個刀，第一列第三個，切片工具
  * 按住它，圈選起來
  * 「檔案」「儲存為網頁用」
  * 預設 PNG，先選 PNG24
  * 放到資料夾的 img 資料夾
* 指定的圖片，切片 / 全部使用者切片
* 改檔名
  * 「切片選取工具」
  * 滑鼠左鍵兩下，改名

## 7.43 background 在 html 元素上載入背景圖片，設定寬高

什麼時機會用到 html 的 img，什麼時候會用到 css 的 background-image?

```css
.box {
  background-image: url(../img/logo.png);
}
```

## 7.44 background-repeat：將圖片重複顯示，repeat-x

切問卷的區塊，先把其他文字和 input 區塊的眼睛按掉

```css
background-image: url(../img/bg.png);
background-repeat: repeat-x;
```

## 7.45 background-color：與背景圖片的混用

背景長條圖高度不告，用 PS 滴管工具得到最尾巴顏色，當作剩餘的背景顏色

```css
.box {
  background-image: url(../img/bg.png);
  background-repeat: repeat-x;
  background-color: #009872;
}
```

讓 logo 變成背景圖片

```css
.logo {
  background-image: url(../img/logo.png);
  background-repeat: no-repeat;
  background-color: #009872;
}
```

問答區老師的回覆

* background 是總和
* background-image 一定是會蓋在 background-color 上面的

```css
.box{
 background: url(../images/logo.png) #ff0000;
}

.box{
 background-image: url(../images/logo.png);
 background-color: #ff0000;
}
```

## 7.46 background-position：移動 background 的位置

可以用 right bottom，pixel，也可以用啪數

```css
.logo {
  width: 300px;
  height: 300px;
  background-image: url(../img/logo.png);
  background-repeat: no-repeat;
  background-color: pink;
  background-position: 50% 50%;
}
```

## 7.47 background 縮寫教學

建議擺放順序

* 背景圖片
* 要不要重複
* 背景顏色
* 背景圖的位置

```css
  background-image: url(../img/logo.png);
  background-repeat: no-repeat;
  background-color: pink;
  background-position: right bottom;

  background: url(../img/logo.png) no-repeat pink right bottom;
```

## 7.48 圖片取代文字技巧 - 以 logo 為例

```css
.header h1{
  float: left;
}

.header h1 a {
  background-image: url(../img/logo.png);
  background-repeat: no-repeat;
  width: 174px;
  height: 36px;

  /* 背景圖只出現一點，因為 a 預設是 inline。把它改成 block 讓背景圖完整 */
  display: block;

  /* 看不見文字的方式
  text-indent 讓文字縮到圖片後面
  overflow: hidden; 讓右側溢出的文字被隱藏
  white-space: nowrap; 讓文字變成一行 */

  text-indent: 101%;
  overflow: hidden;
  white-space: nowrap;

  /* 我自己想的方式 */
  /* color: rgba(255, 255, 255, 0%) */
}
```

同學的提問

* SEO 的文章有人說不用搞這種 hack，甚至不需要 h1
  * [H1 標籤使用圖片代替文字時, 該如何處理？＠WFU BLOG](https://www.wfublog.com/2016/03/h1-tag-image-replace-text-alt.html)
  * 老師意見
    * 老師認為實務觀察，這種 hack 不會降低 SEO
    * 有些電商頁面 h1 會放在新聞標題、產品頁面的產品名稱
    * 用 [schema.org](http://schema.org/) 放語意標籤
* h1 好處
  * SEO
  * 用 background-image css 設定，RWD 想切換圖片時很方便
  * [CSS Image Replacement: text-indent, Negative Margins and more](https://www.sitepoint.com/css-image-replacement-text-indent-negative-margins-and-more/)
* 為什麼不用 text-indent: -9999px
  * [Replacing the -9999px hack (new image replacement) | Zeldman on Web & Interaction Design](http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/)
* white-space 的意思
  * [CSS white-space property](https://www.w3schools.com/cssref/pr_text_white-space.asp)
  * 怎麼處理元素內的 white-space。一行、正常、保留
* color: rgba(255, 255, 255, 0%)
* text-indent 是不是能達成書本首行縮排二字的效果

## 7.49 圖片種類介紹（gif、jpg、png）

* gif 動態效果、透明背景、只有 256 色
* jpg 是壓縮過的檔案
* png 透明。png 8 是 256 色，png 24 比較多

png 會透出背景顏色

## 7.50 圖文並排範例

範例

* [An Anonymous Pen on CodePen](https://codepen.io/anon/pen/GxMxzO?editors=1100)

如何讓連結內的圖片和文字把都垂直置中

* [使用 HTML、CSS 開發一個網站 | Udemy](https://www.udemy.com/html-css-learning/learn/v4/questions/1818404)
* 兩個都 float 浮起來
* 把圖片放在背景圖案，用成 inline-block 後再垂直置中
* 在圖片下 vertical-align: middle

清除圖片底下的空白

* [css - Remove white space below image - Stack Overflow](https://stackoverflow.com/questions/7774814/remove-white-space-below-image)

```javascript
// img 預設是 inline-block，會受文字基線影響，用成 block 就不會受影響了
.youtube-thumb img { display: block; }

// 或是將錯就錯，讓圖片對齊文字頭 or 尾
img{vertical-align:text-bottom}
img{vertical-align:bottom}
vertical-align: bottom

// 或是設定 img 沒有 line-height 行高
.parent {
    line-height: 0;
    vertical-align: top;
}
.parent > * {
    line-height: 1.15;
    vertical-align: top;
}


// 或是讓 img 漂浮起來
.youtube-thumb img {float:left;}
```

## 7.51 第六節作業

HW7-51 設計表頭區塊作業

麻煩老師過目我的 HW7-51 作業練習了，謝謝老師 (已使用 CodePen 內建 css reset)

[https://codepen.io/ayugioh2003/pen/xjLrdp](https://codepen.io/ayugioh2003/pen/xjLrdp)

想請問老師一些問題

1. 想跟老師確認我的看法，圖和文之所以無法對齊，是不是因為 img 是 inline 元素，會受 normal 和文字 baseline 的影響，因此 img 底下的空白空間就是文字 baseline 到底線的距離
2. 根據第一點的造成此現象的可能原因，整理出能讓圖片與文字對齊的幾種方式：一、 跳脫 normal flow，讓 img 和包裹著文字的 span 浮動起來。二、讓 img 對齊 baseline 以外的線，使用`vertical-align: middle` 之類的語法
3. img 浮動後，我還是覺得 twitter 圖案有點飄起來，老師覺得有嗎，還是覺得還好？
4. 命名的慣例，是只能靠經驗累積嗎，我覺得在命名時有點燒腦。像這份作業我有參考 PS 圖層的名稱
5. 當滑鼠經過"聯絡我們"這些連結時，下面成功添加了 border-bottom 樣式，但更下方的 div 卻會受影響，稍微往下移動。我後來有試過將 "聯絡我們"這些連結的父元素 div.nav 添加高度，就可以避免問題。我想問的是，這是正確的解法嗎，還是有其他不用設定高度的解法

相關連結

* [vertical-align - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align)
* [CSS vertical-align 屬性](http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp)

其他同學的連結

* [A Pen by Yuki](https://codepen.io/shih-han/pen/PJeKMv?editors=1100)
* [A Pen by lin](https://codepen.io/uniza/pen/VXVmEO?editors=1100)
  * `background:linear-gradient(#00654c,#009771);`
  * `border-radius: 5px;`
  * `box-shadow: 2px 2px 2px grey;`
* [老師的表頭範例](https://codepen.io/anon/pen/GxMxzO?editors=1100)

## 第六章測驗

![測驗](https://i.imgur.com/tKRk70Y.png)
