ps切圖實用小技巧、圖片格式的區別及相關內容

OBKoro1發表於2017-04-11

寫在前面

之前寫了兩篇前端圖片相關的內容(前端ps切圖方法,圖文詳細,css sprite雪碧圖製作,使用以及相關,圖文gif),本文是面向前端小白的,蒐集整理的一些切圖技巧,及其相關內容。

關於版本:

推薦pscc2017版,一些老版本很多新功能沒有,會影響到效率的。(目前2017/4/11)

基本設定

先要調整工作區域的佈局。

1.選擇“視窗”——把“資訊”,“圖層”,“歷史記錄”,“顏色”皮膚開啟,其他的可以先關閉了,在切圖的工作中其他的基本用不到,這個很簡單的,打幾個勾就可以了,如下圖所示:

ps切圖實用小技巧、圖片格式的區別及相關內容

ps切圖實用小技巧、圖片格式的區別及相關內容
工作區的內容

2.調整好皮膚之後,選擇“視窗”——“工作區”——“新建工作區”,將當前的工作佈局儲存起來,並命個名,之後下次開啟的時候就會直接出現你調整好的工作佈局,否則的話你每次重新開啟ps的時候都要重新設定。

ps:就算有別人弄亂了你的皮膚也可以直接通過“視窗”——“工作區”——選擇你之前儲存的工作佈局。

設定標尺座標

ps切圖實用小技巧、圖片格式的區別及相關內容

ps切圖實用小技巧、圖片格式的區別及相關內容

操作gif:

ps切圖實用小技巧、圖片格式的區別及相關內容

還有其他的一些設定:

檔案-新建--:初始化預設設定1920x2000,72解析度,8位色圖,背景透明色 然後儲存起來。後續可以選擇新建模版

檢視/顯示/智慧參考線以及檢視/字元,這兩個都要選上;

ps介面中有選單欄、屬性欄、工具欄、皮膚、工作區:

測量 、取色

哪些要測量?
標籤的寬度、高度、內邊距、邊框、定位、文字大小、行高、背景圖位置等等,凡是需要數值型,都要進行測量。

使用什麼方式:下面弄了一個矩形選擇框的例子,如果想要更精確的話,直接使用標尺工具也可以。

ps切圖實用小技巧、圖片格式的區別及相關內容

測量寬高的兩種方式:

標尺測量的方法:

ps切圖實用小技巧、圖片格式的區別及相關內容

矩形選擇框測量的方法:
ps切圖實用小技巧、圖片格式的區別及相關內容

顏色取色技巧:

QQ截圖的方式:
截圖的時候,滑鼠移動到哪裡,下面就有一個rgb。(在ps中也是一樣,滑鼠移動資訊欄就會有對應的rgb)

ps切圖實用小技巧、圖片格式的區別及相關內容

ps拾色器獲得 :

ps切圖實用小技巧、圖片格式的區別及相關內容

ps切圖實用小技巧、圖片格式的區別及相關內容

注意

要把畫布儘量放大,來減少我們測量的誤差。

關於png、jpg、gif三種圖片格式的區別:

JPG的特性

1、支援攝影影象或寫實影象的高階壓縮,並且可利用壓縮比例控制影象檔案大小。
2、有失真壓縮會使影象資料質量下降,並且在編輯和重新儲存JPG格式影象時,這種下降損失會累積。
3、JPG不適用於所含顏色很少、具有大塊顏色相近的區域或亮度差異十分明顯的較簡單的圖片。

PNG的特性

1、能在保證最不失真的情況下儘可能壓縮影象檔案的大小。
2、PNG用來儲存灰度影象時,灰度影象的深度可多到16位,儲存彩色影象時,彩色影象的深度可多到48位,並且還可儲存多到16位的α通道資料。
3、對於需要高保真的較複雜的影象,PNG雖然能無失真壓縮,但圖片檔案較大,不適合應用在Web頁面上。

什麼時候應該使用PNG

具備以下條件的影象更適合用PNG8格式進行儲存:

1、影象上顏色較少,並且主要以純色或者平滑的漸變色進行填充。
2、具備較大亮度差異以及強烈對比的簡單影象(如“立刻購買”按鈕中的背景和文字)。

對於寫實的攝影影象或是顏色層次非常豐富的影象採用JPG格式的圖片格式儲存一般能達到最佳的壓縮效果。

這篇文章寫得非常詳細,有興趣的要看一下:png、jpg、gif三種圖片格式的區別

快捷鍵

1.快速選中圖層用ctrl+滑鼠右鍵
2.安住空格鍵滑鼠變成一隻手拖拽圖片
3.alt+滑鼠滾輪可以放大或者縮小區域
4.ctrl+h隱藏所有的參考線

5.h,滑鼠移動檔案,t文字工具,i吸管工具,移動工具,任何時候按v,就可以回到移動工具

6.匯出切片:alt+shift+ctrl+s(檔案-儲存為web所用格式)

踩坑經歷:

自動化切圖,檔案–指令碼–圖層儲存為檔案(這個時候要注意之前的儲存為web格式檔案時是儲存了所有切片,而不是僅使用者切片,不然會導致一直搜尋過濾圖層,半天沒反應,而且一直譚警告窗,要一直點)
意思就是儲存圖層的時候要儲存自己選中的切片。

快捷鍵:zhidao.baidu.com/question/52…

壓縮圖片

ps切出來的圖片一般檔案都比較大:
這裡有一個壓縮圖片很神奇的網站(有牆,攻城獅應該都會科學上網):

tinypng.com/

一般網站檔案目錄

PSD切圖(專案檔案目錄)
project:
-admin(後臺)
-static(所有資源)
-css(所有子檔案都可以分子資料夾,方便管理,層級不建議太多)common.css/reset.css/yemian.css
-images(可以按頁面主題來)
-js(預定義的,引入的,common.js)
-font
-pulgs
-前臺頁面
-其他單獨檔案

參考:

寫給前端小白的切圖技巧
開始前端開發(PhotoShop切圖)
png、jpg、gif三種圖片格式的區別

最後:希望看完的朋友點個喜歡,也可以關注一下我,現在這階段基本上每個月都不會少於十五篇文章(看到乾貨我也會進行分享)。碼字不易,感謝支援,感激不盡!
ps:目前待業,座標北京,求推薦工作。然後希望我寫哪方面的文章可以在底下評論,或者是私信我,雖然寫的不好,但我就當這是記錄自己成長的一種方式咯。(前提是我會了,如果不會我也會記下來,等會了的時候再更出來。)
掘金個人主頁簡書主頁連結csdn部落格主頁連結github

以上。2017.4.11

相關文章