前端實戰(一)-----用ps把PSD切成HTML能用的圖片
本章實際操作使用ps來進行切圖,分成四部分來講解:
1.切圖的常規步驟
2.如何只保留某一部分
3.刪除切片
4去掉預設切片線
切圖的常規步驟
我現在有一張登入框的psd,拿到psd後首先要思考怎麼構圖。也就是切圖的思路。我這裡只是演示步驟,所以就不詳細推理了。
在工具欄中選擇切片工具
然後用切片工具畫出三個部分,如果覺得切片工具不好畫的話 可以右鍵切片 編輯切片 直接輸入引數。
點選檔案----》儲存為web和裝置所用格式
這裡可以調節一些引數和圖片格式,或者直接點選儲存並選擇儲存路徑即可。
儲存後到儲存的路徑看到我們的3個切片已經有了
如何只保留某一部分
我們上面已經瞭解了正常的流程,不過有時候我們需要某一部分的圖片,不能一次性全部切好。比如我們需要藍色按鈕單獨作一張圖片。那怎麼單獨切出這個按鈕呢。
步驟如下:
選擇切片工具,畫出按鈕。
檔案--》儲存為web和裝置所用格式,關鍵是在調節頁面的時候 需要點選選中按鈕部分。然後點儲存。
選擇好路徑後 選擇 只輸出 選中切片 也就是隻輸出 按鈕。
結果資料夾中就只輸出了按鈕圖
ps:這裡只是演示步驟,正規流程中 按鈕這些單獨的圖層 最好使用 圖層切片,這樣得到的圖才是最完整無混合邊界的圖。
步驟是 在右側圖層皮膚中選中圖層 ----》選取圖層---》新建基於圖層的切片
刪除切片
在畫切片的時候 經常有畫錯的時候, 除了後退之外我們還可以刪除切片。
對著切片直接右鍵可以看到 刪除切片。
僅僅是使用者切片才能 使用 刪除切片。
非使用者切片的刪除切片是灰色的。只能先右鍵點選提升為使用者切片之後才能刪除。
所謂的使用者切片就是 我們畫的切片,非使用者切片是我們畫了一部分之後 系統補充的另一部分。
去掉預設切片線
前面我們講到刪除切片 只能刪除使用者切片 那麼系統預設的切片 和 切片線應該怎麼去掉 刪除呢。
檢視-----》清除切片即可。
相關文章
- labelme標註後的圖片切成小圖和小jsonJSON
- PS新手教程-如何使用PS把圖片上的數字p成別的數字
- HTML5利用canvas,把多張圖合併成一張圖片HTMLCanvas
- 一行命令PS你的圖片
- 用html5實現圖片的旋轉--照片牆HTML
- 前端要會的一些ps切圖和和ps技巧!前端
- psd圖片不能在網頁上顯示網頁
- html input type=file 選擇圖片,圖片預覽 純html js實現圖片預覽HTMLJS
- web前端入門到實戰:簡單的圖片輪播Web前端
- 用Kotlin擼一個圖片壓縮外掛-實戰篇(三)Kotlin
- 【HTML】04圖片HTML
- ps-前端切圖前端
- 一款實用的前端截圖工具前端
- 純前端 Canvas 實現 HTML 轉圖片,自動生成微信閱讀卡片前端CanvasHTML
- 圖片純前端JS壓縮的實現前端JS
- PS製作圓角圖片
- 前端的圖片壓縮image-compressor(可在圖片上傳前實現圖片壓縮)前端
- HTML5 body設定全屏背景圖片 如何讓body的背景圖片自適應整個屏—-實戰經驗HTML
- uniapp實戰——完成圖片的預覽功能APP
- Java實現圖片上傳到伺服器,並把上傳的圖片讀取出來Java伺服器
- PS·web前端切圖(詳細)Web前端
- HTML 連結和圖片HTML
- 前端實現點選下載圖片前端
- 一個簡單炫酷的前端小專案(html+css+js)----3D圖片演示前端HTMLCSSJS3D
- 不是遇到圖片就只能用SDWebImage,我們自己也可以實現Web
- 淺談Kotlin實戰篇之自定義View圖片圓角簡單應用(一)KotlinView
- ps裁剪工具怎麼自由裁剪 ps如何裁剪自己想要的圖片尺寸
- 微前端實戰:大型前端應用的拆分與治理前端
- 一鍵批次獲取易貝商品圖片的實用技巧
- 基於Spring Boot實現圖片上傳/加水印一把梭操作Spring Boot
- Web 前端實戰(三):雷達圖Web前端
- PS拍照圖片清晰化處理教程
- 純前端實現 JPG 圖片壓縮 | canvas前端Canvas
- 用canvas實現一個自動識別兩張圖片差異(圖片找不同)的功能Canvas
- 前端圖片 - icon Fonts前端
- 使用icomoon把svg圖片生成字型圖示SVG
- 本地HTML中圖片下載HTML
- 線上PS如何處理圖片 怎麼使用線上PS
- 用Python實現圖片的清晰掃描Python