欧美成人午夜免费全部完,亚洲午夜福利精品久久,а√最新版在线天堂,另类亚洲综合区图片小说区,亚洲欧美日韩精品色xxx

photoshop操作之前端PS操作切圖和合并sprite

2018-02-07 11:47:44 2512瀏覽

今天給大家介紹一下關(guān)于前端相關(guān)PS操作之切圖和合并sprite，首先給那些已經(jīng)學(xué)習(xí)完HTML/CSS基礎(chǔ)知識，想模仿做一個靜態(tài)頁面，但缺少對ps了解的新手同學(xué)，那么下面我們一起來看一下吧。

一、準(zhǔn)備工作

切圖前需要先對PS進行基本設(shè)置，記住一些快捷鍵能幫我們更快的工作。

工作區(qū)設(shè)置

通過窗口打開：信息、字符、圖層、歷史記錄、選項。

信息面板：配合矩形選框可顯示距離、鼠標(biāo)定位坐標(biāo)

字符面板：顯示字體、字體大小、字體顏色、行高

歷史記錄：快速返回到歷史狀態(tài)

單位設(shè)置

信息調(diào)板設(shè)置：顏色RGB，標(biāo)尺單位px

編輯——首選項——單位與標(biāo)尺：單位px

快捷鍵

整體移動：空格+鼠標(biāo)

整體縮放：ait+滾輪

取消：ctrl+D

返回上n步：ctrl+alt+Z

移動：V

文字：T

選框：M

吸管：I

切片：K

標(biāo)尺：ctrl+R

新建參考線：alt+V+E(可直接設(shè)參數(shù))

參考線：ctrl+;

拿到設(shè)計圖，可以先分析頁面的結(jié)構(gòu)分布，判斷設(shè)計圖中公共樣式部分，判斷出圖中需要切出單獨保留的圖片和需要拼接Scrpite圖片。

二、切圖

切圖前先確定切圖范圍，并且隱藏掉圖上的干擾信息(比如文字，不必要的小短線，圖標(biāo)什么的)。

1.Icon/Logo

這類圖片常常尺寸不是很大，起指示作用，較少變更，背景往往為透明。切這種圖片可以用這兩種方法。

1.1新建psd另存對象

操作

移動工具選中——圖層轉(zhuǎn)化為智能對象——選框工具框選大致區(qū)域、ctrl+c、ctrl+n確定——ctrl+v——ctrl+alt+shift+s——PNG-24/8、命名save、關(guān)閉窗口

無需仔細框選圖片邊沿，也能非常準(zhǔn)確的切取圖片

一次只能處理一張圖片，適用于圖比較少的情況

對于由多個圖層組成的icon，需要先全部選取并合并圖層

1.2切片法

操作

切片工具K——選擇相應(yīng)位置切片——隱藏背景/文字——ctrl+alt+shift+s、切片選擇工具(可單獨選幾個保存)、PNG-24/8保存——保存所有用戶切片、文件位置，保存

可一次切完單頁面上所有圖片后一次性保存，當(dāng)然保存圖片格式是一致。

切片時適當(dāng)放大圖片，注意圖片邊緣?？商崆霸O(shè)好準(zhǔn)確的參考線。

對于比較規(guī)整的頁面，可以利用【基于參考線自動切片】

1.3保存

顏色單一，且【無】半透明效果opacity——存為PNG8

顏色單一，且【有】半透明效果opacity——存為PNG24

2.內(nèi)容/背景

設(shè)計中有些圖片是表達具體內(nèi)容，往往隨著頁面內(nèi)容的更新而變更并且顏色會更豐富。(如下圖紅框所示)

2.1操作

覆蓋圖層隱藏——選框圖片——alt+I、p裁剪——ctrl+alt+shift+s——JPEG、60——ctrl+alt+z還原

當(dāng)然，這些圖片往往需要存儲的格式比較單一，可以直接全部切片，保存。

2.2存儲

顏色豐富，無透明色——存為JPEG60/80

JPEG有損壓縮，數(shù)值越高，圖片質(zhì)量越高

三、合并sprite

為了減少http請求數(shù)量，加速頁面顯示。我們可以將加載量較大，不隨用戶信息變化的多個小圖片拼接成雪碧圖。

操作

選中A圖層、轉(zhuǎn)化為智能對象、選框工具框選區(qū)域、ctrl+c、ctrl+n、ctrl+v

——圖像畫布大小、定位、更新寬/高——放好交界參考線——選中B圖層、轉(zhuǎn)化為智能對象、選框工具框選區(qū)域、ctrl+c、回到新建窗口、ctrl+v

四、測距/獲取顏色值

當(dāng)然，除了以上。我們還有兩個非常常用又非常簡單的ps操作：測距和獲取顏色值。寫CSS一定會用到。

測距

矩形選框直接拉，在信息面板可見寬(w)高(H)

字體大小直接看字符面板

獲取顏色值

吸管吸取相應(yīng)位置，工具欄設(shè)置前景色點一下，即可得各種形式顏色數(shù)值

可多吸取幾個位置，注意顏色數(shù)值是否有變化，確定有無漸變

最后想要工作不累就要不斷的提升自己的技能，請關(guān)注扣丁學(xué)堂UI培訓(xùn)官網(wǎng)、微信等平臺，扣丁學(xué)堂IT職業(yè)在線學(xué)習(xí)教育平臺為您提供權(quán)威的UI視頻教程系統(tǒng)，通過千鋒扣丁學(xué)堂金牌講師在線錄制UI在線視頻教程，讓你快速掌握UI從入門到精通UI設(shè)計實戰(zhàn)技能?？鄱W(xué)堂UI交互設(shè)計交流群：568096113。

【關(guān)注微信公眾號獲取更多學(xué)習(xí)資料】

查看更多關(guān)于“ui設(shè)計資訊”的相關(guān)文章>>