商品網站 air-optix

這個網站：http://airoptix-ee.jp/



使用視覺的方式第一時間傳達了一個人改造前與改造後的差別

似乎訴求是有沒有載隱形眼鏡的差別

不過有做過修圖的人應該都會發現使用前後的照片

一定有做過後製，像是去掉逗逗或是修掉臉部贅肉等等

不過算是很有創意的網站，讓人忍不住一看再看

WordCount - 86000個單字你認識幾個？

本文轉載自 I am here

發文者： kevingo 位於 上午 12:23

WordCount是一個蠻有趣的網站，他根據「英國國家字料庫(English National Corpos)」中的資料，統計出最常被使用的前86000個單字呈現在網站上。

有趣的是，他利用了很有設計感的方式來呈現這個排列結果：


我們可以在下方的輸入方框中輸入想要找的字、或是直接輸入排名(1~86000)，上面的橫向捲軸就會自動滑動，整個呈現的方式相當的具有設計感：
你也可以玩玩看自己想找的字有沒有在這上面。

有「taiwan」

有「taipei」:


有「yahoo」


有「microsoft」

不過沒有google .. XD



也有「nba」


另外他也提到WordCount之後會應用到任何的文件集或網站，最後目標則是整個網際網路，可能的方式就是推出API給一般使用者使用。

製作拼圖的網站

剛在找製作拼圖的網站或服務

於是找到了這一篇 http://briian.com/puzzle

只要上傳圖片就可以製作屬於自己的拼圖

也可以內嵌在 blog 與 網站上面讓認識的人玩

很不錯，在這裡先推薦給大家

用Twitter寫Flash比賽

本文轉載自 米蘭數位部落格

Twitter還能怎麼玩?

應該很多人都玩過Twitter，不然也應該聽說過Twitter。
Twitter除了能像MSN匿稱一樣的玩，好像也就只是這樣。
不過這幾天看到一個很宅的玩法。(對很多人來說這樣真的很宅)

GSkinner前幾天發出邀請，廣邀所有的ActionScript程式設計師利用Twitter那一欄說長不長的欄位來寫出一個實際上可以跑的Flash。
武林帖在這裡：
http://www.gskinner.com/blog/
遊戲規則如下：
http://gskinner.com/playpen/tweetcoding.html

大致上來說，gSkinner先提供一段gimme code：
g=graphics;
mt=g.moveTo;
lt=g.lineTo;
ls=g.lineStyle;
m=Math;
r=m.random;
s=m.sin;
i=0;
o={};
function f(e){/*src*/}
addEventListener("enterFrame",f);

這段code是不能被修改的，然後這一段code裡有一個地方(標示為/*src*/)需要大家來填入自己的code，最多只允許140個字元。
然後這一整段code就必須要能夠在flash裡被執行並產生一個swf。

140個字元能寫出什麼鬼東西? 很多人應該都會這樣想，所以gSkinner自己先寫了一個只有110個字元的範例：
if(i>400)return;
if(i++<1){x=275;y=200}
ls(3,r()*1e7,1);
mt(s(i/9)*i,m.cos(i/9)*i);
lt(s(i/9)*200,m.cos(i/9)*200);

跑出來的結果像這樣：

Flash動畫

關閉在線播放

這個小型的競賽遊戲這幾天就這樣在twitter上，由一群被大眾視為很宅的程式設計師很歡樂的玩了起來。
才兩三天而已看樣子已經累積了很多。
有興趣的可以到這邊follow一下：
http://tweetcoding.machine501.com/

我挑出幾個比較有趣的，可以看看大家在短短的140個字元裡能發揮出多少創意以及精準簡約的coding功力。請注意有的可能需要flash player 10才可以看。
以下點圖可以連去看flash。

法國影像大師 Christophe Huet一系列創作

本文轉載自 地球的新鮮事

法國影像大師 Christophe Huet一系列創作

這些照片來自於法國的設計師 Christophe Huet ，他曾經設計過著名的Sony Playstation 一系列膾炙人口的廣告，並且也曾經為 Nike, Motorola….等公司設計。

photoshop 的工具列演進

撰文 by 彭其捷

很多時候介面的設計影響了我們使用心情的好壞

不管你軟體或網站功能做的多強大

如果沒有在第一時間抓住客人的眼睛，就會被其他類似的服務所取代

下面這張圖介紹了 photoshop 的工具列演進

我們會發現有越來越好看的趨勢 (或是越來越複雜的趨勢? 其實大抵來說換湯不換藥 )

樂高(LEGO)員工的名片

本文轉載自 地球的新鮮事

樂高(LEGO)員工的名片

如果你有在樂高工作的朋友他可能遞給你這樣的新名片。

當樂高的員工就能得到這樣的一張名片，他們甚至會依造你的外觀做修改（性別，髮型，眼鏡）等等。

我喜歡它.這是樂高利用其品牌創造一些有趣的事物的方法。

您的名片會是什麼樣子？它非常的有趣味性，並且令人驚訝及難忘...就像其他有創意的名片一樣。

教學 - 在Blogger貼圖的方法

本文轉載自 Version 17

• 方法一
  
  
  
  1. 可以從左上方"發表文章"的超連結進去，或者從http://www.blogger.com/，連進去之後會看到下圖裡的畫面：
     
     
  
  
  2. 點擊上圖所指示的位置之後，會進入下圖的畫面：
     
     
     
     我就簡單介紹一下這個介面的功能：
     
     a.點擊這個位置可以上傳多張圖片。
     b.這個是決定貼圖縮圖的大小，並不會影響原圖尺寸，選擇適合版面的就好。
     c.這裡顯示的是妳上傳過的圖片佔了你相簿空間的容量。
     
  
  
  
  


• 方法二
  
  這個方法不只可以在Blogger上面用，只要是可以接受HTML編輯的部落格、網頁、論壇都可以使用，而且每月"上傳流量"100MB，這個月用完了，下個月會重新計算，照片也不會因此就不見。
  
  
  
  1. 首先要申請一個Yahoo的帳號
  
  
  2. 連至Flickr的網站，從下圖的位置登入：
     
  
  
  3. 雖然Flickr本身有網頁上載的功能，但是因為它的上傳工具實在太好用了，所以還是建議用Flickr的上傳工具。登入以後進入主畫面，上傳工具的下載頁面從下圖只是的位置進入：
     
     
     檔案下載的位置：
     
     
  
  
  4. 上傳軟體安裝好的樣子如下圖：
     
     
     
     上傳檔案的方式除了像一般瀏覽檔案新增之外，也可以像在windows底下拖移檔案的方式來進行。
  
  
  5. 檔案上傳好了，接下來要怎麼貼到網誌上呢？到照片列表的地方，點一下照片，會進入只有一張照片的頁面，點一下下圖中那個放大鏡的圖片：
     
     
  
  
  6. 下圖所看到被框起來的部份只的是貼圖之後縮圖的大小，這不會影響妳點下縮圖之後所看到的原圖尺寸，選一個適合版面的縮圖就好了：
     
     
  
  
  7. 最後一步就是把下面的語法貼到妳正在編輯的網誌文章裡面嚕！
     
     
  
  
  P.S.這裡我想可能需要提醒一下，Flickr的貼圖語法要貼在修改HTML的地方，不能直接貼在撰寫的位置。
  
  
  


• 方法三


這個方法並不是真的用來貼圖，而是把圖片上傳到badongo這個空間，在從網誌連結過去，它的優點是永不砍檔。



1. 先從途中的超連結連到Badongo這個空間：
   
   


2. 現在來解釋一下上傳檔案的介面：
   
   
   
   a.選擇妳要上傳的檔案
   b.描述這個檔案(必填)
   c.這個檔案是否適合未成年下載
   d.開始上傳


3. 上傳完成之後會出現跟下圖一樣的畫面：
   
   
   
   a.圖片網址(適合msn)
   b.圖片連結，並非貼圖(是貼到Blog的HTML)


P.S.雖然上傳檔案是可以不用註冊的，但是免費註冊之後上傳的檔案都不會被砍檔。如果是分組報告要傳給同組成員的檔案也不怕找不到，只要上傳一次，這樣會比每次都開msn傳檔好，畢竟adsl上傳的速度都不是很快^^"

教學 - 快速從 picasa 把圖貼到 blogspot 上

本文轉載自 兔兔電腦教室

將 Picasa 與 Blogger 結合是很棒的一件事，

奇怪的是，網路搜尋卻找不到這方面的教學，

那只好兔兔自己來啦。

　

首先您得先安裝 Picasa 這套照片管理程式，

您也得有 gmail 的帳戶，

也申請好了 blogger 帳戶(同 Gmail 帳戶名稱)，

就可進行大量且快速的上傳照片工作了。

　

接著標記要上傳到 blogspot 的圖片，

選好後按 Blog This

注意：這時已登入 blogger 的帳戶了，

若尚未登入，會出現帳戶登入視窗。

　

選擇版面編排方式，並按繼續

　

上傳並輸入標題後按發佈文章

　

完成後，從 blog 看到的結果圖

Photoshop常用檔案格式

Photoshop可以開啟或儲存的圖檔格式有很多，這使得Photoshop可以和其他多媒體軟體更容易整合。

★PSD Photoshop原生格式的檔案，它可以保留檔案的各種設定，例如Layer、Channel、影像模式、特效設定、文字等之類的設定。

★BMP 在PC環境下的格式，電腦桌面的圖檔就是採用這種格式。但是CMYK模式的圖檔不能儲存為BMP格式。

★JPEG(JPG) 它是一種破壞性、減損性(Loss)壓縮的圖檔格式，它在存檔時會排除掉部份的影像資料，因此影像經過壓縮後存成的JPEG圖檔，畫面品質會降低，但是相對的圖檔體積會變的很小，也因此JPEG格式的圖檔，普遍被運用在網頁中需要保留全彩模式或是顏色較複雜的圖片上。

★GIF GIF是一種採用減色方式的壓縮圖檔，檔案體積會因減色而縮小，本身最多只能支援到256色，因此它多用來表現顏色單純且線條分明的影像，例如LOGO、卡通圖案等，由於體積小且可以支援Photoshop的透明背景，因此網頁上圖檔也多採用GIF格式。

★EPS 它可以儲存點陣圖及向量圖形，但較適用於向量圖形上，一般使用在作平面輸出的完稿製作上

★TIFF(TIF) TIFF格式可以使用在跨平台、不同作業系統的軟體上，並支援全彩模式及alpha圖層，因此在平面排版上，此格式的圖檔多被普遍使用。

★PDF 可同時應用於網路文件傳輸及印刷設定的檔案格式。

★PNG 專為網路量身打造的圖檔格式，可以壓縮的能力強大，更可以保留Alpha Channerl，與Flash動畫整合效果最佳。

PCX dos和windows下相容的圖檔格式，在windows下支援1600萬以上色彩，但在dos只支援256色。
PXR pixar工作站的圖檔格式

TGA 32位元圖像，是3D動畫及視訊整合常用的格式。

PICT Mac專用的圖檔格式。

SCITEX CT scitex工作站的圖檔格式。

影像存檔格式依使用需要分類如下：

◎網頁設計：GIF、JPEG
◎平面設計：PSD、JPEG、TIF、EPS
◎電腦桌面：BMP
◎網路文件：PDF

影像分類 - 點陣圖與向量圖

電腦上的圖像可以分成點陣圖跟向量圖兩類。在表現濃度及色彩的精細漸次變化上（例如相片或點陣繪圖影像中），點陣影像是最佳選擇。而對於文字，特別是小字，或不論縮放比例為何都必須線條清晰之鮮明的圖像（如商標），向量圖像則是最佳的選擇。

甲、點陣圖 (bitmap或raster)：

Photoshop與其他繪圖及影像編輯程式，都能產生點陣影像（也稱為「點陣化影像」）。點陣影像利用一格格稱為「像素」（Pixel）的小方塊來呈現影像。這些小方格是影像中最小的單位，每個像素都指定有一特定位置及顏色數值。處理點陣影像時，您編輯的是像素，而非物件或形狀。

點陣影像與解析度（Resolution）有關，換句話說，它以固定數量的像素來表現其影像資料。解析度，指的是單位長度上像素的數目，單位可分「像素／英吋」或是「像素／公分」（pixels/inch；pixels/cm）。解析度的設定是決定列印品質的重要因素，高解析度的影像運用較多的像素，所以可呈現出比低解析度影像更細膩的色調變化，相對的檔案體積也更大。所以，若在螢幕上以高倍率放大檢視，或以太小的解析度列印時，點陣影像可能會遺失細節並產生鋸齒，如下圖：

理想的解析度的設定需依據工作內容調整：
◎網頁設計-- 072 pixels/inch (dpi)
◎報紙排版-- 150 pixels/inch (dpi)
◎平面設計-- 300 pixels/inch (dpi)

乙、向量圖 (vector)：

以「向量」定義之直線及曲線所組成，這類圖形使用數學運算式來描述組成影像的目標位置和特性（譬如形狀、弧度、線條和色彩等）。由於圖形是以數學運算式來表示，所以這類圖形的優點是圖形可以輕易被放大、縮小、旋轉而絲毫不影響到原有的畫質與檔案大小，缺點則是圖形靠數學運算式成形，所以無法表現出圖像裡豐富細膩的質感與色彩變化，如下圖。

修改 blogger code (1) variable definitions

variable definitions 部份

name：表示此屬性的識別字母或數字，名稱不能重覆
description：此屬性的相關敘述
type：可設定="font" 來表示字型或="color"來表示顏色，也可以設定automatic
default：預設值，若為字型，要照( font-style,font-weight,font-size,font-family)來填入
若為顏色，要填入十六進位顏色代碼，如#FFFFFF
value：與default類似，但是此為真正要用的值

#要存取上面設定的屬性，可將變數前面加上 $ 即可，如 $mainTextColor

如下

body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
color: $mainTextColor;
background: #692 url(http://www.blogblog.com/moto_son/outerwrap.gif)
font-size: small;
}