如何在Adobe Illustrator中創建計算機外接設備圖標

1.創建新文檔

啟動并運行Illustrator,創建新文檔文件>新建Control-N):

畫板數量:?1

寬度:?800像素

高度:?600像素

單位:?像素

進入“?高級”選項:

色彩模式:?RGB

柵格效果:屏幕(72ppi)

預覽模式:默認

2.設置自定義網格

自定義網格是一個非常巧妙的工具,它可以使我們更加精確的調整圖標的一些細節,讓我們的設計過程更加輕松便利。

第1步

轉到編輯>首選項>參考線和網格子菜單,然后進行以下設置:

網格線間隔:?1 px

次分隔線:?1

第2步

設置好自定義網格,接下來我們需要做的就是確保我們的形狀看起來很清晰,這樣我們就可以在“?視圖”菜單下找到“?對齊網格”選項,這樣我們每次進入“?像素預覽”時,它都會轉換為“ 對齊像素”模式。

3.創建圖層

創建好新的文檔后,接下來我們可以創建一些新的圖層來讓我們的工作流程變得更加清晰起來。

打開“?圖層”面板,創建五個圖層,將它們重命名如下:

第1層:參考網格

第2層:平板電腦

第3層:鼠標

第4層:鍵盤

第5層:midi控制器

4.創建參考網格

第1步

首先鎖定除參考網格圖層以外的所有圖層,然后選擇矩形工具(M)并創建一個128 x 128像素的橙色(#F15A24)方塊,方塊的作用在于定義圖標的整體大小。

第2步

創建另一個較小的120 x 120 px方塊(#FFFFFF),作為我們的活動繪圖區域,同時也為我們提供了4 px的填充。

第3步

使用Ctrl-G鍵盤快捷鍵對構成參考網格的兩個正方形進行分組,然后在彼此相距40 px的位置創建三個副本,確保將它們與畫板的中心對齊。

完成后,鎖定當前圖層并轉到下一個圖層,開始第一個圖標的制作。

5.創建平板電腦

第1步

首先創建一個112 x 100像素的圓角矩形,將圓角圓度設置為8px,使用#60677C為它進行著色,然后將它中心對齊到下面的活動繪圖區域,距離底邊4 px

第2步

使用描邊的方法給創建的圖形添加描邊,創建它的副本(Control-C> Control-F),將其顏色更改為#2B3249,翻轉它的填充和描邊顏色(Shift-X),將描邊粗細設置為8 px

第3步

使用鋼筆工具(P)從輪廓頂部邊緣的中心開始繪制一條16 px長8 px寬的直線(#2B3249),一直延伸到活動繪圖區域的外部邊界。完成后,使用Control-G鍵盤快捷鍵選擇三個形狀并將其組合在一起。

第4步

創建完成圖形的三個副本(Control-C> Control-F三次),將它們放到每個空的參考網格上。

完成之后鎖定圖層,接來下我們開始第一個圖標的繪制。

6.創建平板電腦圖標

定位到第二個圖層,然后放大參考網格,我們開始繪制第一個圖標。

第1步

創建80 x 60 px矩形作為平板電腦的顯示屏幕,使用白色(#FFFFFF)進行著色,將矩形對齊到距離圓角矩形頂部邊緣12 px的位置。

第2步

使用描邊為我們剛創建的形狀添加8 px輪廓(#2B3249),然后使用Control-G鍵盤快捷鍵選擇并將兩者組合在一起。

第3步

使用鋼筆工具(P)繪制三條8 px粗細的傾斜直線(#2B3249),將其不透明度降低到20%。完成后,選擇并將它們組合在一起(Control-G),然后將它們與底層顯示器中心對齊。

第4步

首先繪制平板電腦的第一個按鈕,創建一個16 x 16像素的方形(#BAC0CE),創建8 px的輪廓(#2B3249)將它們進行分組(Control-G),然后定位到顯示屏的左側,距離較大輪廓的上邊緣16 px

第5步

使用我們剛剛制作的副本(Control-C> Control-F)創建第二個左側按鈕,將它定位在原始圖形下面,將填充顏色更改為白色(#FFFFFF)。將兩個俺按鈕分組(Control-G)。

第6步

使用我們剛剛分組的圖形副本(Control-C> Control-F)創建右側按鈕,將副本定位到平板電腦顯示屏的另一側。

第7步

使用40 px長?8 px寬的直線繪制電容筆,確保將直線的端點設置為圓形端點。完成后,不要忘記使用Control-G?鍵盤快捷鍵選擇所有圖標的組成形狀并將其組合在一起。

7. ?創建鼠標圖標

移動到第三個圖層我們開始繪制鼠標圖標。

第1步

使用44 x 68 px矩形創建鼠標主體,使用白色(#FFFFFF)進行著色,然后將其中心對齊到底層的圓角矩形。

第2步

通過在“?變換”面板的“?矩形屬性”中將半徑設置為4 px,底部角度設置為22 px

第3步

創建22 x 20 px矩形作為鼠標的左按鈕,使用#BAC0CE為該矩形進行著色 ,然后對齊到較大形狀的左上角。

第4步

使用描邊為鼠標提供8像素的輪廓(#2B3249),將其放置在兩個填充形狀的頂部(右鍵單擊>排列>置于頂層)。

第5步

使用44 px長8 px寬直線(#2B3249)添加按鈕分隔線,將其對齊到鼠標的主體,距鼠標輪廓的頂部邊緣12 px的位置。

第6步

使用36 px長8 px寬的直線繪制鼠標按鈕的分隔線(#2B3249)。完成后,將鼠標的所有組成形狀組合在一起(Control-G),然后對圖標的所有部分執行相同操作。

8.創建鍵盤圖標

進入第四個圖層的第三個參考網格,放大之后我們開始繪制鍵盤圖標。

第1步

創建一個14 x 14像素的方形(#FFFFFF),添加8 px的輪廓(#2B3249)將圖形分組(Control-G)然后定位到圓角矩形的左上角,距離的頂部邊緣6像素

第2步

選擇我們創建的第一個方形,按住Altshift鍵同時向右拖動8px的距離。

然后按Control-D四次,重復上一個操作,從而創建重復的方形,然后將所有方形進行分組(Control-G)。

第3步

使用Alt-Shift-拖動方法創建第二行按鍵,直到副本與原始形狀的輪廓重疊。

第4步

接下來我們開始繪制第三行的第一個按鍵,方法是創建一個20 x 14像素的矩形(#FFFFFF),添加8 px粗的輪廓(#2B3249)將完成的形狀進行分組(Control-G)然后定位在上一步形狀的下面,左對齊。

第5步

使用44 x 14 px大小(#FFFFFF)和8 px輪廓(#2B3249)的矩形創建空格鍵,將它們進行分組(Control-G),然后定位到先前創建按鈕的右側。

第6步

創建第一行第一個按鈕的副本(Control-C> Control-F)添加第三行的最后一個按鈕,將其放置在空格鍵的另一側。完成后,將所有的形狀組合在一起(Control-G)。

第7步

使用28 x 20 px大小(#BAC0CE)8 px輪廓(#2B3249)的矩形創建觸控板,將它們組合(Control-G)到一起,然后將中心對齊到鍵盤的下半部分,定位在距離我們剛剛分組按鈕12 px位置。

第8步

使用12 px長8 px寬的直線(#2B3249)添加指紋讀取器,將直線定位到圓角矩形的右下角,距離觸控板20 px。完成后,使用Control-G鍵盤快捷鍵選擇并組合所有圖標的組成形狀。

9.創建Midi控制器圖標

接下來我們開始繪制最后一個圖標

第1步

首先使用8×8像素的圓圈創建出調節旋鈕,將顏色設置為#2B3249,將圓圈放置在圓角矩形的左上角,距離左側8像素頂部6像素

第2步

使用兩個8 x 8 px圓圈(#2B3249)創建剩余的旋鈕,將它們垂直堆疊在一起,彼此相距6 px。完成后,使用Control-G鍵盤快捷鍵選擇并將它們組合在一起。

第3步

使用12 x 28 px大小(#FFFFFF)8 px輪廓(#2B3249)的矩形創建滑塊,在其上方添加一個12 px長8 px寬的直線(#2B3249)將三個形狀組合在一起(Control-G),放置在調節旋鈕的右側8像素的位置。

第4步

接下來開始繪制控制按鈕,創建一個14 x 14像素的方形(#BAC0CE),添加8 px的輪廓(#2B3249)將它們進行分組(Control-G),然后定位到音量滑塊的右側,距離為14像素

第5步

使用Alt-Shift-拖動的方法添加方塊的兩個副本來完成第一行按鍵 ,完成之后選擇并進行分組(Control-G)。

第6步

使用我們剛剛完成工作的副本(Control-C> Control-F)創建第二行打擊墊,我們將在其下方定位,然后選擇它們并將它們分組(Control-G)。

第7步

繪制按鍵,創建8 px輪廓(#2B3249)16 x 44 px大小的矩形(#FFFFFF)將圖形進行分組(Control-G)然后對齊到圓角矩形的底部邊緣,距離左邊緣8 px

第8步

給我們剛剛創建的形狀添加四個副本(Control-C> Control-F四次)創建剩余的按鍵。

第9步

在前兩組按鍵的中心分別添加一個16 x 22像素矩形(#2B3249),然后選擇并將所有鍵組合在一起。完成后,選擇并分組(Control-G)圖標的所有組成形狀。

完成

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,797評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,179評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,628評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,642評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,444評論 6 405
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,948評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,040評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,185評論 0 287
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,717評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,602評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,794評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,316評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,045評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,418評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,671評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,414評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,750評論 2 370

推薦閱讀更多精彩內容

  • 黃渤在最近一次的演講中這樣說:誰會拒絕一個幽默的人,幽默是一個好事情,但它是跟尷尬相伴而生的,經常會用幽默來解決碰...
    全息演說智慧閱讀 402評論 0 0
  • 大鷹劃過穹蒼 自由地在飛翔 在被槍射殺的那一秒 竟哭了出來 原來 槍射到了它的眼睛 趕緊飛跑 即使 正在落淚 獵人...
    Ling_00閱讀 282評論 0 3
  • 一,本周學習學到了什么(周學習內容) (1)國學經典:《周易·下經》31卦――43卦 (2)千字文成語標釘:景行維...
    王靜華寶龍學堂閱讀 201評論 0 0