2012年10月17日 星期三

Inkscape Plugin,svg2css

這個 Inkscape Plugin,能夠將 SVG 轉換為 HTML+CSS。


下載
https://github.com/shogo82148/svg2css


安裝
解壓縮後,把下面這三個檔案放到
mac:Application/Inkscape/Contents:/Resources/extensionsubuntu: ~/.config/inkscape/extensions
  • svg2css.py
  • svg.py
  • svg2css.inx

執行
將你的 SVG 存檔的時候,請選擇 "HTML+CSS(.html)" 格式

製作 SVG 檔案需要注意的地方
  • 這只能使用"建立矩形與正方形" 與"建立圓形、橢圓形與弧形"這兩種功能建立圖形,其他造型是無法轉換。
  • CSS 的陰影與模糊的效果,請在 Inkscape 的"填充與邊框"中去調整"模糊"的數值,這樣才能轉換。
  • 更多細節請見 readme-slide 和 test 檔案夾。

2012年7月17日 星期二

iOS Icon Template


這是由 671 和 honki 使用 svg 語法所設計出來的版型。可以讓使用者在設計過程中和最後完成後,即時同步看到自己所設計的 icon 在不同尺寸下的樣子,以及放在深色與淺色背景下的感覺是如何。

檔案下載

使用方法:
請使用 inkscape 開啟,然後點擊左邊的 icon 就可以進入編輯,記得把 click for editing 刪除在進行。完成後,選擇右下方各尺寸 icon 匯出 png 檔案。

2012年3月27日 星期二

eGTK Mockup Kit

這裡收集了幾個 elementary OS 風格的 Mockup,都是 svg 的檔案格式,而個人偏好用 Inkscape 作 UI 設計,所以之後在這部落格上的分享檔案都會以 svg 的檔案格式為主。
 elementary OS 是在多到數不清的 GNU/Linux 作業系統中的一個版本,他最特別的一點是在於不像其他版本都是程式設計者所發起的開發計畫,而是來自於視覺設計者所啟動的,所以這作業系統非常重視介面與互動上的設計。
由於這計畫非常迷人,吸引很多 UI 設計者自發性的加入這個計畫的開發,以下會整理出一些 svg 檔案格式的 Mockup 。

2012年3月20日 星期二

用Inkscape 來作UI Mockup 的教學分享


這是互動設計師Máirín Duffy 的教學與經驗分享,目前她在Red Hat 工作。很有趣的是,他認為自己是一個很怪異的設計師,鄙視Apple 和Adobe。她為自由與開源軟體作設計,也使用100%自由和開放源碼軟體來製作自己的設計。下面列出她從事設計所喜愛的工具:

2012年3月13日 星期二

改變inkscape 的icon 主題

自從使用inkscaape 以來,我一直覺的這軟體的使用介面中的icon 不夠細膩(白話來說就是使用爽度不夠高),也思考過乾脆自己來作一組,但是才作幾個就發現已經有Tango Icon Gallery在做這一件事,這個icon 主題是開放原始碼,所以你可以下載到所有svg 檔案格式的icon。該計畫的目的是為floss 建立一套設計準則和完善的icon,提供更好的用戶體驗。例如Gimp、Scribus 的介面都是使用這一套icon。

2012年2月1日 星期三

SVG Cleaner 變得更快,並且可以移除MS Visio元素


SVG Cleaner 開發團隊在本月初發布了重要的更新,他們修正錯誤和增加新功能,並且有了Windows 的版本。

SVG Cleaner是一個新的SVG 批次處理應用程式 。它可以找出各種標籤元素,並且可選擇性的來移除,讓檔案不改變其外觀的情況下變小。

新版本在後端修復了一些bug,防止被打掉一些元素,也可以刪除在Microsoft Visio 中添加的屬性。

2012年1月16日 星期一

SVG Cleaner 介紹

資料來源:http://libregraphicsworld.org/blog/entry/introducing-svg-cleaner

如果你常使用inkscape 畫圖,你應該會知道沒用的元素容易累積與增大SVG 檔案大小。最近發布的SVG Cleaner可以解救這件事。這個軟體只做兩件事:
  1. 移除不利於顯示圖形的元素和屬性。
  2. 讓這些元素與屬性,使用起來更緊密。

在inkscape 中增加android 介面設計所建議的調色板

領導Android 視覺設計團隊的Christian Robertson 最近宣佈了Android Design 網站,希望能藉此協助開發者打造更美觀與流暢的應用程式使用者介面。



這個網站其中一頁的規範,是建議設計者來使用的調色板,以利於所設計出來的圖形有一致性。如果你跟我一樣都是ubuntu 和inkscape 的愛用者,你可以跟著下面的作法,把Android 的調色板增加到inkscape 中,加速你的設計流程。
  1. 下載調色板
  2. 檔案解壓縮
  3. 在終端機裡,執行 
sudo mv android-ics.gpl /usr/share/inkscape/palettes
就會把 android-ics.gpl 增加到inkscape 的調色板中。
最後,重新啟動inkscape ,你就可以在下方的調色板多了Android ICS的選擇。

2012年1月10日 星期二

Elementary 創作者的專訪

資料來源:http://www.muktware.com/a/45/2/02/2010/548
elementary 計畫是桌面使用介面的重新思考,它是為了讓你使用電腦更容易、更簡單並且更完美。即將推出的elementary 操作系統是從Ubuntu 修改而來,保有許多最好的部份,而且拿掉那些一般使用者不太可能需要的東西。
有很多好東西是來自elementary 計畫本身。該開發小組正在研究一種新的檔案瀏覽器、電子郵件應用程式、聯繫應用程式,也許還有日曆應用程式。所有的應用程式和小組所客製化的許多部份都會提供給開發上游,如果Canonical 和Ubuntu 社群也選擇使用的話。在未來,elementary 也許可以選擇與硬體供應商合作,提供一個更加一體化和無縫體驗。
Daniel Foré,他在網路上的暱稱為“DanRabbit”, elementary 計畫的創辦人和藝術家。這計畫已經在Ubuntu 和Linux 社群裡掀起浪潮,是來自很多原因。今天,我有機會採訪Dan 本人,進一步深入了解該計畫、它的起源以及它的未來。