編者按：趁著南方的夏天還木有過去，今天趕一趟晚車，分享一個貝殼教程，教程重在打造貝殼的細(xì)致紋理，雖然過程稍長，但譯者非常細(xì)心，針對新手給個別界面標(biāo)注了中文，很多同學(xué)都可以依著教程一步一步完成，你也來試試看吧。

基礎(chǔ)不行，木關(guān)系，來小課堂學(xué)習(xí)！《小課堂第二彈！使用ILLUSTRATOR做UI設(shè)計(jì)系列教程》

想精通Illustrator，快捷鍵不可少，右戳學(xué)習(xí)！《平面設(shè)計(jì)師最愛的illustrator快捷鍵》

一、新建文檔

去“編輯>首選項(xiàng)>常規(guī)>鍵盤增量設(shè)為1px”以及“單位”選項(xiàng)卡的單位如圖所示。我通常會使用這些設(shè)置，因?yàn)樗鼈儠谀愕睦L圖過程中起到作用。

二、創(chuàng)建的貝殼的形狀

步驟1：

選擇矩形工具（M）繪制一個2×97px矩形，然后給它一個填充一個你喜歡的顏色。現(xiàn)在，放大矩形的頂部，然后選擇添加錨點(diǎn)工具（+），使用它在中間添加錨點(diǎn)，如下圖中特寫鏡頭顯示的那樣。在矩形底部做同樣的事情。

步驟2：

使用直接選擇工具，選擇上一步添加的上方錨點(diǎn)，將它向上移動4px。然后用轉(zhuǎn)換點(diǎn)工具（shift+C），移動手柄，使路徑圓滑，如下圖放大鏡內(nèi)所示。別忘了矩形底部也要做這樣做。

步驟3：

路徑選中狀態(tài)，執(zhí)行“效果>變形>凸殼”，設(shè)置如下圖參數(shù)

步驟4：

為了做出扇形，首先去“對象>擴(kuò)展外觀”，然后執(zhí)行“對象>取消編組（shift+ctrl+G）”,保持上圖所示路徑處于選中狀態(tài)，執(zhí)行“對象>變換>旋轉(zhuǎn)”設(shè)置如下圖參數(shù)

步驟5：

現(xiàn)在選擇第二個路徑，然后轉(zhuǎn)到“對象>變換>旋轉(zhuǎn)”，再次執(zhí)行步驟4中的數(shù)值，你將得到第三個路徑，將它向左和向下分別移動一點(diǎn)點(diǎn)。這些路徑必須緊挨著且不重疊。

步驟6：

你明白了吧。現(xiàn)在，選擇第三個“路徑”，并將其旋轉(zhuǎn)5度，以獲得下一個路徑（1）。將其移動到它的地方，然后繼續(xù)做同樣的事情（2）。直到你得到足夠多的路徑，你可以為了得到較小的形狀去重疊的最后幾個形狀（3）。此時我已經(jīng)切換到綠色填充，以便可以更好的看到貝殼的形狀疊在一起。不要擔(dān)心貝殼的底部，我們將在后面處理。

步驟7：

選中左側(cè)所有的路徑，將它們復(fù)制到右邊，執(zhí)行”對象>變換>對稱“如下圖所示數(shù)值，也可根據(jù)情況做相應(yīng)數(shù)據(jù)的調(diào)整。

步驟8：

選擇所有路徑，在路徑查找器里合并所有路徑，得到如下圖

步驟9：

選擇鋼筆工具（P）或直線工具（\），畫出如下圖所示的直線路徑。然后選中所有路徑，在路徑查找器里分割路徑，刪除底部形狀，因?yàn)槟悴恍枰Ｈ缓髨?zhí)行”對象>取消編組”。

步驟10：

使用直接選擇工具拖動貝殼底部的錨點(diǎn)，然后用轉(zhuǎn)換點(diǎn)工具移動手柄，使貝殼底部成圓潤的弧度。

三、加上貝殼的光影

步驟1：

選擇”星形工具”點(diǎn)擊畫板，彈出面板，設(shè)置如下圖數(shù)值。然后用直接選擇工具選擇底部錨點(diǎn)，執(zhí)行“對象>變換>移動”設(shè)置如下圖數(shù)值。

步驟2：

用鋼筆工具畫出一個菱形的頂部（1）。選擇兩個路徑，在路徑查找器合并路徑（2）。使用轉(zhuǎn)換點(diǎn)工具（shift+c）移動手柄使2個內(nèi)錨點(diǎn)成光滑，如圖中放大鏡內(nèi)所示（3）。你需要它呈光滑圓弧，在下面的步驟中有用。我給它命名為“遮光形”。

步驟3：

移動你上一步得到的路徑，合理將它安排在貝殼形狀中，如下圖放大鏡中所示。我設(shè)置遮光形的不透明度為50%，這樣你可以清楚的看到它們重疊情況。但是你沒有必要設(shè)置，這只是為了讓你看懂。 接著，復(fù)制這個形狀，稍微旋轉(zhuǎn)，并安排接下來路徑的位置。

步驟4：

繼續(xù)重復(fù)步驟3，貝殼的左側(cè)完成后（1），你得把右側(cè)也做完。

步驟5：

用直接選擇工具（A）選中其中一個形狀的下方錨點(diǎn)。你可以把它變短或變長一點(diǎn)。重復(fù)此步驟，是為了使它們到達(dá)貝殼底部的不同長度。

步驟6：

不透明度設(shè)置回100%。原地分別復(fù)制和粘貼（Ctrl+F）貝殼形狀圖層和遮光圖層。選中所有的前面的遮光形。編成一個組（ctrl+G）。 然后選擇一層貝殼形狀和遮光形組，執(zhí)行路徑查找器里的相交（記得按住alt鍵再執(zhí)行哦）。選中遮光層，執(zhí)行”對象>擴(kuò)展外觀“。設(shè)置遮光形組，填充為黑色，混合模式為疊加和25%的透明度（在透明度面板）。

步驟7：

復(fù)制你上一步所做的并移動，取消復(fù)制組的編組（Shift+ctrl+G）。使用直接選擇工具選中其中一個形狀，將其做如下圖所示壓縮。

步驟8：

繼續(xù)壓縮其他形狀，它們必須比原始的形狀纖細(xì)。

步驟9：

給這些纖細(xì)的形狀填充黑色，并進(jìn)行編組（ctrl+G）。復(fù)制并粘貼貝殼形狀之上。然后選中貝殼復(fù)制的形狀和纖細(xì)形狀的復(fù)制組，在路徑查找器中進(jìn)行相交。將得到的新形狀填充黑色，混合模式改為疊加，不透明度50%。

四、增加貝殼的高光

步驟1：

用鋼筆工具（P）或直線段工具（\）和繪制一個路徑，通過一個中間的“路徑”（1）。繼續(xù)繪制其他路徑，每一個“路徑”的貝殼（3）。

步驟2：

選中所有這些路徑，運(yùn)用筆刷名為“錐形-圓角”。你可以在“窗口>畫筆庫>藝術(shù)效果>藝術(shù)效果_油墨”下找到。找到后，去外觀面板，雙擊畫筆后會彈出選項(xiàng)面板，設(shè)置好寬度為15%，確保筆刷的尖端向下翻轉(zhuǎn)。

步驟3：

減少貝殼邊緣路徑的寬度，在上一步中我們設(shè)置所有寬度為15%，現(xiàn)在如下圖依次修改路徑的寬度。

步驟4：

選擇描邊路徑，執(zhí)行“對象>擴(kuò)展外觀”，然后取消組合2次（1）。將所有的路徑，填充白色到黑色的徑向漸變（2），然后設(shè)置混合模式為濾色（黑色變成透明）和50%的不透明度。此時，你可以對它們進(jìn)行編組（ctrl+G）。

五、五顏六色的貝殼和陰影

步驟1：

選中貝殼，對其使用徑向漸變，并移動它的高光點(diǎn)到貝殼的底部。

步驟2：

保持貝殼選中狀態(tài)，到“外觀”面板中選擇現(xiàn)有的漸變填充。然后進(jìn)行復(fù)制，得到新的填充圖層，然后執(zhí)行“效果>風(fēng)格化>投影”再進(jìn)行復(fù)制兩次當(dāng)前填充，并更改投影參數(shù)。

三個投影參數(shù)如下

步驟3：

綠色的貝殼已經(jīng)完成。現(xiàn)在可以創(chuàng)建顏色的貝殼。復(fù)制一個貝殼。然后可以使用橙色色調(diào)替換現(xiàn)有的綠色漸變。由于使用的是鮮艷的顏色，可以增加不透明度為的重點(diǎn)從50％至70％（步驟4.4）。

步驟4：

這是另一個貝殼，使用第一個貝殼一個副本，然后使用如下圖所示的漸變色取代現(xiàn)有的漸變色所示。亮點(diǎn)幾乎看不到，因?yàn)槭褂玫氖禽^淺的顏色，因此從50%的不透明度提高為90%。

至此我們已經(jīng)完成3個貝殼。

AI精品教程推薦！

呆萌的卡通頭像教程，也給自己來一個吧！
《AI教程！教你在ILLUSTRATOR中創(chuàng)建胖胖的可愛卡通頭像》

超寫實(shí)精致風(fēng)車教程，感受一下！
《AI教程！手把手教你用AI創(chuàng)建精致玲瓏的多彩風(fēng)車》

徽章教程！過程特別酷炫！
《AI教程！教你創(chuàng)建超酷的權(quán)利的游戲家族線條抽象徽章》

原文地址：design.tutsplus
譯文地址：xueui
譯者：@陌北默
uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量82萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：