http://blog.extremepattern.com/articles/category/svg en-us 40 enjoy <h3>小小建議</h3> <p>IE 本身不支援 <span class="caps">SVG</span>，同時不支援 <span class="caps">PNG</span> alpha transparency 功能，因為這只是練習，所以不打算針對 IE 做些專門修改，強烈推薦 <a href="http://www.moztw.org/">firefox</a> 瀏覽。</p> <h3>練習練習練習</h3> <p>為了保持熟練，這裡將會不斷留下練習的結果。</p> <h3>道繁客</h3> <p>基本的中文字排列。</p> <p><img src="/files/archive.png" alt="" /> <a href="/files/my_1_exp.svg">my_1_exp.svg</a></p> <p><img src="/files/my_1_exp.png" alt="" /></p> <h3>肥源力</h3> <p>Fource = Fat + Source</p> <p><img src="/files/archive.png" alt="" /> <a href="/files/my_2_fource.svg">my_2_fource.svg</a></p> <p><img src="/files/my_2_fource.png" alt="" /></p> <h3>速度感</h3> <p>距離除以時間，每個人感受不同，速限在哪裡 ?</p> <p><img src="/files/archive.png" alt="" /> <a href="/files/my_3_maxspeed.svg">my_3_maxspeed.svg</a></p> <p><img src="/files/my_3_maxspeed.png" alt="" /></p> <h3>安心感</h3> <p>距離除以時間，沒有一定的速度，哪裡都去不了。</p> <p><img src="/files/archive.png" alt="" /> <a href="/files/my_4_minspeed.svg">my_4_minspeed.svg</a></p> <p><img src="/files/my_4_minspeed.png" alt="" /></p> <h3>需要幫助</h3> <p><a href="/articles/2006/08/23/the-book-i-think">幫忙找書</a> 的事一直在心上，所以做個圖增加印象，同時也是練習，為求輸出 <span class="caps">PNG</span> 可以不輸出下面的方形白色區，採用物件 Difference 做法，切掉下面的方形。</p> <p><img src="/files/archive.png" alt="" /> <a href="/files/my_5_needhelp.svg">my_5_needhelp.svg</a></p> <p><img src="/files/my_5_needhelp.png" alt="" /></p> <h3>天</h3> <p>善惡兩極，盡歸於天，參閱 <a href="http://zh.wikipedia.org/wiki/%E7%A5%86%E6%95%99">祆教</a> 說明。</p> <p><img src="/files/archive.png" alt="" /> <a href="/files/my_6_zoroast.svg">my_6_zoroast.svg</a></p> <p><img src="/files/my_6_zoroast.png" alt="" /></p> Tue, 12 Sep 2006 02:42:00 -0700 urn:uuid:f9bdd0d4-2646-413f-a82d-e94aa555f1ae LIN http://blog.extremepattern.com/articles/2006/09/12/inkscape-in-practice svg <h3>小小建議</h3> <p>IE 本身不支援 <span class="caps">SVG</span>，同時不支援 <span class="caps">PNG</span> alpha transparency 功能，因為這只是練習，所以不打算針對 IE 做些專門修改，強烈推薦 <a href="http://www.moztw.org/">firefox</a> 瀏覽。</p> <h3>緣起</h3> <p>Inkscape 是個開放的 <span class="caps">SVG</span> 編輯軟體，雖然目前功能不及商業版本，不過免費的特性，讓大家可以自由下載享受動手作 <span class="caps">SVG</span> 的樂趣。</p> <h3>紅十字加點</h3> <p>基本設定與劃出十字的圖案，下為匯出的PNG檔。</p> <p><img src="/files/ink_1_redcrossdot.png" alt="" /></p> <p>運行的過程請參考 <img src="/files/screencast.png" alt="" /> <a href="/showswf/ink_1_redcrossdot/801/595">ink_1_redcrossdot screencast</a></p> <ol> <li>開啟 Inkscape</li> <li>改大小</li> <li>取 320&#215;180</li> <li>放大符合視窗</li> <li>秀格線</li> <li>改格線大小</li> <li>畫底方形</li> <li>變更底色與邊框</li> <li>調整方形圓角</li> <li>加十字橫</li> <li>加十字豎</li> <li>shift 將兩個方形一起選後合併成單一路徑</li> <li>加個小點</li> <li>採用漸層</li> <li>設定文件 metadata</li> <li>存檔</li> <li>匯出成 <span class="caps">PNG</span> 檔</li> </ol> <p><img src="/files/archive.png" alt="" /> <a href="/files/ink_1_redcrossdot.svg">ink_1_redcrossdot.svg</a></p> <h3>原點</h3> <p>畫圖如果需要比較精確的定位，就需要自訂參考線 Guide Line。準備 320&#215;180 開畫，下為匯出的PNG檔。</p> <p><img src="/files/ink_2_origin.png" alt="" /></p> <p>運行的過程請參考 <img src="/files/screencast.png" alt="" /> <a href="/showswf/ink_2_origin/801/595">ink_2_origin screencast</a></p> <ol> <li>要拉參考線需要從尺規處開始拉</li> <li>拉完可以看到參考線</li> <li>可以編輯到精確位置</li> <li>換拉水平參考</li> <li>改中間 90</li> <li>畫三角形</li> <li>做副件</li> <li>變形</li> <li>先倒過來</li> <li>先左移 50 看看</li> <li>再加碼 10</li> <li>換邊做一次</li> <li>換個顏色會所以副件一起改</li> <li>再下拉 10</li> </ol> <p><img src="/files/archive.png" alt="" /> <a href="/files/ink_2_origin.svg">ink_2_origin.svg</a></p> <h3>links</h3> <p><a href="http://www.inkscape.org/">Inkscape 官方網站</a></p> <p><a href="http://tavmjong.free.fr/INKSCAPE/MANUAL/html/index.html">A Guide to Inkscape</a> 一定要看</p> <p><a href="http://openclipart.org/cchost/media/view/media/home">Open Clip Art Library</a> 必去之處</p> <p><a href="http://planet.inkscape.org/">Plant Inkscape 網站匯集</a></p> <p><a href="http://gould.cx/ted/blog">TedPage blog</a></p> <p><a href="http://gould.cx/ted/presentations/webspinners/index.php">Inkscape 基本功能簡報</a></p> <h3><span class="caps">TODO</span></h3> <p><a href="http://zh.wikipedia.org/wiki/%E5%B0%BC%E4%BC%AF%E9%BE%8D%E6%A0%B9%E7%9A%84%E6%8C%87%E7%92%B0">尼伯龍根的指環</a></p> <p><a href="http://en.wikipedia.org/wiki/Image:Valkyrie_horseback.jpg">女武神 Valkyrie Warrior</a></p> Mon, 11 Sep 2006 09:04:00 -0700 urn:uuid:b0475a7c-c1fb-42c9-a368-4aea9f8ee742 LIN http://blog.extremepattern.com/articles/2006/09/11/inkscape-and-svg screencast svg