传统切图
一、傳統(tǒng)的切圖方法
我們先介紹一個傳統(tǒng)的切圖方法?
使用范圍:需要切多張圖,帶背景的
1.打開下載的psd文件
出現(xiàn)下面沒關(guān)系,直接點確定即可?
打開后,因為文件比較長所以看不清細節(jié),所以我們要放大圖片到合適的大小。?
放大圖片:”CTRL” +“+”?
縮小圖片:“CTRL”+ “-”
然后我們來認識下photoshop中的一些工具?
2.修改參考線
我們可以看到我們的圖片中很多條藍色的參考線,這些線是設計人員用來設計用的,有的文件中的線會直接把我們需要切的東西給包裹出來,但是像我們練習的這個文件中的參考線特別的多,特別的密集,很多我們都不需要,所以我們先把這些參考線都清除掉。
刪除參考線:選擇移動工具,然后把要刪除的參考線往標尺上拖,往上或者往左都可以
沒有參考線的可能是參考線被隱藏了,通過“CTRL”+ “;”就可以顯示出來?
(制圖軟件所以鼠標沒有變,自己操作的時候鼠標會變成黑色的)?
我們只要把擋住圖標的參考線給刪除就可以?
3.選擇要切的圖標
這里我們就切幾個頁面上的圖標,文字部分我們都可以通過代碼來實現(xiàn),所以就不切了。?
①選擇工具欄第一個“移動工具”?
②然后查看上面選項欄“自動選擇”有沒有被選中,沒有被選中點擊選中,將它旁邊的“組”改為“圖層”,這樣我們點擊圖標的時候,右下角的圖層面板就能自動的選中對應的圖層?
③點擊我們要切的圖標,然后到右下角的圖層面板,點擊當前選中的這個圖層旁邊的小眼睛來隱藏當前圖層,通過顯隱來確定是不是我們要切的圖標?
④確認了我們要切的圖標后,分別從水平標尺和豎直標尺的地方拉取參考線來把圖標給包裹住。因為我們當前選中的就是我們要切的圖層,所以當參考線拖過去的時候會自動吸附到圖標的邊緣。
⑤用同樣的方法把圖標都用參考線包裹出來,最下面一排,要把圖標切成一樣高的才好,所以以第一個的上邊界和下邊界為基準。
4.切片需要的圖標
現(xiàn)在,我們已經(jīng)用參考線把我們的圖標給包裹出來了,下面,我們要用切片工具來切出我們的圖標?
①選擇切片工具,左邊工具欄從上往下數(shù)第五個,然后右鍵就可以找到,然后選中?
②然后找到我們剛才用參考線包裹的圖標,從左上角一直拖到右下角,因為有參考線的幫助,所以軟件能夠自動吸附到參考線上,所以只要大概找準左上角和右下角就可以選取出來?
③用同樣的方法把剩下的都選取出來?
5.將切片存儲為圖片
①選擇 “文件”=》“存儲為Web所用格式”?
②調(diào)整縮放比例,讓圖片能完整的在窗口顯示?
③在窗口中,從左上角一直拖到右下角,選中所有切片,這樣我們才能把切片都存儲為我們想要的格式?
④存儲為png-24格式,png-24格式的圖片質(zhì)量比較高?
⑤保存,選擇用戶所有切片可以只保存我們自己切出來的切片?
⑥然后查看保存的文件里面就多了一個images文件夾,里面就是我們切出來的圖片?
?
但是這樣做會發(fā)現(xiàn)png格式的背景還是有的,而且如果只是需要一張圖的時候,還要這樣切就會比較麻煩,所以(二)中會介紹一些切一兩個小圖標的方法
轉(zhuǎn)載于:https://www.cnblogs.com/annie211/p/8639135.html
總結(jié)
- 上一篇: python web开发-flask中日
- 下一篇: Flask web开发之路二