CH1.基礎

基礎


Ch1.1 VSB

首先要先介紹我們使用的VSB這套設計軟體

在下付上的檔案已經中文化了沒問題

雖然是殘體，但是還是有英文，應該看得懂

• 1.1.1 主視窗

從頭往下講：

保存：存檔，記得隨時隨地存檔，是好習慣

測試：將目前設計的佈景主題套用的系統上給你看，看完之後就可以按停止變回來

左邊樹狀圖：WIN7所有的顯示都是用一張一張的圖案拼貼出來的，這邊可以讓你選擇要設計哪個部分的內容

右邊圖像區域：顯示目前修改(例如圖片中的Programs List)的元素，而如果聰明點的會發現這邊可以點擊，會出現另外一個預覽視窗，等等介紹

右邊圖像下面：

編輯：沒用的東西，不理他

導出：將元素另存

導入：將設計好的元素放進主題裡

添加屬性：增加目前設計元素的屬性，之後會提到

詳細內容框框：顯示目前元素的詳細設定

• 1.1.2 預覽視窗

預覽視窗就是讓你可以不用一直測試測試看結果

方便你在程式內部先看看應該會怎樣的地方

兩邊的BAR就是預覽圖片伸縮的樣子

左上角外邊距有四個勾勾

Sizing：預覽sizingmargins

內容：預覽contantmargins

標題：預覽captionmargins

Ch1.2 關於設計時應該知道的一些東西

• 1.2.1 變數設定

這裡我要講VSB這套程式對於拉伸變數的定義

增加屬性裡面margins類型有三種屬性

而值的定義(A,B,C,D)如下圖

而這三種屬性裡面最常使用的就是SizingMargins這個屬性

因為它最關係到的就是整體圖片顯示出來的時候會不會變形歪掉，而要調整就是靠這個屬性。

而WIN7對於拉伸有個很特殊的作法，雖然可以使用屬性SIZINGTYPE:ENUM來更改，但是一般來說使用STRETCH就可以了。

當然如果有其他設計的方法也歡迎跟在下討論，因為在下也想知道新的方法怎麼玩XD

• 1.2.2 拉伸的解釋

這邊要解釋MARGINS的意義是甚麼，因為使用文字不好解釋，用圖片比較快，馬上看懂

這是原始沒有拉伸的圖片，圖上標記出的紅色線段是SIZINGMARGINS設定出來的範圍

而這張圖是經過拉伸的圖片，兩張圖片都被切割成9塊

1 2 3
4 5 6
7 8 9

可以很明顯的與上圖對照出

• 1, 3, 7, 9與原圖是一樣大的
• 2, 8向左右拉長
• 4, 6向上下拉長
• 正中間的5則是直接被放大

因此可以利用這個設計來設計調整出一個完整的圖框出來

舉一個我自己做的成品來解說

注意開始功能表的地方

這邊利用SIZINGMARGINS將拉伸的地方避開主要圖像避免變形

而這邊不需要擔心左右拉伸的問題，因此這樣設計是可以使用的

• 1.2.3 圖層

這邊要提出一個圖層的概念，有在使用圖像編輯軟體例如PhotoShop的應該對圖層很熟悉

因為剩下兩個屬性contantmargins與captionmargins就是更改內容字體的位置

而字體就是利用圖層的方式蓋在顯示圖片的上方

Recall剛剛的預覽圖片，這邊比較詳細的解釋

紅線框出來的部分就是Sizing的範圍，而橘色的線就是內容，也就是顯示內容的範圍

掌握這三個屬性的設定就可以玩一些很有趣的設計

而實際上的感覺也就讓各位在設計的時候自行去體會

第一章，結束

接下來是第二章，開始功能表