工具介紹,最近大熱的Origami 2.0介紹及教程
最近大熱的Origami 2.0,同學(xué)們應(yīng)該都有所耳聞了,今天@大蔚陳 帶來一個入門的介紹+教程,附上使用體驗,感受下
隨著互聯(lián)網(wǎng)尤其是移動互聯(lián)的急劇發(fā)展,設(shè)計變得更受重視,于是越來越多的產(chǎn)品經(jīng)理和設(shè)計師開始尋找簡單好用的工具。
2014年可謂是原型工具爆發(fā)的一年,各類工具層出不窮。我也嘗試用過很多種,從代碼級別的 Framerjs,到 Quartz Composer,當(dāng)然我最喜歡的其實還是 Xcode 和 Keynote。
Origami 是 Quartz Composer 的一個庫。Facebook 的設(shè)計團隊在設(shè)計過程中就是用它來進行設(shè)計的。前不久 Origami 2.0 的發(fā)布,大大降低了學(xué)習(xí)難度,而且還可以在手機上實時交互,讓這個工具開始火熱起來了。
Facebook 官方也發(fā)布了 Origami 2.0 的樣例和教程,本篇主要源自于 Introduction to Origami 的視頻教程,所以我自己做了一遍,另外增添了一些內(nèi)容。
好的,廢話不多說,看干貨。
初步介紹
打開 QC,創(chuàng)建新 Origami File。
左邊是編輯區(qū),右側(cè)是 Viewer,可以點擊 Resize to third 三分之。
在編輯區(qū)的右側(cè)有 Viewer Patch(模塊)
添加資源
先簡單介紹一下模塊的概念。QC 中模塊分為幾種:
方角的,四角是尖的稱之為 Macro(宏),可以雙擊進入詳細編輯,類似于程序中函數(shù)的概念( 函數(shù)是由事件驅(qū)動的或者當(dāng)它被調(diào)用時執(zhí)行的可重復(fù)使用的代碼塊)。你在這個 View (視圖)里,還可以包含其他的 View(視圖),實在不理解,就把他當(dāng)做圖層組吧。你可以雙擊進入詳細編輯,在工具欄中點擊向上箭頭哪個按鈕(底部寫著 Edit Parent)可以返回上一層。
圓角的是普通模塊。
藍色的是輸出模塊,會在 Viewer 中看到。
紫色模塊則代表該模塊內(nèi)部還有其他模塊。
添加資源很簡單,只需要把對應(yīng)的圖片文件拖到 Editor 區(qū)域中即可,會自動創(chuàng)建一個圖片模塊以及圖層模塊。
圖層模塊
圖層是一個顯示類模塊,可在屏幕上顯示。你可以設(shè)置它的 X/Y/Z Position,你可以雙擊輸入數(shù)值,也可以長按后左右拖動變更數(shù)值。同時還可以選擇 Anchor Point(錨點)是左上開始還是居中等。
你也可以點擊 Mask Image,或者改變不透明度,縮放等。
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- ps基礎(chǔ)教程
- 經(jīng)驗分享
- 大蔚陳
- 神器推薦
學(xué)習(xí) · 提示
相關(guān)教程