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

作為網(wǎng)頁設(shè)計(jì)師，很難保持井井有條。您不僅要一次平衡多個(gè)項(xiàng)目，而且可能面臨緊迫的期限和艱巨的客戶。您可能還在各個(gè)品牌之間跳來跳去，并且必須不斷學(xué)習(xí)新的品牌準(zhǔn)則和風(fēng)格。

幸運(yùn)的是，有許多方法可以使您的工作流程更加高效。為了提供幫助，我整理了這八個(gè)技巧，以使您在網(wǎng)絡(luò)設(shè)計(jì)事業(yè)中保持理智。

1.整理文件

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

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

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

這是我在Clearlink使用的示例結(jié)構(gòu)。

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

2.了解您的框架

直到我進(jìn)入設(shè)計(jì)生涯幾年，我才學(xué)到的一件事是如何正確利用現(xiàn)有框架。目前，框架世界中的兩個(gè)重磅炸彈是Bootstrap和Foundation，但Google的Materialize肯定會(huì)在不久的將來為其賺錢。我供職的公司將Foundation用于大多數(shù)品牌網(wǎng)站。

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

基礎(chǔ)備忘單的屏幕截圖

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

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

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

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

我將文件組織到以彩虹色編碼的分區(qū)文件夾中，以便于掃描。

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

一些設(shè)計(jì)師甚至?xí)_始命名各個(gè)圖層，這可能會(huì)帶來極大的好處，但會(huì)花費(fèi)一些時(shí)間。由于將圖層設(shè)置為“圖層”時(shí)，可以通過自動(dòng)選擇工具輕松找到圖層，因此，如今很容易進(jìn)入各個(gè)圖層，因此，由各個(gè)設(shè)計(jì)師決定他們?nèi)绾谓M織圖層。關(guān)鍵是您完成了操作。

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

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

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

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

快捷方式還與按內(nèi)容部分文件夾組織圖層有關(guān)（如上所述）。使用鍵盤快捷鍵將層放在文件夾的頂部和底部比在未組織的文件中重新排序?qū)痈菀住?/span>這是在設(shè)計(jì)文件時(shí)組織文件的地方。記住常用的鍵盤快捷鍵并保持圖層的有序組織將極大地提高您的效率并幫助其他設(shè)計(jì)人員處理您的文件。

5.利用CC庫

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

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

庫使您可以輕松地通過單擊按鈕來更改顏色和更新文本樣式。它們還幫助存儲(chǔ)可以在一個(gè)地方輕松更新的品牌圖標(biāo)，并且更新可以在PSD中快速反映出來。這對(duì)于站點(diǎn)的頁眉和頁腳非常有用，因?yàn)槟赡茉谡麄€(gè)項(xiàng)目中進(jìn)行小的更新。

在整個(gè)設(shè)計(jì)中，我還使用CC庫來進(jìn)行字體樣式設(shè)置。我將為臺(tái)式機(jī)，平板電腦和移動(dòng)應(yīng)用程序的英雄復(fù)制，標(biāo)題，小標(biāo)題，正文復(fù)制，免責(zé)聲明等設(shè)置樣式。關(guān)于視圖切換，我發(fā)現(xiàn)自己使用列表格式的原因要多于圖塊視圖，因?yàn)樗哂幸子趻呙璧墓δ堋?/span>

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

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

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

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

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

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

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