021yin.com

對象顏色

設(shè)置形狀圖層和文本時，最好用對象本身的設(shè)置來改變顏色，而不是用顏色疊加。這樣做的好處：一是改顏色時候不需要加載圖層樣式窗口，二是在圖層工具欄里也更容易找到對象。如下圖。

對象漸變

漸變效果也是一樣的道理。用漸變填充圖層，盡量不要用圖層效果。

對象漸變（仿色）

不管用什么方法做漸變，Dither（仿色）選項都要選。這樣顏色漸變會看起來更自然，不會有拼接的感覺。PS CS* 一個圖層只能做一次漸變仿色，CS* 及以上版本，可以做兩次。

圖層樣式簡潔

不要把一個對象的圖層效果分成多層做。要做在一個圖層里，看起來整齊，復(fù)制粘貼的時候也方便。

縮放圖層效果

可以通過Image size（圖像大?。﹣砜s放整個文件大小，但是有時可能需要單獨縮放某些圖層看效果。如果縮放其中一個對象，樣式不會自動調(diào)整，但是能通過Scale Effects（縮放效果）來改變。（需要知道原始圖形的增加或者減少比例才能使兩個匹配）這個選項可以通過右擊當前圖層的fx找到。

圖層效果（描邊）

乍一看好像只有通過“描邊”選項才能實現(xiàn)描邊效果。其實還有很多其他方法，比如，使用內(nèi)、外發(fā)光或陰影，設(shè)置阻塞值為100%，就OK啦！描邊是在對象外緣，內(nèi)陰影和內(nèi)發(fā)光在內(nèi)側(cè)，外發(fā)光和投影在外側(cè)。不過圓角或者弧形的阻塞值不要太寬，會導致邊緣粗糙。

圖層效果vs矢量描邊

如果想畫出來的圖看著舒服，得在形狀圖層上加一個矢量描邊（CS* 才可以哦），這樣畫出來的邊緣更細膩（寬度越寬效果越明顯），而且還可以選擇各種款式：圓、方、斜邊、虛線!如果是給iOS做設(shè)計的話，這就太實用了，可以把non-Retina描邊設(shè)置成0.* px，直接縮放到0.* px；如果是Retina的話，可以直接縮放到1px。

復(fù)合矢量圖形

如果要畫復(fù)合矢量圖形，直接用illustrator要比在PS里面復(fù)制粘貼形狀方便得多。在illustrator里面把原始邊描好直接粘貼到PS里面就好了。如果矢量對象不止一個形狀，比如說一個多顏色的圖標，那就需要粘貼成智能對象了。

從Illustrator粘貼

從Illustrator粘貼形狀圖層可能會把對象從原位置移動個0.* px，這樣邊緣就比較模糊（CS* 及以上版本不存在這個問題），需要手動微調(diào)。

圖層混合模式

做效果時候，不要把圖層混合模式用在之后要合并的圖層上。下面例子中“強光”被輸出成了一個單獨的圖層，所以單獨顯示的時候，就不能顯示混合效果，變成了一個白色到黑色的漸變。

圖層混合模式

要重做效果，最好的解決辦法就是用的圖層跟下方的圖層獨立開來。

文本對齊

段落

如果有一個整段文字，那就把它放進一個整個的段落文本框里，而不要人工換行（點文本）。如果文字和字體改變的話，這個就要重新設(shè)置了，但是如果段落文本框畫得大小合適，文本就會自動變形。

轉(zhuǎn)換成段落文字

在文本命令下能把點文字轉(zhuǎn)化成段落文字，也能反轉(zhuǎn)。在PS CS* 里面，這個在圖層-文字-菜單命令里。

連字符

大部分設(shè)備不支持連字符，所以設(shè)計里最好就不要用了。

間距

默認的間距有點太擠了，所以要挪點空出來。上面的例子中把自動設(shè)置改成了20pt，是不是看起來舒服多了~

文本修邊

PS里面文本修邊有很多種方法。可以每種都試試看看哪個渲染出的效果最好。“消除鋸齒-犀利”的效果不錯。

文本修邊（系統(tǒng)）

PS CC里面有修邊選項，能夠復(fù)制操作系統(tǒng)的次像素渲染，這樣就能看出，假設(shè)把文本放在瀏覽器里是什么樣子。PS里面的次像素是灰度，不是RGB。

列表

創(chuàng)建列表，特別是旁邊有圖的列表，把所有的描述放在一個文本框里比每行字都單獨用一個圖層要好，這樣對齊起來也方便，以后更新也好用。

快速預(yù)覽

手機的分辨率比電腦更高，意味著設(shè)計的尺寸要小一點。把文件縮放成手機屏幕大小，然后看看是不是有些東西尺寸要調(diào)調(diào)。

圖層面板(選項)

PS默認會把每個復(fù)制圖層的名字都會加一個"copy"（副本）。神煩?？梢栽趫D層面板選項里把上面藍框框里的三項都點掉，這樣就好了。

命名圖層

命名要合理，很系統(tǒng)的命名別人看起來方便，客戶也覺得你很專業(yè)。建議：建一個命名一個，不要到最后再一起改。

整組圖層重命名

整組圖層重命名腳本。貌似很有實用的樣子。

圖層排序

命名要合理，排序也很重要。從上到下，從左至右，就跟看書一樣。

搜索

PS強大的搜索功能，你值得擁有。比如，命名圖層用前綴btn，icn之類，可以迅速過濾它們的內(nèi)容，如果需要更新許多按鈕的風格，這招就方便多了。當然還有許多搜索類型，比如說“類別”，“效果”，“圖層顏色”等等。都可以一試。

顏色編碼

這就是一個圖層顏色編碼的例子，一般核心設(shè)計沒有顏色標簽，右擊任一圖層前面的小眼睛選擇顏色。

展開圖層效果

圖層效果都展開來有點亂亂的，所以還是疊在一起看比較方便。

清除所有空圖層

“文件 - 腳本”菜單里有一個刪除所有空圖層的命令，可好用了！

移除沒有使用的FX

做完設(shè)計以后，很可能還有很多沒有上的效果。通常需要一個一個刪除，但是用了Remove Unused FX這個插件，一鍵清除，一步到位。

鎖定圖層

鎖定圖層能保護對象。但是如果你要修改或者刪什么東西，又不知道哪個圖層被鎖定了就比較頭疼了。

圖層復(fù)合

圖層復(fù)合可以在一個文件里存儲設(shè)計的不同變形版本。

生成器

PS CC里面最好用的一個功能，只要加個文件擴展名就能輸出圖層或者整個組。在“文件 - 生成菜單”里面操作。

輸出腳本

不用PS CC也能輸出，可以用我們ustwo的CropExport腳本。

另存為Web格式

看看兩個不同的PNG文件有啥不一樣？“另存為”存出來的文件比“另存為web格式”的要大* 2kb，當然選后者比較合算。

減小文件大小

如果輸出的文件不需要透明度，那可以轉(zhuǎn)成* bit的PNG文件。下面的例子里，文件質(zhì)量沒有損耗，但是文件大小縮小了一半多。

ImageOptim

一款適用與mac操作系統(tǒng)的軟件（前端開發(fā)中必備的圖片壓縮軟件）。

減少PSD文件大小

減少PSD大小的一個快速的方法就是隱藏所有的圖層。如果設(shè)計要求顯示某些元素，那可能就不方便了。當然還可以用ZIP壓縮PSD文件，這樣能縮成原始大小的10%。

RGB（* * * 格式）

有些設(shè)備不像電腦屏幕一樣顏色多，漸變和過渡可能就看不大出，為了避免這個，可以用 Ximagic ColorDither 插件把圖轉(zhuǎn)成* * * 格式。

* * * （批量處理）

很多文件一起做* * * 過濾很費勁，所以可以用“動作和批處理工具”把這個過程自動化。

照常輸出文件，然后把用* * * 的動作“記錄”保存，輸出結(jié)果用“另存為web格式”（省空間），不保存，關(guān)閉文件。然后，在這樣的設(shè)置環(huán)境下，運行批處理工具里的“動作”。所有過濾處理過的文件就都會輸出到原先的另存為Web文件夾里。

描邊

有時弧形的1px描邊看起來會比較單薄，為了增強存在感，又不實際增加px值，就增加一個“發(fā)光”的效果。差別很小，但是多少有點效果。

圓圈淡出

圓圈淡出用“描邊”功能很容易就能做出來。填充類型：漸變色填充，樣式：角度。

快閃

讓一個對象快閃，可以用“內(nèi)陰影”效果，“低透明度”。注意一點，因為這個形狀是以母圖層的上沿為基礎(chǔ)的，所以任何不直的地方都會直接被快閃代替。

內(nèi)發(fā)光加入雜色

用內(nèi)發(fā)光效果能夠給一個對象添加簡單的雜色文理。設(shè)置“來源”為“中心”，“大小”為0，然后可以通過雜色設(shè)置來調(diào)節(jié)數(shù)量。

提取logo

有時候logo不是現(xiàn)成的，就只能自己摳了。當然還可以找找公司網(wǎng)站看看有沒有PDF文件能下載的。用Illustrator打開，提取矢量logo。

星場

畫筆選項可以設(shè)置出不同效果，通過改變“大小”和“透明度”能出不同的效果。

樣式

增加樣式和紋理：畫幾個小方格，用正方形選區(qū)選中，然后選擇菜單里的“編輯 - 定義圖案”，就可以在圖層樣式 - 圖案里面找到剛剛自定義的圖案了。

Kuler插件

配色什么沒想法？試試Kuler吧，這個插件能夠讓你看看別人的配色，自己還能自創(chuàng)配色呢。

字符瀏覽器

鍵盤瀏覽器

路徑快捷鍵

有很多路徑快捷鍵可以提高工作效率。選擇兩個形狀圖層，按“Command + E”繪制路徑后，按“+”或者“Shift”添加另一個路徑。按“-”或者“Option”刪除一個路徑。繪制好后，就可以通過選擇再按“+”“-”號來增添或者刪減新路徑了。

鍵盤快捷鍵和菜單

用“編輯-鍵盤快捷鍵”來設(shè)置個性化的快捷方式。下圖就是“對齊-垂直居中”和“對齊-水平居中”的快捷鍵。另外一個常用的就是把“Command+Q”這個快捷命令移除，避免意外退出PS。

介紹

矢量工具不頂用時就要用Illustrator了。主要用于創(chuàng)建復(fù)雜圖形，再輸出到PS樣式里。這樣功能性和效果都更強了。

Illustrator顏色設(shè)置

打開“編輯-顏色設(shè)置”，把“工作空間”的“RGB”設(shè)置成“monitor RGB-Display”，同時，關(guān)掉“色彩管理”下面的“RGB”選項。

預(yù)設(shè)

在Illustrator里有很多預(yù)設(shè)可以改動。首先，把鍵盤增量設(shè)置為1px，這樣光標的移動就按這個標準量了。然后，打開“單位”選項，把“通用”和“描邊”都設(shè)置成“像素”，這樣所有的大小都是用像素來丈量的。字體就不管它了，還是按照“pt”設(shè)置。

網(wǎng)格

跟PS一樣，10×10的網(wǎng)格可能比較好用。這些設(shè)置可以在“預(yù)設(shè) - 參考線和網(wǎng)格”選項里改。

對齊到網(wǎng)格

跟PS一樣，Illustrator也有對齊到網(wǎng)格這個工具，在“視圖”菜單欄下。

智能參考線

有時候需要突破像素網(wǎng)格的限制，可以試試智能參考線。比如下面的例子，圓上* * °位置還需要一個錨點?？梢栽趫D下方放一個三角形，打開智能參考線，鋼筆工具就能在兩個圖形重疊的地方形成一個錨點。

精確

變形窗口是設(shè)計師的好伙伴！有了這個窗口，你就可以看看圖形或者哪怕一個點大小、位置設(shè)計得對不對。同時寬度和高度選項里面一改動，其他的尺寸也會相應(yīng)變動以保持比例。

像素對齊網(wǎng)格

使用時要確保菜單欄里面的“新對象對齊像素網(wǎng)格”是關(guān)著的，對于已有的圖形，像素網(wǎng)格對齊這個框沒有勾選。因為一旦勾選了像素網(wǎng)格對齊，可能一不注意，描邊時對象就開始亂飄了。

像素預(yù)覽

這里也要謹慎。如果點了“視圖-像素預(yù)覽”，可能像素不是很精確的形狀看起來都像是很精確的似的。

預(yù)覽模糊

不必過度擔心，有時候即使尺寸以像素來算的，Illustrator輸出的圖形邊緣還是可能模模糊糊的，看起來像個Bug把，但有一點好，如果圖形導進PS里面就不模糊了。

結(jié)構(gòu)

如果不是要用來畫圖形，Illutstrator里不要每個圖層都命名，但是要有條理，不能一股腦全鋪開來。

干貨這么多

你的水夠喝么？

《完美像素手冊》

謝謝各位

全·劇·終

版權(quán)聲明：早讀課文章均來自作者投稿或者授權(quán)文章，部分文章為轉(zhuǎn)載均盡量注明作者和來源，文章版權(quán)歸作者所有，若涉及版權(quán)問題，請?zhí)砑觤omo*：吉印通13816211622 j* 211* 1* ，感謝。