七、切圖技巧

Photoshop 下載流程

常用的切圖工具

  • PS

  • 以拉

  • Sketch

注意事項

課程需要用到的圖片

7-41 備註

7.42 Photoshop 切圖流程

  • 有範例網站 psd 檔要下載

  • 左邊是工具列

  • 右邊有圖層,按眼睛可切換圖層

  • 左邊有個刀,第一列第三個,切片工具

    • 按住它,圈選起來

    • 「檔案」「儲存為網頁用」

    • 預設 PNG,先選 PNG24

    • 放到資料夾的 img 資料夾

  • 指定的圖片,切片 / 全部使用者切片

  • 改檔名

    • 「切片選取工具」

    • 滑鼠左鍵兩下,改名

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

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

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

7.44 background-repeat:將圖片重複顯示,repeat-x

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

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

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

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

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

讓 logo 變成背景圖片

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

問答區老師的回覆

  • background 是總和

  • background-image 一定是會蓋在 background-color 上面的

.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,也可以用啪數

.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 縮寫教學

建議擺放順序

  • 背景圖片

  • 要不要重複

  • 背景顏色

  • 背景圖的位置

  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 為例

.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%) */
}

同學的提問

7.49 圖片種類介紹(gif、jpg、png)

  • gif 動態效果、透明背景、只有 256 色

  • jpg 是壓縮過的檔案

  • png 透明。png 8 是 256 色,png 24 比較多

png 會透出背景顏色

7.50 圖文並排範例

範例

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

清除圖片底下的空白

// 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

想請問老師一些問題

  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 添加高度,就可以避免問題。我想問的是,這是正確的解法嗎,還是有其他不用設定高度的解法

相關連結

其他同學的連結

第六章測驗

Last updated