當前位置:首頁>ps入門教程>ps基礎教程>設計知識>教程內容

手繪技巧,有哪些手繪線框圖的小技巧?(4)

來源:blog.akanelee.me 作者:Akane_Lee 學習:2114人次

工具

以下是個人習慣,不代表這牌子適合所有人,挑順手(便宜)的買,這 3 種是基本工具。

酒精性麥克筆

臺灣常見 Pantone 、Copic 這兩牌子。我買 NEOPIKO,忘記是最便宜還是因為沒用過買來試試…效果也很好,挺喜歡的。不要買毛筆軟頭,請?zhí)羝筋^+硬尖頭那種。

千萬不要買整套!你是要畫 Wireframe 不是交學校作業(yè),灰階挑 1、3、5,加自己看得順眼的 4 只淺色就綽綽有余了。什么艷色、深色,畫 Wireframe 用不到。酒精性麥克筆貴死了!能省則省。

油性色鉛筆

鉛筆、油性原子筆、水性筆畫的草稿,被酒精性麥克筆一涂,畫面通通都臟掉。早期我用到 H 的自動筆在畫,下筆重一點同樣臟臟的。后來找到破解法:油性色鉛筆。拿淺色的來替代鉛筆打草稿,畫錯一樣擦得掉很不明顯。就算酒精性麥克筆抹過去也不會糊,根本救星。

文具店抓隨便一支就夠用,20 元左右。

粗的黑色原子筆

最后描框用,隨便哪牌子都可以,挑順手便宜的買。想專業(yè)點就拿代針筆吧,我自己是用 Uni 的普通原子筆。(推 ZEBRA Z-1 S 0.7 原子筆,便宜大碗。)

步驟

0. 白紙

tw201503122

iPhone 4 剛出的時候,我去印刷廠印了1000張這種紙,一面是 iPad、一面是 iPhone ,畫了(亂灑)幾年還剩下 200 張左右。

可以去 UI Stencils—iPhone Sketch Pad 找免費的樣板 PDF 下載。

1. 打草稿

tw201503123

直接拿淺色油性色鉛筆畫出主要區(qū)塊。

根據 為什么要畫3次 Wireframe? 介紹的個人習慣,動用麥克筆的 Wireframe 在手繪稿中算是第 2 次了,會有張遼草的亂撇鉛筆稿當范本,所以拿色鉛筆直接畫也不太會出錯。

2. 上底色

tw201503124

拿出最淺的 1 號灰階麥克筆上底色。除非胸有成竹,不然我習慣從 1 號灰階起手。顏色淺可以多迭幾次,下手太重沒救。

3. 描邊

tw201503125

用粗黑筆描輪廓線,畫面就會有模有樣的。色鉛筆畫錯也沒關系,黑筆邊一描下去就很不明顯了。

icon 我不太會在這個步驟畫,等架構都確定了才會想 icon 的設計,通常就是一個圈圈代替。萬一 Wireframe 一直重畫,光刻 icon 就飽了。

4. 寫字

tw201503126

請用比 0.5 細的黑筆來寫字和補細節(jié)。我手賬本用 Uni Style FIT 寫 ╮(╯_╰)╭ ,隨手抓也就是這牌子的黑色,0.38 或 0.28 都可以。

5. 上重點色

tw201503127

幾個比較重要的顏色要加強,用深一點的灰色也行,但視覺會沒有重心,用亮一點的色彩加強比較討喜。

6. 外框

tw201503121

外框最后再來畫,避免萬一要加什么麥克筆色就糊掉了。不畫也沒關系,但加這一圈框在視覺上比較有精神,焦點會集中在框內。

其它

畫這樣一張 Wireframe 有依據的話非常快,但很多企劃、PM、客戶不看這種手繪圖,他們只想看計算機畫的,所以我越來越少碰麥克筆手繪 Wireframe 。

Status bar 的收訊、時間、電池狀態(tài)什么的通常我都懶得畫,如果你的 App 在設計上有需要用到這條列的話一定要畫清楚。

現代人都打字、很少寫字,我也是,字很丑,推薦 寫字基本功(附實用原子筆、中性筆、鋼筆字帖、小學一二年級生字) 這本書,從握筆開始矯正。這本寫完可以去看蕙風堂的字帖。反正你的粗黑筆絕對寫不完,拿來練字剛好。

PS. 拿 iPhone 隨手拍紙面還挺丑的。

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關注大神微博加入>>

網友求助,請回答!