<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • 網(wǎng)頁設(shè)計(jì)細(xì)節(jié)之——按鈕篇

    2014-10-27    藍(lán)藍(lán)設(shè)計(jì)的小編

    初入設(shè)計(jì),學(xué)做按鈕。只會(huì)套個(gè)底色,加個(gè)陰影,字體純白,小聰明的弄個(gè)圓角。

    UI設(shè)計(jì);網(wǎng)頁設(shè)計(jì)

    LV. ★★(描邊、字體、內(nèi)陰影)

    看了很多案例,學(xué)會(huì)了一些小技巧,內(nèi)描邊1PX深色描邊,使效果有所提升。注意描邊要貼近按鈕色,不要用純黑和純白。

    其次,字體的顏色也同樣不要用純白,要用貼近按鈕色的單色最佳。

    當(dāng)學(xué)會(huì)了內(nèi)陰影這項(xiàng)技能后,你就發(fā)現(xiàn)高光的按鈕看起來非常美好。

    LV. ★★(漸變疊加)

    漸變疊加可以讓按鈕產(chǎn)生更多de的質(zhì)感效果,多多嘗試,會(huì)有新的發(fā)現(xiàn)。

    LV. ★★★(1像素的高光)

    如果這是漸變的一種,明暗清晰。其次,這里要說的是利用矢量圖做出1px的高光,伴起左、右、上,讓按鈕質(zhì)感更加強(qiáng)烈。

    LV. ★★★(疊加的模糊光)

    這是常用的一種網(wǎng)頁按鈕,很懂看起來絢麗的高光,如此技法。甚至在紅色的按鈕疊加黃光,黑色的按鈕疊加紫光等等,具體大家自由發(fā)揮。

    LV. ★★★(圖案疊加)

    圖案疊加更多的是加強(qiáng)紋理,比如貼上皮革、金屬、木紋等素材,強(qiáng)調(diào)按鈕的與眾不同。這里的疊加,擴(kuò)展了紋理。

    LV. ★★★★(外發(fā)光)

    利用文字的外發(fā)光,讓按鈕看起來更富有光感,注意發(fā)光de的顏色要貼近按鈕色,不要有太大的差異。

    LV. ★★★★(投影)

    不要總使用默認(rèn)的投影,多嘗試他們的數(shù)值,會(huì)有不一樣的感覺。還有在字體上加入1px的內(nèi)陰影,讓字體更加凸起。

    LV. ★★★★(1px的內(nèi)陰影和投影)

    了解了內(nèi)陰影和投影的使用,就多玩玩1px的威力。它會(huì)讓你的按鈕看起來凹陷感更強(qiáng)烈。

    LV. ★★★★(逆漸變)

    大部分的這種技能用在按鈕觸碰效果,使其和靜態(tài)按鈕擁有很大的反差,提醒用戶鼠標(biāo)懸浮于此。

    LV. ★★★★★(斜面和浮雕)

    這個(gè)技能用得好也是一神技,他能讓按鈕效果片刻出結(jié)果,也同樣能制作金屬質(zhì)感,當(dāng)然,這需要調(diào)整它的曲線,你可以試試。

    LV. ★★★★★★(外圍輔助)

    這種外圍的輔助,讓按鈕看起來更是掉到了坑里。更加的吸引眼球,引起注意。其次注意這個(gè)按鈕PSD的漸變,不是圖層疊加而是直接漸變。

    LV. ★★★★★★(厚度)

    這種按鈕的現(xiàn)在用的非常多,加上一層使其空間感更加強(qiáng)烈,很多的手機(jī)應(yīng)用下載按鈕就是用到了他。注意PSD中它的陰影使用。

    LV. ★★★★★★(透明)

    外圍的輔助,也有這樣的功能,調(diào)整它的填充或者透明度,這樣的按鈕在有背景的頁面里效果尤為突出。

    之前我們說過的光疊加,也可以這樣疊加。

    LV. ★★★★★★★(內(nèi)發(fā)光)

    內(nèi)發(fā)光的按鈕,不好掌握很容易出丑,如果用的好,也為自己的設(shè)計(jì)提分。內(nèi)發(fā)光不限于亮光,也適用于暗光。

    LV. ★★★★★★★(細(xì)節(jié))

    到這里,就沒有太多可以注解的技能可以說了。唯一要注意的,就是細(xì)節(jié)。

    比如做2px的圓角,比如字體顏色再藍(lán)一些,比如陰影的明暗再舒服些,比如描邊可以用漸變,更比如,之前的文字沒有劇中對(duì)齊,把它調(diào)整好。

    所有的一切,就是一個(gè)細(xì)節(jié)。

    最開始我們用1分鐘做一個(gè)按鈕,到我們用30分鐘甚至1個(gè)小時(shí)去思考,去調(diào)整,去嘗試。

    LV. ★★★★★★★★★★★★★★★★(扁平不平,無限可能)

    現(xiàn)在流行扁平化設(shè)計(jì),讓人感覺它非常容易入門,而且簡(jiǎn)單。

    其實(shí)并非如此,扁平不平,暗藏殺機(jī),它降低了一切光影質(zhì)感,盡量減少到最小甚至感覺不到它的存在,如此來提高它的美感。

    現(xiàn)在設(shè)計(jì)一個(gè)按鈕,你會(huì)想什么?

    讓我們回顧一下這一切按鈕的變化史,你是否從中受益了呢?

    更多的美好設(shè)計(jì),我期待與你一起探討!

    UI設(shè)計(jì);網(wǎng)頁設(shè)計(jì)

    別忘了PSD哦!

     

    日歷

    鏈接

    個(gè)人資料

    存檔

    主站蜘蛛池模板: 亚洲午夜精品久久久久久人妖| 青青草97国产精品免费观看| 精品国产一级在线观看| 精品久久久久久亚洲精品| 黑人巨茎精品欧美一区二区 | 午夜精品福利视频| 国产综合色在线精品| 综合国产精品第一页| 精品国偷自产在线视频| 在线精品视频播放| 国产精品国产三级专区第1集| 少妇人妻无码精品视频| 区亚洲欧美一级久久精品亚洲精品成人网久久久久 | 欧美精品国产一区二区| 精品国偷自产在线| 欧美日韩人妻精品一区二区在线 | 中文成人无字幕乱码精品区 | 黑人巨大精品欧美一区二区| 亚洲一区精品中文字幕| 国产精品福利在线观看| 国产精品三级国产电影| 亚洲精品你懂的在线观看| 日韩精品人妻av一区二区三区| 精品精品国产理论在线观看| 国产午夜精品久久久久九九| 国产精品第1页| 国产微拍精品一区二区| 亚洲国产精品无码AAA片| 国产精品va在线观看无码| 欧美一卡2卡3卡四卡海外精品| 国产精品高清一区二区三区不卡| 国产精品日本一区二区在线播放| 久久99精品久久久久久动态图| 色欲久久久天天天综合网精品| 亚洲精品视频在线观看你懂的| 欧美在线精品永久免费播放| 拍国产乱人伦偷精品视频| 亚洲精品网站在线观看不卡无广告| 亚洲国产婷婷综合在线精品| 人妻无码久久精品| 亚洲精品乱码久久久久久蜜桃|