前端高階ps切圖技巧。PS軟件更新很快，但出于對(duì)版本穩(wěn)定性的追求，筆者并沒(méi)有新版本出來(lái)就馬上更新的習(xí)慣。而PS CC版本的出現(xiàn)，卻改變了筆者的看法。用好PS CC，會(huì)在設(shè)計(jì)效率方面帶來(lái)很大提升。
切圖，重要的是找精確像素!不要在用傳統(tǒng)的切刀進(jìn)行切割啦，拿到一副PSd圖形的，可以使用這樣兩種方式：
(1)如果你的圖層很多，你可以用“ctrl+點(diǎn)擊想要的圖片“直接選中你想要圖片的圖層，簡(jiǎn)單到位，然后將圖層轉(zhuǎn)化為智能對(duì)象(當(dāng)然可以幾個(gè)圖層拼到一起)，然后雙擊彈出點(diǎn)擊確定，就ok了;
(2)對(duì)于大圖，這個(gè)時(shí)候就有很多的東西存在，這里就使用，選區(qū)先選中你要切的圖形，然后”編輯-合并拷貝-新建-拷貝“，就能建立一個(gè)完成整的圖片切圖的樣子了，就ok了。
注意：這里的有幾點(diǎn)說(shuō)明：
(1)切圖要拉好參考線，也可以用”F8“來(lái)查看像素的詳細(xì)信息;
(2)常用的前端圖片存儲(chǔ)有三種：.png\.jpg\.gif 三者之間的區(qū)別，簡(jiǎn)而言之可以概括為：
.png 優(yōu)：色彩單一的圖形合適，不失真，缺：存儲(chǔ)大小中等;
.gif 優(yōu)：動(dòng)圖，存儲(chǔ)非動(dòng)圖時(shí)占據(jù)內(nèi)存小，缺：無(wú)柔光效果，對(duì)前邊的圖形失真嚴(yán)重;
.jpg 這里切圖保存時(shí)，最好選擇”web所用格式“其中重要的是設(shè)置品質(zhì) ，在不影響圖像觀看的情況下，可以壓縮，特別是大圖有真實(shí)色彩的圖形最好選擇這種格式。
一般，前端所用圖形在200K左右，這樣加載的時(shí)候有較良好的效果。
1.更清晰的圓
當(dāng)畫一些較小的形狀時(shí)，銳度非常重要，怎樣讓圖像沒(méi)有鋸齒感呢?有時(shí)候圓角和圓形的繪制過(guò)程中，經(jīng)常會(huì)出現(xiàn)這種問(wèn)題。Isaac Grant的這條建議能幫助你解決這個(gè)問(wèn)題，非常簡(jiǎn)單但有效的辦法!
2.復(fù)制顏色的HEX值
拷貝顏色的十六進(jìn)制代碼，最近才知道的功能,CS4就有了，選擇吸管工具然后按右鍵>拷貝顏色的十六進(jìn)制代碼。非常省時(shí)的技巧。
3.色彩調(diào)和
Erica Schoonmaker在Dribbble向我們展示了這個(gè)調(diào)色技巧，同時(shí)還有3分鐘視頻演示
Erica Schoonmaker的私密調(diào)色技巧：
先選出一堆想要調(diào)節(jié)的顏色，建立一個(gè)圖層，
然后在這個(gè)圖層之上選擇整體想要的色調(diào)，混合模式設(shè)置為疊加(柔光也可以，混合模式自己看著辦，想要更深還是更淺自己調(diào)節(jié))，然后再調(diào)節(jié)不透明度。
上圖疊加的顏色是#FF9C00 ，不透明度25%。
4.利用漸變映射豐富色彩
這條建議來(lái)自Jimena Catalina 如圖，能讓照片和插畫更豐富多彩。(圖中不透明度20%)
5.準(zhǔn)確的邊緣半徑
當(dāng)在圓角框內(nèi)置入小圓角框時(shí)，需要調(diào)整邊緣半徑來(lái)設(shè)置距離。這里有一個(gè)快捷方法，見上圖。
6.PS中文本區(qū)域的塑形
請(qǐng)看此視頻，利用PS路徑控制文本框。
7.漸變映射的威力
什么是漸變映射?
看下圖，假設(shè)不是轉(zhuǎn)換成黑白色調(diào)，而是轉(zhuǎn)換成紅黃色調(diào)，深色部分用紅色表示，淺色部分用換色，中間部分不是灰色，而是橙色，簡(jiǎn)而言之，這就是漸變映射。
將不同亮度映射到不同的顏色上去。使用漸變映射工具可以應(yīng)用漸變重新調(diào)整圖像,應(yīng)用于原始圖像的灰度細(xì)節(jié),加入所選的顏色。
上圖中這些箭頭的顏色和位置決定了對(duì)比和亮度
漸變映射從PS 4便開始存在了(是96年的 4.0版本，而不是CS4)，不是新功能，但是很多人不知掉，我個(gè)人認(rèn)為漸變映射是PS中最強(qiáng)大的色彩功能。
添加漸變映射
圖像>調(diào)整>漸變映射 或者圖層>新建調(diào)整圖層>漸變映射
一般來(lái)說(shuō)，漸變映射讓圖像更亮、更高對(duì)比、飽和度更低，但是無(wú)法超出8位0——255的色彩范圍，漸變映射可以通過(guò)新建調(diào)整圖層來(lái)實(shí)現(xiàn)，提高了容錯(cuò)率
用途
當(dāng)使用調(diào)整圖層時(shí)，漸變映射用起來(lái)非常順手，能夠打造出復(fù)雜的漸變效果，只需一個(gè)漸變映射調(diào)整圖層。
而且其他元素也可以通過(guò)”復(fù)制調(diào)整圖層”的方式來(lái)實(shí)現(xiàn)同樣效果
總而言之，Bjango
領(lǐng)我們大致瀏覽了漸變映射，如何更可控、更精確的漸變映射，Bjango的這篇文章令我大開眼界。
8.快速開打圖層組至圖層/快速關(guān)閉圖層組
非常好的技巧,Alt/Option點(diǎn)擊箭頭便可以層層打開圖層組至圖層(并且展現(xiàn)具體圖層樣式)，再點(diǎn)擊一次就關(guān)閉圖層組，能夠幫助你整理圖層&圖層組。
9.照片雙重曝光
Fuji-Superia-800網(wǎng)頁(yè)版麻將 height=”336″ data-pinit=”registered” />
這個(gè)教程很不錯(cuò)，雖然不是小技巧，也推薦一下。
另：5分鐘課堂：如何在PS中創(chuàng)建雙重曝光照片
10.像素對(duì)齊
PS中的對(duì)齊像素很有用，但是設(shè)計(jì)一些復(fù)雜的形狀時(shí)，重新調(diào)節(jié)大小后，對(duì)齊像素效果不佳，可能會(huì)出現(xiàn)鋸齒感。只需幾個(gè)快捷鍵就能解決這個(gè)問(wèn)題，請(qǐng)看這里(YouTuBe需要翻墻，推薦一個(gè)代理)
11.CC中的隔離模式
右鍵點(diǎn)擊畫布便能查看在隔離模式下所選的圖層。
CC中的一項(xiàng)新功能便是隔離模式，化繁為簡(jiǎn)，讓你在復(fù)雜的圖層環(huán)境下工作更順手。隔離模式會(huì)整理圖層面板，只顯示使用的圖層，其他使用的圖層暫時(shí)隱藏。
若想進(jìn)入隔離模式，激活移動(dòng)工具(按V)，選擇想要操作的圖層(一個(gè)或者幾個(gè))，按住Shift或者Cmd在圖層面板中點(diǎn)擊他們，或者Command 拖移(Ctrl 拖移，Win)來(lái)在畫布上所選圖層周圍建立選區(qū)。然后右鍵，在下拉菜單中選擇隔離模式。
另外一種進(jìn)入隔離模式的方式是使用圖層面板的濾鏡下拉菜單，選擇僅僅顯示所選圖層
右鍵點(diǎn)擊圖層面板來(lái)從隔離模式中釋放圖層。
原文地址： Isolation Mode
12.最全的PS圖層技巧和快捷鍵
PS圖層技巧和快捷鍵 這篇文章是我看到的最全的PS圖層快捷鍵列表，相當(dāng)有用。
13.PS禮儀手冊(cè)
PS禮儀手冊(cè)是一份超棒的指導(dǎo)，能夠讓你最大效率的使用PS。
沒(méi)人喜歡亂糟糟的PSD文件，PS禮儀手冊(cè)讓你的作品層級(jí)更明晰，更易懂。
14、多重形狀和路徑選擇
使用Photoshop CC提供的多重形狀和路徑選擇，可以同時(shí)選取多個(gè)路徑、形狀和矢量蒙版，不需按多次鼠標(biāo)即可完成更多任務(wù)。即使在擁有許多路徑的多圖層復(fù)雜圖像文件中，也可以使用新的濾鏡模式，直接在畫布上鎖定路徑 (及任何圖層)。
15、簡(jiǎn)易繪制虛線
PS CC不需要手工計(jì)算像素來(lái)進(jìn)行繪制虛線，虛線繪制變成基礎(chǔ)控件。
16、文字優(yōu)化
舊版本的PS在使用微軟雅黑字體時(shí)，無(wú)法清晰顯示。而PS CC 增加了WindowsLCD的文字選項(xiàng)，編輯文字時(shí)選擇WindowsLCD，就可在PS中獲得文字外觀的真實(shí)預(yù)覽效果。
17、背景存儲(chǔ)與自動(dòng)復(fù)原
使用PS CC，能夠在背景儲(chǔ)存大型的 PS 檔案，同時(shí)還可繼續(xù)工作;也可透過(guò)全新的自動(dòng)復(fù)原選項(xiàng)保留所做的編輯，而不會(huì)中斷工作進(jìn)度。
18、PS軟件效率更高，大型文件處理更快
PS CC對(duì)代碼進(jìn)行了優(yōu)化，軟件算效率有了很大的提升。
19、可編輯的圓角矩形
PS CC可以生成4個(gè)不一樣圓角的矩形，圓角設(shè)置更加精準(zhǔn)。
20、更精細(xì)的描邊
描邊能精確到0.x，能做更加精致的效果。
21、簡(jiǎn)單設(shè)置Photoshop CC
說(shuō)了這么多好處，也談?wù)剢?wèn)題。在使用PS CC的過(guò)程中，筆者經(jīng)常遇到假死、閃退、崩潰的問(wèn)題。出現(xiàn)這些問(wèn)題的主要原因是目前大部分用戶使用的都是機(jī)械硬盤，而從PS CS6開始就增加了一個(gè)后臺(tái)儲(chǔ)存的新功能，該功能的好處是定時(shí)給你的psd文件進(jìn)行保存，但這個(gè)功能在設(shè)計(jì)的時(shí)候并沒(méi)考慮到目前大部分用戶使用的都是7200轉(zhuǎn)速的機(jī)械硬盤。我們平時(shí)做設(shè)計(jì)稿很有可能同時(shí)打開多個(gè)甚至數(shù)十個(gè)psd文件，如果當(dāng)前運(yùn)行的十個(gè)psd文件都同時(shí)儲(chǔ)存，而剛好我們也在進(jìn)行PS操作，那出現(xiàn)假死、閃退、崩潰的機(jī)率就非常大了。
所以為了使用更穩(wěn)定，可以在使用PS CC前先做一下如下設(shè)置，關(guān)閉后臺(tái)儲(chǔ)存功能。
22、Photoshop CC bug一覽表和解決方法
除了關(guān)閉后臺(tái)存儲(chǔ)來(lái)降低軟件崩潰的問(wèn)題，這里筆者還根據(jù)工作經(jīng)驗(yàn)，匯總了一些PS CC的常見問(wèn)題。部分問(wèn)題可以解決，但仍有部分問(wèn)題只能留待下個(gè)版本的更新優(yōu)化。
23、同一個(gè)項(xiàng)目盡量在一個(gè)psd里
在項(xiàng)目中統(tǒng)一功能塊、功能盡量保存在同一個(gè)psd里，日后使用會(huì)更加方便，節(jié)約在不同psd文件里查找時(shí)間。
24、時(shí)刻保持圖層命名、歸類
良好的歸類、圖層、命名習(xí)慣，在團(tuán)隊(duì)合作中psd源文件可用度效率更高，日后修改也會(huì)節(jié)省時(shí)間。
25、盡量使用智能對(duì)象
智能對(duì)象好處在于合并對(duì)象后不破壞對(duì)象，同時(shí)可以讓這個(gè)合并后的對(duì)象具有可編輯特性，同時(shí)具備同步更新功能。
26、在文件夾中加蒙版，操作一步到位
在文件夾加蒙版，再次修改的時(shí)候只需要把圖片放入文件夾即可，可以減少重復(fù)調(diào)整蒙版等工作。
27、輸出盡量簡(jiǎn)單
如果項(xiàng)目有命名標(biāo)準(zhǔn)建議以標(biāo)準(zhǔn)來(lái)命名，如項(xiàng)目沒(méi)命名標(biāo)準(zhǔn)建議用簡(jiǎn)單易懂的中文命名方式命名。
28、安裝psd縮略圖補(bǔ)丁
安裝PSD縮略圖補(bǔ)丁，一目了然PSD文件的內(nèi)容，提高效率拒絕猜測(cè)。
29、精簡(jiǎn)快捷鍵
如果你肯花一點(diǎn)點(diǎn)時(shí)間來(lái)練系這些快捷鍵，騰出你閑置的左手放到鍵盤上，相信這會(huì)讓你的工作更加快捷高效。
30、設(shè)置隔離圖層快捷鍵
設(shè)置隔離圖層快捷鍵，好處在于進(jìn)入了隔離圖層后不會(huì)對(duì)其他圖層進(jìn)行誤操作。
技巧：進(jìn)入隔離圖層后，按Ctrl可以進(jìn)行對(duì)畫布中的其他圖層加入此隔離圖層。
31、色階的解決辦法
我們做效果圖的時(shí)候經(jīng)常會(huì)使用大面積漸變，時(shí)常會(huì)出現(xiàn)比較嚴(yán)重的色階問(wèn)題，通常出現(xiàn)這些明顯色階的時(shí)候，可以通過(guò)使用高斯模糊對(duì)色階進(jìn)行模糊化處理。
32、文本框的好處
當(dāng)你需要處理一大段文字時(shí)，文本框的好處就會(huì)體現(xiàn)出來(lái)，它會(huì)永遠(yuǎn)保持你字體的寬度整齊展現(xiàn)。
33、對(duì)齊像素
平時(shí)畫icon的時(shí)候會(huì)常常使用到二分一、三分一或者其他比例的線條，所以一般會(huì)對(duì)網(wǎng)格對(duì)齊功能進(jìn)行關(guān)閉。而做界面的時(shí)候我們要求更加精準(zhǔn)的界面，所以通常會(huì)開啟網(wǎng)格對(duì)齊功能。
開啟與關(guān)閉網(wǎng)格對(duì)齊方法：Ctrl+K 勾選“將矢量工具與變化和像素網(wǎng)格對(duì)齊”
34、圖形可以合并
PS CC圖形圖層集體合并后，仍然是可編輯圖形。
技巧：合并圖層快捷鍵Ctrl+e，能把選中的圖層快速合并。
以上就是前端高階ps切圖技巧的內(nèi)容了，更多金融行業(yè)網(wǎng)站建設(shè)案例請(qǐng)關(guān)注海淘科技。
