UI元素上的細微噪音或紋理看起來不錯，但是添加它的最佳方法是什麼？我們的目标是找到在縮放後仍能保持質量但又易于實現和編輯的最佳方法。為了找出最好的方法，我們将使用以下标準來判斷每種方法：

• 使用的層數：越少越好。
• 縮放能力：如果調整文檔大小，效果會保持其質量嗎？
• 雜色能否位于“顔色”和“漸變”圖層樣式之上？
• 該方法可以用于任何紋理，而不僅僅是噪聲嗎？

可能是添加紋理的形狀最明顯的方法是創建一個标準位層，用顔色填充，選擇Filter→交通Noise→交通Add Noise，然後敷個面膜或矢量蒙版，與你的噪聲增加了元素相匹配。

使用大量噪聲，将圖層混合模式設置為“亮度”并降低不透明度将對噪聲進行最大程度的控制，而對底層的幹擾最小。48％的噪聲設置可提供高動态範圍，而不會降低噪聲。（剪輯會導緻更高的對比度，這可能是不希望的。）

• 層數：2
• 縮放比例：不，如果縮放文檔，則必須重新創建紋理
• 适用于“顔色”和“漸變”圖層樣式：是
• 适用于任何紋理：是

添加源設置為中心且大小為0的内發光圖層樣式，可以使用噪波滑塊将紋理添加到任何圖層。如果您還沒有将Glow圖層樣式用于其他用途，那麼這是一個很好的解決方案。在“顔色”，“漸變”和“圖案”圖層樣式上方添加了噪點，這很棒。

不幸的是，噪聲隻能使底層元素變暗或變暗。以前的位圖圖層方法可以立即添加高光和陰影，同時保持平均亮度，在我看來，它看起來要好得多。

• 層數：1
• 縮放比例：是的，紋理将自動重新制作
• 适用于“顔色”和“漸變”圖層樣式：是
• 适用于任何紋理：否

創建一個純色層，将其轉換為智能對象，選擇Filter→交通Noise→交通Add Noise，應用矢量蒙版來匹配你的元素，圖層混合模式設置為光度，降低圖層的不透明度。

這是一個相當複雜的過程，但是它可以容納多種效果，如果縮放文檔，這些效果可以重新制作。

• 層數：2
• 縮放比例：是的，紋理将自動重新制作
• 适用于“顔色”和“漸變”圖層樣式：是
• 适用于任何紋理：否

首先在新文檔中創建雜訊或重複圖案，然後選擇Edit→ Define Pattern。定義圖案後，即可在“圖案覆蓋”圖層樣式選項中使用。與以前的方法一樣，将“ 光度”用作混合模式并降低不透明度以使其适應效果很好。

圖案層樣式在“顔色”和“漸變”樣式下進行合成，從而破壞了原本完美的噪點和紋理方法。但是，如果需要，您可以創建僅保留紋理的第二層，或者從“漸變填充”層開始，避開該限制。

• 層數：1
• 比例：是的，但是您需要在縮放後将“圖層樣式”比例更改為100％
• 适用于“顔色”和“漸變”圖層樣式：不，圖案顯示在下面
• 适用于任何紋理：是

盡管有點麻煩，但是創建漸變填充層，添加圖案層樣式，然後創建矢量蒙版似乎是最好的方法。這可用于創建具有紋理的靈活，可伸縮和可編輯的單層UI元素。另外，可以對“漸變填充”圖層進行抖動處理，從而也可以産生最高質量的結果（“漸變圖層樣式”不能進行抖動處理）。

我們在下面創建了一些示例，并包括了源文檔，以便您了解它們的構建方式。

圓角矩形（即QuickDraw所稱的“圓角矩形”）是Web和界面設計師的通用工具上的标準收費。他們是如此普遍，這是罕見的網頁或應用不包含一個或兩個ROUNDRECT。不幸的是，像素鎖定的圓角矩形實際上在Photoshop中很難繪制。（通過像素鎖定，我的意思是每個邊緣都落在精确的像素邊界上，從而創建了盡可能清晰的對象。）

經驗豐富的Photoshop用戶可能已經知道一種或兩種繪制圓角矩形的方法。希望在閱讀本文之後，他們還将了解更多，以及哪種方法可以産生像素完美的結果。

Photoshop的“圓角矩形”矢量工具是該任務的理想選擇。每次都能得到完美的圓角矩形。并且可以在繪制形狀期間或之後更改拐角半徑（“窗口”>“屬性”）。從積極的一面來看，将對象保留為矢量意味着您可以調整文檔的大小，并且角落将充分利用任何額外的分辨率。但是，有一個小警告：如果調整大小，則必須将其作為精确的倍數進行處理，否則可能會出現模糊的非像素鎖定邊緣。

模糊方法有點麻煩，它涉及創建選擇，模糊選擇，然後增加對比度，以便為您提供可以很好地消除鋸齒的清晰蒙版。

這總共七個步驟，很容易出現錯誤；另外，轉角半徑不能随時更改。應用級别也可能有點麻煩。優點之一是，從難以置信的柔和到完全混疊，可以使用不同的級别設置來獲得不同程度的抗鋸齒。

1. 創建一個新層。
2. 繪制一個矩形選擇。
3. 輸入快速蒙版（Q）。
4. 高斯模糊了圓角所需半徑的一半。（例如，半徑為10個像素的像素需要5個像素的模糊度。）
5. 應用電平（Command L），并在輸入電平上為黑點使用約118，為白點使用137。
6. 退出快速遮罩（Q）。
7. 填充選擇。

從積極的方面來說，這種模糊方法可用于快速創建一些有趣的有機形狀，而這些形狀很難手工繪制。

Circles方法非常準确且易于重現，但步驟多達13個。僅一個回合即可獲得很多點擊。

1. 創建一個新層。
2. 進行一個圓形選擇，該圓形選擇的半徑是您想要的半徑的兩倍（例如，半徑為10像素的圓将需要20x20像素的圓）。
3. 填寫選擇。
4. 向右移動選擇。按住Shift并按幾次右箭頭鍵可以快速完成此操作。
5. 填寫選擇。
6. 向下移動選擇。
7. 填寫選擇。
8. 向左移動選擇。
9. 填寫選擇。
10. 進行一個矩形選擇，該矩形選擇覆蓋圓弧的整個垂直跨度，但在兩端的圓的一半處開始和結束。
11. 填寫選擇。
12. 進行一個矩形選擇，該矩形選擇覆蓋圓弧的整個水平跨度，但在兩端的圓的一半處開始和結束。
13. 填寫選擇。

筆觸方法非常準确，易于重現，僅需四個步驟，具體取決于您要獲得的結果。但是，轉角比圓法要尖一些。根據您的喜好，這可能是好事還是壞事。

1. 創建一個新層。
2. 繪制一個小于所需區域的矩形選區（如果要精确的話，将半徑縮小兩倍）。
3. 填寫選擇。
4. 将筆觸添加為與所需的拐角半徑一樣粗的圖層樣式。

如果要展平對象以删除筆劃，請繼續執行以下步驟。

1. 創建一個新層。
2. 在“圖層”調闆中，選擇新圖層和上一層。
3. 合并圖層（Command E）。

可以使用Photoshop Action自動展平。也可以将其設置為功能鍵，以進一步加快處理速度。

筆觸方法的一個巨大優點是它是動态的，因此可以實時編輯半徑。如下所示，它還可用于輕松創建其他圓形形狀。

在大多數情況下，使用“圓角矩形”工具會産生很好的效果，并且是最快的方法。

漸變是在表面上添加逼真的照明和陰影的好方法。當使用漸變圖層和圖層樣式構建時，它們還确保可以輕松縮放和重用UI元素。

線性漸變是最基本形式的漸變-逐漸混合顔色并遵循一條直線。我敢肯定，您知道這一點，所以介紹一些更有趣的内容。

反射的漸變就像它們的線性朋友一樣，但是它們重複了兩次漸變，第二個重複被鏡像了。隻要适合您的結果，這将使編輯工作變得不那麼繁瑣。

徑向漸變從中心（或任何選定的點）開始，并以圓形方式向外增長。它們非常适用于創建球體并将效果應用于圓形元素的邊緣。在漸變窗口或圖層樣式窗口打開時，可以通過在畫布上單擊并拖動來移動漸變的中心點。

角度梯度可能是模仿在高度抛光的金屬物體上發現的環境反射的好方法。在漸變窗口或圖層樣式窗口打開時，可以通過在畫布上單擊并拖動來移動漸變的中心點。

任何值得做的事都值得超越，對吧？将漸變層與漸變層樣式相結合，可以疊加兩個不同的漸變，從而獲得更複雜的效果，這是個好地方-完全動态的結果。要組合漸變，您需要為漸變圖層樣式設置混合模式。在下面的示例中，我使用了Screen（用于加量）或Multiply（用于加深）。

将抖動添加到漸變會産生更平滑的結果。非抖動漸變通常包含可見的條紋。如果要在每通道更便宜的6位TN LCD上觀看作品，并且某些顯示類型會加劇後代化問題，則抖動就顯得尤為重要。

如果您沒有發現差異，那麼這裡有一個極端且完全不現實的梯度抖動示例：

确保漸變抖動很容易：隻需在Photoshop中選中相應的框即可。

請注意，漸變圖層樣式不能抖動，放置對象（例如，從Illustrator粘貼的内容）中的漸變也不會抖動。

如果您在漸變中使用透明度，則也不會抖動，這有時可能是一個大問題。對于某些特定情況，有一種解決方案：如果您使用具有透明度的漸變來使白色區域變亮，則将非透明漸變與“屏幕層”混合模式配合使用會使您抖動。可以将相同的技術用于“乘以”混合模式的變暗。

使用上述漸變技術的組合來創建下面的Mac應用程序圖标。

與其他類型的漸變完全不同，漸變貼圖是添加顔色處理的絕佳方法，可以實現非常精确的控制。漸變圖使用每個像素的亮度來映射到漸變中的相應顔色。

如果漸變從紅色開始，到藍色結束，則圖像中的所有白色将變為紅色，所有黑色将變為藍色。中間的所有音調都将映射到漸變，具體取決于漸變的亮度。

下圖用于遊泳學校Kingswim的海報中：

帶有漸變圖。

沒有梯度圖，情況看起來會大不相同。這是大約七張照片的合成；男孩和背景是在黑白膠片上以故意低的對比度拍攝的，因此當漸變圖推動對比度時，顆粒會更加突出。漸變貼圖還隐藏了合成中的顔色不匹配。

漸變貼圖關閉。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!