前端開發需要安裝的p圖軟件?歡迎關注web前端開發中的切圖指的是前端開發工程師在拿到網頁設計稿之後将其中需要用到的圖标,圖片等素材取出來單獨保存,以便于在代碼中引用通常需要切出的的内容是LOGO,重複出現的圖标,還有作為網頁内容存在的海報圖片等,我來為大家科普一下關于前端開發需要安裝的p圖軟件?以下内容希望對你有幫助!
歡迎關注!
切什麼圖?web前端開發中的切圖指的是前端開發工程師在拿到網頁設計稿之後将其中需要用到的圖标,圖片等素材取出來單獨保存,以便于在代碼中引用。通常需要切出的的内容是LOGO,重複出現的圖标,還有作為網頁内容存在的海報圖片等。
如何切圖?使用Photoshop切圖,首先将設計稿中的所有文字圖層隐藏,對于有背景的文字圖層使用自由變化加填充工具将文字隐藏。然後将去掉文字的圖片保存起來,内容性的圖片保存為jpg格式,圖标LOGO類的圖片保存為png格式。然後将圖标和圖片分類組合到sprite中,方便後期使用。
切出的圖片如何使用?在html中直接用img标簽的src屬性引入圖片,在css中使用background-image結合background-position将sprite中的圖标引入到css樣式表中。
需要通過測量和取色得到的?
寬度,高度(width,height)
内外邊距(padding,margin)
邊框粗細和顔色(border)
定位(position)
文字大小和顔色(font-size、color)
行高(line-height),其為第一行的底端到第二行的底端。
背景位置(background-position)
背景顔色(background)
測量取色切圖都需要用到的Photoshop知識開啟輔助視圖中的下列功能,在視圖菜單下找到對齊(開啟靠近吸附功能);标尺(Command R);參考線(Command ;)
測量時應盡可能放大畫布來減少誤差。量取文字時選取尺寸大的文字進行測量可以減小誤差。
使用拾色器來取色,使用魔棒工具判斷顔色是否為漸變。
還需要了解矩形選框工具和切片工具等。
收藏轉發請先關注,謝謝支持!
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!