跳到主要內容

沒有illustrator也可以畫向量圖，免費向量軟體Boxy SVG中文教學

歡迎加入Miss Maker王品驊的粉絲頁 ^^

一直以來，教學時常常遇到要用甚麼軟體才好，付費軟體的功能雖然強大，但是要一個初學者動輒花個數千元去買軟體，這費用比小妹我的教學費還貴，似乎是不太可能。而免費的向量繪圖軟體，目前大家都還是使用Inkscape，但是這個軟體有兩個擾人的問題，一是使用介面不那麼好學，過度依賴快捷鍵，二是太容易當掉，因為Inkscape不僅是免費軟體，更是開源軟體，程式一直處於一個更新的狀態，當然問題就會多一點，所以我一直在找更合用的軟體，終於出現Boxy SVG，我自己用了覺得不錯，也推薦給大家試用看看。

目前Boxy SVG的教學，連英文的都不太多，更不用說中文了，官網也沒有將功能逐一介紹，因為大部分的功能跟illustrator相似，只有少部分不同，大概是覺得不需要吧。既然如此，我就自己入坑了，跟大家來介紹一下Boxy SVG的使用介面跟工具名稱的翻譯。

哪兒下載?


連結在此，谷哥大神給的
https://boxy-svg.com/main.html#download
下載好之後，打開chrome，按視窗上方最左邊的[應用程式]



點進去後，Boxy SVG的開始畫面長這樣


左側基本工具

Boxy SVG的工具基本上都跟Illustrator可以互通，只有少部分不同，之後學得更深了，要轉移完全無痛感。

  • 選取
選取想要工作的物件，再去右側微調工具列進行微調，也可以按一下進入傾斜度更改，按兩下進入錨點的選取，就是下一個直接選取的功能。
  • 直接選取
不是選單一物件，而是選到該物件的錨點，針對局部去修改細節，雙點擊錨點，可以改變線的狀態。
  • 貝茲曲線
Boxy SVG兩種曲線繪圖方式，一個是錨點上只會出現一邊的控制桿，當然可以手動新增另一邊的控制，另一個則是雙邊控制桿，要注意修改的變化是會對稱的。
  • 筆畫
將滑鼠當筆一樣使用，需要練習，才不會手殘
  • 文字工具
輸入文字，記得確定文字的字型大小後，要轉成路徑，不然其他電腦會無法辨識，變換成路徑的這個部分在後面會說明。
  • 基本預設圖形
隨著版本升級，越來越多預設好的基本幾何圖形，超方便!選好圖形之後，點一下會出現黃色跟紅色的錨點，可以改變傾斜度，點兩下，則是綠色錨點，圖形而有不同的效果，譬如正方形的綠色錨點是改變導角，多邊形中心的綠色錨點，移動會改變邊的數量等等。

右側微調工具

利用[選取功能]選好要工作的物件後，主要就是在右邊這排決定要做怎樣的處理，大部分有中文翻譯，就是一看就懂的，很直覺，也有很多好用的功能，沒事可以多玩玩!


  • 填色跟外框
通常我們說的物件，就是一個封閉的路徑，不論這是路徑有沒有封閉，都會有兩個選項可以調整，一個是外框，就是路徑本身的顏色，另一個就是填色，兩個的填色方式都有素面色，漸層，填圖樣等選擇。吸管填色功能，按著Q，左鍵點選視窗上的顏色。
  • 透明度跟遮色片
遮色片就像是一層薄紗一樣，覆蓋在物件上面，讓物件多一點陰影或質感。
  • 字體
變更字型，大小等等。
  • 工作區
輸出的範圍部分，留底的可以放在工作區外，輸出時成PNG檔案時看不到。
  • 對齊及排列物件
選取多個物件，可以對齊，置中，放大到同工作區，靠邊放置，旋轉，鏡射，群組都在這裡。排列則是改變物件的前後順序，前面的物件會蓋住後面的物件。
  • 圖層
其實這是illustrator的說法，這裡直翻的話是物件，其實是一樣的，就是上一個排列的物件列表，也可以在圖層這邊更動。
  • 定義
可以紀錄自己設計的，或是常用的圖樣，花版，字型。
  • 圖庫
現成圖形素材。
  • 尺寸定位跟旋轉
可以設定尺寸，或是在工作區中的座標，排列視窗的旋轉只有90度，而這邊是可以自由設定旋轉角度。
  • 後設資料描述檔
描述檔看起來很難理解，其實這個主要是針對網頁使用的，對，沒錯，這也是個好用的網頁設計軟體，利用SVG檔做網頁美術的部分，取代一張又一張的照片，是CSS的一種，就是<style>的部分。傳統寫code時，要自己先預估數值大概多少，等到跑程式才看的到結果。這個軟體讓你直接畫就好，他幫你轉譯成HTML，簡直佛心。
  • 路徑
路徑最主要的，就是文字的轉換，讓文字變成一個物件，也可以進行局部修改及輸出。還有將多個路徑進行各種布林，像是交集，連集，差集...，甚至更複雜的複合途徑，都在這邊處理。
  • 匯出
可以轉存成JPG及PNG，向量的SVG，網頁用的HTML

轉檔

由於我們教學上使用的雷切機，都是對岸的軟體，而這個軟體只能判讀.dxf的檔案格式，所以我又從網路上找了個雲端轉檔的程式，選擇很多，要注意的小地方就是盡量不要有群組或是複合途徑，越單純越不會出錯，如果有甚麼問題，或是發現甚麼更棒的新軟體，歡迎大家到粉絲團留言。

雲端轉檔
https://cloudconvert.com/svg-to-dxf

留言

  1. Bevis2019年3月20日 晚上10:43

    現在這個軟體需要花費購買才能使用了。

    回覆刪除

張貼留言

這個網誌中的熱門文章

Universal Laser cutter 雷射切割機的使用說明

雷射切割機可以說是Maker們的入門神機，簡單又好用，也是Fablab Taipei使用率最高的機具。Universal的雷切機可以直接用排版軟體Illustrator，再將資料送到Universal自己的使用介面，以下分兩大部分來解釋，第一部分是檔案的需求，第二部分是軟體的設定流程，如果機器無法順利切割，只要逐項檢查，都可以快速找到解答:-) 第一部分 雷切機的使用檔案基本需求 (1)在Illustrator底下打開檔案，必須是向量檔 (2)stroke改成 0.025 mm (3)File/色彩模式改成 RGB Mode (4)Window/Color面板/右上下拉式選項 改成 RGB Mode 滑鼠指的地方，就是下拉式選單   打開下拉選單之後，改成RGB模式 說明： (1)雖然說pdf, dxf, svg等檔案格式，只要是像量圖都可以灌入Illustrator，但是轉檔時很容易產生問題，譬如尺寸錯誤，線條分岔....等等，如果是使用其他檔案模式，在連接雷切機電腦裡的illustrator開了之後，要特別加以檢查喔～ (2)雷切分成兩種模式，『Vect 線條』或是『Rast 區塊』，Vect 線條是指沿著外框切割，線寬必須轉成0.025mm，雷切機才讀得到 (3),(4)同一個功率的部分，要設定成相同的顏色，並且是純色，總共有黑色＋7種RGB原色。到window/color面板，把R，G，B其一或其二的橫bar調到極限，也就是數值255即可。 雷射頭並不是噴色彩，就像瓦斯噴槍一樣，只能改變大火或小火，決定燒焦或是燒穿。 第二部分 軟體的設定流程 在Illustrator按列印，Ctl+P---> Setup---> 喜好設定---> (*1)設定每個顏色的功率(Mode/ Power/ Speed) ---> 列印---> Orientation檢查畫面方向---> Print---> 開右下方紅色菱形的雷切機控制軟體---> (*2)開雷切機的電源--->  (*3)對焦---> (*4)將圖檔放到正確位置---> (*5)開『2』地下室抽風...
張貼留言
閱讀完整內容

GCC i-Craft 數位割紙機操作教學

使用規範： 加入Fablab Taipei會員 清除廢紙 將切紙機跟電腦關機收好 墊板（防粘紙 黏回去）跟錐子，放回泡泡袋子裡 如果值日生發現用完未收，臉書公布列入禁用名單！ 請珍惜公用資源！ 軟體名稱：Sure Cut A Lot 4  工具列  Import/ Trace/ Library/ Store/ Cuter 「Import」檔案匯入- 幾乎一般常用的檔案都可以匯入 「Trace」描繪輪廓-  按Choose an image選擇照片， 線條顏色越清楚越好，畫素高低跟顏色對比度也會影響轉圖的效果，有monochrome, color layers, single color三種模式，都可以試試看，將左邊show nodes打勾會顯示結點，可以手動調整線條。 畫面匯入後，contrast對比度也可以調 更改參數後，記得要update preview看結果 按ok後就會出現在畫面上，可以直接用滑鼠拉動來調整大小，尺寸等等 「Library」內建的免費圖檔-許多常用造型可以直接套用 不同字型符號 常用圖形 「Shop」網路圖庫- 按Shop就直接連到圖庫，可以購買設計師的圖檔，也有一些免費圖檔，可以常常上去看看 免費的圖庫在這裏喔～ 「Cuter」切割機的操作介面- 圖檔放在螢幕畫面的哪裡，也就會是切割的位置。依紙張的厚度跟要不要切斷，記得要調整刀子的速度跟力道，有貼心的預設的參數可以使用。調好了按試切（test cut)功能，確認不會切太深或太淺，如果力道開到最大，速度最慢也切不斷，可以試試設定多次切（multi-cut)，也就是在同一線段重複切割的功能。 試切很重要，要三顆星！ 各種常用紙種 ********************************************************************************************************** 放紙部分， 切穿的話，紙要黏在墊板上，對齊邊緣，按進紙鍵。 非切穿的話，像卡典西德，先搬扳開右邊的...
張貼留言
閱讀完整內容