碳纖維風格的插入式導航選單

2021-07-12 07:21:32 字數 1674 閱讀 9304

這是hv-designs的設計者richard carpenter 應hv-designs讀者的設計作品。

按照慣例,先來看下最終效果圖:

完成此教程後,richard carpenter將會繼續發布如轉換為css**的教程,在這兒呢…

richard carpenter也是看到乙個flash 選單後,才有此靈感設計。

新建1200 x 600px,透明背景的文件。設定前景色為#bebebf,背景色為#d2d2d2。

選取」漸變工具」從畫布頭部到底部進行線性漸變。

使用如下設定新增」雜色濾鏡」(濾鏡->雜色->新增雜色)

接著新增」模糊濾鏡」(濾鏡->模糊->動態模糊)

在畫布左右邊沿有些太過的動感模糊效果,這不是我們想要的,簡單的用裁剪工具進行裁剪,去除兩邊不好的動感模糊效果區域。

這樣你會得到乙個輕柔的金屬感的背景,可以再次通過調整動感模糊設定來使金屬感看起來更和諧。

選取圓角矩形工具,設定半徑為10px,在畫布**拖出如下所示的矩形(663*136)。

完成後,設定如下圖層樣式:

內陰影漸變疊加

描邊效果如下:

接下來,我們將製作碳纖維圖案,新建

4 x 4px

的文件,放大到

3200%

,像下圖一樣給

8個格仔填充不同顏色。

8個格仔,再新建

2 x 1px

的文件,按以下顏色進行填充,填充好後複製到

4 x 4px

的文件,這樣的話要複製

8次哦)

圖案完成後,去往選單」編輯->自定義圖案」,給新圖案命名,然後回到製作導航欄的文件中。

選擇」矩形」圖層,滑鼠指向矩形的」向量蒙版縮圖」,按住ctrl,進行單擊,已選中整個矩形,此時新建圖層,保持選區不變,選擇」油漆桶」,用新圖案填充選區,效果如下所示:

接著把新圖層的混合選項更改為」差值」。結果又不一樣,有碳纖維的感覺了:

選擇」字型工具」,在矩形底部編寫導航鏈結。

然後給字型設定如下圖層樣式。

陰影顏色疊加

在鏈結之間新增分隔線,兩條1px的直線相鄰,左邊的為黑色,右邊的為白色,完成後給此圖層設定透明度為50%,混合選項為」柔光」。

選取」漸變工具」,在上述的橢圓選區中拖出乙個從黑(#000000)到灰(#828282)的線性漸變。如下所示:

再一次使用」橢圓選框工具」,在剛剛建立的橢圓裡新建乙個圓形的選區。如下所示:

以顏色#8e8e8e填充此圓形選區,保持此選區為啟用狀態,並在灰色圓形圖層上建立新圖層,設定前景色為白色,用漸變工具從左上角拖出乙個從白到透明的徑向漸變。如下所示:

改變漸變型別為線性漸變,仍然保持選區為啟用狀態,再新建圖層,從底部向上拖出此漸變。如下所示:

改變每個圖層的透明度和漸變的位置,以增加球體的高光點。如下所示:

複製球體到每個按鈕上方。

選擇某按鈕新增啟用狀態,簡單的給此按鈕的球體新增漸變疊加(我沒有這樣操作,只是合併建立球體的所有圖層,然後新增調整圖層->色相/飽和度,並著色),選擇你覺得合適的顏色。如下所示:

使用」矩形選框工具」選中此按鈕,不要包括分隔線。如下所示:

建立新圖層,保持選區不變,以顏色#dddddd填充此選區,然後設定圖層混合模式為」疊加」。

最後,使用」多邊形套索工具」建立三角形,三角形的顏色和背景色是一樣的,然後新增圖層樣式陰影,如下所示:

最後,按鈕啟用狀態效果如下:

測試原理 關注碳纖維的導電原理及測試

纖維是一種導電材料,雖然其導電性要低於傳統的金屬材料,但是作為非金屬導體其導電性還是備受青睞,尤其近年來碳纖維加熱管 碳纖維地暖等產品逐漸普及,使碳纖維成為廣為關注的電熱材料。本文詳細分析了碳纖維導電原理 導電影響因素及電阻率測試方法。碳纖維材料的導電原理 碳纖維是由微晶結構組成,石墨單晶中碳原子的...

碳纖維複合材料製成的超輕起落架,用於飛機滑行

西格里碳素公司將在今年年初開始批量生產由編織碳纖維材料製成的起落架。在未來兩年內,全球約有500架空 租車將安裝降落橇。碳纖維製品,玻璃鋼製品 碳纖維複合材料製成的超輕起落架,用於飛機滑行 空 租車將由幾台電動機提供動力。為了優化計程車的行駛距離,每一克都要計數。超輕著陸橇長約2公尺,寬約1.5公尺...

DataTable表的批量插入及自定義匯出的使用

場景一 有一資料表,資料量在億級別,200臺終端會插入資料,每次插入資料量在100到800條之間。優化插入資料的效能,採用了datatable的批量插入sqlbulkcopy。具體步驟 1 動態建立與目標表結構一樣的datatable 2 填充資料 3 使用sqlbulkcopy類,呼叫writet...