WEB前端之學會用PS很重要

你說有美圖秀秀之後PS要over了,NO PS 依舊很重要,當然除了修人像,比如切圖什麼的



來吧 開始吧 在開始切圖之前,先科普幾個小技巧


1. 如果快速從大圖中拿出自己想要的小圖 


需求:快速拿出上面紅色框中的小圖

實現方式:在工具箱找到選擇,然後選中你需要的圖後 ctrl + C 複製下  然後 ctrl + N 最後Ctrl+V 保存即可



2. 佈局需要量取尺寸怎麼看?

實現方式:選擇工具選中你要的區域後,F8 可以看到信息面板上面有 w 和 H 直接在html上使用



3. 吸個顏色怎麼弄?

實現方式:在工具箱中找到拾色器,在需要吸取顏色的區域點擊,最後複製#後面的色值即可



-------------------------------------來個華麗的分割線-----------------------------------------


給你一個真實的.psd 源文件的圖片你要怎麼一步一步切圖出來?


第一步: 將PSD文件在PS中打開



第二步: 在工具箱中找到切片工具切圖



第三步:通過切片工具選出你要切圖的區域後保存


選一個保存後的圖片格式(格式有什麼區別呢)

jpg使用的一種失真壓縮標準方法,不支持動畫、不支持透明色。JPEG的壓縮方式通常是破壞性資料壓縮(lossy compression),意即在壓縮過程中圖像的品質會遭受到可見的破壞。一張圖片多次上傳下載後,圖片逐漸會失真。

png8和png24格式如何選擇

1、如果對圖片佔用空間大小有要求,那麼可以選擇png8的格式,因爲這個壓縮比高會比png24格式佔用更少的空間
2、在ie6瀏覽器下是不支持png24格式透明的,只支持png8和gif透明。
3、如果應用在app建議使用png24格式保存,因爲這樣圖片會更清晰,質量會更高
4、色彩豐富的、大的圖使用jpg格式,不要使用png格式
5、尺寸小的,色彩不豐富的和背景透明的切成gif或者png8的,色彩豐富的則需要用png24格式



SO ,還有一個問題,切圖OK 了,那麼小圖標怎麼辦,不能連着白色背景一起切吧 ?


實現方式:首先在PS右側的圖層中找到小圖標


在圖層上點擊右鍵複製圖層,彈出提示框內,目標位置選擇新建


保存後,可以得到小圖標單獨圖層,通過切片工具切圖保存


最終得到png格式的小圖標了



最後,總結一下

身爲一名前端工程師使用PS無非就是在切圖和去切圖的路上,所以對PS並不需要UI設計師一樣對PS瞭解的那麼透徹,只要會用切圖和簡單的操作,你就完成了前端的標配了





發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章