網頁設計師的 20 個 Photoshop 技巧

可能每個網頁設計師都有自己最喜歡的一套 Photoshop 技巧。 有充分的理由。 Adobe 強大的圖像編輯功能是網頁設計領域的主要內容。 很少有程序可以與這款出色的軟件及其廣泛的功能相媲美。

然而，雖然大多數網頁設計師都了解 Photoshop，但您總能學到更多。 畢竟，該程序不僅功能強大，而且還很複雜。 此外，還會定期通過更新添加新內容。

因此，繼續探索您最喜歡的工具是個好主意。 為了幫助您做到這一點，在本文中，我們將介紹一些最好的 Photoshop 技巧。 可以改善您的工作流程，讓工作和生活更輕鬆，節省時間並幫助您設計最佳網站的東西。

您準備好了解有關 Photoshop 的更多信息了嗎？ 然後繼續閱讀。

Photoshop 技巧讓您成為網頁設計嚮導

以下提示範圍從初級到更複雜的材料。 選擇他們中的每一個都是為了幫助您成為最好的網頁設計師。

1. 精簡您的工作空間

讓我們從基礎開始。 要改進您的工作流程，首先要做的就是以支持您使用它的方式的方式設置 Photoshop。 畢竟，使用更鋒利的工具，工作會變得更輕鬆。

因此，我們的第一站是Window > Workspace > Graphic and Web 。 選擇此選項會將可用工具更改為您最有可能用於網頁設計的工具。

之後，轉到Edit > Preferences 。 在這裡，最重要的站點之一是Units & Rulers。 無論您在此處選擇哪種度量（最有可能是像素），它將成為所有文檔的默認值。

（快速提示：要更改單個文檔的標尺，只需右鍵單擊它們並選擇所需的度量單位。）

之後，轉到Preferences > Performance > History & Cache並單擊Web / UI Design 。

這樣做將更改緩存設置以支持具有大量圖層的較小文件，這是您主要使用的內容。

在同一個地方，您還可以選擇歷史狀態的數量。 如果您想撤消某些操作，您可以返回的步驟數。

最後，退出首選項，關閉所有文檔並按鍵盤上的T按鈕。 這將使字體菜單出現在屏幕頂部。 從那時起，您在此處設置的任何內容都將成為新文檔的標準。 因為沒有人真的那麼喜歡 Myriad Pro。

2. 學習鍵盤快捷鍵

對於您經常使用的任何程序，學習鍵盤快捷鍵通常是一個很好的建議。

例如，我在寫這篇文章時使用Ctrl+Alt+2/3創建 h2 和 h3 標題。 它比使用編輯器工具欄快得多，因為我不必將手從鍵盤上移開。

Photoshop 也是如此。 知道如何通過簡單的按鍵來執行操作比點擊菜單要快得多。

我們將在本文中提到一堆鍵盤快捷鍵。 但是，我也推薦這個備忘單，用於學習最常見的 Photoshop 操作的快捷方式。 除此之外，養成反複查看鍵盤快捷鍵的習慣也是一個好主意。

3. 分組和命名圖層

使用 Photoshop 時，您將處理大量圖層。 不僅讓大多數元素擁有自己的圖層，而且亮度/對比度等修改也作為圖層添加。

因此，它很快就會變得混亂。 幸運的是，有很多選項可以減少這種情況，其中兩個是對圖層進行分組和命名的能力。

首先，通過雙擊任何圖層，您可以將其名稱更改為您喜歡的任何名稱。

這樣，您就可以輕鬆了解圖層是否包含背景圖像、菜單或側邊欄。

或者，您也可以一次選擇多個圖層，方法是按住Ctrl選擇單個圖層或按住 Shift標記一系列相鄰圖層。 Ctrl+G然後將它們變成一個組。

或者，右鍵單擊圖層並從那裡選擇組選項。 無論哪種方式，您的圖層都會變得更有條理。 此外，您還可以命名分組圖層！

4. 過濾層

命名和分組圖層是一個好的開始。 但是，在處理數十個甚至數百個時，您仍然很容易感到困惑。

對於這些情況，您還可以選擇過濾圖層。 為此，只需使用“圖層”菜單頂部的菜單按類型、名稱、效果、顏色等進行過濾。

或者，使用移動工具直接選擇圖層，按住Ctrl並單擊圖層或對象。

5. 創建網格

圖片來自 PureSolution/shutterstock.com。

網格是網頁設計中最重要的原則之一。 它為設計帶來秩序並幫助您放置對象。 因此，只有在 Photoshop 中創建網格才有意義。

為此，請使用View > New Guide Layout 。 或者，只需單擊標尺並拖入文檔即可創建水平和垂直參考線。 使用Ctrl移動現有參考線。

6. 導入色板

您可以將顏色樣本從 HTML、CSS 或 SVG 文件直接加載到 Photoshop 中。 這樣，在使用現有資產（例如徽標）時，您的配色方案就有了一個很好的起點。

要利用這個 Photoshop 技巧，只需打開“色板”面板，單擊右上角的下拉菜單並選擇“加載色板” 。 現在導航到有問題的文件並打開它以導入新的色板。

7. 保存自定義形狀

尤其是在為同一個網站或具有相似設計的網站設計多個頁面時，您會發現自己一遍又一遍地使用相同的對象和形狀。 出於這個原因，將它們保存為自定義形狀以便快速重用是有意義的。

為此，請使用路徑選擇工具（黑色箭頭）右鍵單擊相關形狀。 然後，選擇定義自定義形狀。 完成此操作後，您可以通過自定義形狀工具的頂部欄選項訪問此形狀。 只需單擊顯示形狀的下拉菜單：然後選擇您保存的形狀。

8. 在背景色和前景色之間切換

兩個在背景和前景色之間來回切換，無需點擊圖標，只需按鍵盤上的X。 另外，如果您希望顏色恢復為簡單的黑白，您可以按D 來實現。

9. 通過鍵盤更改不透明度

另一個鍵盤快捷鍵：對於可以更改不透明度的任何工具，您只需通過鍵盤即可。 數字 1 到 0 將不透明度設置為 10% 到 100% 之間的任何值。 同樣的事情也適用於圖層的不透明度。

10.畫直線

要使用任何工具繪製直線，只需按住Shift鍵即可。 之後，您可以繪製一條線（水平和垂直），該線將自動像釘子一樣筆直。 或者，單擊兩個不同的點以在它們之間創建一條直線。

11. 樣品顏色

在我們的 Photoshop 技巧包中，接下來是能夠對任何顏色進行採樣。 如果您需要任何對象的顏色，請按住Alt按鈕並單擊您想要的色調。 這適用於Brush 、 Pencil 、 Paint Bucket和任何其他使用顏色的工具。

12. 添加到選擇或從選擇中刪除

您可以通過按住 shift 並選擇要包含的部分來添加到現有選擇。 要減去，請使用Alt按鈕執行相同的操作。

13. 撤消不止一步

撤消上一個操作的經典方法是使用Ctrl+Z 。 但是，這僅適用於您所做的最後一件事。 要返回幾個步驟，請使用Ctrl+Alt+Z 。

14. 動態改變你的畫筆大小

要更改畫筆大小，無需單擊下拉菜單並將其拖動到正確的大小。 相反，只需按住Alt和鼠標右鍵，然後左右拖動即可減小和增大畫筆的大小。

15. 保存為網頁

使用Safe for Web功能至關重要，因為它可以確保圖像尺寸盡可能小。 這對於提高網站速度非常重要。

在 Photoshop 中，您可以通過File > Export > Save for Web執行此操作。 但是，更快的方法是使用Ctrl+Alt+Shift+S 。 不客氣！

16.以圖層形式打開圖像

有時需要一次將大量圖像導入 Photoshop。 然而，當您簡單地將它們拖到您的工作空間時，系統會要求您手動放置它們。

更實用的方法是File > Scripts > Load Files into Stack 。 瀏覽到有問題的圖像，標記它們並點擊確定兩次。 現在，每個圖像將自動導入到自己的圖層中。

17. 直接從 Photoshop 中復制 CSS

對於網頁設計師來說，最舒適的 Photoshop 技巧之一是該程序創建了可以導出的 CSS。 無需手動輸入所有內容或使用反複試驗來實現它。

要利用這一點，只需右鍵單擊圖層並選擇Copy CSS 。 或者，使用圖層菜單查找相同的選項。 現在您擁有了所有必要的樣式，只需將其粘貼到您的樣式表或您正在使用的任何其他程序中即可。

18. 同時設計多個設備和方向

如今，為 Web 設計意味著為大量不同的設備進行設計。 在移動設備使世界各地的台式計算機黯然失色的時代，必須實施移動設計。

資料來源：ComScore

幸運的是，Photoshop 具有畫板和智能對象，可以非常輕鬆地將您的設計縮放為不同的格式。

我可以在這裡詳細描述兩者，但是，Phlearn 對此做了一個出色的教程，它比我做的要好得多：

19. 對重複性任務使用自動處理

另一個很棒的 Photoshop 功能是自動處理。 這意味著您可以一遍又一遍地重複錄製的任務，而無需手動執行它們。 這非常有用，例如，如果您需要為網絡保存大量圖像。

這是它的工作原理。 首先，打開您的文件。 然後，打開Actions ( Alt+F9 )，找到Create New Action並單擊它。 提供名稱，並可選擇為其分配組合鍵和顏色。

要記錄您的操作，請按Record 。 然後執行您要重複的操作。 就我而言，我從一個文件夾中打開一個圖像並將其保存在另一個文件夾中以供網絡使用。

完成後，停止錄製。 現在您可以對所有其他圖像重複使用此操作，從而節省大量時間。 有關可以在 Photoshop 中自動執行的操作的更多信息，請查看這篇文章。

20. 在設備上預覽

最後，與 Photoshop 一起，Adobe 還提供了一個應用程序，可讓您在多個 iOS 設備上預覽您的作品。 最好的事情是：當您在計算機上進行更改時，您可以觀察設備上的更改。

為此，請安裝該應用程序並使用設備預覽通過 USB 或 wifi 將 Photoshop 連接到外部設備。 您可以在Window > Device Preview下找到該選項。

你最喜歡的 Photoshop 技巧是什麼？

Photoshop 是最常用的網頁設計工具之一。 其強大的功能使其非常適合設計高質量的網站和資產。

然而，強大的功能也帶來了巨大的複雜性，尤其是對於初學者來說，掌握軟件可能需要一些時間。

為了縮短學習曲線，上面我們為網頁設計師提供了許多有用的 Photoshop 技巧。 從一般工作流程到自動文件處理，它們使很多事情變得更容易。

全面了解 Photoshop 是對您的底線的一項重大投資。 當你能夠更快地做事時，你可以承擔更多的工作，從而產生更多的收入。 這永遠不會是一件壞事。

你最喜歡的 Photoshop 技巧是什麼？ 請在下面的評論部分告訴我們，這樣我們就可以互相幫助。

Creative Stall/shutterstock.com 的文章縮略圖