UI Colors 完整色彩搭配解決方案,輕鬆生成 HEX、RGB、OKLCH 或 HSL 顏色碼

UI Colors 完整色彩搭配解決方案,輕鬆生成 HEX、RGB、OKLCH 或 HSL 顏色碼

UI Colors 是一個免費的線上工具,專為提供色彩搭配整體解決方案而設計。使用者只需任選一種顏色,就能以該顏色為基準,自動生成前後搭配的數十種相輔相成的顏色,並將這些顏色組合成一個用色範例,讓使用者可以預覽該顏色在網頁設計中的搭配效果。UI Colors 可為產出的顏色提供適用於 Tailwind、CSS、SCSS 及 SVG 所使用的 HEX、OKLCH、HSL、RGB 及 Figma 顏色碼。使用 UI Colors 無須註冊,但若註冊後,可方便儲存所編輯的顏色,以供未來參考之用。

Transform Tools:數據描述格式轉換線上工具,支援SVG、HTML、JSON、CSS等多種

Transform Tools:數據描述格式轉換線上工具,支援SVG、HTML、JSON、CSS等多種

Transform tools 是一個免費的線上工具,專為轉換用於網頁開發與數據描述格式而設計。例如將 SVG 轉成 JSX、HTML 轉成 JSX、JSON 轉成 TypeScript 或是 JSON 轉 MySQL 及 CSS 轉 TailwindCSS 等。Transform tools 平台目前可以對 SVG、HTML、JSON、JSON Schema、CSS、JavaScript、GraphQL、JSON-LD、TypeScript、Flow 及其他,例如 Markdown to HTML 等。每種主要格式可轉換的格式各有不同,例如:JSON 格式可轉出一個 Create table 的 MySQL Script,免除還要手動的改寫的麻煩。

SVGViewer 線上旋轉、調整尺寸及最佳化 SVG 圖形,還可轉檔 PNG 或 React 格式

SVGViewer 線上旋轉、調整尺寸及最佳化 SVG 圖形,還可轉檔 PNG 或 React 格式

SVGViewer 是一個很實用的線上 SVG 檢視器,使用者可以直接上傳 SVG 圖檔或是貼上 SVG 的 XML 描述文字,便可以查看該 SVG 圖像,除此之外,SVGViewer 還可以對圖像進行方向旋轉、調整尺寸、最佳化及美化,有效減少 SVG 圖檔大小,另外,亦可轉檔為 PNG 圖片格式,或是轉換成 React、React Native 使用的 JSX 格式,非常方便。如果想要分享 SVG 檔案,也有提供產生分享鏈結功能。

Material Symbols & Icons:Google Fonts 所推出圖示字型,還有 SVG 及 PNG 可選

Material Symbols & Icons:Google Fonts 所推出圖示字型,還有 SVG 及 PNG 可選

Material Symbols & Icons 是一套由 Google Fonts 所推出的圖示字型,將超過 3,216 個字形整合到一個字體檔案中,並具有多種設計變體。每種圖示都提供 Outlined、Rounded 及 Sharp 三種樣式以及 Fill、Weight、Grade 及 Optical Size 四種可調節的可變字體樣式,並讓使用者自行選擇要以字型或是 SVG、PNG 圖檔格式下載。使用者可以在線上自行操作設定圖示並複製所提供的 CSS 及 HTML Code,輕鬆將其應用到自己的 Wwb、Android 或是 iOS 專案中。此外,該圖示套件還支援 Figma Plugin,在 Figma 中輕鬆使用。Material Symbols & Icons 採 Apache license 授權,這表示不論是個人還是商業使用均可。

ManyPixels 收錄 2,500+獨家免費且無版權插圖素材,商業與個人用途均可

ManyPixels 收錄 2,500+獨家免費且無版權插圖素材,商業與個人用途均可

ManyPixels 收錄範圍根據各種常見的分類進行了整理,這些分類包括科技、網頁設計、財務或企業、分析、運動、職業、人物和活動、地理、城市、科學、環境、美食、健康和季節等,而這些插圖,均可以由使用者自訂插圖的主色調,直接在線上預覽效果,完成後點選要下載的格式即可。不僅如此,ManyPixels 還有 Outline、Monochromatic、Isometric、Flatline 和 Two Color 等插圖風格可選。

LogoFast 圖示圖標製作工具,內建 1000 多個圖示免費使用

LogoFast 圖示圖標製作工具,內建 1000 多個圖示免費使用

LogoFast 是一個免費的線上工具,專為快速製作圖示圖標而設計。使用者可以輕鬆選擇 LogoFast 內建的1000多個圖示範本,並進行各種編輯,包括圖示的尺寸、角度、顏色、線條的粗細、陰影、背景與框線等。這使得使用者能夠迅速建立專屬自己的獨特圖示圖標。完成後,製作的圖案可方便地下載成 PNG 或 SVG 向量圖檔。LogoFast 的操作簡單易上手,即便是對圖片編輯技巧不熟悉的使用者,也能輕鬆快速地建立符合個人需求的圖示圖標。這使得 LogoFast 成為一個理想的工具,提供了快速且方便的方式,讓使用者在沒有專業技能的情況下,創造出具有個性的圖示圖標。

Ionicons:免費圖示字型與 SVG,Outline、Filled 及 Sharp 多變體開放原始碼

Ionicons:免費圖示字型與 SVG,Outline、Filled 及 Sharp 多變體開放原始碼

Ionicons 是一套開放原始碼圖示字型集,其 7.1.0 版本包含了 1,300 個專為 Web、iOS、Android 和桌面應用程式製作的圖示。這個字型集專為 Ionic Framewor k設計,實現了應用程式中 Material Design 和 iOS 風格的統一使用。每個 Ionicons 圖示都提供 Outline、Filled 和 Sharp 三種不同風格的選擇,同時支援 Ionicons Web Component 用法。這種用法能夠動態載入 SVG,有效減少應用程式載入時的資源開銷,提高圖示顯示效率。Ionicons 採用 MIT 許可證,允許商業使用,為應用程式圖示的顯示提供更大的靈活性和效率!

Icongo 一站式 SVG Icon 資源平台,整合超過 70個開放原始碼網站

Icongo 一站式 SVG Icon 資源平台,整合超過 70個開放原始碼網站

Icongo 是一個匯集超過 7萬個 SVG Icon 的線上平台,它集結了包括 Ant Design Icons、Boxicons、CSS.gg、Devicons、Eva Icons 等超過 70個開放原始碼的免費 Icon 資源網站。使用者不僅可以透過關鍵字輕鬆搜尋所需的 Icon,還能在 Icongo 網站上直接瀏覽各開放原始碼網站提供的 SVG Icon。此外,Icongo 提供了方便的預覽和下載功能,每個 Icon 集都可生成獨立的npm檔案供使用,同時也支援轉換為 React 元件。圖示採用 MIT 許可證,允許自由修改並可免費用於商業目的。對於仍在尋找全面且開放的 SVG Icon 資源的使用者來說,Icongo 絕對是一個不可錯過的平台。

FoneDog Photo Compress 線上圖片壓縮工具支援 JPEG、PNG、SVG 及 Gif 圖片

FoneDog Photo Compress 線上圖片壓縮工具支援 JPEG、PNG、SVG 及 Gif 圖片

使用 FoneDog Photo Compress 線上工具來壓縮圖片完全免費,使用者可一次上傳 40張圖片,每張圖片 5MB以內,支援 JPEG、PNG、SVG 及 Gif 圖片格式處理,選完要處理的圖片就開始壓縮,完成後會有圖檔大小減少比例可供參考,除了,可下載到本地端的設備外,也支援上傳到 Dropbox 雲端硬碟儲存。

fffuel 免費線上工具,輕鬆產生色彩方案與 SVG 圖檔

fffuel 免費線上工具,輕鬆產生色彩方案與 SVG 圖檔

fffuel 是一個以色彩配套方案與 SVG 圖檔為主的工具型網站,提供了顏色選擇器(cccolor)、調色板生成器(pppalette)、色彩方案(hhhue)及各式形狀包含手繪 SVG 圖檔等幾種主要工具,讓用戶輕鬆構建 各種色彩方案。 在 SVG 圖檔產生器方面,fffuel 提供了背景、無縫圖案、漸變效果、紋理、形狀和斑點等各種類型的圖形製作工具,讓使用者能夠快速創建各種視覺元素。此外,fffuel 還提供了簡易的 SVG 應用參考工具、CSS選擇器實作範例和 SVG Loading 製作範例等實用工具,這些內容對於想直接應用或進階的使用者來說都非常實用。 無論是初學者還是有一定技術基礎的使用者,fffuel 都是一個方便易用的平台,滿足對色彩的設計需求。

「令東齊伋體」復刻自明代木刻書籍內文字成字體的可商用中文字型

「令東齊伋體」復刻自明代木刻書籍內文字成字體的可商用中文字型

根據說明,「令東齊伋體」的字體取材自明代閔凌刻本內的《李長吉歌詩》和《淮南鴻烈解》兩本古籍,而字體的製作過程,首先是下載已將古籍掃描成高解析度的 PDF 檔案,並將其拆分為圖像。然後,在每個圖像的頂部手動放置一個網格,以產生字元的邊界框。接下來,為每個邊界框產生低多邊形蒙版,清潔圖像以去除紅色墨水列印的註釋。之後,對圖像進行閾值處理並輸入輪廓追蹤演算法,並使用度量來過濾不感興趣的形狀。這一步驟並不生成最終的字形,只是中間處理的一部分,準備圖像供後續處理,每個經過處理的縮圖進入神經網路中的中文 OCR 進行字元識別。然後,手動判斷 OCR 輸出,選擇最佳外觀實例並標記錯誤辨識的字元。最後,對於最終的字元集,自動生成每個字元的精細光柵渲染,以確保字元的視覺中心位於中心線上。使用閾值方法處理圖像,然後使用光柵到向量追蹤軟體將光柵渲染轉換為SVG。最終,使用 FontForge 的 Python 函式庫來生成字體檔案,完成字體生成過程。