2014年6月30日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201406/css-google-loading.html

摘要:
自從使用了智慧型手機之後,就常常在觀察手機 UI 的設計細節,隨著扁平化設計風格的興起,Google 的載入進度動畫也就變得相當的扁平風且具有設計感,後來發現不只手機的載入進度是用扁平化的風格,連 Google plus、Gmail...等 Google 產品都是使用類似的載入進度動畫,一時興起,使用 CSS3 做了一組 Google 的載入動畫。

2014年6月28日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201406/css-cubic-bezier.html

摘要:
Cubic Bezier 就是一個具有兩個端點與兩個貝茲控制點的曲線,( SVG 裏頭 Path 的 "C" 參數 ),其實這個利用貝茲曲線的控制方式在大多數的 CSS 中都不常見,主因這是 CSS3 裏頭動畫的速度控制選項,通常我們在設定動畫的速度,大多直接使用 ease in 或 ease out 來取代,但藉由 Cubic Bezier,我們更可以創造出各種不同速度控制的動畫效果。
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201406/oxxo-web-design.html

摘要:
一直以來我就對於網頁設計相當的感興趣,也因為對於網頁設計有著極大的興趣,直接就影響了我走向了網頁前端技術這條不歸路?!說實在我會的前端技術,大多還都只是網頁在視覺設計這一部分,畢竟身為一個台藝大出身的學生,專長還是比較集中在視覺創作這個部分,不過也因為學習的技術越來越多也越來越專精,也就開始慢慢地做出我自己想做的東西和特效,光是這一點就很值得開心了!以下分享一些自己這一年來的一些網頁設計版型,也期許自己能做出更多好的作品!

2014年6月26日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201406/svg-14-control-SVG.html

摘要:
學會如何繪製 SVG 不稀奇,厲害的是學會如何利用 JS 和 CSS 去控制 SVG,以下將介紹兩個要注意的小地方,這也是我自己在學習的過程中所遇到的問題,搞懂這兩個小眉角,對於控制 SVG 一定就會更得心應手。( 當然後續還會有不同的小技巧,不過就等我寫到了再一起分享吧! )

2014年6月25日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201406/svg-13-filter-feGaussianBlur.html

摘要:
使用過 Photoshop 都知道,模糊就跟斯斯一樣多種,其中的一種就是「高斯模糊」,同樣的,在 illustrator 裏頭也有高斯模糊,因此 SVG 也就擁有高斯模糊的能力!以往我們單純用網頁製作「假」的高斯模糊,常常是將十幾二十張圖片更改透明度與些微的座標差距,來做出類似的效果 ( 可以參考這個我以前做的效果 ),這個方式其實在一些 3D 軟體做景深渲染的時候也常常使用,不過這種方法在網頁上必須撰寫一些程式才能辦到。今天有了 SVG 的 feGaussianBlur 濾鏡,我們只需要下幾個指令就能夠達到模糊的效果,且還能夠使用程式做互動的反應,是相當方便的喔!

2014年6月24日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201406/svg-12-pie-chart.html

摘要:
在之前我所撰寫的 SVG path 的文章 SVG 研究之路 (5) - Path 進階篇 當中,詳細介紹了關於 path 的 A 參數用法,回想一下,A 參數是拿來繪製弧形,因此這篇就藉由 A 參數的精妙之處,來繪製圓餅圖;什麼是圓餅圖呢?圓餅圖 ( pie chart ) 是在各式各樣的圖表中,常見且最基本的圖表類型,雖然我們常常使用 Excel 等試算表工具來繪製,但往往在轉成網頁的時候,就必須轉換成圖檔,無法動態的產生圓餅圖,不過在瀏覽器進步的今天,我們就可以藉由程式來繪製出相當精緻的圖表。

2014年6月22日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201406/svg-11-filter-feColorMatrix.html

摘要:
feColorMatrix 顧名思義就是色彩矩陣的濾鏡,用一個矩陣的計算,將圖片的色彩重新計算後輸出,便可以達到各種不同的色彩變化效果,在此之前,要先介紹一下圖片顏色定義,因為如果不了解圖片的顏色組成原理,就會無法明白色彩該如何去計算。( 可以先閱讀我的這篇文章:淺談位元色版 )

2014年6月21日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201406/color-channel.html

摘要:
這篇我們來探討一下基本的位元色版的原理,為什麼要寫這一篇,主要因應現在當紅的 HDR 與 EXR 的檔案格式,必須要介紹一下基本概念,而這些概念間接也會影響到像 SVG 、HTML...等繪製向量圖形的計算,不然屆時搞不清楚,就無法做出完美的效果呈現。

2014年6月18日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201406/svg-10-filter-1.html

摘要:
這篇主要探討 SVG 的濾鏡:filter,是 SVG 裏頭比較少人著墨的地方,但卻也是可以讓圖形變化最大的地方,濾鏡不外乎像高斯模糊、混合、色彩變換...等,在我們使用繪圖軟體的時候,濾鏡是最常用到的功能之一,隨著瀏覽器的進步,幾乎所有的瀏覽起都支援 SVG 的濾鏡了 ( 各家瀏覽器 SVG 支援度 ),但是濾鏡牽涉到太多演算法,例如什麼純量乘積、阿達馬乘積...等,我實在也還沒搞懂,所以這篇先將濾鏡表列出來,之後再來慢慢研究。

2014年6月16日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201406/svg-09-clipping-masking.html

摘要:
使用過 Illustrator 的朋友應該都會知道,裏頭有一個重要的繪圖功能,就是剪裁和遮色片,這也是在圖形處理上頗為重要的兩個功能,而在 SVG 裏頭這兩個功能也沒有缺席,和之前 製作文字跟隨路徑 以及 漸層填色 相同的做法,在製作剪裁或遮色片的時候,我們也必須先建立定義檔defs,就可以輕鬆做出 Clipping ( 剪裁 ) 和 Masking ( 遮色片 ) 的效果囉!

2014年6月15日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201406/svg-08-text.html

摘要:
「文字」雖然字面上的解釋很簡單,但深入研究之後,發現 SVG 對於文字的設定,比我想像的複雜得多,但也因為有了這些我所不知道的設定和屬性,讓原本單純樸實的文字,更添加了幾分華麗的色彩和變化,這篇將介紹文字基本的屬性設定,以及一些進階的文字用法,學完之後,也就更能使用程式來控制文字,製作出與眾不同的動畫和特效了。

2014年6月14日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201406/svg-07-fill.html

摘要:
介紹過了 stroke 邊框之後,接下來就要介紹 fill 填色,填色分成三種,一種是純色的填色,一種是漸層的填色,最後一種是利用圖案的填色,一張圖片的好看與否,很重要的一部分往往取決於色彩的呈現,因此掌握填色的技巧,對於圖片的表現也更能引人入勝,而 SVG 的好處,填色也是向量化,更可以用程式去控制色彩,以下將分別介紹三種填色的方式:

2014年6月13日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201406/svg-06-stroke.html

摘要:
前面的章節都在介紹繪製形狀,而我都是使用單純的線條來描繪形狀的邊框,因此這篇就來聊聊 stroke ( 邊框 ) 的設定,其實在 SVG 裏頭邊框的設定很簡單,如果手邊有 Illustrator 的,邊框的設定就像裏頭筆畫的線條設定一樣,只是一個由視覺化的面板控制,一個由程式碼撰寫,有興趣的話,可以直接繪製線段存成 SVG,就可以很清楚了解邊框的設定。

2014年6月12日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html

摘要:
看完了 Path 大部分的指令,這一篇就要介紹 Path 最困難的 A 指令,什麼是 A 呢?就是「弧形」 ( Arcs ),更簡單來說就是畫個橢圓圓弧 ( Elliptical Arc ),這裡可能會有人有疑問,為什麼是橢圓圓弧,而不是圓形圓弧呢?因為橢圓形可以做成圓形呀就是這麼簡單ㄎㄎ,因此, A 指令裏頭參數非常之多,竟然高達 7 個參數,以下就一一為大家解釋這些參數。

2014年6月11日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html

摘要:
接下來要談談 SVG 裡頭最為重要的元素:Path,因為SVG 是向量圖,所有的物件和元素都是由 Path ( 路徑 ) 所組成,所以 Path 就具有相當多的指令讓使用者設定, 換句話說,搞懂了 Path 就等於搞定了SVG ( 或是搞定 80% 的 SVG,不管啦 )。

2014年6月10日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201406/face.html

摘要:
這是自己很久以前的一系列作品,單純從表情進行發想,延伸和拓展,原本期待能夠有一系列的創作,最後只做了這幾張,真是又汗顏又殘念。其實我原本的專長就是 Photoshop,以前在學校和網路上都在分享 Photoshop 的技巧,說穿了影像合成其實沒什麼,重點是要訓練自己對光影的敏銳度,後來在網路上還看到有人分享了我這系列的作品 ( 還有人用其中幾張做了算命的圖?! ) 以後如果有機會和閒暇時間,再來考慮把這系列給擴充吧!

2014年6月9日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201406/svg-03-basic-shapes.html

摘要:
通常我們在學習向量圖,第一個一定是學基本形狀,基本形狀不外乎這幾個:矩形、圓角矩形、圓形、橢圓、多邊形,因此 SVG 的基本形狀也從這幾個出發,當然,如果會使用 Illustrator,我也會建議直接用 Illustrator 拉形狀,然後儲存成 SVG,再去理解 SVG 的程式碼奧妙是很不錯的方式。
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201406/svg-02-layer.html

摘要:
許多的設計師談到向量繪圖,總是相當的興奮,但只要一提到向量繪圖裡的程式碼,馬上就暈頭轉向不知所云,這篇將要以 Illustrator 做為輔助工具出發,帶領大家能夠更了解 SVG 的架構。

2014年6月8日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201406/svg-01-intro.html

摘要:
SVG(Scalable Vector Graphics)為一種可縮放向量圖形,是基於 XML,用於描述二維向量圖形的一種圖形格式,而 SVG 也是由 W3C 所制定的開放標準,老早就成為網頁標準,只是一直以來因為瀏覽器的不支援,導致無法廣泛被利用,雖然我自己在兩年前就開始玩 SVG,不過也因為瀏覽器的緣故玩一玩就荒廢了 ( 當然連手機瀏覽器都不支援 ),近年來瀏覽器等級的大幅提升, SVG 又開始變得火熱起來,又燃起了我心中的那團火呀!

2014年6月7日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201406/dreamsmile-video.html

摘要:
這是為了之前公司的一個 App 產品 Dreamsmile 所做的一支形象影片,在完全沒有資源的情形下,硬生生地用畫的把這整支影片給畫出來,而且製作人員只有我一個人,包辦了劇情、腳本、畫、影片、音效和音樂,總共花了約兩週的時間製作,兩週的時間修改,真是累死我呀!
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201406/css-icon-font.html

摘要:
之前介紹過 Web Font 的使用方式,這篇則是介紹 Icon Font 的使用,Icon Font 顧名思義就是使用小圖示 ( icon ) 當作字體,只需要打入對應的代碼,或是加上固定名稱的樣式,就能夠產生一個小圖示。這種方式的好處其實不少,因為使用 Icon Font 除了可以減少圖片的使用率,也可以讓 icon 的大小、顏色都能夠像文字一樣隨心所欲的調整,但相對的也是有些壞處,例如一定得使用外部載入字體、icon 只能夠使用單色 ( 因為文字只能單色 )...等。

2014年6月6日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201406/css-web-font.html

摘要:
隨著雲端的越來越普及,許多字體的使用也逐漸躍上雲端,Google Fonts 是我很喜歡使用的一個雲端字體工具,最主要是因為完全免費,加上 Google 的空間和速度,讓許多有特色的英文字體可以在網頁上良好的展現,通常 web font 的格式不外乎就是 woff 這種格式 ( Web Open Font Format ),檔案大小會比一般的 TTF 來得小,但隨著瀏覽器的進步,也越來越多的字體使用 svg 的圖形格式,也可以做出 icon font,至於如何製作,會在另外的篇幅介紹。

2014年6月4日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201406/google-code-prettify.html

摘要:
這是一套由 Google 出品的程式碼美化工具,主要用來美化分享在網站上的程式碼,通常我們的程式碼會使用pre的標籤包覆,但內容的樣式卻是非常的死板,若自己進行樣式的編輯,而要使用各種不同的顏色來滿足各種不同的代碼,這項工程更比登天還難,這時候就很需要程式碼美化的工具。
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201406/scss-01-install.html

摘要:
SCSS 是我在 2013 年才接觸到的技術,其實也不算新,因為在我學習這門技術的時候,已經有不少相對應的工具與文章誕生,也因為看了這些教學和工具,才讓我深入地去學習一套好用的工具!

2014年6月2日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201406/css-word-break.html

摘要:
由於響應式網頁技術的興起,間接造成排版上不小的挑戰和創新,其中的一小部分就是文字的排版, 這篇就來介紹一下在 CSS 裏頭文字的斷行,為什麼要特別寫這一篇呢?因為在做這個 blog 的時候,我竟然也遇到了斷行的問題,解決了文字的斷行,又冒出來pre的斷行問題,不過最後總算是都解決了,就寫下這一篇作為紀錄。
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201406/dreamsmile-web.html

摘要:
http://www.oxxostudio.tw/articles/201406/dreamsmile-web.html

2014年6月1日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201406/social-meta.html

摘要:
隨著這個 blog 放到網路上開始,SEO 也變得重要起來,而在 SEO 裏頭,最重要的第一項重點就是 meta 標籤,這也是要告訴搜尋引擎和社群網站,你的 blog 或是網站主旨是什麼,作者是誰,分享的縮圖是什麼...等這些我們認為理所當然的資訊,畢竟這些搜尋引擎的蜘蛛和社群網站的人工智慧,現在還無法分辨你我網站內容的重點,因此我們必須靠這些 meta 或結構化資料 itemprop,來告訴它們。