好好沃克

全字庫:免費中文毛筆/書法字體下載

經常製作活動網頁的朋友們為了配合活動主題的走向,對字型的需求往往比 UIUX 設計師來的高,特別是一些主題性很明確的案子,如水墨風格的作品需要搭配合適的毛筆/書法字體。但中文世界裡合適的毛筆/書法字型並不多見,且須要遷就電腦字型的規範,讓這些毛筆字型多了規矩,少了筆意,用在小字的內文,辨識度不高,用在大字的標題,又顯得太過方板、規矩,以至於這些數量有限的毛筆/書法字型實際使用的效果也非常有限,有沒有其它更接近手寫效果的毛筆/書法字體可供選擇呢?

功能強大且超實用的截圖軟體 PicPick (for Windows)

對於 UI 或網頁設計師來說,與 PM 或客戶討論畫面的效果時,常常需要對畫面做一些局部擷取及簡單的標示。雖然 Photoshop 也可以完成這樣的工作,但這類專業的繪圖軟體功能過於複雜,一般人會比較難上手。在特定使用場景下,開啟 Photoshop 需要等待 30-60 秒,加上裁減大小及標示文字,完成一張用作討論的截圖需要一到兩分鐘。對於即時性有較嚴苛要求的討論情境裡,這樣的製圖流程往往過長。更別說在多人對話的線上會議,每個人提出的觀點會不一樣,如果製作截圖的流程及時間過於複雜且漫長,你會討論的過程中手忙腳亂,反而很容易忽略對話的內容,因此不會是首選工具,這時挑選一款輕巧好用且具有基礎編修功能的截圖軟體就會顯得十分有必要。

你為什麼不需要買 NAS?

鑑於 Google Photos 從 2021 年的 6/1 起,免費無限空間的服務即將停止,網路上陸續出現主張用 NAS 取代付費 iCloud 或 Google One 等服務的說法,文章可能會從單位容量成本、隱私、擴充性、多樣進階的應用等角度切入。常常只提 NAS 使用上的優點及便利,卻在某種程度上淡化 NAS 的缺點,甚至為了突顯性價比將 NAS 與公有雲做了不適合的比較,關於這點,我們想要透過這篇文章做一些討論。

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 不只是潮,用起來更是舒適。

全平台網站 icon 生成器

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

如何讓 Google Map 支援 RWD 的效果

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

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

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

如何製作 RWD 響應式的影片?

有時客戶會希望在網頁中插入一段 Youtube 影片讓畫面更活潑點,如果是一般的網頁,你只需要直接將 Youtube 的給你的 Code 嵌在網頁裡即可。但如果你正在做 RWD 的網頁,你會發現直接使用 Youtube 給你的 Code 版面會無法隨視窗大小進行縮放,這是因為 Youtube 給你的 Code 使用的單位都是 px 的絕對單位,加上影片有長寬比的問題。常見的有 4:3 及 16:9,使用錯誤的比例會造成變形。如果你將絕對單位改成百分比。比如將影片寬設成 100%,高度設成 auto。這個想法沒有錯,但實作後你會發現影片的高度不會隨寬度自動等比例縮放,造成長、寬比例錯誤而導致影片變形,因此我們需要一點小技巧,讓影片可以配合響應式網頁的縮放需要。