<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          如何畫好一張描邊插畫?

          資深UI設計者

          描邊插畫:可以簡單理解為眾多線面結合圖標組合在一起,互相呼應而組成一個大畫面。畫面中的元素除了面以外,還具有描邊,因此也叫描邊插畫。

          本文內容:文章會詳解如何畫一張描邊插畫,教程素材沒有用我之前的插畫來做步驟分解,而是新畫了一張插畫以作示范,繪畫原理都一樣,理解原理就好。除了具體步驟以外,會針對一些易犯錯誤的地方添加重點標記。

          一點建議:看完文章后,可以按照我分享的方法來臨摹一遍,但我更趨向于小伙伴們能夠發揮自己的想象力,做一張屬于自己的原創插畫。畫完后若有不清楚的地方,歡迎在我的公眾號中添加微信并附帶插畫,可給予建議。

          一、草圖階段

          1. 確立主題,畫草稿

          這次插畫的主題源自于我的一個夢:在草地上,遺落的帆布鞋里面長滿了鮮花,小鳥守在花的旁邊歌唱。

          確定主題后,把腦海里的畫面畫出來,可以畫在紙上,也可以用數位板在 ps 里面畫,按照個人習慣就好。我比較喜歡手繪,因此在紙上畫。

          2. 打開AI,調整設置

          新建畫布1600*1200

          視圖-勾選對齊點

          3. 把草圖拉到畫面中,調整大小

          二、線稿

          1. 描邊設置及要注意的問題

          在描邊插畫中,常見的問題之一就是描邊的粗細問題. 以及描邊間關系的處理問題。

          描邊粗細問題(下圖以之前的四季插畫為例子)

          描邊間關系處理

          描邊設置

          描邊的粗細是根據畫布大小而決定的,1600*1200的畫布,我習慣用 8pt 的粗細的線條,但是如果畫布是1200*900,8pt 則顯得過粗。具體的粗細可以根據情況而調整。

          2. 線稿畫法

          布爾運算法

          形狀斷點重連法

          形狀生成器

          鋼筆勾勒法

          鋼筆勾勒法顧名思義就是用鋼筆直接描出物體的外形。在這個插畫中,植物的形狀比較隨性,因此用鋼筆直接勾勒比形狀剪切要快。繪制的過程中,注意調整線條的平滑度. 弧度,使其規整。在此不作示范。

          三、色稿

          1. 增加背景色

          2. 色稿層的繪制

          3. 顏色調整

          4. 高光與暗部

          5. 經過高光與暗部塑造后的畫面

          四、 風格塑造與整體調整

          1. 風格塑造

          最近看到 kit8 大神的畫,突然想到如果白線運用在線性插畫會怎樣,就嘗試了這種風格。把線稿復制一層置于頂上,改成白色,2px 粗細的線,然后向旁邊移動錯位,破一下畫面沉悶的感覺。


          2. 整體調整

          看到這里,你應該也發現了,畫面是比較灰的,因為我都是選擇低飽和度的顏色,如果需要調整,就在 AI 中把插畫導出 SVG 格式。然后拖到 PS 里面進行色相飽和度的調整。

          3. 保存喜歡的配色

          在顏色調整過程中,遇到喜歡的配色就保存下來,這樣一張插畫就完成了。

          動畫筆記06《文字路徑書寫MG動畫》

          資深UI設計者

          推薦一個做路徑動畫的腳本,還不錯,看看吧。

          undefined

          10年經驗設計師教你如何尋找高質量素材

          博博

          UI妹兒 2018-02-22 11:13:02

          我們平時做設計的時候,都會遇到挑選素材這個難題。

          做UI的同學,會瀏覽動效網站尋找靈感又或者去挑選適合的圖標;做平面的同學,特別是電商廣告的同學,就會下載電商banner,還有高質量的圖片;另外還有絕大部分的人都會在做報告的時候,下載漂亮的PPT和Word模版。如果剛好那時候你在找工作,還需要找精美的簡歷模版……

          但這些素材到底在什么地方找呢,又在什么地方找到高質量又免費好用的素材呢?

          這次,我早已為大家準備好。下面是我花費大量時間精力整理而成的素材網站,全部都是親身試用后的精選出來的。希望能幫大家在找素材這條路上節省更多的時間,找到更適合自己的那些素材。

          懶人福利

          如果你覺得這些網站下載太麻煩

          可以直接翻到文末

          專門為大家整理好的

          1000G高質量精選設計素材

          免費送!

          機會就一次,錯過可以不用等下年了

          因為活動就這一次

          常用素材

          一、免費可商用圖片

          1、https://pixabay.com

          10年經驗設計師教你如何尋找高質量素材

          全網共一百多萬張免費圖片素材,且質量非常高,種類繁多,適合每一個行業使用。

          10年經驗設計師教你如何尋找高質量素材

          優點:種類很多,質量高

          缺點:下載需注冊,加載慢

          推薦指數:★★★★★ 4.5

          2、https://unsplash.com

          10年經驗設計師教你如何尋找高質量素材

          全世界的優秀圖片網站,所以圖片風格很豐富,而且大部分質量都很高,分分種可以用來做壁紙!

          10年經驗設計師教你如何尋找高質量素材

          優點:質量高且優秀,數量多,風格獨特

          缺點:加載慢

          推薦指數:★★★★ 4

          3、https://www.pexels.com

          10年經驗設計師教你如何尋找高質量素材

          每日會更新100張高質量的照片在首頁展示,無論風光還是人物,這里應有盡有。

          10年經驗設計師教你如何尋找高質量素材

          優點:種類多,每日更新,不需注冊

          缺點:加載慢

          推薦指數:★★★★ 4

          4、http://foter.com

          10年經驗設計師教你如何尋找高質量素材

          網站開始會將素材分為商業、動物和風景三大類,如果你需要尋找其他圖片,可以直接在搜索欄直接搜索關鍵詞。

          這里的圖片給我的感覺就是有趣,獨特,有很多圖片都很適合做海報。

          10年經驗設計師教你如何尋找高質量素材

          優點:分類明確,質量很高

          缺點:加載超慢,種類不多

          推薦指數:★★★★ 4

          5、https://burst.shopify.com

          10年經驗設計師教你如何尋找高質量素材

          網站最大好處在于幫你分成非常多的類別,盡管數量比不上其他網站那么多,但這里的圖片風格都很統一,很有質量,感覺看上去就很年輕化。

          10年經驗設計師教你如何尋找高質量素材

          優點:風格獨特,質量高,分類明確

          缺點:數量不多

          推薦指數:★★★★ 4

          6、https://negativespace.co

          7、http://superfamous.com

          8、http://librestock.com

          9、http://www.sozai-page.com(日本食物類網站)

          10、https://www.foodiesfeed.com(美食)

          11、https://www.sitebuilderreport.com(一次性搜索31多家免費可商用圖片的網站)

          二、字體

          1、https://fontsup.com

          10年經驗設計師教你如何尋找高質量素材

          提供大量免費的英文字體,質量很高,也很有特色,每個字體還有一個詳情頁,非常用心

          10年經驗設計師教你如何尋找高質量素材

          優點:種類多,質量高,免費下載

          缺點:加載稍慢,廣告有點多

          推薦指數:★★★★ 4.5

          2、http://www.myfonts.com

          10年經驗設計師教你如何尋找高質量素材

          網站提供的商業字體,質量很高很漂亮,數量也很多。

          10年經驗設計師教你如何尋找高質量素材

          優點:種類多,質量高

          缺點:付費

          推薦指數:★★★★ 4

          3、http://comicneue.com

          10年經驗設計師教你如何尋找高質量素材

          免費手寫可愛字體下載

          優點:質量高,字體可愛

          缺點:數量較少,下載稍麻煩

          推薦指數:★★★★ 3.5

          4、http://www.zhaozi.cn

          10年經驗設計師教你如何尋找高質量素材

          找字網,種類豐富,基本上可以找到市面上的所有字體。

          10年經驗設計師教你如何尋找高質量素材

          優點:種類很多,方便查閱

          缺點:使用時注意商用版權,僅中文字體

          推薦指數:★★★★ 4

          5、http://www.17ziti.com

          10年經驗設計師教你如何尋找高質量素材

          綜合性字體下載網站,里面包括英文字體、中文字體,甚至是手機字體。數量很多,唯一不足就是沒有注明版權范圍,所以商用的時候要注意。

          10年經驗設計師教你如何尋找高質量素材

          優點:覆蓋中英文字體、種類多

          缺點:網站廣告稍多,沒有注明版權范圍

          推薦指數:★★★★ 4

          UI設計素材

          一、圖標類

          1、http://www.iconfont.cn

          10年經驗設計師教你如何尋找高質量素材

          阿里媽媽MUX傾力打造的矢量圖標管理、交流平臺,內含一百多萬個圖標!

          設計師將圖標上傳到Iconfont平臺,用戶可以自定義下載多種格式的icon,平臺也可將圖標轉換為字體,便于前端工程師自由調整與調用。

          10年經驗設計師教你如何尋找高質量素材

          優點:種類豐富,質量超高,免費下載,中文界面,阿里旗下

          缺點:不能打包下載、需注冊

          推薦指數:★★★★★ 4.5(滿分5星,下同)

          2、https://www.flaticon.com

          10年經驗設計師教你如何尋找高質量素材

          大型圖標網站,里面擁有將近50萬個圖標,一萬多個圖標集!種類豐富,質量超高,且支持在線編輯。

          優點:種類豐富,質量可靠,免費下載

          缺點:英文搜索,加載稍慢,打包下載需注冊(科學上網)

          推薦指數:★★★★★ 4.5

          3、http://fontello.com

          覆蓋絕大部分網上可能應用到的圖標,也就是說任何你需要的網站類圖標都可以在這里找到。

          優點:網站圖標齊全,質量高,免費下載

          缺點:加載稍慢,僅有黑白圖標

          推薦指數:★★★★ 4

          4、https://thenounproject.com

          擁有一百多萬個圖標的大型圖標網站,而且圖標都是由全世界各地設計師設計,質量非常高!而且里面有很多有趣的圖標,例如下面鳥籠類圖標集,非??ㄍ垡?!

          優點:種類豐富,質量超高,免費下載

          缺點:英文搜索,加載慢,不能打包下載

          推薦指數:★★★★ 4

          5、https://icomoon.io

          聚合類圖標網站,里面集合了不同網站的不同圖標,付費免費都有,種類超多。

          優點:種類豐富,質量一般,免費下載

          缺點:英文搜索,加載超慢,操作復雜

          推薦指數:★★★★ 3.5

          6、https://useiconic.com/open

          7、http://dryicons.com/free-icons

          8、http://www.iconarchive.com

          9、http://www.entypo.com

          10、http://glyphicons.com

          二、其他

          1、UIKIT.ME

          10年經驗設計師教你如何尋找高質量素材

          各種免費高質量UI資源下載,Sketch、PSD甚至AE素材都有!

          這個網站除了提供高質量的素材以外,還提供超人性化的下載方式:(百度云)

          10年經驗設計師教你如何尋找高質量素材

          優點:質量高,免費下載

          缺點:種類少,部分素材有重復

          推薦指數:★★★★ 4

          2、TOSKETCH.COM

          10年經驗設計師教你如何尋找高質量素材

          網站給我的感覺就是干凈,高大上!里面提供了工具包,網頁,移動,模型和圖標等其他素材,而且這些素材都有一個特點,就是質量高且新鮮!所有素材都是上傳的,這個有點了不起。

          10年經驗設計師教你如何尋找高質量素材

          優點:質量超高,更新快,中文界面,百度云下載

          缺點:只提供Sketch資源

          推薦指數:★★★★ 4

          3、UI8.NET

          10年經驗設計師教你如何尋找高質量素材

          U18是設計素材圈的網紅,提供大量漂亮的超高質量商業設計素材,但并非免費,絕大部分都需要付費。

          10年經驗設計師教你如何尋找高質量素材

          優點:質量超高、數量豐富、界面清爽

          缺點:付費(充值是個問題),加載稍慢,下載稍麻煩

          推薦指數:★★★★ 4

          4、PRINCIPLEREPO.COM

          10年經驗設計師教你如何尋找高質量素材

          高質量Principle原型和動效設計資源的網站,特別是動效,每一個都非常漂亮,很有參考價值。

          優點:質量高,數量豐富,免費下載

          缺點:加載很慢,只有動效資源

          推薦指數:★★★★ 3.5

          5、UISHE.CN

          10年經驗設計師教你如何尋找高質量素材

          UI社,網站提供主題包、圖標、界面和樣機素材等素材,屬于綜合性的素材下載網站。因為國內的網站,大家不用擔心加載慢等問題啦。

          優點:種類很多,質量高,下載方便

          缺點:付費

          推薦指數:★★★★ 4

          6、MOCKUP.ZONE

          7、GRAPHBERRY.COM

          8、GRAPHICTWISTER.COM

          9、SKETCHAPPSOURCES.COM

          10、DUNNK.COM

          平面設計素材

          1、千圖網(www.58pic.com)

          國內大型素材網站,素材幾乎覆蓋所有類目、廣告設計、電商設計和辦公室素材等。逢節假日都有提供主題素材提供下載,且質量很高!

          優點:種類超多、質量高、免費下載、主題分類

          缺點:非會員每日有數量限制

          推薦指數:★★★★★ 4.5

          2、包圖網(http://ibaotu.com)

          包圖網,大型素材下載網站。全網站提供原創免費可商用的素材下載,種類齊全且質量超高,每日更新1000張!

          10年經驗設計師教你如何尋找高質量素材

          優點:種類齊全,質量超高,免費下載,全站正版可商用

          缺點:非會員每日有數量限制

          推薦指數:★★★★★ 4.5

          3、千庫網(http://588ku.com/)

          10年經驗設計師教你如何尋找高質量素材

          大型素材網站,可能是國內唯一一家專業設計師提供免摳圖PNG素材,全站2000萬+高質量素材無限下載,推薦!

          10年經驗設計師教你如何尋找高質量素材

          優點:種類多,專業提供免摳PNG源文件

          缺點:非會員每日有數量限制

          推薦指數:★★★★ 4.5

          另外國內還有付費的昵圖網和我圖網,免費的有站長素材等等素材網站,數量很多這里就不一一舉例了。

          Loading設計思路分享

          博博


          UI妹兒 2018-05-04 10:44:21

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          Loading設計思路分享

          Loading作為一個常見,并且帶有排他性的動畫,已經被各路大神表現的淋漓盡至。那么如何在眾優秀作品下,做出一個性化的Loading動畫?

          Loading設計思路分享

          Loading種類:

          1.狀態類(進度條):通常數據量很大,客戶端已知加載量,并能根據當前加載速度計算出何時加載完成。

          狀態型的Loading以進度條類為基準,可以為用戶提供預期時間,多伴隨百分比進度出現。進度條的形式以線性的形式出現,已知總量,降低用戶對期待時間的感受。無聊的等待會讓人厭煩,作為一個UI設計師需要關注每一個細節,尤其是用戶的情緒并將引導到加載后的頁面。

          By Piotr Adam Kwiatkowski

          2.無狀態類(菊花):通常數據量比較小,客戶端無法預知加載量。

          Loading設計思路分享

          無狀態類的Loaing以菊花為代表,通常都是一組可以無限循環播放的動畫。

          無狀態類的Loaing如有需要可以做的特別一些:https://dribbble.com/search?q=loading

          我們的App需要一個無狀態的Loading。

          我始終相信設計的直覺很重要,抓住直覺的爆發點,是一個成熟設計師必備的素質。于是先按照最初的想法快速做了一版。

          Loading設計思路分享

          相信很多人對這個Loaing眼熟,當然,這肯定不是我們要的效果,不過在制作這Loading的時候不斷的推翻自己的想法,時而清醒時而模糊,感覺突然找到了方向但瞬間也可能煙消云散。這種不斷反復的過程中還是收獲了很多。

          Loading設計思路分享

          既然是無限,循環,表現上就不能過于缺乏趣味,這個度很難把握。形式感上面設計要簡單,又要通過最直接的方法創造空間感,偶然間發現馬戲團的拋球表演。突然間有了靈感,于是就沿著這個思路開始動手設計:

          我嘗試去直接模仿拋棄的運動,但是效果并不是很好,但是從Demo中可以看出,值得很入研究。

          為此我們搜索了一下現實中的扔球效果:

          Loading設計思路分享

          經過分析我們得出了第一條小球的運動路經是一個無限的符號。

          工作路經確定后,導入C4D中進行單球運動軌跡測

          由于實例中,小球會受到重力以及加速度的影響,并非勻速運動,但在實際Loading制作過程中,為了視覺效果,我們希望小球做勻速運動

          發現問題:小球在中心焦點位置出現明顯卡頓

          起初我們認為是速度曲線沒有調整好所導致的,但我們嘗試幾版后發現并不是這樣,最后我們發現導致這個問題的原因是路經節點問題。

          Loading設計思路分享

          調整節點

          通過調整節點后,不難發現,中心焦點處的卡頓明顯不見了

          為了加強透視效果,我們將球的大小和顏色進行了關鍵幀處理,這已處理增加的景深對視覺的沖擊,使得空間感更強了。

          看起來怪怪的。。。。。

          為了使整個運動規律更加精準,我們發現運動的起點距離是關鍵,不懈的追求完美的情況下,總是會有頓悟的時刻,幸運的是找到了問題的所在

          三個球勻速運動的情況下,應該保證每相鄰兩個球之間路經上的距離是相同的。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          設計流程與產品分析

          藍藍設計的小編

          為什么近期市場上會出現大片的方法論呢?究其原因:是一種壞的學術風氣或普通群眾的跟風心里導致的。


          互聯網興起初期,沒有相應的專業或產品設計的學派,大部分設計師的出發點基本圍繞「解決問題」的角度來做產品設計。當時唯一的理論點就是現在所謂的「競品分析」。

          谷歌對話式交互規范指南系列:對話式界面的概念和機制

          資深UI設計者

          語音交互是一個全新的體驗設計領域,目前各家機構、公司、設計組織還處于摸索設計范式的階段,Google提供了一份非常成熟、系統的交互規范文檔,其中包含了核心概念的詮釋以及諸多可以指導設計的實踐原則。最近正在做的項目中涉及到語音交互的部分,所以順手將這份文檔翻譯出來,給需要的設計師參考。

          我的譯文盡量的貼合文檔中原有的表意,同時基于我個人對語音交互的理解對表達文字進行潤色。其中有個別概念名詞比較抽象,所以我也旁邊附上了英文單詞,以便大家理解。

          我們正在進入一個有光明前景的全新計算領域,機器學習和人工智能激發著對話式界面和自然語言的進步,同時使對話式交互成為一種新的交互模式。

          史上最詳細 iPad 插畫入門教程

          用心設計

          iPad 在很長一段時間內對于筆者來說,都是看視頻玩游戲的工具。但由于手機更易攜帶且功能接近,iPad
          就逐漸被我忽略在了角落里安靜地吃灰。直到 iPad Pro 發布,我突然意識到了 iPad 是可以畫插畫的,即使是我的舊 iPad
          也可以老樹逢春。于是我懷揣著「舊物利用」的環保理念開始了 iPad 插畫的研究之路。下面我把總結的入門經驗分享給大家。(教程適用于所有版本的
          iPad 哦)。篇幅可能有點長,be patient, 好伐?

          史上最詳細 iPad 插畫入門教程

          設計中的中宮指什么?不懂這個談字體結構和造型都白搭

          用心設計

          字體設計中,新手設計師才說字體結構松散或緊湊,設計老司機只談中宮。



          你肯定也有這樣的感受,因為談論字體結構松散或緊湊只是對字體造型的直觀描述,并無更多內涵或實際意義上的指導。



          設計中的中宮指什么?不懂這個談字體結構和造型都白搭

          字體設計的細節&形式感

          用心設計



          明明想法思路都對了,為什么最后呈現出的效果卻...略顯遺憾呢?字習時間的活動到七十多期了,其中發現很多作品想法思路是正確的,有些還很有意思,但整體視覺效果確一般,那為什么所想和所做會有如此差距?

          所以有了本期要和大家聊的主題:字體設計的細節和形式感。本篇將會通過一些實例帶大家認識字體細節和形式感,所用大部分實例選自我課堂中的現場修改,時間短暫難免有瑕疵,望理解。

          字體設計的細節&形式感

          設計的溝通:每一步都算數

          用心設計

          寫在前面:

          設計是一門溝通的藝術,跟信息的溝通,跟設計的溝通,跟人的溝通,都是在溝通中獲取信息,達到目的。

          下面我分享幾個自身工作的經驗,希望對大家有所幫助。


          設計的溝通:每一步都算數

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合