Photoshop中的哪些知識點是用來前端切圖的？
就只學Photoshop切圖，PS的哪些知識點是做切圖用的？
我原來寫過類似的文章，其中主題相關的我拷貝過來，了解詳情：豪情-CSS解構系列之 點擊這個鏈接。
PS是Web設計的首選軟體，他著重側重於對圖形的二次處理，主要在顏色方面，通過分圖層處理疊加效果來達到各種其異的夢幻需求，疊加是不是很熟悉，就是css裡邊層疊也可以。只是ps是面性的，css是邏輯性的，從上到下。而PS的神奇在於，每個參數的不一致，導致的結果不一致，這樣也讓很多非專業人士自認為有設計藝術的細胞或假象，以為自己是一個設計奇才，從而選錯行業，所以設計這行有風險，入行要謹慎（不提了，我也是花了2，3年的時間，來證明我不是一個設計人才，多麼痛的領悟，當然也不是完全沒有幫助，經典黑色--網站管理界面，博客園五款多彩皮膚，這是我設計方面的一點積累）。像AI, CorelDraw著重於對造型的創造或編輯，像CAD則是點線面關係，3DMax則是空間物理關係，Flash是空間與時間的關係等等。而且這些設計軟體中也只有PS能夠完整真實的模擬Web頁面上的真實場景，雖然字體有時候也會在表現上出現稍為的偏差。FireWorks也由於市場份額或PS重合功能太多，已經停止新版本開發或更新了。這是一個公司戰略或市場競爭下必然導致的結果，個體用戶不能左右。
1).基本信息：- 以圖層為主要的編輯對象，通過不同層細節的編輯，使整體效果更為絢麗或多變。
- 以工具為主要的編輯手段，通過多個工具的結合，滿足大部分編輯要求。
- 通過濾鏡的組合，呈現很多不錯的效果，達到平民人士也能參與互聯網炒作的大軍中不能自撥，在當下PS已經由有一個名詞轉為一個動詞了。
- 對前端來說切圖時注意：優化切圖流程，提升切圖效率，增加崗位競爭優勢
具體經驗分享：修改PS的快捷鍵，使其符合前端操作的習慣，側面提升工作效率。從而擴展，可以修改其它軟體的快捷鍵，整體提升工作效率，增加就業資本或信心。
- 圖片格式那些事兒 一般新手不太注意頁面的性能問題，而性能容易出現在圖片上面，如何在一個大頁面中處理好圖片是一個前端必備的技能之一。 一般應用比較多的格式有：gif,png-8,png-24,jpg。而新手經常混淆png-8,png-24的區別。 按我經驗4k以下gif,png-8差別不大，4k-100k: png-8,gif佔優勢，大於100k果斷是jpg。 png-8不支持alpha透明，在IE6下需要一個JS或透明濾鏡來處理。 圖片格式與設計那點事兒Web性能優化：圖片優化
2). 提高切圖效率思路之擴展：
從客觀上來講，提高效率的基礎在於豐富的實戰經驗或長年的填坑經歷，本質上軟體的操作差別不是特別大。一個五年經驗或一年經驗的開發人員，使用同樣的工具，主要差別還是一個熟練度。這裡只分享我個人積累的一些經驗：
在上一點提到的修改快捷鍵，分享一下我修改的幾個快捷鍵（修改這個快捷鍵，有個缺點，換台電腦可能就不能使用，除非能夠熟悉的記得兩套快捷鍵，即修改過的，或原始的）：- 新建圖層: F1 使用頻率比較強，所以放在一個容易的地方。
- 新建文件：F2
僅次於新建文件，也是使用使用頻率比較高的一個鍵。由於切圖是會從原始圖層上多次的分離圖層，所以這個快捷捷由原來的按兩鍵，變為一鍵。並且有效的分離左右手操作的特點，盡量讓使用頻率高的鍵從左側起步。以下的幾個快捷鍵，都是按照這個思路來進行優化或設置的。
- 按屏幕大小：F3
- 按畫布大小：F4 這兩個鍵操作思路主要借鑒於CorelDraw，CorelDraw是一款優秀的平面廣告設計軟體，多用於名片，包裝設計。這是由加拿大Corel產品，他們公司另外一個比較著名的繪畫類軟體是Painter。
- 存儲為web格式：F5 由原來的5鍵優化為一鍵，還有一個流程是通過Ctrl+Shift+S來存儲圖片，很明顯這個流程步驟過於繁多，很浪費時間。有興趣的可以做一個對比。
- 裁剪命令：F6 由原來的3鍵優化為一鍵，另外一個是裁剪工具(C)，裁剪工具對整個畫面的破壞力比較大，且不易控制，尤其在PS的版本升級中對這個工具進行了優化。而這個命令相對更為輕量或方便。
- F7,F8,F9保持不變
- 轉換為RGB模式：ctrl+= 因為Gif是索引模式，顏色信息較少，如果要進行編輯，首先得轉換成RGB模式。
- 從圖層建立組：ctrl+, 由於剛入行的設計師沒有經驗，一個設計稿是沒有分圖層組。其實合理的圖層組可以有效的引導前端，所以這個快捷鍵主要是解決這個問題。
- 自由變換：F10 變換內容 前端主要還是對現有的PSD文件進行編輯，所以這兩個鍵是可以單獨拿出來的。
- 變換選區：F11 變換邊框
- 畫筆：F12 因為前端不像設計師，對PSD只是一個切割，而設計師注重於創造的過程。所以對畫筆工具的依賴不是很大，由原來的F5移動到F12。
- 複製圖層 Ctrl+ / 原有位置在菜單欄：圖層-&>複製圖層
這個快捷鍵，可以快速的把原始PSD中的一個或多個圖層複製到一個新文件當中。
演示：
3). 切圖的幾個辦法：- 切片(k): 優點：能夠一次切除多個圖片。 缺點：需要後退一步，降低效率，容易產生多餘無用圖片
- 選區(先用選區工具來畫一個範圍，然後裁剪): 優點：區域精確目標單一 缺點：需要後退一步，容易誤操作
- 拷貝(Ctrl+C): 優點：拷貝單層的內容到新文件，能夠快速的切除圖片。 缺點：不容易找到相應的圖層。
- 合併拷貝(Ctrl+Shift+C): 優點：拷貝所有可見層的內容到新文件，能夠快速的切除圖片。
缺點：不容易找到相應的圖層。
以上僅供參考。
其它相關前端話題，有興趣加：389875212，禁止閑聊，非喜勿進。UI感興趣的加這個：92588284。ps哪些知識點是用來切圖用的？
1.學會首選項設置
2. 記住以下快捷鍵
Ctrl+r 標尺 ctrl+;參考線F8 信息面板ctrl+alt+shift+s 導出web格式圖片3.導出格式選擇
這個說起來太長了，反正記住基礎的。沒有漸變顏色少，選擇gif，或者png8.顏色豐富的 選擇jpg，優化品質一般不低於80高保真透明 用 png24，底色是純色或者是同色系差距不大的，需要透明的選擇 gif或者png8 索引色透明，雜變設置成背景色。如果不能理解可以不關注。嫌棄png24太大的，可以用設計師常常用的TinyPNG – Compress PNG images while preserving transparency 壓縮一下。
4.把圖層快速導出。
選擇圖層-右鍵-轉換為智能對象
寫在最後。
如果你真的想切好，你需要用的工具是 firework。至少目前來說ps的切圖功能和firework還是有蠻大差距的。
主要在圖片導出格式這一部分。1. JPG優化的時候可以在同一張圖片上應用不同的品質。下圖鍵盤和桌面的品質是60，挖掘機品質是100.
電商網站的產品圖如果想突出某個部分，設計師要求這個圖片最好越清晰越好，但是實際上設計師要求的是圖片中的關鍵產品是清晰的。背景部分不在乎。如果是用ps，要麼就全圖都設置成90甚至更高的品質。要麼就不管設計師都是設置成80的品質。 你用firework優化，完全可以把商品部分設置成90，裝飾部分設置成普通的80.
2.png8可以選擇alpha通道。
在格式導出中我說了，如果嫌棄png24圖片太大，可以使用 tingPNG 這種網站工具提供壓縮，但是實際上firework提供同樣的壓縮屬性。下圖分別是 png24，png-8（alpha），png24（tingPNG壓縮後）
但是工具畢竟是工具，tingPNG提供的壓縮圖比firework提供的壓縮圖更大，但是細節會相對好一點點，但是這種好一點點幾乎是肉眼看不出來的。
——————————————————2015.11.04更新最近詳細關注了一下tinyPNG的優化方案和fw的png8-alpha。tinyPNG 在處理透明度的過度上會比png8更自然。如果你的圖片是透明漸變 之類的，建議使用tinyPNG。
看見過的比較好的切圖經驗，短小精悍前端技能之切圖 · Issue #2 · xiangpaopao/blog · GitHub
最近看了一個視頻，專門講ps切圖的；學到了很多，強烈推薦前端工程師必備的PS技能——切圖篇
謝邀。有個切圖技巧我覺得很實用。例如想要把logo拿出來另存為圖片（png,gif,jpg）
切圖還是 Fireworks 最爽，按 shift 直接顯示兩線間距、元素位置和大小精確到像素級的控制，導出圖片中的一部分無需切片。所以即便有PS CC，大部分時間我還是樂意使用FW CS6
前端對於在Photoshop(以下稱PS)的設計稿中, 陰影的實現描述, 非常難精準得做到完全和設計稿一模一樣, 這是由於瀏覽器的渲染引擎的實現不同導致的, 大家可以自己搜索一下源代碼和渲染的文章, 這裡不做贅述.
這裡主要說一下如何相對較為精準的實現PS中設計的陰影(在webkit中幾乎能一模一樣), 下面先上PS里的圖:
x-offset = Distance * cos(180 -Angle)
y-offset = Distance * sin(180 - Angle)
"擴展（Spread）"：陰影擴展出來的大小. 這是用來調整陰影跟原對象顏色多少和要虛化的顏色的多少. Spread * Size = 原對象陰影的顏色多少. 剩下的就是虛化的顏色多少. CSS的陰影計算是:
spread-radius = Spread * Size
"大小（Size）"：陰影的大小. 在CSS中
按照上面的計算方式和圖中的例子應該是這樣計算:這裡扯個題外話, 在JS中Math對象計算cos/sin, 需要將度換算成弧度(弧度=度數*PI/180), 也就是在JS算cos35°是Math.cos(35*Math.PI/180), 好了好了, 回歸正題.blur-radius + spread-radius = Size
AKA:blur-radius = Size - spread-radius
color: rgba(0, 0, 0, .35)
x-offset: 3 * cos(180°- 90°) = 1.84px
y-offset: 3 * sin(180°- 90°) = 3px
spread-radius: 7 * 0% = 0px
blur-radius: 7 - 0.6 = 6.4px;
box-shadow: 1.84px 3px 6.4px 0px rgba(0, 0, 0, .35);
text-shadow: 1.84px 3px 6.4px rgba(0, 0, 0, .35);
注意: 目前瀏覽器對於 text-shadow 還沒有 spread-radius 的實現, 所以是不能很好實現 text-shadow.
如果大家平時是用LESS的話, 可以使用一下我寫的一個LESS的mixin用來直接計算, 很簡陋, 不過很實用.......................嗎...
mathxlee/photoshop-shadow-mixin · GitHub大家如果對我寫的mixin有任何問題和好的建議, 歡迎大家Follow和Star我~歡迎Issue~硬廣么么噠~---------------------------------------------我只是搬運工-------------------------------------------https://helpx.adobe.com/cn/photoshop/using/generate-assets-layers.html---------------------------------------------我只是搬運工-------------------------------------------從圖層或圖層組生成圖像資源
要更好地了解圖像資源生成器，請考慮具有以下圖層層次結構的簡單 PSD 文件（從此鏈接下載）：
示例 PSD 文件及其圖層層次結構此文件的圖層層次結構具有兩個圖層組：Rounded_rectangles 和 Ellipses。每個圖層組均包含 5 個圖層。
按照以下步驟從此 PSD 文件生成圖像資源：
- 打開 PSD 文件後，選擇「文件」&>「生成」&>「圖像資源」。
- 將適當的文件格式擴展（.jpg、.png 或 .gif）添加到您要從中生成圖像資源的圖層或圖層組的名稱中。例如，將圖層組 Rounded_rectangles 和 Ellipses 重命名為Rounded_rectangles.jpg 和 Ellipses.png；將圖層 Ellipse_4 重命名為Ellipse_4.gif。
注意:
圖層名稱不支持特殊字元 : 和 *。
Photoshop 生成圖像資源並將它們與源 PSD 文件一起保存在子文件夾中。如果源 PSD 文件尚未保存，Photoshop 會將生成的資源保存在
桌面上的新文件夾中。圖像資源名稱從圖層名稱/圖層組名稱中生成。圖像資源生成功能針對當前文檔啟用。啟用後，無論何時再次打開該文檔，功能仍然可用。要禁用當前文檔的圖像資源生成功能，請取消選擇「文件」&>「生成」&>「圖像資源」。
從一個圖層或圖層組生成多個資源要從一個圖層/圖層組生成多個資源，請用逗號 (,) 分隔資源名稱。例如，以下圖層名稱生成三個資源：
Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png
在子文件夾中保存資源您可以選擇將特定圖層/圖層組生成的圖像資源直接保存在資源文件夾下的子文件夾中。包括圖層/圖層組名稱下的子文件夾名稱；例如：
[子文件夾]/Ellipse_4.jpg
轉到頁首Web 設計使用案例從 PSD 文件生成圖像資源對於多設備 Web 設計來說尤其有用。考慮以下 Web 設計及其圖層結構：
Web 設計及其圖層層次結構將頂部的圖標和「全球熱點」圖像網格的頂行提取為圖像資源：
- 將圖像格式擴展添加到適當的圖層名稱中。
為適當的圖層/圖層組重命名
注意:
將從圖層/圖層組的內容中生成一個圖像資源。例如，上面屏幕抓圖中的 AdventureCo Logo 圖層組包含一個形狀圖層和一個活動文本圖層。當從圖層組生成圖像資源時，這些圖層會進行拼合。
Photoshop 生成資源，並將它們保存在與源 PSD 文件相同的位置。
生成的圖像資源轉到頁首指定品質和大小參數默認情況下，JPG 資源會以 90% 品質生成。默認情況下，PGN 資源會以 32 點陣圖像生成。GIF 資源會以基本 Alpha 透明度生成。
當重命名圖層或圖層組以便為資源生成做準備時，您可以自定品質和大小。
JPG 資源的參數- 添加所需的輸出品質作為該資源名稱後綴：.jpg(1-10) 或 .jpg(1-100%)。例如：
- Ellipse_4.jpg5
- Ellipse_4.jpg50%
- 添加所需的輸出圖像大小（相對大小或以支持的格式）作為該資源名稱前綴：px、in、cm和 mm。Photoshop 會相應地縮放圖像。例如：
- 200% Ellipse_4.jpg
- 300 x 200 Rounded_rectangle_3.jpg
- 10in x 200mm Rounded_rectangle_3.jpg
註：請記得在前綴和資源名稱之間添加一個空格字元。如果要指定像素大小，則可以省略單位。例如，300 x 200。
根據說明，當指定所需輸出圖像大小時，可以混合使用不同的單位和像素。例如，4in x 100 Rounded_rectangle_3.jpg 是資源生成的有效圖層名稱。
PNG 資源的參數- 添加所需的輸出品質作為該資源名稱後綴：8、24 或 32。例如：
- Ellipse_4.png24
- 添加所需的輸出圖像大小（相對大小或以支持的格式）作為該資源名稱前綴：px、in、cm和 mm。Photoshop 會相應地縮放圖像。例如：
- 42% Ellipse_4.png
- 300mm x 20cm Rounded_rectangle_3.png
- 10in x 50cm Rounded_rectangle_3.png
註：請記得在前綴和資源名稱之間添加一個空格字元。如果要指定像素大小，則可以省略單位。例如，300 x 200。
根據說明，當指定所需輸出圖像大小時，可以混合使用不同的單位和像素。例如，4in x 100 Rounded_rectangle_3.png 是資源生成的有效圖層名稱。
GIF 資源的參數- 添加所需的輸出圖像大小（相對大小或以支持的格式）作為該資源名稱前綴：px、in、cm和 mm。例如：
- 42% Ellipse_4.gif
- 300mm x 20cm Rounded_rectangle_3.gif
- 20in x 50cm Rounded_rectangle_3.gif
註：請記得在前綴和資源名稱之間添加一個空格字元。如果要指定像素大小，則可以省略單位。例如，300 x 200。
根據說明，當指定所需輸出圖像大小時，可以混合使用不同的單位和像素。例如，4in x 100 Rounded_rectangle_3.gif 是資源生成的有效圖層名稱。
品質參數對 GIF 資源不可用。
構建複雜圖層名稱為資源生成命名圖層時，您可以使用參數指定多個資源名稱。例如：
120% Delicious.jpg, 42% Delicious.png24, 100x100 Delicious_2.jpg90%, 250% Delicious.gif
Photoshop 從該圖層生成以下資源：
- Delicious.jpg（縮放 120% 的 8 品質 JPG 圖像）
- Delicious.png（縮放 42% 的 24 位 PNG 圖像）
- Delicious_2.jpg（100x100 像素絕對大小的 90% 品質 JPG 圖像）
- Delicious.gif（縮放 250% 的 GIF 圖像）
可以為生成的資源指定文件默認設置。請按以下步驟進行操作：
- 創建空圖層。
- 圖層的名稱以默認的關鍵字開始。現在，輸入您將應用於從文檔生成的所有圖像資源的設置。例如：
默認 hi-res/
在名為hi-res的子文件夾中生成所有圖像資源。例如，[asset_folder]/hi-res/Delicious.jpg。
默認 hi-res/@2x
在名為hi-res的子文件夾中生成所有圖像資源。此外，資源名稱在後綴為@2x。例如，[asset_folder]/hi-res/Delicious@2x.jpg。
默認 50% lo-res/
將縮小 50% 的圖像資源保存在文檔資源文件夾下的子文件夾lo-res中
默認 hi-res/@2x + 50% lo-res/
從圖層生成兩個圖像資源：
- 在hi-res子文件夾中，圖像資源名稱的後綴為@2x
- 在lo-res子文件夾中，圖像資源縮小 50%
注意:
默認縮放係數由各個圖層指定的縮放係數覆蓋。
轉到頁首禁用所有文檔的圖像資源生成您可以通過修改「首選項」，在全局範圍禁用所有 Photoshop 文檔的圖像資源生成。
- 選擇「編輯」&>「首選項」&>「增效工具」。
- 取消選擇「啟用生成器」。
- 單擊「確定」。
注意:
當您在「首選項」中禁用圖像資源生成時，「文件」&>「生成」菜單命令不可用。該功能僅能在「首選項」對話框中再次啟用。
只說幾個切圖最常用的快捷鍵。因ps版本不同，我以ps cc為例。
切圖的K快捷鍵已經變成C了。第一步，先確認你是否打開了標尺，這是拉參考線的「起點」；
對於ICON不多的頁面，大面積圖片，多個小圖為主，基本上ICON或特殊字體文字少的情況下，大量的操作就是CTRL+「+」，放大之後，拉參考線，保證不少切或多切1像素，然後「H」移動畫布，再「C」切片，重新「H」「C」，完事。最後一步CTRL+SHIFT+ALT+S，選擇「jpg」，60%-100%（看具體情況而定，一般的廣告圖我60，頂部圖我100，當然頂部圖如果高度過度，必須切成多條）。ICON多的情況不講了，我常用兩種方法，一是把頁面其實幹擾圖片文件全刪掉，然後給大背景填充跟ICON顏色反差大的顏色，再去切；二是新建一個文件，把各個ICON拖到新的文件里排版拼圖再導出。
第一次答這麼多，好緊張。。。。。。看到有的知友提到陰影，貼兩個工具網站，可以將PS中的陰影參數手動輸入（調節）後轉換為 CSS3 代碼：
Convert Photoshop Drop Shadows to CSS3 Box and Text Shadows
Box Shadow Generator群問題答案是？
切圖做重要的第一步是首先對網站效果圖的一個整體布局構思和想法，才開始切，這是第一步
能切圖就行了
推薦閱讀：
※怎麼用ps做出這張圖？
※這樣的效果是用什麼軟體做到的？
※這樣風格的建築分析圖 效果圖 表現圖是怎樣做到的？
※Photoshop視頻教程哪個好？求一份！
※想做網頁設計方面，有哪些實用的 Photoshop 教程推薦？
TAG:AdobePhotoshop | 網頁設計 | 前端開發 | 切圖 |