11 °c
London
6 ° Fri
6 ° Sat
6 ° Sun
7 ° Mon

Tag: figma

figma 製圖

SVG圖片格式是什麼?如何用線上軟體Figma免費製作.svg素材

在網路上有許多方案(有免費、有些則須付費)可以減小圖片檔案大小,以幫助提高網站的性能。其中之一便是將網站的Logo從png檔或jpg圖檔轉換為使用svg格式,SVG 是一種可擴展的圖像格式,通常檔案可以極致壓縮到很小,而且不需要考量到retina @2x的使用情境。本篇將介紹如何用線上軟體Figma免費製作.svg。 對於網站部落格主來說,SEO(搜尋引擎最佳化)的優化代表著網站成功與否,自己的網站出現在搜尋結果第一頁間接代表著網站能夠成功地被大眾瀏覽。根據數據統計,網站圖片平均佔網頁總權重的20%左右,大容量的圖像會減慢網頁瀏覽速度,產生不太理想的用戶體驗,因此著手於圖像的優化是SEO成功的關鍵之一。這篇文章將說明如何使用並製作svg檔案格式。 SVG是什麼 可縮放向量圖形 (Scalable Vector Graphics,簡稱SVG) 是基於 XML語言的可擴展向量圖檔,一種支援交互性和動畫的二維圖形,通常用來顯示網站logo或icon圖檔。 SVG發佈於1999年,由國際標準組織W3所制定的是一個開放標準,可以加入向量圖形、點陣圖像、文字等圖形物件類型。SVG基於XML語法,用文字格式來組成描述圖像內容,提高SVG圖形的被搜尋能力和無障礙性。 SVG圖像格式的優點1. SVG是一種向量格式,因此可以瀏覽器和照片編輯工具中放大圖像,而不影響解析度。2. 獲得Google圖片搜尋支援,代表svg格式並不影響SEO。3. SVG格式使用XML語法,使其可以建立文字索引,因而獲得基於內容的圖像搜尋。4. 可以生成動畫。5. 通常可以極致的壓縮圖像檔案大小,加快網站加載速度。SVG圖像格式的缺點1. SVG雖獲得大多瀏覽器支持,但對於線下軟體(如照片編輯器、手機相簿)支持度較低。2. 因僅在瀏覽器獲得支持,因此建議使用在網站的Logo或icon,並不適用於部落格內文照片。SVG格式是否適用所有瀏覽器?目前svg格式已適用於主流的瀏覽器及手機瀏覽器,如Google的chrome、Microsoft的edge、Apple的Safari等皆支援svg文件。SVG vs JPG vs PNG,三者比較差異為何?從上圖可以看出,在輸出同樣的圖片時,使用svg檔案可以有更小的檔案大小,將圖檔放大2倍時,svg檔案可以維持同樣的解析度。 線上軟體Figma製作logo.svg格式素材圖檔 Step1. 確認佈景主題demo格式若是使用Wordpress來架設網站,通常會套入demo的佈景主題,為了避免logo的尺寸會造成網站跑版,建議使用原生主題的logo大小。在demo網站上的logo點擊右鍵,進入檢查的頁面,將滑鼠移到畫面上的<img>字串,即可看到紅匡處的資訊,顯示著使用的檔案大小。Step2. 進入Figma,建立Frame接下來便可進入figma裡面,建立一個新的file後,可以到上述頁面1. 新增frame2. 在中間畫面上匡矩形3. 設定矩形大小Step3. 建立logo設定好frame大小之後,便可以設計logo,這邊按照demo為範本去作設計。・簡易的圖檔可至Plugins→Iconify,找尋喜歡的圖片插入・若要貼上自己設計的圖片,需貼上svg檔案的圖片,或者可用「image tracer」的擴充程式將圖片描邊(但通常效果不好)。Step4. 調整背景顏色,使背景透明可以透過Fill的調整,將logo背景透明化。Step5. 輸出.svg將設計好的logo輸出為.svg格式檔案Step6. 開啟輸出的.svg開啟.svg格式檔案,並用網頁程式開啟(chorme或Edge),檢查程式碼是否為XML語言。若滿意成品,記得將檔名修改成「logo.svg」。 上傳至Wordpress,已支援svg圖檔 目前wordpress的媒體庫已經支援.svg格式,可以上傳其他圖檔一樣,直接拖移至媒體庫即可上傳。 上傳後在到佈景主題的logo位置,更換成svg頭像即可。 延伸閱讀 Google團隊為了優化網站載入的性能,便開發了圖像壓縮工具 Squoosh.App,可以用來優化圖片、照片並修改尺寸,解決檔案或尺寸過大的問題。可參考免費線上【圖片壓縮】Squoosh:由Google開發的圖片優化工具 Figma除了可以輸出svg檔案格式外,也可以做圖片去背的功能,可以參考免費線上【圖片去背】實測3款快速去除背景軟體網站比較:Adobe、AirMore、Figma

Read more

免費線上圖片去背,實測3款軟體去除背景神器!

最大的設計煩惱之一,就是正在設計某些東西時,正在編輯的圖面或照片上面有不需要的背景,則要用免費線上軟體去背景。這篇文章將介紹如何完全去除照片背景,並使圖片背景設定為透明,以便將圖片呈現為其他背景的外觀。本篇將實測3款圖片去背神器:Adobe、AirMore、Figma、Photoroom。 在測試過許多圖片去背的線上免費軟體之後,實測有四個線上免費軟體最好用: Adobe ExpressAirMoreFigma-RemobeBGPhotoroom.com 註:經實測,推薦使用Adobe Express與Photoroom。 方法一:Adobe Express-用滑鼠就能操作的去背景軟體 Adobe Express是由Adobe Inc.開發,用於任務取向整合系統,可直接在網頁版線上使用或手機app使用。透過可用滑鼠選擇、拖曳技術,Creative Cloud Express使用戶能夠設計製作Logo、傳單、邀請函等多媒體內容,也提供相關設計模板、字體和免費照片。 Adobe Express有依照使用需求分為Free(免費版)與Priumium(一個月約330元)計劃。 而在目前去除背景的功能在免費版即可使用,因此可以使用Adobe的線上軟體來達成免費去背的功能。 Step1. 前往Adobe Express 移除背景功能 點選連結:Adobe Express 移除背景功能 蠻多線上軟體都有支援Google帳號登入,這邊建議可擁有一組Google帳號作為登入使用。 Step2. 上傳影像 上傳想要移除背景的影像 Step3. 影像處理中 上傳後會顯示處理中畫面,我這邊用一個包裝品放在角落作為範例。 Step4. 下載圖片 處理完之後會顯示移除結果,並點選右方下載即可下載該圖面。 提醒:移除的結果是不能做更動的。若想要改變結果,可先把圖面放進小畫家等圖面編輯軟體,將想要移除的地方塗黑,讓系統去判定。 方法二:AirMore-免費線上去背 AirMore是個多媒體管理平台,可以將照片、檔案等資料上傳到手機的app上,並且同步至雲端上,可由電腦來做傳輸、管理。 而airmore作為多媒體管理平台,也有開發線上影片編輯、線上圖片去背、以及線上PDF編輯等功能。 藉由airmore目前不需登入就能直接執行線上功能,以達到我們免費線上去背的需求。 需注意:AirMore為中國網站(可能有上傳資料外洩疑慮),若有機敏資料請盡量避免使用。 Step1. 前往AirMore-線上去背 點選連結:AirMore-線上去背 進入網頁後直接點選下方添加圖片,經實測無論選人像、商品、或文字,三個出來的結果都一樣,因此點中間的添加圖片即可。 Step2. 影像處理中 上傳之後,會顯示處理中畫面,約等20秒之後會跳出下一個畫面。 Step3. 顯示結果,下載圖片 處理完之後會顯示背景移除結果,可依據個人喜歡再次加工移除/保留。 點擊右上方的下載,即可獲得影像去背後的圖檔。 ...

Read more

Weather

london
February 28, 2024
overcast clouds
11 ° c
89%
12.66mh
100%
8 c 4 c
Fri
9 c 3 c
Sat
9 c 4 c
Sun
10 c 4 c
Mon

Recommended