Adobe Fonts 首頁

漂亮字型選不完,Adobe Font 讓你的網頁字型 72 變

說到免費的 Webfont 很多人就會聯想到 Google fonts,其實對設計軟體供應商 Adobe 來說,它們不只與 Google 合作思源黑體及思源宋體的開發,本身在字型領域也是深耕許久。只是這項服務早先被歸類在 TypeKit 的項目下另外收費,所以較少被大家提及,但後來 Adobe 將 Typekit 與 Creative Cloud 創意雲整合,並更名為 Adobe Fonts。現在只要你有 Creative Cloud 創意雲的帳號,就可以免費使用使用,而且同時提供離線版及 WEB 版兩種選擇,這麼好康的東西趕快來看看吧。

VISUAL STUDIO CODE 初心者設定指南

一般來說,剛安裝好的 Visual Studio Code 就已經相當完整,內建 emmet、各種常見語言的色彩標示、程式碼折疊、所在行標示、HTML & CSS 語法及屬性的下拉選項、支援 Markdown 等等…對一個網頁設計師來說,如果沒有特別的需求,幾乎可以馬上用來開發。話說如此,但總還是有一些小細節不是那麼完美,就像買了最潮的球鞋,裡頭卻有顆小石頭,穿起來總是刺腳。所幸 Visual Studio Code 提供極為豐富的設定,幫助你打造屬於自己的編輯器。下面有一些我們推薦的設定,讓你的 Visual Studio Code 不只是潮,用起來更是舒適。

其單車的小女孩

親子河岸踏青之旅:大稻埕到自來水博物館

欣賞淡水河沿岸風光,沿途皆為河濱公園,有大量的樹蔭可供遮陽,雖偶有小販,但並非定點定時營業,建議自備足夠的飲用水。全程坡度皆平緩,僅在 9 公里中正橋處,有一段高低差約 3 公尺,坡度目測約 15-20 度左右的小坡。一牆之隔即為台北市市區,經台北大同及萬華兩地的老城區,適合喜歡研究台北發展史的朋友騎乘。如果想要增加騎乘的難度,可以將路線拉長到淡水至新店碧潭。

網頁設計師必學的五個 CSS 動畫庫

俗話說,工欲善其事必先利其器,對現在的網頁設計師來說,為畫面增加一些微互動的動態效果已經是時勢所趨,但 CSS 不比 Flash,需要透過 Code 的方式才寫出動態的效果,對很多視覺設計師來說是一道門檻,所幸網路上已經有很多資源將類似的動畫需求整合起來,只需要用點心去尋找,就可以找到許多功能強大的 CSS 動畫庫,下面我們挑五個比較有名且實用的來介紹。

全平台網站 icon 生成器

記得早期做網頁的時候,網站完成後會另外畫一個 16×16 的小 icon,這個小 icon 會出現在網址列及我的最愛中,取代瀏覽器原本的預設 icon,成為一個私人的小特色。但後來由於設備的發展一日千里,手機、平板、iOS、Android、MAC、Windows 等等,每種平台對這些小 icon 接受的大小、格式及規範都有些許不同,如果要個別針對這些平台去製作小 icon 變得有點麻煩,且不一定有相關的設備可以提供測試,這時,該怎麼辦呢?

如何讓 Google Map 支援 RWD 的效果

我們在製作一些與行程或地點有關的網頁時,有時候會希望附上相關的地圖,好方便使用者了解附近的地理位置及規劃路線,這類的地圖應用以 Google Map 最常見,但 Google Map 內嵌到網頁的方式是使用 iframe,對一般的網頁也許不受影響,但如果遇到 RWD 的網頁時,就會發現 Google Map 提供的 iframe 並不會隨著設備的不同而去調整適當的比例,這時,你可以試試下面的方式。

如何製作一個吸頂式的選單列

一個好用的選單系統,可以幫助使用者快速找到所需的內容,如果你經常觀察網頁的趨勢,因該很容易發現許多網站開始將選單列常駐在頁面的頂部,而不會隨著頁面的捲動而消失。這樣的做法可以幫助使用者在切換頁面單元時,不用為了點選選單而去捲動頁面,算是一個很貼心的 UX 規劃。做法也有很多種,從純粹的 CSS 到 Javascript 都有,網路上也有很多現成的範例,下面我們以 On Scroll Header Effects 為例:

如何自訂 Scrollbar 的捲軸樣式

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

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

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