Photoshop Etiquette

WEB設計指南!PS禮儀白皮書

翻譯:羅江威
我們開始吧    英文原版   中國設計師交流平臺

文件管理

溫馨提示:以下每條禮儀都可以戳開查看圖文并茂的解析!
我們從PS文件管理開始,教大家一些古老但是卻很有效的管理外部文件的方式。也就是說,如果你連文件管理都不能做的很靠譜,那里面的設計再棒又有什么用呢?

鞏固你的PSD(戳開我,查看更多)

千萬不要撒歡兒似的使用Ctrl/Cmd+N(創建新文件):用最少的PSD文件個數完成你的設計。

合理命名文件

等等,我凌亂了,是應該用 新.psd 還是 最新.psd ? 話說最終版本2.psd 怎么樣?

將用到的圖標,素材等和PSD文件放在一起。

將用到的 photos/icons 文件和PSD放在同一個文件夾,并命名,千萬不要放到桌面上一個叫"一些東西"的文件夾。

將你的UI元素制作成模板

大型網站需要這種UI元素的統一,建立一個統一的模板對前端工作人員也是有益的,更多內容可以搜索一下CSS Spirit。

將文件同時保存在云端

Boss: Sohpie,這個文件在哪?怎么給我? Sohpie:我已經放在網盤/共享文件夾了~ Boss:Good Job!

一定要記得 管理好文件會給你帶來巨大的好處。

圖層

和你的基友協同工作的過程中,可以說對PSD圖層的命名和管理是最大的沖突所在,一堆不知所云的新建圖層和圖層1副本只會讓基友抓狂,想爆你菊花!

命名圖層 & 而且要合理且精確地命名

不要嫌麻煩,一旦設計的層次多了,要找到一個圖層就非常困難。對每一個圖層都要命名,"圖層1 副本 副本2"這樣的圖層名字是要嚴格禁止的。

合理使用圖層分組(圖層文件夾)

圖層分組可以更快地看清楚整個文件的架構,并且可以很快的找到想要的那一層。

刪除不必要的圖層

你是一個圖層堆積狂嗎? 刪除不必要的圖層會使文件更易用。

整合合并共同元素

把一個logo復制5遍并且分別為他們設置不同的樣式是沒有理由的,如果可以的話,盡量做一個主圖層,其他的把樣式設置在一個這個對象上。

使用圖層復合和智能對象

智能對象可以不用建立很多PSD文件,同時在修改的時候可以反映到任何一個使用了同樣的智能對象的圖層。

一定要記得 好好的給圖層命名哦!

圖片

對圖片的處理一切都要是非破壞性的,你肯定不希望添加了不可挽回的效果導致圖片或者按鈕再也無法被繼續修改了。相信我!哪怕只犯一次,也會痛不欲生。

不要強行拉伸或者壓扁按鈕。

最好的情況:盡量讓所有元素保持矢量,這樣你在拉伸的時候可以保持元素的精度,否則的話將矢量文件備份,再進行操作,以便隨時恢復。

將遮罩統一化

將遮罩放在圖層組上而不是圖層上,這樣修改的時候可以非常方便的應用到整個組的圖層。

對齊

對齊網格,對齊像素,對齊任何一切可以對齊的東西,做一個火眼金睛的像素眼!

謹慎使用混合模式

那個顏色是怎么得到的? 別告訴我你用了兩層疊加,4個副本和16個顏色的漸變混合的啊啊啊?

非破壞性設計

善用蒙版,智能對象,各種方式盡量保證原圖沒有沒損傷任何內容。

一定要記得哦 保持可擴展性。

字體

不管PS和瀏覽器的字體渲染多么不一樣,Photoshop字體的問題還是無法得到完美解決,但是你可以控制的是,設計里面文本的各種參數和屬性。

使用整數值

使用PS的字體調整工具調整字體,盡量給字號一個整數。

使用正版字體

不要超越版權界限,確保你所使用的字體都是正版的,保護其他同樣和你一樣職業的設計師們。

不要隨意拉伸字體

除了會使字體變得難看模糊之外, HTML/CSS也無法實現這種效果。

控制你的文本框(PS文本框)

先贊一下使用文本框(PS文本框)的你,只是不要讓他們比實際的文本長5公里。

使用分開的文本框(PS文本框)

標題?單獨用一個文本框處理,正文?也單獨使用一個文本框處理,不要混合在一起。

一定要記得 讓你的PSD在控制之中。

特效

適量的使用圖層樣式和濾鏡,更多的濾鏡不一定等于更好的設計。

適當地使用顏色疊加

我們把這個藍色的形狀對象加一個紅色疊加吧(其實這個有時候也會用到,最好是直接通過雙擊方塊更改顏色,而不是再次進行顏色疊加)

平鋪紋理圖像

如果你的設計中底紋不能通過平鋪重復的背景圖來達到,勸你放棄這個底紋。

達到目的就行,不要刻意炫技

設計好不好不是靠特效數量多不多來決定的。

色階問題

話說,這個圖層應該是一個漸變或是32個略有不同的顏色的條紋?我們已經在《實用經驗:如何去除PS漸變時存在色階問題》一文中討論并解決。

合理的使用描邊

內部描邊相對來說更為精確,而居中描邊和外部描邊就會形成圓角。

一定要記得哦 特效使用一定要三思而后行

練習

這些所有的Photoshop禮儀都不能讓你搖身一變變成一個優秀的設計師,但是它們會讓你逐步蛻變,下面是你可以考慮的5條關于練習的內容。

使用柵格系統

你不可能打破常規,如果你連柵格都沒用過。

溫和地使用投影

打開你設計稿的一剎那,如果你很容易就被陰影吸引,那么說明它已經很重了。

使用WEB字體

不要把字體的選擇工作交給前端,當字體不可用時隨意選擇一個,可以使用Google的WEB字體。(天朝例外^_^)

考慮設備寬度

你的設計需要響應式么?

使用正版的圖標庫,圖片

Google和百度可不是一個免費獲得版權圖片的地方,最好在使用別人的圖片的時候看清楚使用規范。

一定要記得 持續學習新的知識。

測試

聽到過"差一點點就完美了"的話么?有時候專注于像素里會讓你忽略掉一些明顯的錯誤,聘請一些測試人員吧,讓他們幫助評審你的設計。

校對

設計稿正式發出去之前先找人幫忙看看,要不然別人會很不留情的挑出你的錯誤導致你很難堪。

與線框圖比較,確保各元素位置正確

客戶:"我的logo去哪了?" 你說:"哦,你不是想這么做么?

確保你對圖像擁有所有權

使用帶水印的圖時,最好100%保證不會被發現,不然,不要冒險去做讓自己難堪的事情。

熟悉瀏覽器的兼容性

和前端開發基友保持友好!在設計之前搜索一些相關信息,看看自己的設計是否得到瀏覽器的支持,適當時候要放棄圓角/漸變/陰影等特性。

一致性檢查

你是不是用了低3度的藍呢?你的紅色和他們logo的色值一樣么?

一定記住哦 堅持到底!

輸出

一個可以確定的事情是:如果你的工作是將PSD輸出為圖片,那么你肯定不想重復操作,確保一次搞定。

ctrl+shift+alt+S另存為WEB所用格式

記住這個快捷鍵ctrl+shift+alt+S。你會發現一些神奇的功能,特別是在看過網頁圖片優化之后,也能更明白這樣做的意義了。

一絲不茍 & 保存文件大小

Go old school:舍棄部分質量/顏色用來做較小的文件。沒錯,直到現在它仍然是有用的。

用功能為文件命名

"黃色_方塊3.jpg" 無法給開發人員任何信息,試試 黃色漸變_訂單頁面提交按鈕.jpg

沒有無用的空間

不需要故意做一些內邊距或者外邊距,那是css干的事情。

做一個Retina版,比如這個頁面就支持。

如果可以,制作高精度圖片,頁面里設置Retina屏幕的設備讀取這些圖片。

一定要記住哦 不著急,慢慢來。

?Copyright 2012 Dan Rose / Photoshop Etiquette. All Rights Reserved. Hosted by (mt)
Icons: Lino, Geomicons, & Symbolset

两码中特永久免费公开