跳到主要內容

沒有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

留言

這個網誌中的熱門文章

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』地下室抽風機,『3』鼓風機,『4』空氣壓縮機氣閥20psi---> 電腦螢幕綠色箭頭Start!--->(*6)切完關234,並…

買櫝還珠:方便好用的小外掛Boxmaker的進階應用

只要是有使用過雷切的朋友,應該都對可以快速產生盒子設計圖的網站不陌生,可是龜毛個性的我,總是覺得有點不完美,因為沒有蓋子的部分,很不好打開,剛好老友生日,做了一個皂章,為了便於收藏,再加做一個盒子,就來把一直看不順眼的盒子改改吧~


以下是常用的兩個網站,功能都相當直覺簡單,看了就會

http://boxmaker.connectionlab.org/
http://www.makercase.com/


通常下載的檔案是pdf檔,詳細資料都會寫在上面,在Illustrator打開時要確認轉檔是否有尺寸偏差,或是線段重疊斷裂的問題






原本的盒子沒有設計蓋子,要開就是把上蓋拔起來,凹凸狀的邊緣相當不好開,也不美觀,於是我想將上方改成真的可以開闔的蓋子,下方再加一個槽,方便打開蓋子,內部則要依照皂章的尺寸做固定槽。


外殼部分
將上方的蓋子的凹凸紋都改成直線,相對應的側面外殼也改成直線




因為蓋子沒有凸出於盒身,在前面盒子挖個開口,方便掀蓋,我個人愛六角形,所以是把六角形切一半^^




內側部份
上下的固定槽都各做雙層,裡層挖的洞較外層大一點,這樣子裡面會有比較開闊的感覺,因為這個皂章是平面的,避免把手蓋住圖案,於是內側底部的固定槽有挖大一點方便拿取,當然,一樣是使用六角形做處理

看得出來中間那層的凹槽比較大嗎?

改完後,全部的材料如下,有挖洞的部分就是內側的固定槽,將祝福的話刻在蓋子內側(小心機)


將零件依順序黏好,gif檔是最近新學的玩意,準備照片很麻煩,但是生成很簡單,對觀眾來說也比較方便,不用等待,不用轉出到Youtube觀看



推薦使用太棒3,木頭專用膠,用過你就會說真的是太棒太棒太棒三次的好物XD



黏好之後要用夾具固定十分鐘待乾,有上夾具才不易有歪斜,也才會黏得夠密合,也可以用橡皮筋固定,但是壓力要平均,而且要夠緊喔~





如果橡皮筋不夠緊的話,可以插入個東西再轉緊


開合的部分是使用金屬鎖片,因為我用的密集板厚度是3mm,不夠鎖螺絲,只能直接用黏的,很可惜,太棒3只能用在木頭類,對金屬來說完全黏不住,不過坊間許多結合異材質的膠可以黏,所以這也算是一片小蛋糕啦~