創(chuàng)建一組安全主題圖標

設(shè)置新文檔

首先我們需要創(chuàng)建新文檔文件>新建控制-N)岸售,然后進行以下設(shè)置調(diào)整:

畫板數(shù)量:?1

寬度:?800像素

高度:?600像素

單位:像素

進入“?高級”選項卡:

色彩模式:?RGB

柵格效果:屏幕(72 ppi)

建立圖層

打開“?圖層”面板尉辑,我們創(chuàng)建五個圖層亿昏,將其命名如下:

第1層>參考網(wǎng)格

第2層>可見性

第3層>指紋掃描

第4層>隱身模式

第5層>安全鎖

分層是設(shè)計過程中很重要的一環(huán)在以后的設(shè)計過程中一定要注意?

創(chuàng)建參考網(wǎng)格

一旦我們完成了的項目文件的分層因俐,我們就可以開始創(chuàng)建參考網(wǎng)格了,這將有助于我們通過觀察水平和大小來編輯我們的圖標找蜜。

第1步

選擇矩形工具(M)并創(chuàng)建一個64 x 64像素的正方形腥例,使用#F15A24進行著色,然后使用“?對齊”面板的“?水平和垂直對齊中心”選項將其定位到畫板的中心子姜。

第2步

創(chuàng)建另一個較小的56 x 56像素正方形(#FFFFFF)祟绊,將它作為繪圖區(qū)域,同時繪制4 px輪廓哥捕。將兩個正方形(Control-G)進行分組牧抽,然后創(chuàng)建三個副本(Control-C?>?Control-F三次),將它們與原始距離保持28 px遥赚。將所有網(wǎng)格都放置好后扬舒,進行分組(Control-G)然后將它們居中對齊到底層的畫板如參考圖像中所示凫佛。

第3步

一旦完成畫板和繪圖區(qū)域的創(chuàng)建以及參考網(wǎng)格讲坎,就可以鎖定它們的圖層,然后繼續(xù)下一步愧薛。

創(chuàng)建可見性圖標

跳轉(zhuǎn)到第一個繪圖區(qū)域我們開始繪制第一個可見性圖標

第1步

使用橢圓工具(L)晨炕,創(chuàng)建一個56 x 56像素的圓,使用#3A2F2E進行著色毫炉,然后將中心對齊到下面的繪圖區(qū)域瓮栗,如參考圖像中所示。

第2步

使用36 x 24 px橢圓添加眼睛的主要形狀,使用#FFFFFF顏色费奸,然后將中心對齊到較大的圓圈鲸郊。


第3步

通過直接選擇它來調(diào)整我們剛剛創(chuàng)建的形狀,然后使用錨點工具(Shift-C)選擇它的左右錨點使它們變得尖銳货邓。

第4步

使用16 x 16 px圓圈創(chuàng)建眼球秆撮,使用#EABD63進行著色,然后定位到我們剛剛調(diào)整過的形狀的中心换况。

第5步

使用8 x 8 px圓圈添加瞳孔职辨,使用#3A2F2E進行著色,然后將中心對齊到較大的圓圈戈二。

第6步

打開像素預覽?模式(Alt-Control-Y)舒裤,然后使用4 x 4 px圓圈(#EABD63)創(chuàng)建覆蓋虹膜右下角的小圓形切口,移動到參考圖中看到的位置觉吭。


第7步

完成圖標腾供,通過使用4 x 4 px圓(#FFFFFF)添加圓形高光,我們將定位到參考圖像中看到的虹膜的左上角鲜滩。完成后伴鳖,關(guān)閉像素預覽模式(Alt-Control-Y),然后使用Control-G鍵盤快捷鍵選擇并分組所有光圈組成形狀徙硅。

第8步

完成圖標處理后榜聂,您可以選擇并將(Control-G)所有組成部分組合在一起,確保鎖定其圖層嗓蘑,然后再轉(zhuǎn)到下一個圖層须肆。

創(chuàng)建指紋掃描圖標

假設(shè)你已經(jīng)完成了第一個圖標,那我們就可以轉(zhuǎn)到下一個圖層(第三個圖層)桩皿,我們將逐步構(gòu)建第二個圖標豌汇。

第1步

首先使用56 x 56 px圓圈添加背景,使用#3A2F2E對其進行著色泄隔,然后將其中心對齊到第二個活動繪圖區(qū)域.

第2步

創(chuàng)建好背景之后拒贱,我們創(chuàng)建一個24 x 30像素2 px輪廓的矩形,使用#EABD63對其進行著色梅尤,然后將中心對齊到較大的圓圈柜思。

第3步

通過在“?變換”面板的“?矩形屬性”中將其頂角的半徑設(shè)置為12 px岩调,調(diào)整我們剛剛創(chuàng)建的形狀巷燥。

第4步

打開“?像素預覽”模式(Alt-Control-Y),然后使用“?添加錨點工具”(+)在距離左圓角底部4 px處添加新錨點号枕。

第5步

使用直接選擇工具(A)選擇它的左下角錨點調(diào)整形狀?缰揪,然后按刪除它,繪制一個弧形圖案。

第6步

使用直接選擇工具(A)選擇其錨點钝腺,然后使用“?移動”工具(右鍵單擊>“變換”>“移動”>“垂直”>將其按4 px的距離推到頂部抛姑,縮短生成的路徑右側(cè)的長度-4像素或使用方向箭頭鍵)。

第7步

繪制2 px輪廓(#EABD6316 x 26 px大小矩形創(chuàng)建指紋的下一個線段艳狐,通過在“?變換”面板的“?矩形屬性”中將其頂角的半徑設(shè)置為8 px來進行調(diào)整定硝。完成后证芭,將結(jié)果形狀定位在參考圖像中坪哄。

第8步

通過在距離左圓角的底部點4 px處添加新錨點來調(diào)整生成的形狀,移除左下角的錨點诵肛,就像我們繪制較大的形狀所做的那樣镀虐。

第9步

聯(lián)合兩個路徑的左端ctrl-J鍵盤快捷鍵箱蟆,選擇它們之后使用直接選擇工具(A)?,使用實時角落工具設(shè)定所得角內(nèi)部半徑2像素刮便。

第10步

創(chuàng)建2 px輪廓#FFFFFF)的8 x 20 px矩形空猜,將其頂角的半徑設(shè)置為4 px,在距離左邊2 px處添加新的錨點角落的底點恨旱。像我們對前面的線段所做的那樣移除左下方的錨點辈毯,將結(jié)果形狀定位在參考圖像中。

第11步

選擇鋼筆工具(P)搜贤,并使用參考圖像作為參考繪制白色路徑的水平線段漓摩。完成之后再進行下一步操作。


第12步

將其頂角的半徑設(shè)置為6 px入客,將其底部的半徑設(shè)置為14 px來調(diào)整生成的形狀

第13步

創(chuàng)建“J”形2 px的線條(#FFFFFF)管毙,放置在與我們剛剛完成調(diào)整的形狀之間保持2 px的位置。完成后桌硫,關(guān)閉像素預覽?模式(Alt-Control-Y)夭咬,然后使用Control-G鍵盤快捷鍵選擇并將所有指紋的組成線組合在一起。

第14步

接下來铆隘,創(chuàng)建一個12 x 12像素的圓圈卓舵,使用#EABD63進行著色,然后將中心對齊到指紋的下邊緣膀钠。

第15步

使用2 px的線條(#3A2F2E)繪制小型對號來完成圖標掏湾,我們將其定位到上一步中較小圓圈的中心。完成后肿嘲,選擇并將兩者組合在一起(Control-G)融击,然后對所有組成形狀執(zhí)行相同操作。

創(chuàng)建隱身模式圖標

進入第四個圖層雳窟,放大繪圖區(qū)域進行隱身模式圖標的繪制

第1步

首先使用56 x 56 px的圓創(chuàng)建背景尊浪,我們將使用#3A2F2E進行著色,然后將中心對齊到第三個繪圖區(qū)域


第2步

創(chuàng)建兩個8 x 8 px大小2 px輪廓的圓圈(#EABD63)創(chuàng)建眼鏡框拇涤,將彼此間隔調(diào)整為4 px捣作,確保將它們定位在距離繪圖區(qū)域的底部邊緣16px的位置。


第3步

創(chuàng)建6 x 6 px大小2 px厚的圓圈(#EABD63)添加將兩個圓圈連接在一起的橋接部分鹅士,將它放置在參考圖像中的位置券躁。


第4步

使用直接選擇工具(A)選擇其底部錨點來調(diào)整較小的圓,然后通過按Delete刪除它掉盅。完成后嘱朽,選擇并將所有三個部分組合在一起(Control-G),然后再繼續(xù)下一步怔接。

第5步

使用圓角矩形工具繪制1 px 輪廓36 x 2 px大小圓角矩形(#FFFFFF)創(chuàng)建帽子邊緣搪泳,將居中對齊到下面眼鏡2px的位置。

第6步

創(chuàng)建20 x 10 px矩形(#FFFFFF)創(chuàng)建帽子部分扼脐,我們將其放置到上一個形狀的頂部岸军。

第7步

通過在“?變形”面板的“?矩形屬性”中將其頂角的半徑設(shè)置為2 px來調(diào)整帽子頂部。

第8步

使用添加錨點工具(+)將新錨點添加到其上邊緣的中心來繼續(xù)調(diào)整生成的形狀瓦侮,然后我們將其向下推動2 px的距離(右鍵單擊>變換>移動>垂直> 2像素或使用方向箭頭鍵)艰赞。

第9步

使用直接選擇工具(A)選擇其頂部和中心錨點來調(diào)整表冠上部的曲率,使用平滑工具肚吏,調(diào)整出一個良好的彎曲過渡方妖。


第10步

創(chuàng)建4 x 4 px正方形(#3A2F2E)添加帽子上的小細節(jié),我們將通過在其頂部邊緣的中心添加新錨點然后將其推到底部2 px右鍵單擊)進行調(diào)整>變換>移動>垂直> 2像素或使用方向箭頭鍵)罚攀。完成后党觅,將圖形定位到參考圖像的位置。

第11步

創(chuàng)建2 x 12 px矩形(#EABD63)添加小邊細節(jié)來完成圖標斋泄,通過“?變換”面板的“?矩形”屬性中將其左上角和右下角的半徑設(shè)置為2 px來進行調(diào)整杯瞻。將生成的形狀放置在帽子的右側(cè),距離底部帽子邊緣2 px炫掐,使用Control-G鍵盤快捷鍵選擇并分組所有形狀魁莉。

創(chuàng)建安全鎖圖標

接下來我們創(chuàng)建最后一個安全鎖圖標,選擇最后一個畫板放大繪圖區(qū)域進行下一步操作募胃。

第1步

首先創(chuàng)建56 x 56 px圓(#3A2F2E)作為背景旗唁,將其對齊到下面的繪圖區(qū)域

第2步

開始繪制安全鎖時痹束,首先創(chuàng)建24×20像素2 px角半徑的圓角矩形(#EABD63)創(chuàng)建安全鎖下部主體形狀检疫,我們將它放置在距離繪圖區(qū)域的底部邊緣12px的位置。

第3步

使用8 x 8 px圓圈添加鍵孔的圓形部分参袱,使用#3A2F2E進行著色电谣,然后將其放置在距前一個形狀頂部邊緣4 px的位置秽梅。

第4步

使用4 x 8 px矩形(#3A2F2E)創(chuàng)建孔的下部抹蚀,調(diào)整“?變換”面板的“?矩形屬性”中將其底角的半徑設(shè)置為2 px剿牺。完成后,將生成的形狀放在圓圈的下半部分环壤,使用Control-G鍵盤快捷鍵選擇并將兩者組合在一起晒来。

第5步

創(chuàng)建四個2 x 2 px圓圈添加小螺栓,使用#3A2F2E進行著色郑现,然后定位到距離安全鎖四個角角2 px的位置湃崩,如參考圖像所示。準備就緒后接箫,在繼續(xù)下一步之前攒读,選擇并將(Control-G)所有當前部分的組成形狀組合在一起。

第6步

創(chuàng)建鎖環(huán)辛友,使用14×11像素大小2像素輪廓的矩形(#FFFFFF)調(diào)整頂部邊角的半徑至7像素薄扁,確保選擇并刪除其右下錨點。然后將邊角設(shè)置為圓角废累,定位到鎖身邓梅,如參考圖像中所示。將形狀放置到位后邑滨,使用Control-G鍵盤快捷鍵選擇并組合鎖的所有形狀日缨。

第7步

完成圖標,以參考圖像為標準掖看,創(chuàng)建六個2 px粗的線條(#FFFFFF)給安全鎖添加細節(jié)裝飾匣距。完成后,選擇并分組(Control-G)所有圖標的組成形狀哎壳。

這樣我們的安全主題系列圖標就完成了墨礁!


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市耳峦,隨后出現(xiàn)的幾起案子恩静,更是在濱河造成了極大的恐慌,老刑警劉巖蹲坷,帶你破解...
    沈念sama閱讀 217,657評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件驶乾,死亡現(xiàn)場離奇詭異,居然都是意外死亡循签,警方通過查閱死者的電腦和手機级乐,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評論 3 394
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來县匠,“玉大人风科,你說我怎么就攤上這事撒轮。” “怎么了贼穆?”我有些...
    開封第一講書人閱讀 164,057評論 0 354
  • 文/不壞的土叔 我叫張陵题山,是天一觀的道長。 經(jīng)常有香客問我故痊,道長顶瞳,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,509評論 1 293
  • 正文 為了忘掉前任愕秫,我火速辦了婚禮慨菱,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘戴甩。我一直安慰自己符喝,他們只是感情好,可當我...
    茶點故事閱讀 67,562評論 6 392
  • 文/花漫 我一把揭開白布甜孤。 她就那樣靜靜地躺著协饲,像睡著了一般。 火紅的嫁衣襯著肌膚如雪课蔬。 梳的紋絲不亂的頭發(fā)上囱稽,一...
    開封第一講書人閱讀 51,443評論 1 302
  • 那天,我揣著相機與錄音二跋,去河邊找鬼战惊。 笑死,一個胖子當著我的面吹牛扎即,可吹牛的內(nèi)容都是我干的吞获。 我是一名探鬼主播,決...
    沈念sama閱讀 40,251評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼谚鄙,長吁一口氣:“原來是場噩夢啊……” “哼各拷!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起闷营,我...
    開封第一講書人閱讀 39,129評論 0 276
  • 序言:老撾萬榮一對情侶失蹤烤黍,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后傻盟,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體速蕊,經(jīng)...
    沈念sama閱讀 45,561評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,779評論 3 335
  • 正文 我和宋清朗相戀三年娘赴,在試婚紗的時候發(fā)現(xiàn)自己被綠了规哲。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,902評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡诽表,死狀恐怖唉锌,靈堂內(nèi)的尸體忽然破棺而出隅肥,到底是詐尸還是另有隱情,我是刑警寧澤袄简,帶...
    沈念sama閱讀 35,621評論 5 345
  • 正文 年R本政府宣布腥放,位于F島的核電站,受9級特大地震影響痘番,放射性物質(zhì)發(fā)生泄漏捉片。R本人自食惡果不足惜平痰,卻給世界環(huán)境...
    茶點故事閱讀 41,220評論 3 328
  • 文/蒙蒙 一汞舱、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧宗雇,春花似錦昂芜、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,838評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至舞虱,卻和暖如春欢际,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背矾兜。 一陣腳步聲響...
    開封第一講書人閱讀 32,971評論 1 269
  • 我被黑心中介騙來泰國打工损趋, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人椅寺。 一個月前我還...
    沈念sama閱讀 48,025評論 2 370
  • 正文 我出身青樓浑槽,卻偏偏與公主長得像,于是被迫代替她去往敵國和親返帕。 傳聞我的和親對象是個殘疾皇子桐玻,可洞房花燭夜當晚...
    茶點故事閱讀 44,843評論 2 354

推薦閱讀更多精彩內(nèi)容