KC1982' Creative » Teach http://kilocooper.com SDT 攝影,平面設計,網頁設計,blog設計 Thu, 19 Aug 2010 07:32:04 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 -Vectormagic 點陣圖轉換向量圖- http://kilocooper.com/2009/05/26/vectormagic-%e9%bb%9e%e9%99%a3%e5%9c%96%e8%bd%89%e6%8f%9b%e5%90%91%e9%87%8f%e5%9c%96/ http://kilocooper.com/2009/05/26/vectormagic-%e9%bb%9e%e9%99%a3%e5%9c%96%e8%bd%89%e6%8f%9b%e5%90%91%e9%87%8f%e5%9c%96/#comments Tue, 26 May 2009 02:55:08 +0000 Kilocooper http://kilocooper.com/?p=141 vector-magic_01

介紹一個可以把一般的點陣圖片轉換成可以任意放大縮小的向量圖網站–>Vectormagic.com（上圖就是使用轉換好的向量圖檔）

點陣圖和向量圖的差別：

點陣圖 是以像素點為基礎所組成，用點的方式來紀錄圖形中所有使用到的顏色碼，再像拼圖一樣組成整張影像。點陣圖能針時呈現影像原貌及色彩上的細微差異，但是放大後會產生如馬塞克的鋸齒邊緣。一般來說數位相機拍出來的JPG圖都是點陣圖喔。

向量圖 是以數學運算為基礎，故點跟點的距離可以用數學的方式重新計算，所以放大後不會有鋸齒狀的產生，向量圖的檔案大多比點陣圖來的小，所以這也是Flash向量動畫會如此盛行的一個很重要的原因。

以下介紹一下Vectormagic網站的功能嘍：

Vectormagic可以將你用數位相機拍出的JPG圖檔輕易的轉換成向量圖形，好處如上可以放大縮小不失真，也可以方便的運用在Flash或是 Illustrator中，雖然Illustrator也有這樣的功能，但是我比較過後發現Vectormagic轉出的向量圖似乎會比較精緻些。

不過，這樣的好康功能也是有限制的，它會限制你單一個Email帳號只能進行兩次圖檔的轉換，但是可以使用10分鐘的免洗郵件帳號，這樣就可以無限次啦^^~

以下是簡單的教學說明：

Step1：點擊Upload Image上傳你想要轉換的影像。（可以點擊放大說明）

vector-magic-02

Step2：編輯你所需要的品質，以及一些顏色的選項，建議三種品質都可以試試看效果，會有不一樣的感覺喔！

vector-magic-03

Step3：準備輸出向量圖，並認證你的信箱，它會用認證信的方式讓你認證你的Email是否有效，並作兩次轉換的限制。

vector-magic-05

Step4：得到下載向量圖檔的頁面，這邊建議是下載EPS的檔案以方便用Illustrator做編輯，當然如果你沒有Illutrator等相關的向量編輯軟體，你也可以選擇下載PNG檔的方式。

vector-magic-061

Step5：下載好後就可以使用Illustrator等軟體進行後續的編輯摟，輸出好的向量圖可以拿來做Flash，或是一般的網頁設計都是很不錯的喔。

附上一張用黑面大的作品去轉的向量圖嘍，可以看看人像部分轉換的效果^^~

vector-magic_demo1
]]> http://kilocooper.com/2009/05/26/vectormagic-%e9%bb%9e%e9%99%a3%e5%9c%96%e8%bd%89%e6%8f%9b%e5%90%91%e9%87%8f%e5%9c%96/feed/ 0 -基礎網頁設計技巧-格線系統- http://kilocooper.com/2009/05/19/%e5%9f%ba%e7%a4%8e%e7%b6%b2%e9%a0%81%e8%a8%ad%e8%a8%88%e6%8a%80%e5%b7%a7-%e6%a0%bc%e7%b7%9a%e7%b3%bb%e7%b5%b1/ http://kilocooper.com/2009/05/19/%e5%9f%ba%e7%a4%8e%e7%b6%b2%e9%a0%81%e8%a8%ad%e8%a8%88%e6%8a%80%e5%b7%a7-%e6%a0%bc%e7%b7%9a%e7%b3%bb%e7%b5%b1/#comments Tue, 19 May 2009 08:45:44 +0000 Kilocooper http://kilocooper.com/?p=77 basic_webdesign_gridsystem

格線系統(Grid System)是用以建構文字區塊以及圖片或是媒體區塊的基本排版技巧。

基本的作法就事先在畫面上拉出等量的導引線，再依照導引線區塊把相關素材放進區塊中，如此作法可以確保畫面中的素材整齊排列而不會淪於混亂。
格線的基準值會影響畫面整體平衡，以網頁設計來說，可用網站Logo大小去訂出相關格線距離。

basic_webdesign_gridsystem_line

(完成圖—-可點擊放大)

Step1：以Logo的大小畫出格線，並注意讓之後加上的影像敘述文字和左側的導覽文字對齊，可以運用"尺標工具"先把導引線畫出。

basic_webdesign_gridsystem_line2

Step2：依照所畫出的導引線，把中間影像敘述文字加上。

basic_webdesign_gridsystem_line3

Step3：置頂的導覽連結跟Logo間的距離、Logo跟影像區塊的距離若是相同的話，會讓人覺得有律動感，頁面也會感覺比較整齊。

Step4：若是影像區塊需要再放大的話，只需要注意，跟上下區塊的距離即可。

Step5：追加的頁尾宣告事項區塊，也是和其他區塊間距是相同的，如此看起來比較自然。

basic_webdesign_gridsystem

後記：此方法容易使用，且編輯出的版型很整齊，但是卻容易流於呆板，這裡可以建議的是，中間的影像區塊可以使用Flash或是Js達到一個動態的效 果，讓網頁不會因為呆板的格線排列而顯得無趣。另外，使用格線系統也不一定全部都要參照格線的區塊去排列，在編輯的時候偶爾可以把導引線拿掉試試不一樣的 排版方式。

PSD檔案下載：Download

參考網頁：http://www.folietto.at/

參考資料：設計的美學WEB LAYOUT  設計師：矢野

]]> http://kilocooper.com/2009/05/19/%e5%9f%ba%e7%a4%8e%e7%b6%b2%e9%a0%81%e8%a8%ad%e8%a8%88%e6%8a%80%e5%b7%a7-%e6%a0%bc%e7%b7%9a%e7%b3%bb%e7%b5%b1/feed/ 0