一例XP風格按鈕的製作

來源:互聯網
上載者:User
按鈕
  我也不知道這算不算XP風格,反正是大家很常見很流行的,今天在經典幫別人回複了源檔案,乾脆湊篇教程上來。基本上沒什麼難度,算是新手入門吧。

  我們使用Fireworks 4製作這樣的效果,Fwmx只要在工具與屬性面板中找到相應參數設定就行了。
  1、建立畫布,大小100*100,背景為白色。
  2、用圓角矩形工具畫一個矩形,大小隨意,在OBJECT面板中設定矩形的圓角度。

  3、設定圓角矩形邊框色如下(色系#B6B6B6):

  4、對圓角矩形進行線形填充,參數設定如下:

  5、現在把你設定好的這個矩形複製一個(鍵盤快速鍵CTRL+SHIFT+D),再繪製一個矩形框,利用功能表命令“切割>>>打洞”進行切割:

  6、現在,你是不是已經得到了以下的這個效果呢?

  7、選中你切割好的這半截圖形,將邊框設定為無,再進行線形填充,參數如下:

  8、再在圖層面板裡將這半截圓角的透明度設為70%或80%,看看,是不是有點意思了。不行,還差一點高光的效果。如果用特效或是濾鏡來做,無疑是太麻煩了,我們就用一種笨辦法吧。
  將畫布顯示的比例調到800%,然後用鋼筆繪製如圖所示的線條:

  8、設定我們剛繪製的線條顏色為白色,透明度調整為90%,切換回100%的顯示比例看看:

  9、添加按鈕文字:

  將添加好的文字複製一下,向上和向左各移動一個像素(用鍵盤上的方向鍵來移動),然後再到圖層面板中選中下面一層的文字,設定填充顏色為白色。這樣使得文字有凹下去的感覺。
  10、現在來繪製一個簡單的放大鏡,將畫布顯示比例放到到800%,用圓形工具和鋼筆繪製如下的圖形,線條顏色為白色,無填充:

  11、做最後的位置調整,並且為最下面的底層圓角矩形設定陰影:

OK,大功告成了。你可以調整填充的各種顏色,來做出多樣的按鈕,希望大家從這個教程學到FW裡最基本的一些東西。
  Png源檔案:


相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。