提交需求
賽事與廣告咨詢合作,請?zhí)顚懶枨蟊韱?,我們會在第一時間與您聯系!
這篇文章將簡明直接地告訴你如何處理,讓展示稿最清晰!
相信有些設計師會困惑于自己的設計展示稿有時候視覺感受上不夠清晰,自然也不知曉如何更清晰,因為不明白具體原因。首先可以確定的是,這不是因為你近視了。這里我可以先說出輸出更清晰的設計稿的核心思路:
做展示稿的時候,力求畫板的所有元素(包括畫板自身)輸出時可以通過常見倍數導出。
原因是,尺寸為1000px×1000px的一張清晰的位圖,分別導出為999px×999px以及500px×500px的位圖,前者的視覺觀感是不如后者的。
注意:這里說的是視覺觀感,也就是視覺感受上的清晰(可以想象一下攝影范疇的的清晰),而不是可以看到的內容大小。
這里用一張喜歡的設計師 Tran Mau Tri Tam ? 的設計稿做為例子:
800px的原圖
799px的圖,視覺觀感不夠清晰,很模糊
400px的圖,單說視覺觀感,足夠清晰
接下來是具體操作。
以dribbble為例,展示稿尺寸默認為1600×1200,那么你需要在設計展示稿的時候,盡可能讓自己的畫板尺寸在矢量設計工具里與1600×1200(目標尺寸)保持常見倍數的關系。
假設這張展示稿是展示了一個響應式的網頁,有Desktop、Tablet、Phone這三個尺寸,而且設計稿為1x大小,寬度分別為1440、720、400,那么,為了保持完美的像素視覺感受,最好的做法,就是把設計稿原封不動地放置到展示稿的畫板上,然后再根據目標尺寸的常見倍數的尺寸去調整到一個較為理想的網頁與展示稿的比例。
常見的倍數,也就是50%, 75%, 100%, 150%, 200%...
對應的畫板尺寸,便是800×600, 1200×900, 1600×1200, 2400×1800, 3200×1600...
換個說法,就是0.5x, 0.75x, 1x, 1.5x, 2x嘛。
推薦為不同的設計社區(qū)導出不同寬度的展示稿。
原因相同,即使導出的設計展示是清晰的,但是在網頁中展示的實際大小構不成一個較好的倍數,比如不是0.75倍或0.5倍,而是類似0.999倍這樣不太常見的比例,那么就不會比針對優(yōu)化的更清晰。
一個極端的例子,會用瀏覽器的審查元素的設計師可以實際驗證一下:
通過修改css,使這張圖片顯示尺寸變?yōu)?99px,可以看出同樣會很模糊
至此,你應該感受到了設計稿保持清晰的思路,再回顧一下:
做展示稿的時候,力求畫板的所有元素(包括畫板自身)輸出時可以通過常見倍數導出。
Powered by Froala Editor
大牛,別默默的看了,快登錄幫我點評一下吧!:)
登錄 立即注冊