Open post

Hexy 簡化選取顏色的流程

當我們透過 Photoshop 製作網頁的時候,如果我們要選取畫面中的某個顏色,一般都會先透過滴管工具,然後再進入檢色器裡,把剛剛點選的色碼複製起來,然後在切換到網頁編輯器中,過程其實有點複雜。

Hexy 這個 Photoshop 的外掛,可以再透過滴管選取的同時,就將色碼複製到剪貼簿裡,省略了進入檢色器複製色碼的的過程,讓製作網頁的過程更加順暢。(完)

  • 官方網站:Hexy
Open post

如何自訂 Scrollbar 的捲軸樣式

在規劃活動網站的設計時,會常遇到需要放置一些注意事項或者活動辦法的訊息,這類資訊通常會比較長篇,內容也比較乏味,但它對活動網站來說又很重要。如果沒有經過適當的整理,往往都會佔據較大的頁面空間,造成編排上的麻煩。因此大多數的時候,網頁設計師們會將這類資訊放在有 Scrollbar 的區塊內,讓這些長篇的內容可以控制在固定的範圍內。但這樣做又會產生一個新問題,那就是瀏覽器預設的 Scrollbar 樣式和網站的風格相比,如果沒有經過特別的處理會顯得非常突兀,而 jQuery custom content scroller 是一個 jQuery 的外掛,可以用來自訂上述所需的 Scrollbar 捲軸樣式,讓你在設計畫面時,可以配合網站的視覺來調整適當的 Scrollbar 樣式。
了解更多 “如何自訂 Scrollbar 的捲軸樣式”

Open post

Low Poly & 瀕臨絕種的生物

如果要做一個保育類的網站,你第一個閃過的想法會是什麼?可能是一張一張動人的照片,或是一段喚醒大家注意的影片,這些方法都很常見。而位於荷蘭阿姆斯特丹的設計師 Bryan James 不這麼想!他顛覆了傳統具象的作法,以抽象色塊的方式做了一個名為 In Pieces – 30 Endangered Species, 30 Pieces 的網站,裡面以 Low Poly 的方式繪製了三十種各類瀕臨絕種的生物,搭配流暢的動畫,讓網站推出沒多久就榮登 CSS Design Awards 的首頁推薦,一起來欣賞吧。
了解更多 “Low Poly & 瀕臨絕種的生物”

Open post

WOW.js

這三四年來,為了方便手機及平板使用,網頁的編排及內容也朝簡化邁。過去動輒三、四欄的編排方式漸漸被淘汰。取而代之的是透過數張高解析的底圖,輔以 Parallax scrolling (視差滾動) 的一頁式網站逐漸冒出頭來。這樣做有幾點好處,一、方便行動設備透過手指操控畫面,上下滑動非常直覺,完全不需要學習;二、內容和編排簡化後,文字和連結可以放大,避免文字或連結會因為內容過於豐富而太小;三、使用者不容易迷路,區塊和段落分明,網站的服務項目一目了然。

為了讓畫面不因內容的簡化而顯得單調,有時候設計師們也會在頁面的安排上一些 CSS3 的動態效果,添加使用者在閱讀上的趣味。但 CSS3 有個問題,它雖然可以用短短幾行敘述就輕易地創造出一些好玩的動態效果,但缺乏一些 DOM 的觸發機制,讓 CSS3 在使用上相對受限。而 DOM 正是 Javascript 的強項。因此除了 CSS3 之外,往往還會再搭配 Javascript 來增加互動,而 WOW.js 就是用來處理觸發捲動頁面需求的函式庫。
了解更多 “WOW.js”

Open post

Trianglify:一鍵產生 Low Poly 風格的背景圖

Trianglify 是一個用 Javascript 編寫的 Open Source 函式庫,以 GPL 的方式對外釋出。用來隨機產生色彩豐富的 Low Poly 三角幾何圖形,並可輸出成 SVG 及使用於 CSS 背景圖。使用方式分兩種:

如果你是視覺設計師:

假設你厭倦使用 Illustrator 一筆一筆慢慢繪製 Low Poly 風格的背景圖,只想找個簡單的方式快速產生案件需要的 Low Poly,那你可以直接在 Trianglify 的網站上創造及調整 Low Poly 風格的背景圖。頁面上有三個主要的按鈕,分別為 Click for new pattern(產生新的背景圖樣)、SVG(下載 SVG 格式的背景圖樣) 及 show controls(圖樣的控制項)。使用方法也很簡單,每按一次 Click for new pattern 的按鈕,畫面就會產生新的 Low Poly 圖樣,喜歡的話就直接按 SVG 下載。

如果你是程式設計師:

你可以到 Github 下載 Trianglify 的原始碼,內有更多的參數可供控制,方便程式設計師們依案件的需要調整。

相關連結:

  1. 作者:Quinn Rohlf
  2. Trianglify 效果預覽:Demo
  3. 下載 Trianglify
Open post

Animate.css:CSS 動畫

過去我們在處理 CSS3 的動畫時,需要去了解 @keyframes 的使用方式,常常為了一個動畫效果的呈現,做了許多的嘗試才找自己的到滿意的設定,這其實挺花時間的。因此,有人就想說:何不先把常用的動畫預先編寫完成,以後需要這些效果的時候就可以直接調用,這樣豈不省事又方便。設計師 Daniel Eden 將網頁或 UI 常用的動態效果,如:淡入淡出、翻頁、旋轉、上下左右的位移、變形等1l集結成 Animate.css,而且還以 MIT License 的方式免費釋放出來給大家使用。鄉親們,有沒有啾甘心 🙂
了解更多 “Animate.css:CSS 動畫”

Open post

可彎曲的超薄平版會在未來 5-10 年內面市嗎?

很多人對微軟新任 CEO Satya Nadella 有所期待,認為他將有機會改變一些過去微軟不願意正視的問題,像是網路化對桌面軟體的衝擊,像是對行動設備反應慢半拍,像是 OFFICE 的封閉,像是與 LINUX 社群間的關係等等…但從他上任後的一些做為,像是願意面對 Windows Phone 在行動設備表現不佳的事實,轉而將原本專屬於 Windows Phone 平台的 OFFICE 釋放給更多的平台使用,讓具有市場優勢的 OFFICE 進入對手的領域 (iOS、Android),或者是收購頗受好評且支援跨平台的行事曆 Sunrise,這位可愛的印度人,正在用一個開放的方式改變大家過去對微軟的既定印象。
了解更多 “可彎曲的超薄平版會在未來 5-10 年內面市嗎?”

Open post

設計的素材不足時該怎麼辦?

記得以前讀復興商工的時候,有一門課程叫基礎造型。課程內容是透過尺規作圖的方式處理一些點、線、面的造型變化;像是先畫一條一公釐寬的線段,然後再畫兩公釐、三公釐、四公釐…依此類推,直線畫完改畫折線,折線畫完改曲線,或者是畫一個方形漸變到圓形、由大到小、由遠到近、由亮到暗、區分強弱,練習對一個造型的平塗、漸層、明濁等等。由於當時還未電腦化,所有的動作都要透過尺規、廣告顏料、平塗筆及鴨嘴筆一筆一畫完成,最後學期末就是要透過這些基本造型繪製一幅表板尺寸的圖像。由於這門課程的李美惠老師非常嚴格,繳交的作業如果未達李老師的標準,常常會當面撕毀,加上學長姐的種種傳說,所以對這門課的印象非常深刻。當時年幼,大多數的時間裡都無法體會這門課的趣味及重要性,只覺得平塗一個造型實在非常枯燥乏味,遠比不上可以大筆揮毫的水彩、油畫來的痛快有趣,同學們也多半苦不堪言。
了解更多 “設計的素材不足時該怎麼辦?”

Hover.css

CSS3 寫的 Hover 效果,內容涵蓋 2D、背景、Icon、邊框、陰影和光暈、各種方向的對話框及折角的轉換,部分效果需要使用新式的瀏覽器才能支援,以 MIT 的方式對外授權釋出,可以自由應用在各式連結、按鈕、Icon上。如果要加上 Icon 的效果,請另外下載 FontAwesome (如何使用 FontAwesome),支援 less 及 scss。
了解更多 “Hover.css”

Posts navigation

1 2 3 4 5 6
Scroll to top