更方便展示圖片的好幫手 │ Autoviewer

日前從雜誌得知New York Times的新圖像網誌LENS，便好奇的上去看看
一瀏覽馬上就被它吸引住了，姑且不論內容
這版面…在我心中真的是一百分
不但讓讀者非常直覺得選取閱讀，圖像部份也相當完整的呈現出來
經過一番仔細研究後，我決定要來試試看，模仿一下


當然，我並沒有想要重作一個FLASH網頁，因為…我不會做Orz
所以開始來找一些替代的方案，尋了一下，我發現了一個之前有嘗試過的好物，Autoviewer
雖然這樣需要另外寫一個網頁來內嵌
不過提供了更方便的瀏覽照片方式
唯一殘念的是，我還是不知道怎麼用同樣的方式切換文章，以後慢慢研究XD



Demo樣式，其實就是上一篇文章啦XD：Demo

典雅小改版

沒錯，這張就是這次改版所有新增的相關插圖
自從上次收假回部隊，站哨的時候腦袋瓜都在想是不是該來改個版面，當然也有想爸媽和想女友啦XD
花了兩天的時間，全新的版面終於出爐囉

此次改版主要是從版面美工及配色下手，內部主要架構一樣是沒有變的
配色方面主要利用酒紅色、白、灰等做搭配，出來的視覺效果比我原本想像中的要好很多
本來擔心用全白的backgroud color會不會太刺眼、單調，沒想到和酒紅色竟然如此搭配

除了配色外，終於做出了新LOGO
本來的"媽哈"LOGO有點看膩了，加上有點複雜，一直有想砍掉重鍊的想法
但是想歸想，始終沒有去行動，剛好趁這次改板有idea的時候來好好施展一下不及格的美術功力XD



這張是網誌的header，本來網誌得標頭是挑圖片來放，每次看了總覺得沒什麼特色
與其說沒特色不如說感覺缺了點什麼…整體性吧，畢竟這是一個Blog的招牌，大家一進來第一個看到的東西
應該要以簡單明瞭的形式來表現，於是利用新設計出來的Logo (媽哈哈哈)™延伸出網誌的招牌



這是放在網誌最下面的，以前只是單純的用文字來敘述，缺點當然就是樣子是依個人瀏覽器來表現
有些人可能是新細明體，有些人是微軟正黑體…等，想一想，乾脆作成圖片檔一勞永逸



這是這次改最大的東西XD，說改最大是因為和原本的LOGO已經完全不一樣
本來是紅綠的媽哈，用來代表個人的圖示，雖說想換成圖形化的Logo卻始終不知道怎麼著筆
在多方嘗試後，我開始思考"媽哈哈哈遊樂園"是什麼，有什麼象徵性的東西
今天看到一個網友拍攝兒童節的作品時，突然靈光乍現
"媽哈哈哈"就是很快樂的行為，何不用一個快樂的小孩來構圖呢？
有了這個想法後，開始思考要怎麼去表現
想過用一張插腰笑得很開心的剪影，但是又覺得這樣不夠簡單大方，我想要的是幾個幾何方塊組合而成的畫面
最後，找到了一個好的樣本，那就是"Wall-E"裡的EVE
利用一個圓，四個相同的盾牌做組合，一個手舞足蹈的媽哈小孩出現了
（OS：哇哩勒，還真會掰…XD，不過就是一個亂畫出來的圖示嘛）



此為RSS訂閱鈕，和新logo簡單的結合，感覺比較有個人特色XD
除了上述介紹的這些外，其餘的大致上和以前都一樣，只是logo的地方改成新的logo

除了外觀外，還加了幾樣小元件
包括LVCHEN大的Blogger 標籤選台器 2.0、最新回應 v2.0和Chagg's 嘴砲日記: Blogger 最新文章功能

花了兩天，大部分時間都只是在腦中創作，好像也沒到創作的境界XD，不過努力下來還蠻滿意成果的
瀏覽起來也很舒服，內容也一目瞭然
每次改版都覺得越來越漂亮了，呵呵，還真會自我陶醉阿！

SimpleViewer

關於如何更好的show出照片，已經是現在我改template的最大方向了，之前所用的LightBox 2，雖然有著炫目的效果，但是
執行速度一直不是很理想，執行效率和電腦系統、瀏覽器之效能有很大的關係，加上除了秀圖片以外，並沒有辦法很好的分類
（如相簿之類的），時間一久，要找出原本的文章照片連結又是一番功夫，當然如果付錢升級flickr會員等就沒有這些問題，
不過時機歹歹，能省則省阿XD

再次尋覓後，發現了這套SimpleViewer，不但速度快，而且會隨著瀏覽者視窗解析度去改變圖片的大小，初步改出來還蠻滿意的，還有幾天收假，做個相簿順便整理一下之前上傳的照片，如果沒有懶惰的話...哈。

個人化悠遊卡

自從大四為了在課堂上介紹RFID而把悠遊卡表面撕開後，我的悠遊卡一直呈現線圈晶片裸露的狀態
雖然有想過買個時下的卡片貼美化一下，但是那種雷射反光真的不是我的style，怎麼看都覺得很醜
好不容易找到一個比較正常的，又因為貼紙太薄的關係，貼起來相當不平整。

昨天在一次偶然的情況下，不小心把原本的貼紙撕了一半起來
於是心一狠，就全部把他處理掉，打算自己做一個


俗話說"心動不如馬上行動"，大計畫就在我心中描繪起來了

1.首先，我先利用光影將要用的圖片排版成我要的大小，皮夾照是最剛好的，到時只需要做小小地裁切


2.等圖片排版ok後就準備拿去沖洗店把他print出來囉。我是選擇印霧面的，一來不會沾指紋，而且看起來質感頗佳，美中不足的是，洗一張3*5竟然要五塊錢...OOXX

3.將悠遊卡放在要裁減的照片上面，描邊...and勇敢的剪下去，如此一來"卡片貼"就完成了66%了，就差一個貼字囉XD

4.再來就是要將兩者合體，我是選擇用膠水，一來比較密合，二來也不會增加太多厚度，上膠時四個邊都要抹到，才不會發生撩起來的慘狀

5.將照片貼到悠遊卡上，用重物壓平，順便把邊邊滲透出來的膠水擦掉，再等個十幾分鐘就可以出爐了

6.最後，將卡片拿起來稍做修邊就大功告成囉



基本上做這個還真的沒什麼XD，不過對於成品我還蠻滿意的，比我想像中的還有優
不但漂亮又有特色，完全看不出來是另外貼上去的，爽度100分。

八月。新開張 Part2

改頭換面後，記錄一下改版的過程。

首先，因為我的blog是以照片為主題，在看了一些國外的攝影部落格後，就萌生了改版的念頭。觀察許多版面後，發現其中有不少共通之處。

一、幾乎都是一個欄位而已，我想是這樣的版面，才可以充分的利用空間，畢竟主角是照片，以我用Google Analytics分析來我的部落格之使用者的習慣，螢幕解析度為1024*768還是大多數，所以還是以可以不需要左右轉動的設計為主，當然，厲害的玩家應該有辦法寫出隨著螢幕解析度的不同而有不同的版面，但是，我太懶惰了XD。

二、SideBar原件簡單化，版面簡單化。簡單大方的設計，是必須的，太雜亂反而會有喧賓奪主的感覺，所以最後我採用全部收縮的樣式，這樣不但可以保持介面的乾淨，更不需要像以前一樣，怕邊欄擠爆了，就不敢放太多東西，現在放再多都不怕，因為收起來就好^^，想觀看的人只要點一下就會打開，還蠻不錯的感覺。

大致就是上面兩項重點，總歸一句，簡單明瞭，更能凸顯作品。

接下來就是自己實作的一些步驟 :

1.基本版面 : 基本上，我很懶，所以要我從白紙變出東西來實在是太累了。在網路上找到了這個樣板，PhotoBlogII，，覺得很符合我想要的樣式，就決定以這個為基準了。


2.繼續閱讀套件 : blogger固然好用，但是最為人詬病的還是沒辦法縮文章，導致整個版面落落長XD，不過很多高手都有許多解決方案了，大家可以網路找一下，還蠻多資源的， [BLOGGER]繼續閱讀懶人版(For Blogger New)。

3.Comment : 新版的Blogger已經可以將回應至於文章底部，但是我還是覺得要留言還要跳一個版面時再是有點麻煩，到是這個Intense Debate和Blogger配合的俏到好處，只要將自己的template上載，他就會自動安裝，非常容易上手，留言的方是很直觀，跟無名的很像(個人覺得無名很鳥，雖然我是交大資工畢業的，但是他的留言系統真的是好用)。

4.sidebar收縮 : 讓側邊列 (Sidebar) 的元件能夠展開和摺疊 (Element Toggling) ，這裡面有詳細的教學，真的覺得如果你是愛加東加西的話(像我一樣...)，這個絕對很合胃口。

以上大致是幾個主要的原件，當然還有一些小東西就不多介紹了，總之，還是要再說一次，改版成功。

八月。新開張

哇!! 我現在的感覺是好累。

終於還是忍不住改了版面，現在這樣感覺好清爽阿，一直以來，都覺得sidebar那邊有點雜，想拿掉又覺得怪怪的，但是不拿掉又佔了很多版面，畢竟我還是想要放大張一點的攝影作品，所以...花了一個晚上，構思如何排版，開始coding，怎麼好像回到以前XD。

恩，很有成就感，哈，來睡覺了...Orz，明天還要早起。

Blogger歡樂表情插件

剛剛在網路上看到一個"Blogger歡樂表情插件"（點進去有教學），好可愛阿，，馬上用一個，可惜沒有黑底白線條的，乾脆換成白色的背景，換個口味好了。

這樣子感覺生動多了，哈，很棒喔。

精緻世界 - 偽移軸鏡

仿真模型，從小就對這類的事物特別有興趣，舉凡小火車、小房子...，mini版的東西我都愛。

前一陣子看到一篇"高雄模型"，非常為之驚豔，原來移軸鏡這麼強大，超愛這種FU的，雖然很假XD，可是假的很有質感。如果我有一台單眼，一定要去買一顆這種鏡頭，酷歪歪。

前幾天在網路上找到有關"偽移軸鏡的作法"，剛好現在也在玩Photoshop，就來做做看，沒想到真的簡單XD。







大家一定很好奇，為甚麼會這樣呢？會有這樣的視覺效果，我想應該是大腦騙了我們XD。依正常大腦分析，一個遠景的場景，事物應該是差不多清晰的，反之，一個放在我們眼前的東西，距離越近，相對的前後景像就會失焦，眼睛可以鎖定手指頭，拉近拉遠試試看。利用這個概念，把照片修成前後模糊的感覺，大腦接收到的影像就會讓我們覺得這是在我們眼前、離我們很近的東西，也就是為什麼看起來像模型(以上是我大膽假設XD)。

網路上還蠻多教學的，大致是選擇快速遮色片->漸層->回到正常模式->鏡頭模糊，四個步驟就搞定了，當然由上往下看的照片，效果較佳，詳細教學這裡就不多說了，關鍵字"偽移軸鏡"，就一堆教學囉，大家有空可以玩玩看，真的很好玩XD。

簡單風格

稍微修改了一下網誌的版面，改回更簡單的風格，果然看比較清爽。

最近這幾天，越來越覺得版面有點太花俏了，顏色太多，線條太多，所以決定來個不小的小改版XD。

第一、先是修改CSS，把原本sidebar的分隔線和Block全部拿掉。第二、將多餘的圖片都拿掉，個人簡介也拿掉，一直以來都覺得個人簡介有點冗...，拿掉果然一整個舒服。第三、把原本的文章列表砍了，用回原本blogger內建簡單的列表，比較耐看，讀取的速度也快多了。第四、做了個標籤雲，感覺還不賴XD，質感level up，Google就可以找到一堆作法了。第五、整體配色就是黑色、白色、加上少許紅色點綴，視覺效果還不賴。

對於最後的成效還蠻滿意的，跟之前大改版後的樣子也差蠻多的，不過老實講，就是因為沒什麼美術天份才要搞個極簡風XD，因為也只能做到這個樣子，殘念。

探索。攝影。分享

攝影，現在已經變成了我生活的一部分了。

我還是個新手XD，不過慢慢的玩攝影也玩出了一點心得，和大家分享一下。

對於拍出一張所謂"好看"的照片，我覺得是有分三個層級的，第一當然就是構圖，要怎麼表現出照片裡的東西，要怎麼襯托出來，我覺得這是最重要的，因為這是唯一一個後製沒有辦法做出來的東西，至於如何構圖，基本上我都是運用2：1比例，也就是將螢幕化為九宮格，將拍攝景物的分界把放於2：1的中間點，不過只是一個大概的概念，因為這個比例是人類看了覺得最舒服的比例，也就是黃金比。

利用樹的層次感，會自然而然的將焦點放在島嶼上面，比起將島嶼放中間的拍攝方式，個人偏好這種方法。


第二點是測光，好好運用點測光可以避免拍出人黑或是背景白白一片的現象，目前一般人幾乎都是用全面測光，壞處是如果太陽太大或是其他因素，就會造成整個畫面偏亮或偏暗，所以測光也是重要的一環。

第三點是景深，運用景深將想表現的物體更加襯托出來。

構圖第一，測光第二，景深第三。這就是我的三部曲XD，一點小小的心得

補上兩個網站，我覺得還蠻受用的
Mobile01 首頁 » 相機與攝影 » 攝影觀念及技術
[攝影基礎入門與技巧分享] 有關攝影技術及問題之相關討論



後言：

其實拿小DC真的可以拍出很不錯的東西，加上一點後置的技巧還真的不會輸給DSLR，不過要再更進一步的話當然就要存錢灑下去囉XD，玩過KIKI的單眼後，真的還蠻心動的，畢竟小DC雖然可以拍的漂亮，但是還是有個極限，我覺得最大的極限在於燈光，如果光線不好，DC真的是會死的很慘，完全拍不出好東西，先趁沒錢的時候先把拍照技巧磨一磨，等以後買了單眼就可以大顯身手了，拍出好照片，真的不難。

Iron Man 鋼鐵人

停了好久的電影心得，最近都沒有什麼電影可以讓我回味無窮，直到今天去看了IronMan。

一直以來都覺得MARVEL系列電影非常對我胃口，X MAN、蜘蛛人、一直到現在的鋼鐵人，果然沒有讓我失望，看完還是一樣熱血沸騰，有男孩喜歡的機械，有女孩喜歡的熟男，有大家都愛的幽默，真的是一部難得的好片，個人覺得比蜘蛛人更勝一籌，好想再看第二次阿XD。

話說今天回來，就上網找找看有沒有帥氣的照片，可惜圖片上的IronMan看起來呆呆的，遠不及動態影像來的有魅力，所以決定用軟體加以修改一下XD，順便試試看新版的photoimpact效果如何，果然號稱人人可以當畫家的painter沒有讓我失望，動一動滑鼠，不但可以有個人風格，看起來還亂屌的，看來該是去買個手繪版的時候了。


桌布1280*1024 只有一個帥字可以形容

小型生態缸製作

前一篇才說要忍住，沒想到過了一天惡魔還是戰勝了，於是開始計畫我的第一個生態缸。準備的材料有，15*10*25的缸子(長條形的，比較符合樹蛙的習性)、樹皮、樹枝、默斯、生化棉，塑膠板，大致上是這些，本來想要增加過濾系統，但是缸實在是太小了，所以決定用滴管手動換水，確定材料後開始動手。

第一步：先把樹皮排成自己想要的樣子，黏起來。



第二步：底部鋪上一層生化棉，主要是怕積水，因為沒有過濾系統，所以水量控制，生化棉上面在舖有排水孔的塑膠板，如此一來基本的都OK了，要注意的是，我有留一個角落可以直接看到缸子的底部，如此一來要吸髒東西也比較方便。

第三步：把樹皮和塑膠板間的空隙都用默斯塞住，地面也舖一層默斯，主要是用來保溼。



基本上，我的超簡單生態缸已經完成了XD，還真是沒什麼內容，哈，不過因為缸子很小，所以也不希望用的太複雜，放了一個小容器可以當水池，換水就直接拿起來換就OK，不過雖然不想要太雜，但還是覺得少了點什麼，於是跑去花市買了一盆波士頓蕨，剛好角落有一個洞，就種進去了。



水的部份，我是使用噴霧的方法，一天三次，因為這樣子才不會有過多的水分積在下面，基本上，水都會被樹皮、植物吸收，積水的問題並沒有我想像中的嚴重。由上往下看還真有FU，味道聞起來一整個很有森林的感覺。



今天已經破不急待的放了一隻美國樹蛙進去，經過了12個小時，裡面還是十分潮濕，溫度也很正常，應該是沒有悶熱的問題，擺在書桌上，感覺真的很不錯，綠油油的很舒服，持續追蹤看看效果如何。最後附上設計圖。

Blogger 版面問題 in IE

一直不是很喜歡使用IE的原因是永遠不知道它會出什麼問題，不過大部分原因是我自己愛亂搞把電腦搞掛了XD，昨天高董跟我說他開我的網誌都會網頁出現錯誤，才發現，一直使用FF的我完全不知道有這個問題，對於大部分使用者都是使用IE的情況下，只好展開了修復的行動。

爬了一下PTT的BLOG版，Google了一下相關資訊，發現這個問題已經存在好久，基本上，應該算是Blogger的Bug，當然，如果是用最陽春的內建版面就不會出現麻煩，不過喜歡改來改去的人，基本上是逃不過這一劫的。

看了有關資訊後，列出了以下辦法。

一、有的人說在範本的

1. 〈head>
2. 〈title><$BlogPageTitle$>
3. 〈$BlogMetaData$>
4. 〈style type="text/css">

四行中，二三行對掉就OK，不過很囧的是，這只適用於套用基本範本的使用者，如果是其他的，可能會找不到第三行這個東東，所以第一個辦法，失敗。

二、調整 sidebar 跟 main-wrapper的邊寬值，將main-wrapper寬度調小一點就不會被擠掉，基本上，這個方法也許可行，不過太麻煩，還要去修改CSS，所以...失敗again XD。

三、終於發現了元兇，是繼續閱讀搞得鬼，相信許多人都會希望Blogger跟其他的網誌提供公司一樣擁有繼續閱讀的功能，一來以維持版面的簡潔不會使每個文章看起來落落長，二來也希望大家不只是轉動滑鼠，而是真的有click。繼續閱讀的作法就不多說了，找一下就很多，目前最多人用的就是手動置入〈span id="fullpost">的用法來蓋住文章內容以達到繼續閱讀的功能，不過Blogger奇怪，就是當你在它的編輯器移動照片之類的動作，便會在段落的部份自動幫你加上〈span id="fullpost">，也是因為這樣，在IE上就會造成編碼錯誤，這也是為甚麼會開網頁不完全的原因，所以編寫時要特別注意〈span>的放置位置。

修正後終於可以在IE正常開啟，不過還是有小地方怪怪的，下次再研究，Bug太多，改也改不完XD。

改！改！改！

今天搞了一個下午，終於把自己的BLOG版面搞到自己滿意了，本來沒有要這麼大費周章的XD，想說把去年資工營做的那種簡單的的樣式整個遷移過來就OK，沒想到人算不如天算，竟然忘記密碼，進不去工作站...Orz，只好自己來了，憑著以前的印象，隨便抓了一個框架，開始改，本來想用繽紛一點，可惜美術天份不夠，不懂配色(OS:如果有家宏以前那本配色圖表就好了>"<)，乾脆來點保守的，簡單大方，title的圖片也想了好久，本 來想用自己的愛魚，可惜照相技術太差，沒有一張比較上相的，問了閃光該怎麼辦，果然給了一個很好的意見，PUMA，科科，真的是超可愛的，看了心情就很 好，PUMA是隻前全寢一起養的胖貓，很壞但是很可愛，這個版面應該會撐很久XD改一次好累，懶得在改了。 話說有用Blogger的朋友其實有許多範本可以用，google一下"blogger templates"，就有一大堆了，套用的方法也很簡單，摸索一下應該就會懂，提供一個網站給大家參考，JOAOKO'S Blog，裡面有許多相關的教學，非常值得一看。