輕鬆製作顯示輸入朋友名字的賀卡網頁

來源:互聯網
上載者:User
網頁|顯示

  新的一年就要到來了,今天我們來製作一個很簡單又非常有趣的動態賀卡頁面送給自己的朋友們吧!我們首先用Fireworks來繪製一個可愛的新年情境,然後對繪製的映像進行切割,匯出為HTML頁面,再通過簡單Javasript代碼的調用,產生一個功能強大的賀卡頁面:只要你輸入好友姓名,就能夠產生專門給好友的定製頁面和連結。當朋友們收到你為他們送上的特殊祝福,一定會非常開心的。文章末尾提供原檔案供大家下載參考。

  製作步驟:

  一、靜態情境繪製

   情境描述:一場大雪之後,堆一個胖胖的雪人。藍藍的天空,白白的雪地上,一個憨厚可愛的雪人給寒冷的冬天帶來了許多樂趣,就連頑皮的小狗狗都被吸引過來了,圍著雪人好奇的看個不停。這個情境是不是也牽動了你們童年的思緒呢?

   1. 我們首先在Fireworks中建立一個大小為1024×768的映像,從而能夠讓這個圖片可以作為案頭來使用。先在腦海中構想一下藍色的天空、白色的雪地。首先使用矩形工具為映像繪製一個背景,這裡填充使用線性填充,左邊的顏色滑塊設定為#013366,右邊的顏色滑塊設定為#FFFFFF,得到如圖1所示的映像。

  

  圖1 繪製映像背景

   2、接下來我們就開始繪製雪人了。首先是雪人圓圓的腦袋,先繪製一個橢圓,填充設定為用白色實心填充,筆觸大小為4,顏色為#858786,採用柔化圓形的方式來得到一種朦朧的效果,如圖2所示。

  

  圖2 繪製雪人的腦袋

   3、然後就是雪人胖胖的身子了,使用橢圓工具繪製一個橢圓然後使用部分選定工具將其錨點進行調整,就得到雪人的身子了,將頭部排列位置移到最前面,便於下一步的操作。如圖3所示。

  

  圖3 繪製雪人的身子

   4、要將雪人的腦袋和身子連成一個整體,就要用到刀子工具,選中圓圓的腦袋,然後選擇工具箱上的刀子工具,將不要的部分裁掉,如圖4所示。

  

  圖4 選擇要裁掉的部分

   5、按Delete鍵就可以將多餘的部分切掉,得到如圖5所示的雪人完整的身子。

  

  圖5 裁切後完整的身子

   6、在堆雪人的時候,我們通常會用小桶作為雪人的帽子,下面我們就為雪人添加一個可愛的小帽子。使用矩形工具繪製一個矩形,然後取消群組使用部分選定工具將其進行調整,使用實心填充,筆觸和實心的顏色都設定為#FA0234,得到如圖6所示的小帽子。

  

  圖6 為雪人添加小帽子

   7、小桶通常都會有一個小提手,扣在雪人頭上就好像是帽子的一條帶子,使雪人更加可愛,下面就來添加這樣一條帶子。用直線工具繪製一條直線,選擇無填充,筆觸大小為4,顏色設定為跟小桶一樣的#FA0234,選擇自由變形工具,將直線調整成彎曲的形狀,如圖7所示。

  

  圖7 為帽子添加一條帶子

   8、接下來就要為雪人添加眼睛、鼻子和嘴巴了。雪人的眼睛很簡單,只要繪製兩個圓形,用黑色填充就可以了。繪製一個橢圓,使用部分選定工具將其進行形狀上的調整,選擇紅色填充,就可以得到雪人的鼻子。繪製兩條直線,選擇自由變形工具,將直線調整成彎曲的形狀,選擇無填充,黑色筆觸就可以得到雪人的嘴巴,如圖8所示。

  

  圖8 為雪人添加眼睛、鼻子和嘴巴

   9、然後我們為雪人添加上兩個由樹枝做成的小胳膊。仍然是用到畫幾條直線,選擇自由變形工具,將直線調整成樹枝的形狀,選擇無填充,筆觸選擇的顏色是#5F2C00,樣式選擇毛氈筆尖中的暗色標記,將樹枝的枝條組合到一起,就形成了雪人的胳膊,如圖9所示。

  

  圖9 為雪人添加胳膊

   10、接下來我們為雪人添加一個雪地投影,顯示出陽光的照射。繪製一個橢圓,填充顏色設為#666666,使用部分選定工具將其錨點進行調整,並將其移到雪人的背後,就得到如圖10所示的陰影。

  

  圖10 添加雪地投影

   11、接下來就該繪製可愛的小狗狗了。先勾勒出小狗的輪廓,繪製一個橢圓,填充顏色設為#E6A116,畫筆顏色設定為#673301,使用部分選定工具和自由變形工具將其錨點進行調整,並移到雪人的背後,雪地投影之上,如圖11所示。

  圖11 勾勒小狗的輪廓

   12、接下來我們給小狗添加耳朵和尾巴,如圖12所示。

  圖12 給小狗添加耳朵和尾巴

   13、給小狗的嘴巴和肚皮添加一些高光和陰影,使得小狗顯示出立體感。這裡我們可以用鋼筆工具描畫,或者繪製一個橢圓進行自由變形,如圖13所示。

  

  圖13 添加高光和陰影

   14、給小狗添加上眼睛、鼻子和嘴巴,只要幾個圓形,幾條直線,任意變形組合,小狗活靈活現的面部表情就出現了,如圖14所示。

  

  圖14 給小狗添加眼睛、鼻子和嘴巴

   15、為了增加一點頑皮的氣息,我們還可以在雪人的頭上,小狗的頭上以及樹枝上面都添加一些雪,如圖15所示,是不是覺得非常可愛呀?

  

  圖15 添加雪堆

   16、最後讓我們給圖片添加上漫天飛舞的雪花,更增添上一份浪漫的情調。如圖16所示。

  

  圖16 添加漫天雪花

   17、這樣一副富有冬天色彩的雪人和小狗就做好了,將圖片匯出看一下效果,如圖17所示。這裡為了將來的賀卡製作,我們將映像匯出寬度設定為760,以方便800×600的螢幕解析度,如果讀者用於做案頭就直接匯出為1024×768即可,就不用在匯出預覽中設定大小了。

  圖17 匯出後的圖片

下一頁



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。