圖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)系。