讀感 Photoshop的禮儀

來源:Photoshop Etiquette A Guide to Discernible Web Design in Photoshop

強調一下本人我英文不好,沒有想出名,單純只是覺得是個好文章
有錯請糾正


檔案管理

有關於檔案的組織

consolidate your PSDs

不要一直另存新檔,造成檔案的混餚
總之我想強調,檔案管理是團隊工作的根本,為了使用你檔案的人著想,我覺得是很根本的事情
2014-01-17_115508.jpg

Name Files Appropriately

不要亂取檔名,而根據我的工經驗,如果你手邊有文件,命名邏輯最好可以跟著文件進行哦
因為前端工程師拿到你的檔案的時後,會覺得很好理解,然後就顯得你很專業(鼻子翹很高)

Store Assets Relative to PSD

跟PSD有關的資源,最好可以放在PSD檔的相對位置,也就是說ICON啦圖片啦等素材,用下圖所示的儲存方式打包,這樣一樣就看得出主設計檔在哪,而不是在一堆素材裡面找你的設計檔哦

Make a Template for UI elements

為你的專案作樣式庫吧
你的按鈕或是下拉或表單的細節動作,應存放在另一個PSD檔裡
這對協同工作也很重要,其一是對設計師而言,有時後會有維護別人設計的時後,有清楚的樣式庫可以讓你的同伴協助你工作同時又保持風格的一致性
對前端工程師來說,有助於他了解你在畫面設計上有哪些元素是必需有同樣的行為跟功能讓他們規劃共用的模組

File on Server/Share

這裡我覺得除了分享之外,還有一個很重要的觀念是…沒有修改到一個段落的檔案不要放到大家都看得到的地方避免誤會


Layers

Name Layers & Be Accurate

就像下圖所示,圖層要命名好啦…什麼新圖層一,複制圖層二的不要取
這篇還分享了三個討探命名的文章連結

Handing Off PSDs That Won't Make Your Co-Workers Hate You / Blair Culbreth
Organizing Photoshop / Chris Coyier
How to Turn Off 'Add Copy' to Copied Layers / Dave Catley

User Folders

群組你的圖層,這應該不用多說
How to Effetively Organize Your Photoshop Layers / Josh Sears

刪除不要的圖層

這樣你的檔案才可以被優化,而且你的電腦才不會被這些垃圾圖層吃掉

全域的元素要保持共用哦

例如畫面上的layout啦,固定的banner啦在畫面上不要存在好幾份

使用智慧型物件或路徑

如果電腦使用上面的東西會很卡,強列建議就換掉硬體吧
因為UI一頁會有很多重複性的操作元素,畫面的維護性會差很多
States and Layer Comps / Andy Rossi
Smart Ways to Use Smart Objects / Mindy Wagner
Smart Objects / Bjango
Smart Objects for PSD Slicing / Joel Glovier

IMAGES

不要變型你的物件,拉寬或拉長

這還用說嗎?作這種事會另設計師感覺像聽到刮玻璃聲吧

Mask共用

大家都知道…資料夾是可以用MASK的吧

SNAP

我英文不好,但大意就是說 你的形狀你的圖層你的物件你的參考線你的所有所有…在PSD裡請習慣對齊PX!!!
都沒對齊PX了還怎麼PX Perfect
設定如下圖

用色要精準的在你的檔案裡看得出來

不要使用顏色疊加,或是透明度來混合出你要的顏色,當你要藍色…請直接使用色碼
下圖是示範,不要想用藍加黃來表達綠色
其實我建議陰影或是漸層也儘量在PSD也竟然用直接的方式表達,例如使用混合模式
有時後會不小時把圖層合併,前端工程師就沒辦法了解你陰影的設定值…

請保持圖片的原始,不要用破壞性的方式去作濾鏡

這個理由很簡單,你有時後會後悔,然後需要調整你的設計
作者在下面有提供其他延申文章


TYPE

文字請全部使用整數

總之就是單位統一,然後使用整數
從實作來考慮 17.5pxPX這種大小各瀏覽器解讀不一樣哦,有些會四捨五入,有些會進位,有些會無條件捨去,所以請別這麼作
從設計面來考慮 為了排版的一致性,你實在沒有用小數點的理由

使用有版權的文字

玩法律就是玩火啦,字很貴的哭哭

不要變型你的字體

不用多說

請控制你的文字方塊

如下圖所示
延申閱讀:Shaping Textfields / Adrian Taylor

文字方塊請分文字段落

不要把全部的文章都打在同一段
我自己工作的時後是會分h1 h2 h3的樣式,當然就不會跟內文打在一起囉


EFFECTS

請適當的使用顏色覆蓋的效果

就我的理解,這裡作者想說的重點是
如果你使用的顏色已經在圖層上看得到了,如右圖所示,那麼他應該就是白色
不要在使用顏色覆蓋來取代他原本的顏色,那會讓你的圖層非常的不直觀

請使用可以重覆平鋪的圖樣

作者強調他明白作重覆圖樣有多花時間,但這是值得的,而你的設計沒辦法作成重覆圖樣時你應該避開
這是因為網頁會因為內容或是瀏覽器的解析度而需要彈性
你必需考量你的設計的彈性

叫你特效不要用太過頭

如果他可以簡單,就簡單用
作者的理由很簡單,你的很多設計必需要用css來實現
用一堆特效只會讓這件事情變得不可能,再來是制作成本變高,有時後可維護性變低

關於漸層

Is that supposed to be a gradient or 32 slightly different stripes?
作者的意思漸層必需平滑,而且你需要有一次作對的氣慨XD
所以延申閱讀:Gradients / Bjango


實踐

Not that any of the following guidelines will automagically make you a better designer, but they'll help your approach to working in Photoshop for certain. Just five of the many considerations you can be making.

使用Grid

我想作者不是單指會使用參考線,還有要了解grids systems
這會幫助你設指的方向,作者的雙關語還有建立風格指南的意思,這會幫助你的設計有系統化

延申閱讀

陰影不要用過頭

不要讓你的陰影太沉重,保持你的陰影優雅,他不該搶過你的主視覺

使用WEB FONT

這應該是網頁設計師的基本了,使用網路字型
不要留給工程師非網路字型的用字,一開始就使用網路字型
作者提供了一個PSD外掛可以直接在PSD引用Online web font
WebINK Webfont Plugin / Extensis

考慮你的裝置寬度

你的psd是使960px還是他必需支援 Responsive Workflow
延申閱讀:Dev Rocket / UI Parade,pt

使用有版權的icon


設計的QA

文字校稿

錯字很壞

比較你的wireframes

有時後作圖作一作會掉一些細節,所以確保你的設計都有對應到線框圖

注意素材圖片

把素材的上的浮水印去掉(替換真的購買的素材),就像你買了新衣服忘記撿標籤一樣簡單
但忘了的話一樣丟臉XDD

了解BRPWSER的限制!!

有些設計沒辦法用CSS實現的就得調整
或者你直少最基本要考慮到用PNG是否能解決問題,當然…有討厭的IE6

檢查你畫面的一致性

有時後…你在畫面上使用了過度相近的色碼,但他們又有點不一樣
請統一成一個!!


輸出 exporting

另存成網頁用

這是為了讓你檔案能瘦身

節省文件大小

negotiate quality/colors used to make smaller files. Yep, it's still relevant
延申閱讀:Optimizing Textured Artwork for PNG Export / Phil Coffman 如何輸出優化的png

輸出網頁素材時,你的檔名要有他的功能

要注意你的素材是為了提供給技術人員使用,一個有原則且有意義的命名方式會減少溝通往來的時間,我們有意義讓使用我們產出的人理解我們的東西。

不要使用red.png這類的檔名,這裡的原則跟CSS有點類似,因為樣子是會變的,所以我們通常用檔案的功能來命名。其實就是風格的問題,例如 icon 開頭的圖檔代表icon、bg開頭的圖檔代表某個div的背景。

不要儲存不必要的空間

可果可以的話,讓你的圖片支援更高解析度的設備:例如 可怕的 Retina version

comments powered by Disqus