在PHOTOSHOP中更快設計網(wǎng)站的8種方法

作為網(wǎng)頁設計師，很難保持井井有條。您不僅要一次平衡多個項目，而且還可能面臨緊迫的期限和艱難的客戶。您可能還會在各個品牌之間跳來跳去，并且必須不斷學習新的品牌準則和風格。

幸運的是，有許多方法可以使您的工作流程更加高效。為了提供幫助，我整理了這八個技巧，以使您在Web設計事業(yè)中保持理智。

1.整理文件

要保持理智，最簡單的方法之一就是使文件井井有條。創(chuàng)建和維護一致的文件夾結構將使查找文件變得輕而易舉。當一個文件夾與另一個文件夾的結構不同時，會出現(xiàn)問題，這使查找該Final-Final-logo.ai文件成為一個挑戰(zhàn)。

組織文件時，一致的文件命名約定至關重要。這就是版本控制的來源。一些設計師使用日期，其他設計師使用版本號，而另一些使用回合。這將取決于您的行業(yè)和您的個人喜好，但這是一個好習慣。通過版本控制，您可以輕松地跟蹤哪個文件是最新的，尤其是在保存了舊版本以供參考的情況下。

我通常保留兩到三個舊版本，以防客戶想要從第一輪恢復到該英雄策略，或者希望從第二輪開始選擇移動處理。為了避免打包問題，最好存檔或刪除較舊的文件，以免使硬盤陷入困境。

這是我在Clearlink使用的示例結構。

一致的文件夾結構和命名約定與版本控制的結合也將有助于搜索功能。例如，如果您使用一個品牌名稱或縮寫從一個品牌開始所有文件名，則可以更輕松地過濾該品牌的資產(chǎn)。這將有助于區(qū)分“ ATT-logo-final.ai”和可能是“ logo-final.ai”的海洋。

2.了解您的框架

直到我進入設計生涯幾年，我才學到的一件事是如何正確利用現(xiàn)有框架。目前，框架世界中的兩個重擊者是Bootstrap和Foundation，但是Google的Materialize肯定會在不久的將來為他們賺錢。我所工作的公司將Foundation用于大多數(shù)品牌網(wǎng)站。

Foundation帶有一個內(nèi)置的響應式網(wǎng)格，以及按鈕，字段，版式，導航等的樣式，使您的生活更加輕松。通過在PSD中利用Foundation的內(nèi)置網(wǎng)格，您將比開發(fā)自己的東西更容易使開發(fā)人員以更加完美的像素方式來實現(xiàn)您的設計。Photoshop擁有這個漂亮的指南布局工具，它不僅使創(chuàng)建網(wǎng)格變得輕而易舉，而且還可以將它們附加到畫板上，以便于文件重組和移動。

基礎備忘單的屏幕截圖

框架還為按鈕樣式，表單等提供了一個很好的起點，并幫助顯示了可以實施的設計策略的可能性和局限性。這不僅為您的設計提供了一個很好的起點，而且將有助于促進與開發(fā)人員的友好協(xié)作。

3.按內(nèi)容部分組織圖層

當您處理包含許多文件夾，圖層，智能對象等的復雜Web設計PSD時，事情很容易變得混亂。一旦出現(xiàn)第2455層，您就會開始意識到在PSD中需要某種組織。這就是為什么我建議按部分組織PSD的原因。

我的文件夾通常由Nav，Hero，Intro，Packages，Benefits，F(xiàn)ooter等文件夾組成。我還以彩虹形式對這些文件夾進行顏色編碼，因此易于瀏覽。這使得更新部分和重新制作PSD變得輕而易舉。

我將文件組織到以彩虹色編碼的分區(qū)文件夾中，以實現(xiàn)輕松掃描。

例如，如果您需要擴大英雄部分，則可以輕松地將以下所有文件夾作為一個單元拖動（按住命令），然后在進行更新后將它們拖回。此策略還可以幫助開發(fā)人員和其他設計師輕松瀏覽您的文件。通過使用易于理解的名稱（例如“ Hero”和“ Nav”），新設計師可以輕松地跳入文件夾并進行所需的任何更改。

一些設計人員甚至會開始命名各個圖層，這可能會帶來極大的好處，但會花費一些時間。由于將圖層設置為“圖層”時，可以通過自動選擇工具輕松找到圖層，因此，如今這些圖層很容易到達各個圖層，因此要由各個設計人員決定他們?nèi)绾谓M織圖層。關鍵是您完成了操作。

4.記住您通常使用的所有鍵盤快捷鍵

這是效率的大問題。如果您發(fā)現(xiàn)自己定期使用特定的鍵盤命令，請記住該命令。如果所有主鍵盤快捷鍵都關閉，則效率將成倍提高。

一些重要的功能包括保存，字體大小和行距，圖層順序，網(wǎng)絡保存以及不透明度等等。Photoshop還使您能夠創(chuàng)建自定義快捷方式。在我的書中，要記住的最重要的命令是保存文件。由于Adobe的隨機崩潰，最好還是經(jīng)常保存而不是冒險失去進度。

Adobe為您提供了在“編輯”>“鍵盤快捷鍵”下自定義鍵盤快捷鍵的選項

快捷方式還可以通過內(nèi)容部分文件夾來組織圖層（如上所述）。使用鍵盤快捷鍵將層放在文件夾的頂部和底部要比對未組織文件中的層重新排序要容易得多。這是在設計文件時組織文件的地方。記住常用的鍵盤快捷鍵并保持圖層的有序組織將極大地提高您的效率并幫助其他設計人員處理您的文件。

5.利用CC庫

自創(chuàng)建CC以來，Adobe添加的最好的功能之一就是庫。如果您還沒有聽說過它們，則需要查看有關如何使用它們的精彩教程。

我覺得每個設計團隊都應該利用這一驚人的功能。庫使您可以使用顏色，字體樣式，照片，圖標和符號（例如頁眉和頁腳）等資產(chǎn)創(chuàng)建品牌庫。借助庫，您可以使用一個品牌庫輕松地與來自多個組織的廣告素材進行協(xié)作。

庫使您可以輕松地通過單擊按鈕來更改顏色和更新文本樣式。它們還幫助存儲可以在一個地方輕松更新的品牌圖標，并且更新可以在PSD中快速反映。這對于站點的頁眉和頁腳非常有用，因為您可能在整個項目中進行小的更新。

在整個設計中，我還使用CC庫來進行字體樣式設置。我將為臺式機，平板電腦和移動應用程序的英雄復制，標題，小標題，正文復制，免責聲明等設置樣式。關于視圖切換，我發(fā)現(xiàn)自己使用列表格式的原因要多于圖塊視圖，因為它具有易于掃描的功能。

庫元素被視為協(xié)作者

圖書館也非常適合團隊協(xié)作。您可以選擇與其他廣告素材進行協(xié)作，以便它們可以編輯并添加到庫中，也可以共享庫鏈接以方便訪問。他們還具有“從文檔創(chuàng)建新庫”功能，但是我更愿意自己創(chuàng)建庫，因此它保持井井有條，并且只包含最相關的資產(chǎn)。

不幸的是，庫有一些缺點，其中之一就是缺少文本的單獨字符和段落樣式。我通過在單獨的框中應用我的字體，然后將不同的樣式粘貼到一個框中來使文本框更易于在文件中管理來解決此問題。另一個缺點是，您目前無法全局更新字符樣式。當前，該庫中沒有組織功能可以在類別（顏色，字符樣式等）中創(chuàng)建子文件夾，但是希望Adobe也可以這樣做。

CC庫的當前工作方式是，最近更新/添加的資產(chǎn)將顯示在頂部。CC庫顏色不能應用于文本框內(nèi)的單個文本，而只能輕松應用于形狀和整個文本框。我確信Adobe會努力解決這些問題，因此我并不擔心，特別是因為優(yōu)點肯定超過了缺點。

6.將圖像和矢量保持為智能對象格式

盡管這會使文件變大，但將圖像和矢量保持為智能對象格式將使將來的設計人員更容易編輯PSD。想象一下：客戶端返回的編輯內(nèi)容包括重新裁剪英雄照片以及對矢量圖標進行細微調整。如果PSD包括全分辨率照片而不是較小的光柵化版本，則可以更順利地完成此操作。當向量是Illustrator中的智能對象而不是柵格化的圖形時，向量也很容易進行調整。

杭州網(wǎng)站建設對象格式保存照片的另一個好處是，將照片另存為PSD，然后將它們作為智能對象放入文件中。使用放置的照片PSD可以輕松地在單獨的包含的照片文件中添加調整圖層和編輯，而不會使源文件混亂。將智能對象用作庫圖形可為您帶來更多的成功組合。您不僅可以輕松地編輯矢量對象，而且?guī)靾D形將在所有應用程序中更新。