簡單6步用Axure繪制相機(jī)圖標(biāo)(附源文件)

2 評論 13325 瀏覽 150 收藏 5 分鐘

記錄這些內(nèi)容,只是覺得有趣,盡管可能看起來沒什么用,但很多事情換個視角總會有些不同。

151483-b675156ae4685e2f

步驟1:拖入一個矩形,寬高自定,設(shè)置圓角值、投影,填充類型選擇為漸變,然后設(shè)置漸變開始和結(jié)束的顏色(選中顏色指示浮標(biāo)就可以更換對應(yīng)位置的顏色),設(shè)置漸變角為90(即垂直方向的漸變)。

151483-92d441617986f3b2

步驟2:再拖入一個矩形,點擊右上角的灰色小圓點,選擇圓形模式(或設(shè)置比較大的圓角值直到矩形變?yōu)閳A形);

填充類型選擇為單色,#F2F2F2;

投影設(shè)置見右側(cè)示意,投影顏色為#000000,不透明值為15;

到樣式面板設(shè)置內(nèi)陰影,參數(shù)見右側(cè)示意,內(nèi)陰影顏色為#FFFFFF,不透明值為100。

151483-1707e68e9d11afbe

步驟3:復(fù)制兩個圓形,根據(jù)比例調(diào)整大寫,并分別填充#536383、#293448;

151483-6bec20b609b08206

步驟4:再繪制一個圓形,設(shè)置漸變填充,顏色依次為#FFFFFF(不透明值100)、#0099FF(不透明值11)、#00CCFF(不透明值0),位置距離及角度值見右側(cè)示意;

151483-45e8e21458d670a0

步驟5:復(fù)制一個前面的圓形圓形,更改漸變填充,顏色依次為#0099FF(不透明值100)、#0099FF(不透明值11)、#00CCFF(不透明值0),位置距離及角度值見右側(cè)示意;

151483-9d62c79152dd40fa

步驟6:再拖入一個矩形,點擊右上角的灰色小圓點,選擇任意一個半開口的矩形模式,設(shè)置圓角值得到一個半圓;

然后到樣式面板設(shè)置旋轉(zhuǎn)角度,為了方便,可以將其與步驟三繪制的矩形群組再旋轉(zhuǎn)。

對以上原色的大小位置進(jìn)行組合就可以得到一個簡單相機(jī)圖標(biāo)了,也可以嘗試加一些其他元素進(jìn)行練習(xí),比如紅色心形的提示燈……

151483-abd558efd9d75a9e

相機(jī)圖標(biāo)

最后,Axure可以不僅僅只是用來進(jìn)行交互原型設(shè)計,也可以在你需要的時候增加一點點趣味性,比如,這種扁平風(fēng)格的小插畫(這時候,工具已經(jīng)不是工具了^-^):

151483-ec427c2917036991

工位插畫

151483-73189f7c11cd1bf4

工位插畫圖形節(jié)點

相機(jī)圖標(biāo)源文件地址:

作者源:

http://pan.baidu.com/s/1qXFMLsS

官方下載:

http://pan.baidu.com/s/1bpx6Ggf

 

作者:lkl_ue(簡書作者)

原文鏈接:http://www.jianshu.com/p/d455ecb51eb3#

本文由 @lkl_ue 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 拿沒有圖層的Axure作畫,實在是藝高人膽大(閑得d疼) ?? ?? ??

    來自浙江 回復(fù)
  2. ?? 學(xué)習(xí)了~

    來自廣東 回復(fù)