ps是各位前端開發者的基礎技能，高效利用ps不僅能提高工作效率，更能帶來身心上的愉悅——jack ma這裡的面板指的是在頂部主選單「視窗」下可開啟的視窗。最常用的幾個視窗必屬「屬性」、「資訊」、「圖層」，螢幕夠大的同學建議把它們都展開在介面右邊。那為什麼說這幾個面板很常用呢？下面會慢慢介紹到。
在移動工具(v)下這個操作非常常用：option+右鍵/command+左鍵(windows:alt+右鍵)，在psd裡快速選定圖層，點哪選哪。不需要勾選「自動選擇」圖層選項也能快速選擇圖層。
而筆者比較喜歡用「option+右鍵」而不是「command+左鍵」，因為這個操作經常需要結合檢視縮放(option+滾輪，windows:alt+滾輪)，這樣來回切換會更方便。
結合快速選擇圖層，屬性面板可以展示不少圖層資訊，而這些資訊在開發中非常有用：
可以看出屬性面板主要展示的是ps比較「原生」的物件的資訊。
「資訊面板」和「屬性面板」類似，只不過前者展現的資訊和後者不太一樣。
比如，快速選中圖層後，如果在「屬性面板」不能看到圖層的寬高資訊，可以command+t(windows:ctrl+t)開啟變形操作，在「資訊」面板一定可以看到圖層的寬高資訊，看完後記得按esc順手退出變形工具以免不小心誤操作。
媽媽再也不用擔心我矩形選框工具(m)取大概估算元素的寬高值啦……
這個工具最基本的功能是吸取圖層顏色，這裡有幾個技巧可以說一下：
在移動工具下(v)，選中圖層後，長按command(windows:長按ctrl)鍵，然後移動滑鼠，此時滑鼠停留處的圖層會出現與選中圖層之間的一些紫色標註的一些距離資訊，這個用於獲取margin比較有用。
在圖層面板，右鍵圖層，有個「複製css」選項。這個功能在ps裡很早就加進來了，可能很多同學都覺得挺雞肋的，覺得這是給設計師學習css用的。但是其實裡面的有一些資訊還是挺有用的，可減少一些工作量，比如下面一段css：
1234567
891011
1213
1415
1617
1819
2021
2223
24
.圓角矩形_584我們可以用到裡面的圓角、背景色、透明度、陰影、寬高、漸變資訊，不過說實話**寫法真的挺醜的，比如漸變那個，要進行一些人工的干預處理。不過總歸可以少輸入一點**減少工作量，有些資訊也不用麻煩各種手段去取、去猜…….矩形_1
一般來說只是形狀工具(u)畫出來的形狀才會有比較有用的資訊，如果是類的圖層拷貝出來的資訊一般只有寬高資訊可以用。
所以，從現在起你就應該這樣做：
選中圖層(組)
圖層面板右鍵圖層，選擇「複製圖層」
在彈出的面板的文件單選框裡選擇「新建」，如下圖
接下來就可以看到在新檔案裡放置了該圖層，然後就可以放心的進行「裁剪、變形、合併圖層」等操作了……真的一點都不卡。
這個功能在最新的幾個版本ps裡都得到支援，用於切圖非常方便。具體操作方法：
首先開啟設定，在「增效工具」下，勾選「啟用生成器」；然後在主選單的「檔案」-「生成」，勾選「影象資源」
在圖層面板選擇要匯出的圖層，把檔名改為如「icon.png」帶副檔名的圖層名，然後就完成了資源生成的全部步驟，就這麼簡單。生成的資源在檔案同目錄下、以「-assets」結尾的資料夾裡。
圖層名可以怎麼設定呢？下面列出了一些例子。
圖層名匯出
logo.png
生成png-32，含透明通道
logo.png8
生成png-8
logo.png24
生成png-24，不含透明通道
img/logo.png24
資源儲存在img下
質量90%
質量80%
質量50%
寬高為原圖的50%
50% [email protected] + 100% [email protected]
用「+」或「,」分割可生成多份資源
以上只是一部分配置，有興趣的同學可以參考文後資料看詳細的語法。
網頁用rem單位的同學都應該知道，如果png的icon的寬高四周沒有空出1畫素的透明空白，網頁上的icon效果四周很可能會被「吃掉」一點點。所以在icon四周留出1畫素的空白很必要。「資源生成器」不能提供這種設定，但是有以下方法可以做到：
圖層面板，選中圖層(可按shift選多個圖層，批量處理相似圖層)，右鍵，選擇「匯出為」
在彈出面板可設定畫布大小，寬高可設定比原來的尺寸大2畫素即可，2畫素會分配到上下左右各1畫素。如下圖：
資源生成器語法
photoshop
技巧切圖
資源合集
上次更新：2019-04-20 19:28:31
你可能不知道的東西
元素可以分為塊級元素，行內元素以及行內塊級元素。行內元素的margin或者padding只有margin left和margin right以及padding left和padding right有效果，margin top margin bottom padding top padding bot...
你可能不知道的const
眾所周知，使用 const 宣告的變數必須同時初始化為某個值。一經宣告，在其生命週期的任何時候都不能再重新賦予新值 const a syntaxerror 常量宣告時沒有初始化 const b 3 console.log b 3 b 4 typeerror 給常量賦值const 宣告只應用到頂級原語...
你可能不知道的python logging機制
先來看幾個例子,先想一下執行結果，答案稍後揭曉 例一 mylogger logging.getlogger mylogger mylogger.info mylogger info mylogger.warning mylogger warning 例二 mylogger logging.getlo...