教你親手製作QQ聊天場景

來源:唯美暱稱館 1.63W
 第一、背景屬性設定

  在背景屬性設定中包括:聲音、尺寸大小和在該場景的IM視窗中各部分文字顏色的設定等,此外針對文字顏色的設定,還提供了“預覽”功能,可以隨時檢視修改了顏色之後的效果!

教你親手製作QQ聊天場景

圖1 背景屬性設定
  
  聲音:指該場景的背景音樂,可以通過“選擇”把檔案新增進來,同時還可以進行試聽,所有新增的聲音檔案都會出現在“下拉列表”中和介面左下角的“元件相簿”中,如圖1中的綠色區域。

  說明:“元件相簿”中的各個檔案可以通過滑鼠左鍵雙擊進行選中

  最小大小:指設計區可以拉伸的最小限制大小

  當前大小:指設計區目前實際的大小尺寸,這個尺寸至少要大於等於“最小大小”的數值。

  顏色:這裡的包括對背靜、訊息視窗背景、對方和自己發言標識、聊天訊息、系統訊息的文字和連結等場景中元素的顏色設定。

  說明:顏色設定部分還提供了“預覽”功能,為便於隨時檢視顏色設定的效果,大家可以選中“預覽”功能。這樣,當改變各部分顏色後,即可隨時在背景中看到修改後的效果。

  第二、圖片


  在背景屬性中僅可以設定背景的顏色等,為了場景更生動豐富,我們還可以在背景上新增一張或者多張圖片。

  
2.1 圖片匯入

  通過“匯入圖片”可以將切好的各種用來製作場景的圖片匯入到場景編輯器介面中左下的元件相簿中,供需要時使用。

  當需要對某個圖片進行屬性設定時,可以通過滑鼠左鍵雙擊元件相簿中該圖片就可以把它新增到背景上(或者可以通過滑鼠左鍵選中圖片把它拖拽新增到背景上),同時這個圖片也出現在場景編輯器介面中左上角的場景元件的列表中,進而就可以對該圖片進行屬性設定了。

教你親手製作QQ聊天場景 第2張

圖2 匯入圖片
          2.2 圖片新增

  “圖片新增”實際上是將“匯入圖片”和新增到背景中這個兩個功能的合成。可以通過以下兩種方式新增圖片到場景編輯器的背景,同時這個圖片也出現在場景編輯器介面中左上角的場景元件的列表中,進而就可以對該圖片進行屬性設定了:

  1、在背景區域中選擇右鍵選單中的“新增圖片”

  2、在選單中選擇“編輯”—“新增圖片”,如圖3:
  
教你親手製作QQ聊天場景 第3張

圖3 圖片新增

  2.3 圖片屬性設定

  由於在QQ中,場景是可隨IM視窗拉伸的,所以為了更好保證場景的效果,背景中各圖片在拉伸情況下的位置、拉伸方式等都需要進行設定。

  圖片屬性設定包括名稱、位置大小、拉伸方式等。
  
教你親手製作QQ聊天場景 第4張

圖4 圖片屬性設定介面

  名稱和大小:圖片新增到背景中時,該圖片的預設名稱和大小就已經被自動顯示出來,大家還可以根據需要自行修改。如圖5,可以通過滑鼠拉動圖片各個方向上的9個紅點直接調整圖片尺寸,也可以輸入圖片的寬和高的具體數值(如圖5中的綠色區域),還可以設定圖片為原始大小等。

  視窗拉伸:具體又分為左右、上下位移方式和填充方式的設定

  
說明:

  左右拉伸:如果希望圖片隨視窗左右均勻拉伸,即可選擇“寬度隨著視窗變化而變化”,

  一般說來水平方向上均勻的圖片更適合左右拉伸,如圖5中的圖片:

  如果圖片左右拉伸會變型失去原來效果,或者希望圖片在IM視窗拉伸過程
 中左右長度不變,則可以選擇“保持相對位置”,並進一步在下拉列表中設定該圖片為左或者右對齊。

  左對齊:該圖片在在IM視窗拉伸過程中相對左邊框的位置是不變的。

  填充方式:分為直接拉伸和平鋪兩種。

  直接拉伸:就是對圖片進行均勻拉伸的一種效果,如下圖5.1為將圖片左右方向直接拉伸後的效果,圖5.2為將圖片上下方向直接拉伸後的效果:
  
教你親手製作QQ聊天場景 第5張

圖5.1 將圖片左右方向直接拉伸後的效果

教你親手製作QQ聊天場景 第6張

圖5.2 將圖片上下方向直接拉伸後的效果

  平鋪:就是在拉伸時對圖片進行重複的拼接,以此來填充指定的該圖片顯示區域的一種效果,如下圖5.3為將圖片左右方向平鋪後的效果,圖5.4為將圖片上下方向平鋪後的效果:

教你親手製作QQ聊天場景 第7張

圖5.3 將圖片所有方向平鋪後的效果

教你親手製作QQ聊天場景 第8張

圖5.4 將圖片上下方向平鋪後的效果
        座標檢視:幫助大家確定當前圖片的四邊相對於背景四邊的位置,如圖5所示:

  
2.4 圖片屬性設定舉例

  以場景“春天”為例來對圖片的屬性設定進一步說明:

  1、如圖5中的,天空圖片在水平方向是均勻的,所以可以將圖片屬性設定中設定如下圖6,設成“寬度隨視窗變化而變化”、保持“上端對齊”和設定圖片為直接“拉伸”方式。
  
教你親手製作QQ聊天場景 第9張

圖6 圖片天空的屬性設定
  
  2、“田野”圖片屬性設定中設定如下圖7,設成“寬度隨視窗變化而變化”、保持“下端對齊”和設定圖片為直接“平鋪”方式,“平鋪”可以更好的體現“田野”的綿延。

教你親手製作QQ聊天場景 第10張

圖7 圖片田野的屬性設定

 3、場景中的其他元素如山巒、雲朵、新枝等圖片在IM視窗尺寸變化時,大小都被我們設定為不變的,我們只需要設定他們在IM視窗尺寸變化時的相對位置即可。

  新枝:設成保持“右端”“上端”對齊和設定圖片為直接“平鋪”或者“拉伸”方式都可以。
  
教你親手製作QQ聊天場景 第11張

圖8 圖片新枝的屬性設定

  2.5 圖層及相關操作

  在上面圖片屬性設定舉例中,大家可能已經發現,背景中各圖片之間可能存在彼此重疊的情況,比如圖8中的雲和天空等,當圖片出現彼此重疊,就涉及到誰覆蓋誰的問題,為了更好的標識這種關係,我們可以將不同的圖片看作不同的圖層。

  在場景編輯器的背景部分,提供各個圖層間的操作“上移”、“下移”、“最上層”、“最下層”等,如下圖9,為將新枝圖層設定到天空圖層之下的效果,可以看到天空圖層和新枝圖層重疊的部分中,天空覆蓋了新枝。

  說明:在場景元件列表中可以看到各個圖層之間的上下關係,如下圖9綠色的區域中可以看到,新枝圖層已經移到天空圖層下。

教你親手製作QQ聊天場景 第12張

圖9 將新枝圖層設定到天空圖層之下的效果
熱門標籤