發表文章

目前顯示的是 三月, 2017的文章

設計新主張:您不能不知道的關鍵字 Templates 與 Mockups

圖片
在這個資訊時代裏,設計除了以「原創」的方式,從發想、討論、實作逐步實踐進行之外!為了讓設計更有效率,透過「Templates 範本」與「Mockups 原型」的方式,讓設計的進行可以站在巨人的肩膀上,先從別人已經設計好的內容,再經過適當調整,或是直接套用,快速建立出新的設計作品!

這樣的概念,其實早就是 ING 進行式,不只是微軟的 Office,包括現在很多線上影像、影片剪輯處理雲端服務、行動裝置 APP 應用程式,大家都在朝這個方向發展!






對於非設計相關背景的人來說,這樣不僅縮短了學習的時間,更重要的是,能在短時間內,製作出不輸專業水準的設計作品!

那對於設計相關的人來說,真的這樣就代表機會愈來愈少了嗎?其實不然,反倒是因為工具愈來愈簡單,降低了軟體的學習時間,更能將時間專注在「設計的本質」,而且更容易進行「跨領域」的嚐試與創新!

關於「Mockups 原型」,可以參考以下的維基百科的說明:

https://zh.wikipedia.org/wiki/Mockup
製造設計上,mockup是一個設計或是設備的模型,用來教學、展示、設計評估、推廣或是其他用途,可以是比例模型或和實物一様大的模型。若mockup已有系統一部份的功能,已可以測試其設計,則稱為原型(prototype)[1]。設計者會用mockup來收集使用者的意見及回饋。mockup表示了一個流行的工程概念:設計者可以在繪圖板上用橡皮擦直接修改設計,也可以晚一點用錘子直接修正[2]

現在,我們就來看看網路上用「Templates 範本」與「Mockups 原型」這兩個關鍵字,能找到哪些好用的設計資源!

※ 搜尋技巧:請記得使用「複合關鍵字」,例如,想找免費的海報範本,就用「mockup poster free」。



mockups free

templates design free

以下有不少優質設計素材網站,都可以做為大家設計的參考喔!

Mockupworld
網站中有一個免費的 Free Mockups 類別!

Behance
由 Adobe 主導的設計人才求職求才網站,也有提供 Best Free Mockup 作品供下載!

Pixeden
在網站上的每個類別 Print 印刷、Webs 網頁、Vectors 向量、Graphics 影像…等都有提供 Mock-Ups 與 Free 的設計作品供下載!

F…

網頁設計 FAQ 常見問題開講:如何在網頁中使用 Google Fonts 五款免費雲端字型 (黑體, 仿宋, 明體, 楷體, 圓體)?

圖片
在中文網頁內容的設計上,最不方便的地方應該就屬中文字型的部份了,預設的情形下,主要只能顯示「新細明體」與「標楷體」!若要使用其他的字型,最常見的方式,就是將文字轉換為圖形檔案!當然,如果只考慮 Windows 的使用者,也可以使用「微軟正黑體」,或是「SimHei」這兩種 Windows 已內建的字型!
其實對於網頁上中文字型的解決方案,已有一些業者投入,如「華康威Font」、「justfont」,讓網頁的中文字體就像一般在個人電腦中使用 Office 等軟體一般,可以套用比較多的中文字型!只是,目前要達到這樣效果,在費用上是相對比較高,需額外租用中文字型的服務,對於多數的網頁建置業者來說,負擔蠻重的,因此,目前的使用率還不是非常高!

↑ 以上是華康威 font 網頁上提供的模擬功能,只要輸入網址,就能將網頁標題與內文替換成指定的字型!
除了付費方案外,是否還有免費的選擇呢?有的,Google Fonts 有推出五款網路專用的免費字型,包括黑體、仿宋、明體、楷體及圓體,網頁中文字型呈現上又多了好幾種不同的選擇,且不論是電腦版或是行動裝置版本都適用喔!


同學分組報告也能這樣玩:臺下同學用Google試算表即時寫下報告組別的優點與建議!還能進行現場提問與回答!

圖片
繼之前 Google 繪圖在課堂與研習場合的應用後,這次再把 Google 試算表拿來做為同學網頁作業的報告現場,讓上臺報告的同學,除了把網頁成果展示給同學外,也能即時收到臺下同學們,現場對於網頁內容實際操作的回饋與建議!
因為以往「視訊特效」與「3D動畫」課程類的作業,比較強調軟體的操作性,所以在作業批改時,除了將同學有問題的畫面擷取外,也常常會以錄影影片的方式,實際操作一次並說明作業中的問題可以如何修正與調整,讓同學自行在家上網觀看說明影片,若還有不了解之處,再課堂上或是學校數位學習平台上提出!
但是今年新開的「互動多媒體設計」課程,希望以「互動」為優先,除了讓同學了解新的設計資訊與應用外,更希望在課堂上就能讓同學體驗更多的「即時互動」!

20170321中正大學中文系:提升工作與學習效率起手式:是的,你的電腦也能這麼好用!

圖片
在這次的研習中,分享了讓您的電腦可以更好用的幾款提升工作效率與螢幕擷取軟體,並讓參與研習的老師,一起使用 Google 繪圖即時互動白板,感受不一樣的教學新體驗!
在下列主題的介紹中,除了單純的介紹外,這次教學把平常常用情境與可能遇到的問題,也一併在影片中分享說明,希望可以讓老師們實際運用時,更清楚如何輕鬆解決,所以部份影片的長度有達到20分鐘!
Snipaste螢幕擷取與編輯PicPick螢幕擷取、繪圖、編輯DittoPortable免安裝剪貼簿增強軟體Listary 中文版檔案搜尋Portable可攜式版原來鍵盤上的「Windows 鍵」這麼重要!使用 Windows 一定要會的快速鍵!Emoji表情符號幫你的郵件標題、FB與部落格文章標題加點人性的溫度!
ps.這次研習的地點在中正大學圖書館八樓,雖然每個學期都會到中正大學圖書館,但平常都在2樓的電算中心電腦教室,第一次進到圖書館內,一進門就看到兩台 27 吋的 MAC 電腦在旁「伺候」,供同學做圖書資產查詢,真的是很特別!

Snipaste 與 Picpick 攜手合作 1+1,幫您一次搞定螢幕擷取、教學圖片、資料比對、便利貼!

圖片
螢幕擷取這類的工具很多,不論是單機軟體、瀏覽器擴充工具或是雲端服務,甚至是 Windows 都有內建的剪取工具可用,那為什麼要特別介紹 Snipaste 與 Picpick 呢?
因為 Snipaste 具有非常彈性的截取畫面調整功能,加上超方便的「貼到螢幕上」功能,就像便利貼一樣,不僅可以以用來比對或是暫存畫面、文字資料,還能重新取用編輯!
而 Picpick 則是影像截取軟體的長青樹,擁有功能完整的多重影像編輯能力,與優秀的註解、流程步驟工具!
當螢幕擷取的新秀與老手碰在一起時,能擦出什麼樣的火花呢?

※ 20190716更新:善用免費軟體提升工作效率:用 Snipaste 截取歷史記錄,進行課堂上的複習課程!

Snipaste官方網站 https://zh.snipaste.com/


64位元免安裝版下載:https://dl.snipaste.com/win-x64-cn32位元免安裝版下載:https://dl.snipaste.com/win-x86-cnPicpick 官方網站 http://ngwin.com/picpick

個人家庭免安裝版下載:http://ngwin.com/picpick/download_portable_start

Emoji表情符號幫你的郵件標題、FB與部落格文章標題加點人性的溫度!

圖片
最近常收到一些很醒目的郵件標題,因為裏面都加了一些  Emoji 表情符號,讓人很容易在收到信件時就注意到它的存在!

其實 Emoji 表情符號不只可以應用到郵件標題、FB與部落格文章標題上,郵件與文章內容其實都是 OK 的!但是以往主要都是在文章內容中看到居多,嚐試將這樣的表情符號用在一般信件往返的郵件標題中,真的讓收到信件時,不再只有冷冰冰的文字,還能有一些可愛有趣的圖,添加不少的樂趣!



↑ 在電腦版 Chrome 瀏覽器郵件列表中 Emoji 表情符號的呈現樣式
↑ 在 Andorid 上 Emoji 表情符號呈現的樣式
如果是使用在部落格文章的標題,那麼在瀏覽器的標籤上,也會顯示出來喔!



如果您想對於 Emoji 表情符號了解多一些,可以參考以下的維基百科資料:
https://zh.wikipedia.org/wiki/%E7%B9%AA%E6%96%87%E5%AD%97
繪文字(日語:絵文字/えもじ emoji)是使用在網頁和聊天中的形意符號,最初是日本在無線通訊中所使用的視覺情感符號(圖畫文字),繪意指圖形,文字則是圖形的隱喻,可用來代表多種表情,如笑臉表示笑、蛋糕表示食物等。 日本三大電信業者:NTT DoCoMo、au/KDDI和Softbank各自有不同的繪文字定義。在NTT DoCoMo的i-mode系統電話系統中,繪文字的尺寸是12x12 像素,在傳送時,一個圖形有2個位元組。Unicode編碼為E63E到E757。而在Shift-JIS編碼則是從F89F到F9FC。基本的繪文字共有176個符號,在C-HTML4.0的程式語言中,則另增添了76個情感符號。au/KDDI的繪文字體系則是透過特別的IMG標籤實現。Softbank的繪文字是用SI/SO escape sequence所編碼的,softbank的設計能夠支援更多的色彩和動畫,在日本年輕女孩群體中相當受歡迎。但其所花的流量也較大,相比之下DoCoMo的繪文字是最省流量的。而au/KDDI的繪文字則最有彈性,使用者甚至可以自行設計。
在開始使用 Emoji 表情符號前,還有一點要留意一下的:不同裝置與系統,出現的圖示會有不同喔!

Emoji Unicode Tables 表情符號編碼對照表,將這些圖示依據不同的 iOS、Android、Symbola 、Twitter 已經整理好對照…

親子這樣說:誠實要付出代價,那說謊呢?會失去面對錯誤的勇氣!

圖片
今天小朋友打電話到工作室,說忘了把作業本帶回家,哭著要爸爸明天到學校幫忙補簽名!等晚上回到家,就聽到小朋友正發揮「科南辦案」精神,興高采烈的開始討論與模擬各種明天早上要如何將作業本「偷渡」出教室的劇本!
剛開始我也跟他們一起討論,並針對不同方案提出「建言」,說明有哪些是行不通的地方!後來,心中突然驚覺,這樣的行為不是在教孩子用「說謊」的方式,來「彌補過錯」嗎?
小朋友今天已經因為前一天沒有簽名受而到處罰:一整天的下課不能說話!這對小朋友來說是相當「有感」的!但是偏偏下課又忘了把作業本帶回來,為了不要明天再接受這樣的處罰,當然會想盡辦法,看能不能逃避,這是人之常情,可以理解的!
「方向正確,但方法錯誤」,其實是會造成完全不同的結果! 因為大家都知道,處罰的目的是要同學把這件事記得並做到,但小朋友的處理方法,卻是用各種方式想在早上把作業本拿到校門口,讓爸爸或媽媽補簽名,以逃避處罰!
「知恥近乎勇!」這句話說得真好!誠實面對自己,面對自己犯下的錯誤,真的需要非常大的勇氣!不只是小朋友,大人更何嚐不是如此呢!
那如果選擇說謊呢?我想,孩子將會失去面對錯誤的勇氣! 因為,如果得逞了,他會覺得原來只要投機取巧就能逃避處罰;反之,如果第一個謊言失敗了,可能會為了圓謊,而繼續編出其他的謊言!
我在大專院校或是職訓的課程中,平常成績多數是請同學「自評」,但是在進行前都會先示範動作:一手舉起,一手放胸前!請同學自評前一定要先「摸著自己的良心」,誠實問問自己,這個學期自己用了多少精神在這門科目上,自己可以給自己多少的分數!
看似只有自己知道的一件事,但是「天知、地知、你知」,只有自己最清楚自己是否有認真上課,是否有收獲!打分數的標準會因人而異,但是給自己一個最中肯、最貼切的評分,將會是在收到成績單時,心裏最踏實的一刻!
學會用最真誠的心面對心中的自己時,才能找回原來的我! 每個人都會犯錯,如何從錯誤中學習,以及學會誠實面對過去與現在的錯誤,不只是一種生活態度,更是自我成長的一帖良藥!
↑ 以上圖檔來自 http://emojione.com/ 後記:
其實,在自己國小的印象中,曾有一次因為準備參加跆拳道比賽,需要添購團隊外套,當時教練就教大家回去跟家長說:「現在只剩自己沒有購買了!要趕快繳費!」
果然,這招很有用,回來跟家裏報告後,爸媽就直接把費用給我了!
雖然這件事看起來似乎是「善意…

After Effect FAQ 常見問題開講:都是 Layer Style 圖層樣式惹的禍!3D 圖層與 Layer Style 圖層樣式為什麼不能魚與熊掌兼顧?

圖片
在前一篇「After Effect FAQ 常見問題開講:為什麼 Camera 攝影機、Light 燈光都有設定,3D 圖層就是沒有產生投影(陰影)?」文章中有提到 3D 圖層只要一套用 Layer Style 圖層樣式後,3D 圖層所出現的奇怪問題!事實上,不只有 3D 投影(陰影)的問題,還會遇到不少的狀況!
該怎麼讓 3D 圖層與 Layer Style 圖層樣式魚與熊掌兼顧呢?以下提供兩個方式給大家參考看看!

20170308 臺南藝術大學:輕鬆搞定教學影片錄影剪輯!

圖片
臺南烏山頭水庫旁的道路旁,種植了一整排南洋櫻花,一旁還有「八田與一紀念園區!今天前往位於臺南官田烏山頭水庫附近的臺南藝術大學,一進入校門就看到有江南風味的職務宿舍區!校園環境真的令人非常心曠神怡,很適合散步放鬆心情!

↑ 以上圖片來自 http://mapio.net/pic/p-55364309/


在這次的研習中首次嚐試以下兩種新的應用,效果都很不錯喔!
一、使用羅技 C922 + Personify ChromaCam + Open Broadcast Studio(OBS) 即時去背
↑ 右下圖的攝影機畫面是一般的網路攝影機,上方則是即時去背後的結果
OBS 就是目前流行的開源免費網路直播軟體,配合羅技 C922 支援的 Personify ChromaCam,就能在一般的環境下,以軟體運算的方式,自動將人以外的背景去除,不需要藍幕或綠幕,就能達到虛擬攝影棚的拍攝效果!

在之前的測試環境中,一直覺得去背效果時好時壞,可是在臺南藝術大學的電腦教室白板前,效果卻是出奇的好,讓我相當驚喜,因為 3390 元的價格就能達到這樣,的確具有相當高的 CP 值,也難怪這麼多「網紅」喜歡使用它! 而且,對於目前許多大專院校鼓勵老師們錄製 MOOCs 磨課師課程也很有幫助,不但能解決學校專業虛擬攝影棚數量不足的問題,又能讓老師與 TA 用最經濟的費用,就能達到即時去背效果,且 OBS 軟體操作不難,很容易就能上手!
二、用 Google 繪圖做為多人即時討論的電子白板,第一次將它應用在研習場合 馬上把前兩天公佈在部落格上的文章「用 Google 繪圖做為多人即時討論的電子白板(Google 文件、簡報…等,也都可以這樣多人協同使用喔!)」,實際應用看看,效果其實是很不錯的!雖然 Google 繪圖沒有特別為行動裝置設計,但是在一般電腦與行動裝置上都能正常使用!同學與老師們對於這樣的現場互動、提問都相當熱絡!而且也讓同學能在研習進行的同時,把不好意思現場舉手,打斷老師上課的問題提出來!

用 Google 繪圖做為多人即時討論的電子白板(Google 文件、簡報…等,也都可以這樣多人協同使用喔!)

圖片
其實 Google 雲端硬碟最主要的功能,除了存放檔案外,很重要的就是能夠進行多人同步協同編輯,而且具備文件修訂版本紀錄,能隨時查閱各項編輯動作,也可以隨時還原回到歷史版本!
這次特別把 Google 繪圖拿出來,是想把它應用在一般教室或是電腦教室的情境,因為以前也曾經用過一些即時、互動的電子白板雲端服務,同學們對於這樣的「新鮮、互動、即時」的體驗都很感興趣,尤其是以演講形式,或是在一般教室上課時,常需要透過一些問答來了解同學的學習情形,總是會有些同學不大好意思提問,這樣的即時互動白板就可以適時派上用場,讓同學有更多發問的管道。
不過,常常受限於國外服務,或是連線人數限制、或部份場地無法順利開啟該雲端網站…等因素,後來就沒有繼續在課堂上使用!
這個暑假讓女兒試著用 Google 文件來整理資料,因為她剛開始接觸電腦,雖然有簡單講解該如何使用,但多少還是會不小心出錯,只好 Call Out 求救!這個時候就發現,Google 文件的「修訂版本紀錄」真是好用,不但能看到她操作的過程,還能隨時還原至出錯前的正確版本,完全不用擔心小朋友「做錯」!實在是太好了!
因此,想把大家平常比較少用到的「Google 繪圖」,利用這個機會介紹給大家,因為 Google 繪圖也完全具備上述的特點!
以下是今天上課讓同學「玩」的情形!


After Effect FAQ 常見問題開講:為什麼 Camera 攝影機、Light 燈光都有設定,3D 圖層就是沒有產生投影(陰影)?

圖片
在 After Effect 中要產生真實的投影(陰影),必須具備以下的條件:

必須將要產生陰影(投影)的圖層設定為 3D 圖層
必須有 Camera 攝影機與 Light 燈光圖層
Light 燈光圖層必須有設定「Casts Shadows」投射陰影
要產生陰影(投影)的圖層,其 「Material Options」材質選項必須設定「Casts Shadows」值為「On」

不過,如果已經滿足上述條件,還是不見「陰影」的蹤跡,那就…真的奇怪了!
這裏有一種可能性,提出來給大家參考!或許你可能就是這樣的情形!
3D 圖層啟用了「圖層樣式 Layer Styles」
是的,你沒有看錯,這個是很有意思的問題,原本為了與 PhotoShop 的相容性,所以 After Effect 加入了對圖層樣式的支援,可是,當 3D 圖層中有使用了圖層樣式,或是你原本在 PhotoShop 檔案中,就有加入相關的圖層樣式,才匯入 AE 中!
在這樣的情形下,即使符合 3D 的各種設定條件,真的,陰影就是不會跑出來!
從下面動畫示範,各位可以看出,只要加入圖層樣式,原本燈光產生的陰影就會消失!



※ 延伸閱讀:
After Effect FAQ 常見問題開講:為什麼視訊檔案在AE中播放是 OK 的,但是輸出影片時就變成素材遺失呢?After Effect FAQ 常見問題開講:用 CC Snowfall AE 內建濾鏡,為聖誕節輕鬆增加下雪氣氛!After Effect FAQ 常見問題開講:如何顯示 / 隱藏圖層控制項 View / Show Layer Control?(因為有時候會手殘,不小心按到喔!)After Effect FAQ 常見問題開講:如何快速替換時間軸上的圖層,別再傻傻的每次都打掉重練了!After Effect FAQ 常見問題開講:常用的工作面板開合快速鍵介紹 (1)After Effect FAQ 常見問題開講:Composition 合成也能使用 Expression 語法,不斷重複播放動畫,真的可以不用「手工」逐一加入喔!After Effect FAQ 常見問題開講:如何使用 Expression 語法,讓圖層中指定的關鍵影格範圍不斷重複執行,不要再用「手工」複製關鍵影格啦!Orz Orz OrzAfter Effect FAQ 常見問題開講:已經套用 Easy…