發表文章

目前顯示的是 三月, 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 的設計作品供下載!



Fr…

網頁設計 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 則是影像截取軟體的長青樹,擁有功能完整的多重影像編輯能力,與優秀的註解、流程步驟工具!當螢幕擷取的新秀與老手碰在一起時,能擦出什麼樣的火花呢?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://…

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

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