整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
圖1.我們想把這個圖片按照不同顏色切成不同的切片
1
步驟1：ctrl+r,調出標尺工具，如圖2.
2
步驟2：鼠標左鍵拖動標尺往下拉，在色塊分界線出拉兩根，如圖3.
3
步驟3：在工具欄中選擇“切片工具”，如圖4.
4
步驟4：點擊“基于參考線的切片”按鈕，如圖5.
5
出現(xiàn)切片，如圖6.
6
步驟5：選擇“切片選擇工具”，如圖7.
7
步驟6：鼠標左鍵單擊中間這塊切片，右鍵，選擇“劃分切片”，如圖8.
8
步驟7：鼠標左鍵拖動中間的切片黃線，移到色塊分界線位置
步驟8：選擇“HTML和圖像”、“所有切片”，點擊保存
效果如圖
生成文件
打開html頁面效果
定義：簡單理解將網(wǎng)頁圖片切分為一些小碎片的過程，目的是為了提升網(wǎng)頁瀏覽的流暢性。
切片創(chuàng)建非常簡單，在裁剪工具箱中。
鼠標繪制矩形選框范圍會成為“用戶切片”，而范圍外的會自動切分，成為“自動切片”
自動切片可以隱藏，也可以通過提升成為“用戶切片”
其他內容與裁剪及選框工具差不多。
如果圖像包含參考線，可以基于參考線創(chuàng)建切片
如果切片處于隱藏狀態(tài)：視圖-顯示-切片，可以顯示切片。
復制：按住Alt鍵拖到切片；
組合：用切片選擇工具選擇多個切片（按住Shift），右鍵執(zhí)行，組合切片。
刪除：用切片選擇工具選擇切片后，鼠標右鍵刪除切片，也可以用Delete或Backspace鍵來刪除切片。刪除切片后會重新自動生成切片以填充文檔區(qū)域。
清除全部切片：視圖>清除切片。
鎖定切片：鎖定后無法對切片移動、縮放或其他更改。執(zhí)行：視圖>鎖定切片。
自動切片無法進行優(yōu)化設置，所以我們有時候需要提升為用戶切片。
切片的導出：執(zhí)行“文件>導出>存儲為Web所用格式（舊版）”，在彈出的窗口中設置“優(yōu)化格式”為GIF，單擊存儲完成導出。
網(wǎng)頁上不同狀態(tài)下，呈現(xiàn)出不同的顏色或者樣式的按鈕，方便用戶了解當前操作狀態(tài)，這就是翻轉按鈕。
要創(chuàng)建翻轉按鈕至少需要兩個圖像，一個是用于表示正常狀態(tài)的圖像，另一個則用于表示處于更改狀態(tài)的圖像。
舉例：
素材1
實例33.1-右上角創(chuàng)建播放器翻轉按鈕效果
應用矩形工具+橢圓工具+鋼筆工具，繪制模式為形狀，創(chuàng)建視頻播放器翻轉按鈕效果
網(wǎng)頁中可播放的視頻文件，如果不被明確標注出來很可能被用戶忽略，所以我們增加翻轉按鈕，當用戶將光標移動到可播放的視頻上時，視頻縮略圖呈現(xiàn)為播放器效果。
重要內容：再重復一次
切片的導出：執(zhí)行“文件>導出>存儲為Web所用格式（舊版）”，在彈出的窗口中設置“優(yōu)化格式”為GIF，單擊存儲完成導出。
不同的格式的圖像文件其質量與大小也不同。
可供選擇的Web圖像的優(yōu)化格式包括：GIF、JPEG、PNG-8、PNG-24、WBMP
GIF：網(wǎng)頁最常用的格式。可顯示256種顏色，參數(shù)設置較多，重要的進行解釋
顏色深度算法、顏色：可選擇、數(shù)值越大，顏色越接近原圖像
交錯：正在下載文件時，在瀏覽器中顯示圖像的低分辨率版本。
損耗：通常設置5~10，可減少文件大小5~40%，大于10，圖像的質量也會降低。
JPEG：是一種比較成熟的有壓縮格式的圖像格式之一，雖然會丟失部分數(shù)據(jù)，但人眼幾乎無法分別差異。
壓縮品質：越大，圖像細節(jié)越豐富，但文件也越大。
模糊：數(shù)值越大，模糊效果越明顯，但會減少圖像的大小，最好不要超過0.5
雜邊：為原始圖像的透明像素設置一個填充顏色。
PNG-8:專門為Web開放的，支持244位圖像并產(chǎn)生無鋸齒狀的透明背景。
PNG-24：可以保留多達256個透明度級別，適合于壓縮連續(xù)色調圖像（？），但生成的文件比JPEG格式大得多。
WBMP：用于優(yōu)化移動設備的標注格式，只支持1位顏色，只包含黑白像素。
執(zhí)行“文件>導出>Zoomify”，用于導出高分辨的JPEG文件和HTML文件，然后可以將這些文件上載到Web服務器上，以便查看著平移和縮放該圖像的更多細節(jié)。適用于在需要商品細節(jié)進行展示時使用。
可能是要上傳吧。未上傳測試預覽效果失敗，可能是我的操作問題，有懂得的大神請指點下。
這章節(jié)內容都是干貨，現(xiàn)在不是我的重點，后續(xù)從事時再單獨研究。
感謝大家的關注及閱讀。
下節(jié)學習3D立體效果，應該很有趣。
S是Web設計的首選軟件，他著重側重于對圖形的二次處理，主要在顏色方面，通過分圖層處理疊加效果來達到各種其異的夢幻需求，疊加是不是很熟悉，就是css里邊層疊也可以。只是ps是面性的，css是邏輯性的，從上到下。而PS的神奇在于，每個參數(shù)的不一致，導致的結果不一致，這樣也讓很多非專業(yè)人士自認為有設計藝術的細胞或假象，以為自己是一個設計奇才，從而選錯行業(yè)，所以設計這行有風險，入行要謹慎。像AI, CorelDraw著重于對造型的創(chuàng)造或編輯，像CAD則是點線面關系，3DMax則是空間物理關系，F(xiàn)lash是空間與時間的關系等等。而且這些設計軟件中也只有PS能夠完整真實的模擬Web頁面上的真實場景，雖然字體有時候也會在表現(xiàn)上出現(xiàn)稍為的偏差。FireWorks也由于市場份額或PS重合功能太多，已經(jīng)停止新版本開發(fā)或更新了。這是一個公司戰(zhàn)略或市場競爭下必然導致的結果，個體用戶不能左右。
1).基本信息：
以圖層為主要的編輯對象，通過不同層細節(jié)的編輯，使整體效果更為絢麗或多變。
以工具為主要的編輯手段，通過多個工具的結合，滿足大部分編輯要求。
通過濾鏡的組合，呈現(xiàn)很多不錯的效果，達到平民人士也能參與互聯(lián)網(wǎng)炒作的大軍中不能自撥，在當下PS已經(jīng)由有一個名詞轉為一個動詞了。
對前端來說切圖時注意：優(yōu)化切圖流程，提升切圖效率，增加崗位競爭優(yōu)勢
具體經(jīng)驗分享：修改PS的快捷鍵，使其符合前端操作的習慣，側面提升工作效率。從而擴展，可以修改其它軟件的快捷鍵，整體提升工作效率，增加就業(yè)資本或信心。
圖片格式那些事兒
一般新手不太注意頁面的性能問題，而性能容易出現(xiàn)在圖片上面，如何在一個大頁面中處理好圖片是一個前端必備的技能之一。
一般應用比較多的格式有：gif,png-8,png-24,jpg。而新手經(jīng)常混淆png-8,png-24的區(qū)別。
按我經(jīng)驗4k以下gif,png-8差別不大，4k-100k: png-8,gif占優(yōu)勢，大于100k果斷是jpg。
png-8不支持alpha透明，在IE6下需要一個JS或透明濾鏡來處理。
圖片格式與設計那點事兒
Web性能優(yōu)化：圖片優(yōu)化
2). 提高切圖效率思路之擴展：
在上一點提到的修改快捷鍵，分享一下我修改的幾個快捷鍵（修改這個快捷鍵，有個缺點，換臺電腦可能就不能使用，除非能夠熟悉的記得兩套快捷鍵，即修改過的，或原始的）：
新建圖層: F1
使用頻率比較強，所以放在一個容易的地方。
新建文件：F2
僅次于新建文件，也是使用使用頻率比較高的一個鍵。由于切圖是會從原始圖層上多次的分離圖層，所以這個快捷捷由原來的按兩鍵，變?yōu)橐绘I。并且有效的分離左右手操作的特點，盡量讓使用頻率高的鍵從左側起步。以下的幾個快捷鍵，都是按照這個思路來進行優(yōu)化或設置的。
按屏幕大小：F3
按畫布大小：F4
這兩個鍵操作思路主要借鑒于CorelDraw，CorelDraw是一款優(yōu)秀的平面廣告設計軟件，多用于名片，包裝設計。這是由加拿大Corel產(chǎn)品，他們公司另外一個比較著名的繪畫類軟件是Painter。
存儲為web格式：F5
由原來的5鍵優(yōu)化為一鍵，還有一個流程是通過Ctrl+Shift+S來存儲圖片，很明顯這個流程步驟過于繁多，很浪費時間。有興趣的可以做一個對比。
裁剪命令：F6
由原來的3鍵優(yōu)化為一鍵，另外一個是裁剪工具(C)，裁剪工具對整個畫面的破壞力比較大，且不易控制，尤其在PS的版本升級中對這個工具進行了優(yōu)化。而這個命令相對更為輕量或方便。
F7,F8,F9保持不變
轉換為RGB模式：ctrl+=
因為Gif是索引模式，顏色信息較少，如果要進行編輯，首先得轉換成RGB模式。
從圖層建立組：ctrl+,
由于剛入行的設計師沒有經(jīng)驗，一個設計稿是沒有分圖層組。其實合理的圖層組可以有效的引導前端，所以這個快捷鍵主要是解決這個問題。
自由變換：F10
變換內容
前端主要還是對現(xiàn)有的PSD文件進行編輯，所以這兩個鍵是可以單獨拿出來的。
變換選區(qū)：F11
變換邊框
畫筆：F12
因為前端不像設計師，對PSD只是一個切割，而設計師注重于創(chuàng)造的過程。所以對畫筆工具的依賴不是很大，由原來的F5移動到F12。
復制圖層 Ctrl+ / 原有位置在菜單欄：圖層->復制圖層
這個快捷鍵，可以快速的把原始PSD中的一個或多個圖層復制到一個新文件當中。
演示：
3). 切圖的幾個辦法：
切片(k):
優(yōu)點：能夠一次切除多個圖片。
缺點：需要后退一步，降低效率，容易產(chǎn)生多余無用圖片
選區(qū)(先用選區(qū)工具來畫一個范圍，然后裁剪):
優(yōu)點：區(qū)域精確目標單一
缺點：需要后退一步，容易誤操作
拷貝(Ctrl+C):
優(yōu)點：拷貝單層的內容到新文件，能夠快速的切除圖片。
缺點：不容易找到相應的圖層。
合并拷貝(Ctrl+Shift+C):
優(yōu)點：拷貝所有可見層的內容到新文件，能夠快速的切除圖片。
缺點：不容易找到相應的圖層。
切圖網(wǎng)（qietu.com）是一家專門從事web前端開發(fā)的公司，專注we前端開發(fā)，關注用戶體驗，歡迎訂閱微信公眾號：qietuwang
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
