前端實戰(一)-----用ps把PSD切成HTML能用的圖片
本章實際操作使用ps來進行切圖,分成四部分來講解:
1.切圖的常規步驟
2.如何只保留某一部分
3.刪除切片
4去掉預設切片線
切圖的常規步驟
我現在有一張登入框的psd,拿到psd後首先要思考怎麼構圖。也就是切圖的思路。我這裡只是演示步驟,所以就不詳細推理了。
在工具欄中選擇切片工具
然後用切片工具畫出三個部分,如果覺得切片工具不好畫的話 可以右鍵切片 編輯切片 直接輸入引數。
點選檔案----》儲存為web和裝置所用格式
這裡可以調節一些引數和圖片格式,或者直接點選儲存並選擇儲存路徑即可。
儲存後到儲存的路徑看到我們的3個切片已經有了
如何只保留某一部分
我們上面已經瞭解了正常的流程,不過有時候我們需要某一部分的圖片,不能一次性全部切好。比如我們需要藍色按鈕單獨作一張圖片。那怎麼單獨切出這個按鈕呢。
步驟如下:
選擇切片工具,畫出按鈕。
檔案--》儲存為web和裝置所用格式,關鍵是在調節頁面的時候 需要點選選中按鈕部分。然後點儲存。
選擇好路徑後 選擇 只輸出 選中切片 也就是隻輸出 按鈕。
結果資料夾中就只輸出了按鈕圖
ps:這裡只是演示步驟,正規流程中 按鈕這些單獨的圖層 最好使用 圖層切片,這樣得到的圖才是最完整無混合邊界的圖。
步驟是 在右側圖層皮膚中選中圖層 ----》選取圖層---》新建基於圖層的切片
刪除切片
在畫切片的時候 經常有畫錯的時候, 除了後退之外我們還可以刪除切片。
對著切片直接右鍵可以看到 刪除切片。
僅僅是使用者切片才能 使用 刪除切片。
非使用者切片的刪除切片是灰色的。只能先右鍵點選提升為使用者切片之後才能刪除。
所謂的使用者切片就是 我們畫的切片,非使用者切片是我們畫了一部分之後 系統補充的另一部分。
去掉預設切片線
前面我們講到刪除切片 只能刪除使用者切片 那麼系統預設的切片 和 切片線應該怎麼去掉 刪除呢。
檢視-----》清除切片即可。
相關文章
- psd 轉換 htmlHTML
- psd圖片不能在網頁上顯示網頁
- 圖片爬取實戰一
- labelme標註後的圖片切成小圖和小jsonJSON
- web前端入門到實戰:簡單的圖片輪播Web前端
- 用html5實現圖片的旋轉--照片牆HTML
- html input type=file 選擇圖片,圖片預覽 純html js實現圖片預覽HTMLJS
- SYNOPSYS™PSD優化優化
- 炫酷實用 7款jQuery/HTML5圖片應用jQueryHTML
- ScreenToLayers 1.2.3 Mac PSD格式截圖軟體Mac
- 一款實用的前端截圖工具前端
- win10系統把cdr格式轉換成psd檔案的方法Win10
- 用Kotlin擼一個圖片壓縮外掛-實戰篇(三)Kotlin
- PS新手教程-如何使用PS把圖片上的數字p成別的數字
- CSS把彩色圖片變為灰度圖片CSS
- 純前端 Canvas 實現 HTML 轉圖片,自動生成微信閱讀卡片前端CanvasHTML
- 一行命令PS你的圖片
- 把HTML插入canvas實現網頁截圖HTMLCanvas網頁
- 【HTML】04圖片HTML
- java Html2Image 實現html轉圖片功能JavaHTML
- 圖片純前端JS壓縮的實現前端JS
- ps切圖實用小技巧、圖片格式的區別及相關內容
- PS教程:手把手教你把圖片變成江南水墨風
- Android 圖片操作,Image實戰Android
- Win10系統怎麼顯示PSD縮圖【圖文】Win10
- HTML5 body設定全屏背景圖片 如何讓body的背景圖片自適應整個屏—-實戰經驗HTML
- 用ps製作動態圖片教程
- 前端的圖片壓縮image-compressor(可在圖片上傳前實現圖片壓縮)前端
- 將 HTML 生成圖片HTML
- 用canvas把圖片轉為base64程式碼Canvas
- HTML5實現圖片上傳2HTML
- 前端實現點選下載圖片前端
- HTML5利用canvas,把多張圖合併成一張圖片HTMLCanvas
- Java實現圖片上傳到伺服器,並把上傳的圖片讀取出來Java伺服器
- BitmapShader 實現圓型圖片
- 前端要會的一些ps切圖和和ps技巧!前端
- uniapp實戰——完成圖片的預覽功能APP
- Web 前端實戰(三):雷達圖Web前端