m88明陞下载 http://www.wqqsqj.live 愛設計,愛分享。 Sat, 12 Oct 2019 03:34:08 +0000 zh-CN hourly 1 https://wordpress.org/?v=5.1.2 UI插畫新風格——大腿胳膊粗 http://www.wqqsqj.live/thigh-and-arm-thick-illustrator-by-uran.html http://www.wqqsqj.live/thigh-and-arm-thick-illustrator-by-uran.html#respond Sat, 12 Oct 2019 03:34:08 +0000 http://www.wqqsqj.live/?p=31911 UI插畫新風格——大腿胳膊粗

插畫作為經典的視覺傳達呈現方式,可以說是最歷久彌新的視覺語言。從最古老的原始人在洞窟制作簡陋的壁畫,到今天數碼繪畫的全盛之勢,幾個世紀來,插畫都在時代的前沿載體基礎上長足進步,不斷演變,也吸引著許多人成為插畫家。可以說,插畫師是最不可能被淘汰的職業。 現在這么多扁平化插畫,想脫穎而出就得出創意方面入手,今天,設計達人為大家帶來一位轉型中的準自由插畫師 Uran 的作品,他的UI插畫與其它不同之處就是人物都是大腿胳膊粗,是很有趣味的一組插畫作品。 UI插畫新風格——大腿胳膊粗 設計師:Uran(由然) 圖像來源:ui.cn/detail/465453.html(找不到原設計師的個人主頁...) 編輯:設計達人(ID:shejidaren888)

插畫

插畫作為設計中最具表現力的元素,始終以一種堅挺的姿態屹立在設計趨勢的?前沿。一副好的插畫本身就是一個故事,而故事是最令人難忘的內容。插畫通過線條、色彩和本身獨有的情感吸引力,竭盡全力營造氛圍,向你闡述故事,撬動你的情緒?。

網頁插畫

除了常規的插畫,還有插畫在網頁中的應用,作為輔助傳達信息的設計元素讓網頁生動不單調?。而且插畫的可定制性更強,可以根據情景需要繪制般配的插畫,使得插畫符合產品的調性,對品牌和產品起襯托和升華的作用,吸引特定的目標用戶。

動圖插畫

動圖插畫的視覺表現力相比其普通插畫更強,但是也要注意循環時間的控制,信息要盡可能的簡單,讓讀者能夠很快地理解動圖?。注意不要讓動圖喧賓奪主,而是作為輔助元素的存在?。? 除了表情的應用,動圖插畫還能作為一種微交互,強化產品的體驗?。不同的動效在不同的應用情景中給讀者帶來的感覺和體驗截然不同?。比如錯誤頁和加載頁面時配上動圖插畫能夠減緩用戶焦慮,提高用戶體驗;靜態頁面配上動圖插畫,吸引用戶注意力之余,也不會使得頁面死板,讓用戶有興趣了解頁面的內容。 關于UI插畫繪制方法可以看之前的文章《UI插畫技法,風景照片變手繪插畫》,這個技法是相當簡單哦。 感謝大家閱讀!


(ノ???)ノ*:??? 查看最受歡迎 301 個設計網站 *:???ヽ(???ヽ)

UI設計QQ群 | RSS訂閱 | 新浪微博 | 本文鏈接 | 添加評論
]]>
http://www.wqqsqj.live/thigh-and-arm-thick-illustrator-by-uran.html/feed 0
貝殼找房的響應式網頁布局設計 http://www.wqqsqj.live/beikezhaofang-layout-of-responsive-web-design.html http://www.wqqsqj.live/beikezhaofang-layout-of-responsive-web-design.html#respond Fri, 11 Oct 2019 00:00:13 +0000 http://www.wqqsqj.live/?p=31886 貝殼找房的響應式網頁布局設計

響應式網頁布局設計已經成為互聯網的主流標準。讓網頁適應從桌面到手機的不同大小、不同分辨率的屏幕,從而為用戶提供更好的體驗。本文以貝殼找房為例,在貝殼找房原有的網頁基礎上,結合目前的設備屏幕趨勢和業務的增長需要,重新設計網格系統,完成響應式網頁布局設計。 貝殼找房的響應式網頁布局設計

目錄

1.設計背景 2.舊版官網存在的問題 3.設計方案論證 4.改進方案/實施細節

1.設計背景

貝殼在2018年完成了從0到1的歷程,但在移動端/web端都有許多的錯漏和細節的不完善。從1到2的過程相對復雜,往往在立項之后會遇到一些項目之外/歷史遺留問題——在修改響應式設計的過程中查看舊版網格系統設定,發現以早期鏈家網為模版的網格系統在設計時還沒有到移動端設備爆發增長的年代(鏈家在2009年開始互聯網化),因此沒有考慮到眾多尺寸的適配方案。改則費時費力,牽一發而動全身,不改則后續設計方案處處受限,所以干脆推翻重新設定網格系統,也以此為契機,改變向二手過度傾斜的設計導向,完善其他業務的用戶體驗。雖然過程非常曲折,但順藤摸瓜發現問題本質的那一瞬間是豁然開朗的,過程中也參考了許多優秀案例和大神分享核心技術,收獲頗豐,過往一些模糊不清的概念隨著論證得到了明確的解答,所以把整個思考和實踐過程整理出來分享給大家。 Web端產品現狀:

2.舊版問題

2.1 目前主流分辨率有哪些 研究舊版問題的第一步是搞清楚目前主流分辨率有哪些,同時檢查相對應的尺寸是否有問題。 綜上所述,舊版網格系統沒有響應式的基本條件,需要重新設置網格系統和頁邊距,否則響應式的方案無法實現 (鏈家在早期發展階段以二手房/租房業務為核心業務,因此從頂層設計到最終執行都傾向二手房交易;而鏈家網在2018年初升級為貝殼找房后,為構建行業大平臺,不再局限于二手房業務,新房、裝修等各項業務都有已經規模化,但設計層面仍然保持二手房優先的策略,導致檢索其他業務的用戶會得到無該房源的搜索結果,造成不良體驗) 2.2 舊版網格系統有什么問題 嚴格來說,舊版官網沒有網格系統,但為了方便總結問題,以12柵格為衡量基礎 問題如下: 1、以官網主頁為例出現了兩個gutter值(29px/30px)且無法被偶數整除; 2、區塊2的大小為265x205px,也無法被偶數,縮放時會導致0.5px出現; 3、頁邊距(margin)值缺失,縮放時完全貼合網頁邊緣; tips:為什么要被偶數整除呢? 為兼顧ios和android的常用分辨率,約定俗成以320px為1倍基數,一些情況會如480px遇到1.5倍,4px/8px可以在各個尺寸縮放都得到整數,但奇數(例如5px)則會得到小數點,帶小數點顯然會導致圖像模糊的情況,因此排除所有不能被4或8整除的數字,例如區塊2(265x205px),槽1(29px),槽2(30px)等等。 2.3 先說結論 新的網格系統采用12柵格的劃分方案,內容區調整至1032px; 行高、間距等都以4px為基數,8px為一個層級,margin為36px,gutter值為24px; 主頁區塊改為328x244px和240x180px;

3.論證過程

4px原則 4px和8px被主流分辨率整除概率最高,因此就在這兩者中選擇。 考慮到順應折疊屏和穿戴設備的發展對設備響應要求更精細,4px顯然更能夠在有限尺寸內提供更多變化,但在web端相對寬裕的設備上,8px在視覺上的變化更明確,可以作為層級的基本參考。 為什么是12柵格而不是24柵格? 決定柵格數量前先確定內容區域整體寬度,主流產品的內容區域值在1000~1200px區間內——Ant design的建議是1136px或1152px,那新版內容區域1032px明顯小于主流的依據是什么呢? “減少眼動” 得益于TV端的工作經驗,對瀑布流信息能否“一眼看完一行內容”這一點比較敏感,貝殼WEB端產品主頁也是瀑布流格局,經實測舊版內容區域1150px因偏大的間距和內容區,導致區塊間視覺連續性不高,且每瀏覽一行信息都非常艱難,在有14%比重的1366px設備上,內容區和設備邊緣僅剩100px,難以瀏覽內容,更小的1280px則瀏覽更困難,因此減少眼動會很大程度上提升瀏覽效率。

4.確定執行方案

1、符合4px原則 2、整體縮小內容區域——縮小container 3、強化區塊間視覺聯系——縮小gutter 首先內容區大小也遵守4px原則,在此基礎上盡可能往小了去取,確定區間1000px~1100px,具體數值也要參考gutter的值 1032px可以很好地減少產品在1366px設備上的眼動,也能在區塊大小不變的情況下,組合不至于擁擠。 確定Gutter值 16px、24px、32px是相對應用較廣的Gutter值,同時也是4的倍數。 舊版Gutter值29/30px導致瀏覽連續性不佳,因此在不大改區塊尺寸的基礎上,32px排除; 16px導致區塊間太過接近,前后文本間產生視覺粘連的效果;因此最終采用24px。 確定Container值 首先內容區大小也遵守4px原則,在此基礎上盡可能往小了去取,然后出幾組數據進行測試——Container、Column、Gutter、Marign這四個參數都應該都遵循4px原則,所以可以從1000px起開始,以4的倍數為節點測試,實測內容區取1032px可以在1366px基礎上有效減少眼動。 確定柵格數量(Numbers of Column) 確定內容區域1032px、gutter24px,先嘗試24柵格系統,得Gutter值大于Column值,雖然在分辨率較大時沒什么差異,但分辨率縮小至較小尺寸時會造成視覺上的不連貫,Material Design中也建議Gutter值不應大于Colunm值,因此采用12柵格系統。 確定內容區域1032px后,先嘗試24柵格系統,得Gutter值大于Column值,會造成視覺上的不連貫,Material Design中也建議Gutter值不應大于Colunm值,因此采用12柵格系統 確定邊距最小值(Margin) 舊版邊距缺失,沒有參考,而新版邊距也遵循4px原則,邊距一般會比槽要大一個層次,基于24px的gutter值,32px已經能起到區分內容和邊緣的作用。 但考慮到目前市場主流移動端設備越做越大的趨勢,“3.5英寸最佳”的時代已經一去不復返。 iPhone X 已經到達5.8英寸,XR則到達6.1 英寸,基于手指熱區的考慮,以6p的5.5英寸熱區為例Margin取36px可以更接近單手持握時的舒適區,讓用戶在移動端操作上有更好的體驗。同時視覺上不顯突兀。 Tips:拇指操作熱圖最早是由設計師Steven Hoober于2011年的書《Designing Mobile Interface》中使用,其中的綠色部分被他稱為“單手握持時拇指觸摸最舒適的區域”。這些區域的測量是通過1333份觀測分析總結出來的,這些分析數據還表明,49%的用戶習慣于單手握持手機,用拇指操控屏幕,而用另外一只手做其他的事情。 至此網格系統的基本參數已經建立。 確定區塊 區塊的寬度以網格系統的分割方式準,但在確定長寬比的時候有一個論證過程。 理論上,1:1.5(3:2)的長寬比是4px原則下的最佳選擇——視覺舒適;偶數與1.5相乘都為整數,4的倍數與1.5相乘結果都是整數。 但結合業務實際需求來看1:1.5未必是最適合的比例,消費類電商圖片可以自制,而房產類的圖片最核心在于真實,因此除非運營活動,圖片的來源都是公司內部攝影師實地拍攝的房源內部圖片。 所以在遵循4px基礎上和攝影設備的出圖尺寸,盡可能拉高長寬比,更多地展示天花板和地板區域,單反目前主流長寬比有3:2、4:3。同一寬度的情況下,4:3可以展示更多的房源空間,符合展示需求。而為在長度上也符合4px,所以區塊適當調小為504x376、328x244、216x160。 確定斷點(Breaking point) 斷點區間有很多成熟的架構如Bootstrap等,參考成熟架構的區間,而響應的原則之一是Column、Gutter等值都是整數。 根據現有的網格系統的參數,在Bootstrap的斷點基礎上,加入內容區和兩側的邊距=1032px 36px*2=1104px,作為補充。 以下是斷點相應變化動態演示 問題解決 至此,響應式的問題已經得到解決,同時也建立了新的網格系統。 web端產品的視覺也有一些調整,為避免篇幅過長,將在《情感化設計-貝殼找房產品體驗優化》中詳細講解調整設計的由來。 參考資料: Material Design Airbnb 數據來源: https://gs.statcounter.com 作者:zozo94w,站酷主頁:https://www.zcool.com.cn/u/14248314


(ノ???)ノ*:??? 查看最受歡迎 301 個設計網站 *:???ヽ(???ヽ)

UI設計QQ群 | RSS訂閱 | 新浪微博 | 本文鏈接 | 添加評論
]]>
http://www.wqqsqj.live/beikezhaofang-layout-of-responsive-web-design.html/feed 0
交互文檔這樣寫清晰易懂(附源文件) http://www.wqqsqj.live/how-to-write-a-design-requirement-document.html http://www.wqqsqj.live/how-to-write-a-design-requirement-document.html#respond Thu, 10 Oct 2019 00:00:14 +0000 http://www.wqqsqj.live/?p=31863 交互文檔這樣寫清晰易懂(附源文件)

對于交互設計師而言,在畫完原型圖后還需要撰寫一篇規范的交互文檔,這不僅能更好的與團隊對接,同時讓交互原型更能清晰表達出來,今天分享交互文檔的撰寫經驗和文檔的Axure源文件,希望能給大家帶來幫助。 交互文檔這樣寫清晰易懂(附源文件) 在做交互文檔之前,我們先要明白什么是交互文檔、為什么要做以及做了給誰看。

一、什么是交互文檔

什么是交互文檔 交互文檔,即交互設計說明文檔。英文 Design Requirement Document ,簡稱DRD。主要是用來承載設計思路、設計方案、信息架構、原型線框、交互說明等內容。

二、為什么需要交互文檔

有些人可能對文檔這種東西比較反感,尤其是從事工作不久的朋友。其實工作得越久,越會發現文檔的重要性,它可以幫助你理清思路,并記錄下來,便于回顧。 工作上而言,有一份規范的文檔可以讓你的設計更有說服力,也易于工作對接,提高彼此之間的溝通效率。

三、交互文檔給誰看的

交互文檔其實要說給誰看,其實具體情況具體分析。有的公司老板也要盯交互文檔,以及甲方爸爸、運營部門同事,都有查看的可能。 不過有4類人,無論如何他們都必須是交互文檔的忠實“讀者“: 【產品經理】產品經理與交互設計師可能是溝通最多的人,產品經理主要在文檔中確認設計思路和業務流程,然后過一下頁面交互模塊。 【視覺設計】UI設計師通常最關注的是頁面交互模塊,有著產品思維和體驗思維的設計師也會仔細看一下設計思路和產品背景,以便于自己更了解產品業務邏輯和用戶心理。 【開發人員】前端的開發同事和UI設計師一樣,最關注頁面交互模塊,其他的作為提升會輔助了解。而后端開發人員關注更多的是業務邏輯、信息架構、操作流程等,這些都清晰了,他們才能輸出一份準確合格的開發文檔。 【測試人員】因為測試人員是把關產品上線的一群人,所以各個模塊、步驟都應該去了解透徹,才能提出有效的bug。

四、如何撰寫交互文檔

本文主要闡述以Axure軟件為撰寫工具,大家可以根據實際需求決定用什么軟件(Sketch、PPT、Word、PS、AI 等)。 比如小需求可以用Sketch,快而高效。如果是要給甲方爸爸/大老板看的,使用PPT會讓他們更好理解。 沒有軟件基礎的設計師朋友,在設計達人公眾號后臺回復“AXURE教程“即可獲得入門Axure視頻教程。 如何撰寫交互文檔 通常,一個比較基礎、規范的交互文檔(DRD)由:文檔封面、更新日志、文檔圖例、設計背景/思路、業務流程、頁面交互、全局通用說明、廢紙簍八部分組成。當然,這不是絕對,你可以根據你的實際工作需要進行增減。 比如,如果是C端產品的話,用戶調研的結論、用戶畫像、用戶體驗地圖等等,都可以放進去給看的人一個參考。 尤其是在如今這么關注用戶體驗、產品思維的一個大環境下,這些數據支撐很有力量。同時還可以幫助開發人員、界面設計人員培養產品思維、體驗思維,大家一起將產品變得更好。 其次,交互文檔的整潔與美觀也很有必要。相信在過去幾年不少人有遇到過這樣的產品經理(兼交互),他們會輸出一些有時連他們自己都看不太懂或者直接從其它競品截圖來的線框圖。 當開發和界面設計的人提出質疑的時候還美其名曰線框不重要,重要的是里面的業務邏輯。。。其實用產品思維想,交互文檔就是交互設計師的產品,而看的人就是用戶,保持良好的可讀性,可謂至關重要。 1、文檔封面 文檔封面 交互文檔的封面如上圖,通常包括產品的名稱、Logo、版本號以及版本發布時間、所屬部門、對接負責人/對接人。 2、更新日志 更新日志 我們都知道,在產品的迭代的過程中,需求/功能是會不斷調整的。而更新日志,就是為了迭代而生。它一般由修改日期、修改內容、修改人、版本號和備注組成。 如果是新增的功能或模塊,建議是要加上鏈接可直接跳轉至新增內容的,如上圖。 版本號也是同理,都應加上對應的版本鏈接,便于查看者回溯之前的內容,與當前的新版本形成對比。 這一點對開發人員來說很重要,其次對于新同事深入理解產品也能起到很大的幫助。 修改日期,通常是按時間倒序排列,查看起來會比較方便。 3、文檔圖例 文檔圖例 文檔圖例,顧名思義就是關于此文檔的一些輔助說明,目的是為了讓讀者更好地理解文檔。如上圖的:操作/跳轉圖例、標簽圖例、流程圖例以及手勢操作圖例。 4、設計背景/思路 設計背景/思路 設計背景,根據實際工作需要,放置一些關于思路整理、靈感來源的文檔。 比如用研報告、用戶畫像、競品分析報告、商業畫布等等。增強文檔的說服力,盡量讓每一個人都能理解到產品的戰略目標和業務邏輯。 因為我今年對接最久的是一個B端產品的項目,所以整理了一個產品畫像,僅供參考。 5、業務流程 業務流程圖,不是操作流程圖也不是頁面流程圖。它是產品的整體業務流程,直接和業務掛鉤,可以說是產品的核心流程。 例如淘寶APP,買家購物由始至終的流程就是它的業務流程。通常用泳道圖的形式展示,多數情況下是由產品經理繪制。 業務流程 以上是我所負責產品的核心業務的流程圖。因為是B端產品,涉及角色較多,針對3個代表性角色分別進行了繪制,僅供參考。(涉及到保密協議,所有關鍵詞都去掉了) 6、頁面交互 (1)信息架構 信息架構 信息架構屬于用戶體驗的結構層,是產品的骨架。一般是由產品經理或者更高層的管理人員給出大框架。除非是大的產品迭代,否則不會大改。 (2)權限說明 權限說明 如果是C端產品,權限這一塊相對簡單,比較好整理的。B端產品涉及角色眾多,可能要單獨拎出來分析整理。 以上僅供參考,大家具體情況具體分析。若是功能很單一的產品,交互文檔中也可省去這個模塊。 (3)操作流程圖 產品操作流程圖就是通過圖形化的表達形式,闡述產品在功能層面的邏輯和信息。它能夠更清晰、直觀地展示用戶在使用某個功能時,會產生的一系列操作和反饋的圖標。 注:不要將所有流程匯總在一個表里,或者展示在同一個頁面中,而應跟隨具體的操作或者功能模塊放置。時刻想著看文檔的人的感受,怎么易懂怎么來。 操作流程圖 上圖是登錄、注冊和找回密碼的操作流程圖。僅供參考。模板源文件下載,后臺回復“交互”即可。 (4)頁面線框圖 頁面線框圖,是通過圖形化的表達形式,闡述產品在頁面層面的信息。包括: 【頁面標題】即每一個頁面的對應標題,一般就是導航欄標題 【頁面內容】以黑白為主,保證信息規整易讀 【交互說明】用標簽將其對應起來,包括交互邏輯、操作流程及反饋、元素狀態、字符限制、異常/特殊狀態、相關規則 等等 【主流程線】只需要畫出主流程線即可,千萬不可太多太雜,時刻考慮讀者的感受 頁面線框圖 以上是注冊的的頁面線框圖,僅供參考。 以上是登錄的線框圖和詳細的交互說明。將重點內容用紅色標記,可以讓查看者一目了然更好理解文檔。 7、全局通用說明 全局通用說明,指整個產品可通用或者復用的元素。一般是邊做文檔邊整理出來的,方便自己或者接手該項目的設計師直接調用。 其次,對開發及時封裝可復用控件也是有參考價值的。 (1)常用控件 常用控件類似UIKit,通常將極具復用價值的控制整理在一起,方便及時調用。 常用控件 常用控件-2 以上,僅供參考。 (2)復用界面 顧名思義就是全局可復用的一些內頁,比如選擇聯系人、獨立搜索頁等。 復用界面 (3)時間規范 在做產品的第一步,就應該約定一個時間規范。不然各個端開發出來,你會發現iOS是斜杠的,Android是橫杠的,WEB是圓點的...真到了發現的時候再改,那真是彼此都是無比崩潰的。 時間規范 (4)缺省頁匯總 缺省頁一般包括加載失敗、加載中、網絡中斷和無數據的空頁面。為空頁可以按照模塊整理在一起,方便UI設計師最后一起設計缺省頁,保持風格統一。 缺省頁匯總 8、廢紙簍 廢紙簍,被稱為是交互文檔的“后悔藥”。在需求不斷變動的情況下,改改改的過程中,請把你改過的稿子,放這里!!!因為很可能最后還是用的第一個方案...(此刻內心有點絕望)

五、總結

文檔、軟件只是工具,最重要的還是要落地、實行起來才能對產品有所幫助。所以在撰寫文檔的每時每刻,都應該站在“讀者”的角度思考,他們看的時候感受會是怎樣的,會覺得很難理解嗎? 除此之外,還需要有耐心,耐心給他們講解理解不透徹的地方。用一個朋友的話總結下:好的設計都是被虐出來的。(其實干哪一行不是呢...重要的是:心態心態~) 本文旨在提供參考,并非絕對的規范,還望拋磚引玉,多多交流。 設計達人后臺回復“交互文檔”,即可下載交互文檔模板源文件。 作者:宛蘇,微信號:wansugogo


(ノ???)ノ*:??? 查看最受歡迎 301 個設計網站 *:???ヽ(???ヽ)

UI設計QQ群 | RSS訂閱 | 新浪微博 | 本文鏈接 | 添加評論
]]>
http://www.wqqsqj.live/how-to-write-a-design-requirement-document.html/feed 0
多圖版式設計案例,并告訴你5個排版技巧 http://www.wqqsqj.live/duo-tu-paiban-de-sheji-anli.html http://www.wqqsqj.live/duo-tu-paiban-de-sheji-anli.html#respond Wed, 09 Oct 2019 00:00:57 +0000 http://www.wqqsqj.live/?p=31814 多圖排版的設計案例以及技巧分享

很多設計師遇到太多圖片時,總是排版不好,不知道如何去處理圖片的布局。當遇到這些情況首先不要慌張,既然多圖就要把它們處理得更加整齊干凈,而這里說得“整齊”并不是說把版面整齊地填滿。而應該將它們進行信息的層級處理和區域劃分,再合理編排。該留白的地方就大膽地去留有空間,該對齊的地方就應該仔細地做好每個細節。今天文章中將分享多圖排版的設計案例有很多不同場景的使用,同時還告訴你5個關于排版的技巧,同學們可以從中吸取經驗。 多圖排版的設計案例以及技巧分享

一、多圖排版設計案例

在這里的排版案例中,有多種不同場景使用了多圖的排版方式,有宮格、無序、時尚、文藝等排版方式可以參考。

二、以電影海報為案例的多圖排版作品

電影海報99%都是需要圖像才會有吸引力,所以拿電影作品作為參考對象也是不錯的選擇哦,而這里我們只挑選多圖排版的電影海報。

三、多圖排版的5個技巧

看了這么多案例還是不知道怎樣多圖排版?那么試試這5個技巧,讓你的多圖版式更加美觀實用吧! 1. 統一尺寸編排 這種編排在很多設計中較為常用的方法,版面視覺整齊清晰,但容易缺少變化。這里不建議多個頁面都使用這一種方法,會顯得更加單調。 2.?不同尺寸編排 一般來說,尺寸大的東西比尺寸小的更容易吸引注意力,這點對于圖片也是一樣。所以利用不同尺寸的圖片可以讓整體版面產生節奏變化,也是區分層級關系的有效手段。合理的調整圖片大小,把圖片的主次關系和層次感體現出來,讓版面更顯張力。 3.?與色塊結合 色塊除了有突出區分和修飾的用途,還有信息間引導的作用。而圖片與色塊組合在一起可以削弱版面的單調性,還能吸引讀者注意和引導閱讀視線,保證版面形式與內容形成統一感。不過注意色塊的顏色不宜過多,可吸取圖片的顏色進行配色。 4.?不同形狀展現 圖片在版式設計中占有很大的比重,如果改變圖片的形狀來編排,在視覺上可以讓版面更豐富。 5.?嘗試去底圖 這種處理方式比較靈活,沒有固定的規律。由于摳出來的圖形是沒有背景的,因此去底圖可以更好地與其它視覺元素搭配使用,更顯設計感和空間感。 今天的到這里,建議收藏本文,遇到多圖文排版的時候,可以從本文的獲取靈感。 感謝閱讀! 作者:?周妙妍,來源:版式設計很簡單


(ノ???)ノ*:??? 查看最受歡迎 301 個設計網站 *:???ヽ(???ヽ)

UI設計QQ群 | RSS訂閱 | 新浪微博 | 本文鏈接 | 添加評論
]]>
http://www.wqqsqj.live/duo-tu-paiban-de-sheji-anli.html/feed 0
AI街頭風格插畫教程:超級獅子 http://www.wqqsqj.live/adobe-illustrator-jiaocheng-chaoji-shizi.html http://www.wqqsqj.live/adobe-illustrator-jiaocheng-chaoji-shizi.html#respond Tue, 08 Oct 2019 00:00:58 +0000 http://www.wqqsqj.live/?p=31795 AI街頭風格插畫教程:超級獅子

今天為大家分享一篇街頭插畫風格的設計教程。街頭風格插畫的用途廣泛,一般街頭hiphop、體育運動和電子競技使用這類風格較多。本教程使用的軟件是Adobe illustrator,建議同學們一起來做練習。 AI街頭風格插畫教程:超級獅子

AI插畫教程:街頭風格超級獅子

首先我們現在網絡上找一張感染力比較強的獅子照片,然后我們再用ai里的畫筆工具進行繪制出外觀。 再用鋼筆工具仔細勾勒出獅子的外形,注意擴展的時候封閉路徑。 鋼筆勾勒出形狀之后,我們可以看出毛發部分太過于繁密復雜,所以要簡化復雜部分。 前后的對比,可以看出比之前的簡化了一些,提升了獅子的張力,使人印象更加深刻。 線稿確定好了之后,我們就要考慮面的關系,在以前的教程中,我們學習了一些關于光影的基礎,讓我們再來熟悉一下光影關系。(拿一個球舉例)我們假設光是從右上方來,那么哪些地方該加陰影,哪些地方該加高光呢? 這里我們用個球來表示,用簡單的幾個色塊表示球的光影關系。 畫面中出現的光影關系如下,分別有亮、灰、暗三個面,以及高光、反光和投影,這六個就是這類型插畫的六大關系,也可以叫三大面五大調子的閹割版。 完整的三大面五大調子還會有明暗交界線和中間調這兩個,但做這類型的插畫很少用到。感興趣的可以自己去了解一下。 在此類型的插畫中,暗面和投影可以直接用線稿的黑色來代替,形成另一種風格。 了解這些美術基礎后我們就可以在填色稿的基礎上繪制光影關系了。 有許多同學可能想知道這個部分的毛發是怎么做的,其實就是用混合工具 使用鋼筆工具繪制出兩條線,然后選中之后快捷鍵Ctrl Alt b就可以繪制出許多線 最后我們再用直接選擇工具調整毛發的疏密關系,提升毛發的質感。可能還是有些同學覺得不太好理解,可以看一下這篇文章里有具體怎么使用混合工具。——《一組案例帶你看高級混合的妙用! 好,我們可以看出,分析獅子毛發的前后遮擋關系之后繪制投影以及高光,使我們的插畫風logo更加的立體化,不再單薄。 最后再選擇搭配的字體,進行最后的調整,這樣一個插畫風的logo就制作完成啦。 作者:大貓Sunjay,微信號:大貓設計


(ノ???)ノ*:??? 查看最受歡迎 301 個設計網站 *:???ヽ(???ヽ)

UI設計QQ群 | RSS訂閱 | 新浪微博 | 本文鏈接 | 添加評論
]]>
http://www.wqqsqj.live/adobe-illustrator-jiaocheng-chaoji-shizi.html/feed 0
卡通LOGO設計的六大技巧 http://www.wqqsqj.live/6-cartoon-logo-design-tips.html http://www.wqqsqj.live/6-cartoon-logo-design-tips.html#respond Mon, 07 Oct 2019 00:00:26 +0000 http://www.wqqsqj.live/?p=31769 卡通LOGO設計的六大技巧

卡通LOGO聽上去像是要設計師掌握手繪基礎。“老師!我不擅長手繪怎么辦?”其實在做設計的時候并沒有死板的條條框框,更多的是考驗設計師的實現。而實現,就是到達目的地的路線很多條,你怎么走自己擅長的那條,用巧妙的方式去實現想要的效果。本文通過6個技巧讓大家了解卡通LOGO的表現方式和設計手法,希望大家領悟背后的思路,掌握創意的訣竅和不自我設限的哲學。 卡通LOGO設計的六大技巧 這一期我們聊聊大家一直都比較感興趣也覺得比較困難的卡通LOGO。 很多同學覺得做卡通的LOGO很難,沒有手繪基礎根本無從下手,其實做卡通LOGO是有技巧方法的,根本不需要手繪基礎。

卡通LOGO技巧

在上一篇動物LOGO教程中其中有一個技巧是擬人形態動物LOGO,那實際上卡通LOGO及其常用的手法之一就是擬人化。把動物或者某種物品食品等擬人化再處理好細節就是一個常見的卡通LOGO。所以今天的教程我們主要的幾個技巧都是圍繞著如何把動物或者物品擬人化展開,順帶提一下其他的手法。 卡通LOGO設計的六大技巧

卡通LOGO六大技巧

1.? 火柴人技巧 2. 擬人元素結合 3.? 擬人形態結合 4.? 元素替換法 5. 元素結合法 6. 單純刻畫法

一、擬人態最簡易方法——火柴人技巧

所謂火柴人技巧顧名思義就是在某種動物或者靜物上添加上火柴人的四肢,眼睛等最容易產生擬人效果的基礎元素。可以看到下面的幾個案例,都是添加了簡單的四肢和五官就產生了擬人化的形態。糯米團、牙齒、熱狗,無論是靜物還是動物其實這個方法都適用。相對而言,靜物的可操控性更強一些。 卡通LOGO設計的六大技巧 這個方向的刻畫重點是在于元素本身,而后再考慮加入肢體五官等。所以其實難度并不大,因為靜物可供參考的素材實在是太多了。我們直接實操一個案例來看看這個方法有多好用。 案例實操 這是一個壽司品牌,品牌名就叫[萌萌壽司],老板要求萌萌噠,要一眼看出來是一個壽司,并且要帶主推產品,生魚片壽司。這樣我們的方向也基本明確,核心的主要元素就是壽司。好了,接下來就是去生活里尋找靈感來源,切記不要局限不要局限。一定要多看。 卡通LOGO設計的六大技巧 這參考找的我口水都要流下來了...可以看到生魚片壽司有許多不同的形態,所以我們在畫的時候只需要注意兩個最重要的點。一個是壽司的形態形狀,另一個就是壽司的角度問題。為了能讓圖形一眼看出有生魚片和壽司,所以角度選擇了斜俯視的角度,而形狀則是選了最容易畫的方形。這樣一來就容易入手了。 卡通LOGO設計的六大技巧 我們首先解決大的形態問題,依舊是大家熟悉的墊圖處理。先畫出草圖看看感覺,這個時候不必太心急,只要能有一兩個能夠深入的方向即可。 卡通LOGO設計的六大技巧 我選了兩個手稿做了一個加法,整體的效果還可以。到這一步,整個形態基本定下。接下來我們需要給小壽司加上他的五官和火柴人四肢。 卡通LOGO設計的六大技巧 諸如此類的火柴人和表情包到處都能看得到,這都是可供我們學習的方向。接下來我們選一個動作和表情,給小壽司就可以可以了哦。我打算找一個女孩子的姿勢,顯得小壽司可愛淑女一些。 卡通LOGO設計的六大技巧 到這邊一個火柴人小壽司就基本做好了,我們只需要上個色,搭配一個合適的字體設計就OK了。 卡通LOGO設計的六大技巧 當然生魚片上的細節是后面另外添加的。一開始的時候我們只是確定下了大形。而后加入了火柴人四肢和五官。最后刻畫細節,搭配一個合適的字體設計。這樣一個火柴人壽司卡通LOGO就做好了,是不是沒有想象的那么困難?

二、創意的基礎技巧——元素替換

前面三個基本都是在講如何擬人化設計卡通LOGO,這個技巧的話就不太一樣了,偏向于基礎創意方法。在以前的教程中也是有提到,比如字母LOGO,人像LOGO都是有類似的方法。簡單說就是把形態相同的元素替換掉,從而提升創意度。 卡通LOGO設計的六大技巧 我們分析一下上面的案例,猴子的臉與符號的替換;熊的鼻子與雞蛋的替換;狗狗的耳朵與綠葉的替換;狐貍的尾巴與鉛筆的替換。這都是比較簡單并且容易實現的替換方式。主要的點就是替換部分的形狀一定要契合,整體協調。不要為了創意而創意。 案例實操 這是一個餃子品牌,名字叫[小金雞水餃],老板要求能看到小母雞、金元寶和水餃的元素。我想了半天不知道怎么畫這個小雞雞。于是我們的少爺拿出了他珍藏已久的傳家寶。突然我的靈感...噴薄而出... 卡通LOGO設計的六大技巧 于是又是一頓墊圖靈魂手稿。再來一份木西少爺喜歡吃的水餃。這個撈狗應該也基本差不多了。 卡通LOGO設計的六大技巧 接下來我們再來一個合體大法...biubiu... 卡通LOGO設計的六大技巧 最后我們再搭配一個合適的排版,優化一下細節。這樣這個方案也就基本完成了。 卡通LOGO設計的六大技巧 這個方法的難度也不大,主要的操作技巧在于。我們畫的時候一定要先集中精力把主要元素畫出來,再考慮替換元素的問題。以上面的案例為例,我在畫LOGO草圖的時候是以小雞為核心,畫著畫著,發現翅膀部分是能夠與餃子和金元寶結合。

三、擬人態的最佳效果——擬人形態結合

毫無疑問,直接把整個LOGO擬人化去設計處理肯定是擬人效果最佳的。但是相對而言這個的難度也是比較高的。需要涉及比較多的難處理的點,比如體態結構,比例,五官,細節刻畫等等。但是! 我們的教程一向就是秉承著讓笨蛋都能學會的宗旨!畢竟你們個個都是天才,這對你來說肯定沒難度。我們繼續。 卡通LOGO設計的六大技巧 看一下上面的案例,是不是都特別生動?主要原因就是細節刻畫豐富,形象體態飽滿生動。所以我們需要考慮的重點就是這個體態以及與動物形象的結合。實際上,無論是體態或者是動物形象,只要留心觀察以及多看素材案例,都是能夠得到解決的。我們在案例實操中細說。 案例實操 這是一個醬餅品牌,名字就叫[豬同鴨醬餅]。老板要求有豬有鴨還要有餅。這個可難倒我了...mmp...豬和鴨結合??? 好吧,我還是堅強的完成了這個撈狗。我們先看一下最終效果。留一個包袱,我們有機會出一篇教程,詳細講這種類型的LOGO,從構思到每一個基礎操作都在那篇講,因為涉及到的細節還是比較多。 卡通LOGO設計的六大技巧 接下來粗略看一下過程圖吧。實話說,這個開始動手時,確實不順利,我一直把思路集中在結合結合。實際上怎么可能結合呢...一直到后來,畫著畫著畫出了感覺。所以我們還是需要經常多動手畫畫草稿的,說不定畫著畫著靈感就有了。 卡通LOGO設計的六大技巧 一開始是先畫了豬為主體,雞在肚兜里...靈感是哆啦A夢...嘗試后,不太現實,于是放棄。所以我想先集中精力畫畫雞吧,看看效果。誒,畫了后,把一開始畫的肚兜套進來。發現可以融合,類似雞套了豬豬頭套。這樣草圖也就基本定下了。至于體態部分,其實我沒有過多糾結,就畫了個小手,托著醬餅。如果你們在體態部分糾結的話,可以多看看美術基礎的繪制過程。 卡通LOGO設計的六大技巧 類似的基礎表情繪制,基礎體態都是能夠對我們畫卡通LOGO有非常大的幫助。類似的圖網絡上有非常多,基本上能夠解決我們所有的體態和表情上的疑惑。

四、擬人態的簡易捷徑——擬人元素結合

為什么說擬人元素結合是擬人態的簡易捷徑呢,因為這個操作你基本不需要太考慮整體形態和體態之間的關系。只需要找到一個適合的加入元素或者修改元素的位置就可以了。比如菠蘿上直接加眼鏡,漢堡包直接加入胡須。狗狗加入圍巾,母雞加上帽子。諸如此類,只要加上了人們熟悉的生活元素。那么原本死板的動物或者靜物頓時就有了生活氣息。 卡通LOGO設計的六大技巧 所以說是一個簡單的捷徑。我們的案例實操以動物為例,所以需要結合上一篇教程,也就是你會畫動物LOGO后,加上這個方法。那卡通LOGO對你來說難度也大大降低了。 案例實操 這是一個圍巾品牌,老板要求以狐貍作為主形象并且最好能夠跟圍巾的相關產品或者棒針結合進來。 卡通LOGO設計的六大技巧 結合上一篇教程,還記得吧。所以這邊我們不再贅述過程,感興趣的同學可以再翻閱一下上一篇,[動物LOGO怎么做]。一定是先有頭部,我們再去考慮其他的部分。所以按上一篇的方法我們先畫出狐貍的頭部。而后自然的加入擬人元素,圍巾。而棒針自然是不適合加入到圖形中的。所以我們把棒針提取出來,作為點綴的排版元素使用。既能夠豐富整體排版,也符合棒針元素融入的要求。

五、創意的進階技巧——元素結合

元素結合的難度相比元素替換就要大一些了,元素結合需要考慮兩者直接的關系和契合度更多一些。我們分析一下下面的案例。 卡通LOGO設計的六大技巧 松鼠和蛋糕的結合,大象和杯子的結合,這兩個在思路上是相同的,我們的案例實操也準備走一個方向的結合。而狗狗和汽車的結合,小鳥和樂符的結合都是非常巧妙的。元素結合的操作思路與元素替換就有所不同了,元素結合要求我們在執行的時候同步考慮二者之間的關系。而不能優先考慮某個元素。 案例實操 這是一個甜筒品牌,名字是[小獅甜筒]。思路在上面我們已經提過了,很自然的。我們遵循上面是獅子,下面是甜筒的思路去著手,這樣整個的流程就會變得順利很多,因為我們把最難的結合點已經解決了。 卡通LOGO設計的六大技巧 看到這邊同學們肯定明白了。最難的結合點,我們是可以通過借鑒快速解決的。所以其他的部分難度并不大。這樣一來是不是簡單了很多呢?這個LOGO詳細的教程,我們也在下一篇細講,也是因為其中涉及到比較多的細節處理,比如布爾運算的技巧,陰影設計的快捷方式等。

六、卡通標志基礎——單純刻畫

最后一個卡通LOGO方法就比較單純一些。就是單純刻畫出某個卡通形象,不需要考慮過多的創意結合。這種類似的需要我們對細節和整體效果要求更多一些。 卡通LOGO設計的六大技巧 類似上面的案例都是比較單純的去表達形象本身,并沒有加入過多的裝飾和創意手法。

文章小結

以上列舉的幾個方法也僅僅是作為拋磚引玉而已,實際上不管是什么類型的LOGO都有非常多不同的表現方式和設計手法,甚至許多的方法都是互通的。主要還是希望大家能突破自己,不必局限自己。很多事你試了才知道行不行。而不要一提就以自己不會某種技能而敷衍搪塞自己。 作者:小刺猬,微信號: 胡曉波工作室


(ノ???)ノ*:??? 查看最受歡迎 301 個設計網站 *:???ヽ(???ヽ)

UI設計QQ群 | RSS訂閱 | 新浪微博 | 本文鏈接 | 添加評論
]]>
http://www.wqqsqj.live/6-cartoon-logo-design-tips.html/feed 0
UI插畫技法,風景照片變手繪插畫 http://www.wqqsqj.live/ui-chahua-jifa.html http://www.wqqsqj.live/ui-chahua-jifa.html#respond Sun, 06 Oct 2019 03:09:42 +0000 http://www.wqqsqj.live/?p=31751 UI插畫技法,風景照片變插畫

什么是UI插畫?準確點說應該是扁平化風格插畫,一般手繪插畫都需要很長的時間才能繪制完成,同時也考驗設計師的畫功,正因如此,現在流行一種簡易的扁平化UI插畫風格,可以使用鼠繪就能畫出插畫風格的作品,新人設計師也可以很快上手并應用到實際項目中。 UI插畫技法,風景照片變插畫

一、開篇

本篇文章主要針對于小白及插畫小白,在剛剛就業設計職業的道路上多一些設計方法,讓工作不再困難。當然,在比較熟練技巧后,不要一直依賴于此,要以擴展的方式繼續深入學習才會提高。

二、對于插畫工具的認知

在前一篇文章里我講到過,插畫的風格多種多樣,插畫繪畫的工具就可以分為三種:鼠繪、板繪、ipad繪;為什么重點說工具呢,我想很多小白也跟我想的一樣,我也是小白,不是專業出身,對于剛剛接觸插畫,一片茫然,只知道筆和紙,并不了解怎樣在電腦上繪制。這里小編可以跟同學們建議,如果你是入門UI或者平面,對于插畫不需要太過于深入,可以先選擇鼠繪學習。 那么這三種都怎么樣,到底怎么選擇呢? 對于插畫工具的認知 第一個就是鼠繪,鼠繪入門比較低,不需要額外投入,一個鼠標,用PS或者AI就可以繪畫,但是適合于繪制扁平化插畫,(下面會介紹幾種常見插畫類別)。 第二種板繪,板繪是插畫師的必備,是所有畫師最專業的設備,當然板繪需要買一個相對好一些的,比如影拓啊之類,專業板子價格一般都在一千以上。對于板子的運用,零基礎的同學可能不適合馬上運用,需要熟悉并且學習一段時間,畢竟看著電腦,在板子上繪畫,一開始會不太習慣。 第三種Ipad,就更不用說了,需要投入買一個,建議大家一定要買pro系列,因為pro系列會有配套的筆,其他的ipad的筆都不是蘋果原廠,用起來很不舒服。對于專業性來說,雖然沒有板繪專業,但也適用于商業插畫的繪制,學習成本低,只需要稍微熟悉一下軟件用法就可以(ipad軟件于PS不同,但相似),畫起來的手感跟紙筆繪畫一樣。

三、插畫種類

對于三種不同的設備來說,有多種插畫種類,但咱們今天主要針對的是對插畫方向的小白同學,所以主要說一下我個人總結的一部分鼠繪插畫種類。 在比較短的時間內能夠用鼠繪方式繪制出來的大概總結了這幾種,首先最常見的就是漸變的插畫,這副插畫大概制作時間在半個工作日左右。 第二種線性插畫,在實景建筑圖片基礎上運用線條的方式繪制出輪廓,達到想要的效果。 第三種,我給起名線面插畫,意思就是利用粗描邊的方式繪制輪廓,再進行填色,適用于比較清新的顏色風格。 第四種,應用最廣的噪點插畫,本身在第一幅插畫的基礎上加入噪點,形成更深的層次感覺,在后面我會介紹一些噪點的畫法。 第五種,手繪和鼠繪的結合。如果小伙伴們有時間,就可以利用這個方法,在板子或ipad上先把喜歡的插畫畫出來,再導入PS里進行顏色調整和文字排版。 當然鼠繪畫法不局限于這幾種,這里只是舉例子比較常見的,大家可以多嘗試其他方法。 對于板繪和ipad繪制風格,有多種多樣,比如卡通畫法、厚涂、美式畫風等等,建議大家把鼠標繪畫練習熟練之后再深入學習。

四、案例-雪山插畫

接下來進入主題案例教學,今天首先給大家帶來的是,雪山插畫,景物照片轉插畫的過程。對于我個人來說,畫這一副需要3~4個小時,初學者可以選擇照片比較簡單的開始練起。 那么我們開始。 案例-雪山插畫 1.第一步就是選圖 有很多小伙伴問我,從網上截取的圖片,自己畫成插畫,有版權嗎?如果擔心,還是自己拍更好一些,或者,幾張圖片結合著畫,就是這里的一棵樹,那里的一個小房子,這樣的。當然,這種畫法是照片→插畫,并不是去抄別人的插畫。 選圖最好從比較簡單的圖片選起,一般山水,比較容易學起,這類的線條較少,水波倒影很美,也很容易排版。 2.第二步,觀察 選好圖后要進行觀察,因為景物圖一般都是由遠景到近景一系列組成,為什么要觀察這些呢?這樣有助于我們建立圖層,畫插畫的先后順序。 觀察插畫 要注意,從遠到近,從上到下去觀察。比如,從上,天空、太陽如果沒有,可以選擇加或不加,白云;從遠,遠處的山,近處的山、房屋后面的樹、房屋、房屋前面的雪、雪前面的樹;再往下,就是水,加倒影。 這里要注意,在觀察之后,要選擇,哪些是可以省略掉不畫的,因為扁平化插畫,是一些大的色塊組合而成,不是寫實一樣細致,畫面物體零散的太多反而會影響整體,所以要抓住重點來畫。就比如房子前雪的前面那些樹枝,加上會不會覺得有點亂,不如省去;再或者,如果遠處的山太多,是不是可以簡略一些。 選擇好需要畫的主體后,開始下一步。 3.第三步,找色彩 色彩搭配是比較多的人問我的一點,其實這張圖還好,顏色比較鮮艷,直接運用其實都可以。但是在我的其他插畫中可以看出,很多插畫的照片,顏色是不會拿來直接用的,這里就需要伙伴們對顏色的定義。那么顏色怎么選呢? 第三步,找色彩 這里教大家一個比較實用的方法來找色彩,我這里給分成了三個大類: 第一個是季節,觀察你想要畫的,主要突出的場景是什么,比如說驚蟄、夏至、東至這種季節代表性的照片,可以用季節來尋找色彩,不同的季節有不同的顏色范圍。 第二個是時間段,一說小伙伴就懂了,每天都有不同的時間段,清晨、上午、正午、落日、傍晚,仔細觀察每天陽光的動向,照射大地的顏色,都是豐富多彩的,不同時間段有著不同的色彩。 第三個是情感,就比如我有一副畫的是親情,運用了一個比較暖暖的色調來襯托母愛的溫暖,相對來說還有愛情、友情等不同顏色,還有可以表達小孩子的童真的顏色,等等。 那么,選定了自己想要的色彩方向,怎么去定義色值呢? 這里就需要大家平常的積累和準備,作為設計師,積累是很重要的。網上有很多插畫的成品,很多顏色參考,可以搜集代表不同的感情色彩,需要用的時候直接拿出來看。 找到很多有代表意義的色彩,選定自己的方向后,進行定義,這里的定義顏色并不是說大家去抄,去吸色。就比如你的圖,是落日,你選擇了中間那一副,你知道落日是從淡黃色到橙黃色的漸變,鄰近色也可以運用,ok,然后下一步去漸變色網站去找你想要的顏色,比如設計導航推薦的漸變配色網站就很好用。 ==漂亮漸變配色網站 Web gradients==== 這里很多很多色卡,可以去選擇你需要的,另外,在顏色上最好稍微鮮艷一些,提升整體感覺。 4.第四步,開始著手畫 終于可以開始畫了是吧哈哈~ 開始之前,先要確定一下你畫插畫的目的,來選擇軟件,在這里,我就用PS來畫,因為在一些工具的運用來說,PS比AI要更方便一點,更容易操作。當然,如果需要印刷圖,需要注意一下尺寸和分辨率。 在畫布大小上我想建議一下小伙伴們,一般來說,畫布可以分為PC端的橫向矩形,和移動端的豎向矩形,為什么不選擇用正方形這種,你可以先用正方形畫布,之后再根據需要進行剪裁,但是建議初學者還是先定義好畫布大小再進行繪制,這樣對于物體位置的把控就會比較直接。 這里,就用移動端畫布大小進行演示。 第四步,開始著手畫 在原圖上可以看出,整體分為水和陸地,陸地部分占比沒有水多,整體畫面的中心則還需要在陸地,因此咱們需要向下移動一些,縮小水的面積。因此可以確定,最底層,可以用兩個矩形,一個在上面作為天空,一個在下面作為水面。 在天空上,可以畫個矩形,作為太陽,復制一個太陽加高斯模糊作為陽光的照射。陽光下面的云,就用鋼筆工具來勾勒,直接加個與天空一樣的漸變就可以,如果不明顯,可以換一個方向,如果過于明顯,可以稍稍改變一下色調。 接下來是什么呢,就是遠處的山,也是用鋼筆勾勒形狀,從最遠的開始畫起,每畫一層,就要給這層加漸變,從最下層開始一層一層的畫。畫房屋的時候,房屋的每一個面,每一個窗戶也要分層來,方便上色。 有小伙伴問,那我找不準形狀怎么辦,鋼筆勾的不穩。沒關系,按照自己的感覺走,比如樹木那里,就算原圖是很模糊的,看不清樹枝的方向,也可以根據自己的想法,隨意勾勒,隨意一點。 用相同方法,繪制出前后不同的景觀,顏色深淺度要把握一下。 接下來比較重要的是,水面波紋的畫法。 水面的倒影就是將上半部分的靜物與天空中的云朵和太陽復制一層,倒立過來,轉換成智能對象,用蒙版拉伸一下,從下至上,從透明到不透明。重要的是,添加動感模糊,數值不要太大。 接下來,就是水面波紋的畫法了。這個大家還仔細來做。 首先,用鋼筆畫出一個波浪的形狀,再加動感模糊。復制多個,不規則排列,再復制多層,每層都調整不同顏色,制作出深淺度不同的水波紋。 就這樣,一幅照片轉的插畫就這樣完成了。 等等,還沒結束,不加文案的插畫是不完整滴~大家要注意,一個頁面上不要出現三種以上的字體,所以在字體的選擇上,不要過多,而且要注意版權問題,文字排版如果是零基礎,建議大家有空的時候看一本書《寫給大家看的設計書》。主要針對于設計零基礎的童鞋們,里面有很多文字排版的規范和注意事項。 如果前期對排版還不是很熟練,是要用業余時間多多看網上優秀的案例,多保存在自己的素材庫中,作為參考是很不錯的。 5.第五步,豐富頁面之-噪點 如果大家覺得頁面不夠飽滿,又不能再加東西了,到了一個十分尷尬的地步,就可以往噪點插畫方向制作一下。 那么噪點可以怎么加呢?這里我總結了三種加噪點的方法供大家選擇。 豐富頁面之-噪點 首先是筆刷,噪點筆刷需要大家找一下,沒有的話就需要從網上下載一下了。噪點筆刷比較隨意,想怎么畫就怎么畫,但不是一步到位,需要慢慢來,這樣也會很細致。 第二種方法是雜色,需要提前蓋印出一張成品圖,在濾鏡→雜色里面添加單色的雜色,可以控制雜色數量,添加完之后配合蒙版,擦去不需要的雜色。 第三種方法是濾鏡里面的顆粒,有兩種顆粒,另一個是膠片顆粒。普通顆粒和雜色幾乎一樣,但可以調節對比度等。膠片顆粒可以根據高光區域來選擇顆粒的范圍,不過最好還是配合蒙版來進行擦除。 怎么樣,小伙伴們畫出來自己心儀的插畫了嗎?

五、總結

很開心和大家分享自己的插畫小技巧,這類的插畫比較快捷的出圖,一定程度上能夠滿足部分設計師在工作當中的要求,今天帶給大家的是景物插畫方法,大家也要多多練習,在之后的時間里,我會繼續選擇幾幅插畫繼續與大家分享。 不要問我為什么不繼續畫了,其實我也是個小白,在今年下半年的計劃中,其他的設計也要練習,所以現在正在繼續著別的練習,希望大家也要一起有計劃的學習。 感謝大家的支持!! 作者:Lina琳 個人主頁:https://zoulin.zcool.com.cn/


(ノ???)ノ*:??? 查看最受歡迎 301 個設計網站 *:???ヽ(???ヽ)

UI設計QQ群 | RSS訂閱 | 新浪微博 | 本文鏈接 | 添加評論
]]>
http://www.wqqsqj.live/ui-chahua-jifa.html/feed 0
折頁設計沒那么難——9款折頁圖賞 http://www.wqqsqj.live/9-folding-design.html http://www.wqqsqj.live/9-folding-design.html#respond Sat, 05 Oct 2019 04:09:41 +0000 http://www.wqqsqj.live/?p=31737 9款折頁設計圖賞-1

折頁設計由于其“折疊”的特性使得設計師發揮空間更廣闊外,也提高設計的難度。不僅在設計時要考慮單獨頁面和整體頁面的視覺效果,還要考慮折疊對最終視覺效果的影響,比如讀者視線的引導等等。下面設計達人為大家提供的9款折頁設計圖賞-,希望能為大家帶來靈感! 01. 9款折頁設計圖賞-1 02. 9款折頁設計圖賞-2 03. 9款折頁設計圖賞-3 04. 9款折頁設計圖賞-4 05. 9款折頁設計圖賞-5 06. 9款折頁設計圖賞-6 07. 9款折頁設計圖賞-7 08. 9款折頁設計圖賞-8 09. 9款折頁設計圖賞-9


(ノ???)ノ*:??? 查看最受歡迎 301 個設計網站 *:???ヽ(???ヽ)

UI設計QQ群 | RSS訂閱 | 新浪微博 | 本文鏈接 | 添加評論
]]>
http://www.wqqsqj.live/9-folding-design.html/feed 0
澳门网赌正规网站网址