其實(shí)，美術(shù)和前端關(guān)系很和諧！

“介個(gè)應(yīng)該要對(duì)齊。”

“這個(gè)還是要透明的的背景的哇！”

“這個(gè)顏色也不正啊”

.......

童鞋是不是常常有這樣滴抱怨前端童鞋！剝除一些懶懶的前端，童鞋是不是該除了抱怨，也應(yīng)該反省一下自己，自己的給的效果圖是不是......雖然老大們常說(shuō)，你們是要大大的溝通滴。但是，童鞋們?nèi)绻覀冊(cè)谛Ч麍D上就給出了足夠的信息，美術(shù)的前端的摩擦是不是會(huì)減少，時(shí)間成本都降低，最后手拉手，過(guò)上和諧的生活.......

精確的結(jié)構(gòu)定位和文字樣式

  |---1.margin.padding統(tǒng)一大小

  |---2.字體顏色大小統(tǒng)一

當(dāng)你歷盡千辛萬(wàn)苦完成效果圖，不要忘了最后檢查一下，板塊的padding ,margin 是否統(tǒng)一。字體的顏色和大小是否也精確的呈現(xiàn)在效果圖上呢？不要寄希望前端去做出判斷，來(lái)來(lái)去去的溝通，如果出現(xiàn)相互抱怨就不好了。做一個(gè)細(xì)致的美術(shù)，做一個(gè)負(fù)責(zé)的美術(shù)，做一個(gè)人見人愛的美術(shù)。當(dāng)然如果你能在效果圖做出標(biāo)注，前端會(huì)愛死你的！

有特殊要求的，善用LEAVE NOTES

行為效果，及時(shí)在效果圖上做出來(lái)

  |---1.菜單效果

  |---2.圖片點(diǎn)擊效果

  |---3.超鏈接效果

對(duì)CODE要去做了解，知道你要的效果，在現(xiàn)有技術(shù)條件上能有效及時(shí)的實(shí)現(xiàn)

這個(gè)很好理解，美術(shù)和前端的對(duì)事物的理解方式很不一樣。美術(shù)看重的表現(xiàn)，是CRAP，是如何讓用戶去理解，如何突出顯示產(chǎn)品。再美的圖案，前端都會(huì)默默的在心理把它分成方塊，然后腦袋里是完全是邏輯思維。美術(shù)往往想做出很炫的效果 。如果成本太高，你就要盡量交付效果圖前和前端有所溝通，免得卡在那里，前后不能。

優(yōu)化你的images文件夾

  |---1.盡量避免PNG透明圖片

  |---2.圖片壓縮優(yōu)化

     |---去掉圖片信息

     |---建議JPG壓縮70%-80%

  |---3.優(yōu)化并且善用GIF

在IE6還沒死的情況下，使用PNG透明圖片，就目前而今眼目下，成本有點(diǎn)高，你懂的！

去掉圖片信息吧，雖然每次都只能小那么一點(diǎn)點(diǎn)。積少成多，愚公移山...

GIF圖像做圖標(biāo)是有優(yōu)勢(shì)的。優(yōu)勢(shì)就在于領(lǐng)導(dǎo)腦袋發(fā)熱的時(shí)候：“趕快給我弄醒目?！盙IF動(dòng)態(tài)亮閃閃，華麗麗亮相~~~~~小心你的眼鏡哇！注意GIF導(dǎo)出的時(shí)候可以選擇適當(dāng)顏色的雜邊，消除鋸齒的小方法。

PSD層文件結(jié)構(gòu)清晰，明確

介個(gè)是個(gè)人好習(xí)慣。清晰的層文件結(jié)構(gòu)，大大的提升工作效率。最好取的層名字通俗易懂。不要出現(xiàn)“為標(biāo)題”，“圖層X”之類的。

原文：http://orang727.blog.sohu.com/161293135.html