跳到主要內容

沒有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,並…

從選擇材料到設計製作,在在反映自我信念的自製皮革滑鼠墊

皮革或木頭這種有生命的素材,在大量製造成商品時,為了保持品質一致性,任何的生命足跡所造成的痕跡,都被定義成「瑕疵」。 然而在我眼中,這些印記卻像是在述說這個材料所經歷的故事,材料也因此變成獨一無二,更有味道。重新善加運用這些商業生產中所謂不及格的素材,是惜物,更是憐物。 
這塊皮革因為靠近腹部,有一個明顯的摺痕,和許多細小的紋路,所以即使顏色染得很美,還是變成皮革店中的特價品,而我正好想要做一個小一點方便攜帶的滑鼠墊,我們就這麼相遇了。

製作流程
1. 手工皮革製作,最麻煩的部分就是切皮跟打洞,現在用雷切機處理,時間快速,也不會拉扯到皮面,切完的邊也平整乾淨,不需再整理,只是如果雷射功率過大,皮面會沾上燻煙,切割前可以先貼上紙膠帶保護。
用繪圖軟體畫出有圓角的方形,同時把縫線的洞一併畫上,就不用再用菱形斬打洞,以1mm寬的蠟線來說,我自己偏好的間距是3.5mm,畫圖時,正反兩面務必要鏡射對稱,黏合時洞才能夠對齊互通。



2. 切好清除紙膠後,兩片都塗上薄薄薄薄一層皮革用強力膠,放置五分鐘後,對齊黏合,看物件大小,最好可以壓重物半小時待乾(顧拍照沒有塗得很勻XD)


3. 準備蠟線,長度是總長度的5~6倍,在線的兩端都要穿上針,坊間書籍通常會用特別的穿線法,固定線不要從針孔中掉出來,但是我發現其實只要線的尾端留約10公分以上,針是不會掉出來的。而且一開始可以先多拉一些縫份,每穿一針要拉線的長度就會變短,速度變快,線也不容易打結,之後再慢慢釋出就好。


4. 第一針穿過洞之後,把兩端的針對齊,讓線在正中央。基本的概念就是每個洞都要穿兩次,一次從左側穿過去,一次從右側穿過來,只要注意穿線的順序,以及線的擺放位置要從頭到尾一致,就可以穿得很漂亮。




5.開始對穿,右邊的針穿到左邊,線先不要完全拉緊



6.左邊的針穿過同一個洞到右邊,小心不要穿到另一條縫線,最重要的是每一針穿針的順序跟位置都要一致。



7.最後將兩條線打平結,將兩端各自從最近的洞,由內往外層穿出



8. 將線頭剪掉,用打火機稍微加熱,縫線上的蠟會融化幫助固定

9. 因為我是用雷切機切的,邊緣已經很平整,不需再作處理,可以完成了,但是最近愛玩邊油配色,所以又繼續上邊油,首先用砂紙將邊緣磨平


10. 外面有賣專用上邊油的工具,也有上邊油前的底劑(填補縫隙),可依個人需求選購,個人覺得棉花棒方便便宜好取得,底劑也可以多上幾次邊油代替,可以減少買一堆東西…

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

使用規範:
加入Fablab Taipei會員 清除廢紙 將切紙機跟電腦關機收好 墊板(防粘紙黏回去)跟錐子,放回泡泡袋子裡
如果值日生發現用完未收,臉書公布列入禁用名單! 請珍惜公用資源!
軟體名稱:Sure Cut A Lot 4 

「Import」檔案匯入- 幾乎一般常用的檔案都可以匯入





「Trace」描繪輪廓-  按Choose an image選擇照片, 線條顏色越清楚越好,畫素高低跟顏色對比度也會影響轉圖的效果,有monochrome, color layers, single color三種模式,都可以試試看,將左邊show nodes打勾會顯示結點,可以手動調整線條。





「Library」內建的免費圖檔-許多常用造型可以直接套用




「Shop」網路圖庫- 按Shop就直接連到圖庫,可以購買設計師的圖檔,也有一些免費圖檔,可以常常上去看看






「Cuter」切割機的操作介面- 圖檔放在螢幕畫面的哪裡,也就會是切割的位置。依紙張的厚度跟要不要切斷,記得要調整刀子的速度跟力道,有貼心的預設的參數可以使用。調好了按試切(test cut)功能,確認不會切太深或太淺,如果力道開到最大,速度最慢也切不斷,可以試試設定多次切(multi-cut),也就是在同一線段重複切割的功能。




**********************************************************************************************************