設計圖做的邊線襯線:比較粗淺的總結

來源:互聯網
上載者:User

文章描述:關注襯線使用上的細節.

之前就很想寫這樣一個很無聊的技術性文章,我這塊只是在技術當中也不算是一個碼活,靠的就是細緻還有很多與生俱來的審美能力,以及不屈不撓的耐心和沉著。

說不出來很多廢話,下面來看我的一些比較粗淺的總結

這是一套關於Button的實現,如果對HTML有瞭解的話,應該知道active和hover偽類,並且在網頁體現中,他們也起到了很大的作用,以至於牽扯到現在就是設計上也不僅僅只是一個button樣式那麼簡單,還要考慮acitve和hover的效果,就像下面實現的圖稿一樣

就這麼一看,當然什麼都沒有,但是做設計的,或者簡而言之就算是做美工的,也應該把小圖放大個兩三倍去看,會發現一些自己可能會忽略的細節:

這就是我現在主要想提到的襯線,這張button主要使用了內襯線,還是圍了一圈的,沒有使用漸層蒙版。

文字上其實也使用了圖層效果來代替一點一點去刻畫襯線,這個技術以前在站酷上看到一個設計者總結過,這是原文的連結,我就不多講文字修飾了。

我總是問大家,為什麼喜歡用陰影,用陰影覺得加了效果了就好看了嗎?有陰影,那你的光源又在哪裡,兩處都加角度相同的陰影,那麼有多少光源?這陰影的設定和光源匹配嗎?

這都是設計者要問自己的問題,設計師做設計稿是有理由的,不是隨心所欲的。

下面這一張設計圖做的邊線襯線使用更為細緻

我們看看它的原圖:

再看看放大後的按鈕旁邊的那條細線,粗淺一看是兩條雙色線顯出刻下來的效果,仔細放大才發現是四條線。

同時,按鈕上不再是簡單的一圈襯線了,襯線使用了蒙版,因此有了過度,上面和下面的內襯線很明顯,但是中間的襯線慢慢被蒙版遮蓋,文字使用了陰影,符合背景的深綠色來輝映上面的白色字型。

中間製作了一層比較淡的漸層,非常友好地體現出立體感。

頁面body的邊緣也是有襯線的,要仔細發現它

然後下面是只使用上襯線,下面用陰影代替立體感的button設計

使用上下兩根襯線,襯線採用漸層蒙版

只採用下襯線,漸層到上面慢慢減淡的效果

更為複雜地使用襯線體現光感

為什麼會產生襯線

這是美術光學的影響,在學素描的時候,剛開始老師都會那麼講,哪裡的線要加重,哪裡有反光,哪裡有陰影,為了體現物體在2D效果上的立體感,我們只能更加熟練地去運用光線來體現。尋找自己虛擬出的光源帶來的高光、亮部、中間色、暗部、投影、明暗交接線。再提一下,為什麼不讓大家使用太過強的漸層,不論是色向上還是亮度上還是飽和度上都不可跨度太過強,某些特殊情況除外。因為這樣強烈的過度根本不帶真實感,給人一種很不舒適的感覺。我始終堅持設計貼近生活,源於生活。

文章來源:Hydrangea Land



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。