CSS學習系列文章目錄

HTML和CSS學習筆記——day01
HTML、CSS學習筆記——day02
css4.2.4參考手冊.zip(免費下載)

文章目錄

• CSS學習系列文章目錄
• 一、PS測量圖片和取色
• • 1.打開標尺，測量圖片像素大小
  • 2.對顏色進行取色
  • 3.使用總結
• 二、通過PS進行切圖
• • 步驟圖解
• 總結

一、PS測量圖片和取色

??在前端開發中，我們基本都需要用到PS(photoshop)去完成頁面的大部分美工效果，比如圖片的像素大小、對小icons的切圖等等內容，所以學好ps也是十分重要的呢！
??以下演示的PS版本為CS6，在實際操作中按照自己的版本來，有些工具可能會有一些出入。

1.打開標尺，測量圖片像素大小

??快捷鍵：CTRL+ R
??在PS的操作：①點擊上方視圖菜單欄+②選擇標尺

??值得一提的是，在打開標尺后默認的單位是厘米(cm)，這個時候就需要你手動去調節單位了，因為我們在網頁開發中用的單位是像素單位。點擊鼠標右鍵，即可找到像素單位的選擇。(點擊四周有尺度的也可以)

2.對顏色進行取色

??步驟圖解：

3.使用總結

??①步驟總結：

??②工具總結：

二、通過PS進行切圖

步驟圖解

??提示：素材可以去站長在線這個網站查詢素材
??①導入PSD格式的圖片，點擊文件菜單欄中的打開，導入psd文件

??②點擊窗口，選擇我們經常需要使用到的工具

??③點擊小箭頭，切換成圖層，一定要勾上自動選擇這個勾勾，以便于我們快速定位到圖層的位置。

??④切換成切片工具

??⑤在圖片中點擊鼠標左鍵即可新建切片，因為我新建了4個切片區，所以就會有4個切片區。

??⑥對切片不滿意，可以點擊窗口菜單欄，選擇清除所有的切片，也可以把鼠標移動到你選擇的切片中，右鍵選擇刪除切片。

??⑦導出圖片，這里和原先的版本不一樣，不能快速導入圖片。首先點擊文件菜單欄，選擇存儲為Web所用格式。

??使用建議如下：
????1.大圖片對色彩還原度要求不高的可采用jpg格式進行存儲；
????2.小圖標，如：logo，Icon 等可使用 gif png8 兩種格式進行存儲；
????3.存在透明度設置，漸變的圖標使用png24進行存儲，能使得所切圖片更好的還原出真實的透明度和色彩。

??⑧完成切圖，可以在你預設的路徑中查找到圖片

總結

??一天一個小細節，加油沖鴨！
??本文中的建議參考自：前端切圖過程中所切圖片保存格式的選擇

總結

以上是生活随笔為你收集整理的CSS学习笔记-—学会用PS切图和取色—day03(基本用法)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。