!『嵐設』免費電子報訂閱募集中!

在下方輸入您的Email訂閱就可收到本部落最新文章資訊喔!

Delivered by FeedBurner

      今天網路上到處流傳著一篇超好笑的文章,主題是一位名叫夏儂的秘書,不小心走失了心愛的小貓,於是向一個設計師大衛求助,請他幫忙設計一張協尋小貓的海報,故事於是就此展開...

===============

故事開始:
夏儂(一名秘書)丟失了她養的貓,所以就去求大衛(圖像設計師)幫她做一張走失海報。以下是他們之間來往的電子郵件內容……
請由上往下讀……

寄件人:Shannon Walkley
日期:2010/06/21 (一) 09:15

房匠網 發表在 痞客邦 留言(25) 人氣()

      之前設計嵐分享了如何在進行網頁設計時,利用CSS語法將圖片加上拍立得的外框效果,對於學習網頁設計的人來說是個好用的技巧,(相關文章請參閱:[教學]成為CSS高手之路(八)~製作拍立得相片效果);而今天設計嵐再更進一步針對Blog經營者,介紹如何在blog文章圖片也加上拍立得相片效果外框,讓各位格友們不需要透過美工軟體就可以讓圖片有不同效果喔!

◎效果完成圖:

痞客幫圖文小學堂同班同學3D版海報

2010/07/05

房匠網 發表在 痞客邦 留言(13) 人氣()

      今天剛好有點小空,來交作業了。痞客幫圖文小學堂之中華足球代表隊,雖然我們不是足球強權國家,但是也趁著世界盃開打之際,給咱們的中華健兒打打氣吧,千萬不要忘記我們也有足球代表隊喔!!本文重點是,請大家猜猜看設計嵐在圖文中KUSO了什麼地方?大家努力猜猜看吧!

      KUSO的答案已經被聰明的黑默猜出來了~~請點文章到留言迴響最下方觀看答案喔!!本次KUSO由於小弟畫得不好導致大家很難猜~~Sorry~~期待下一篇KUSO喔..^^

和.jpg 

◎前鋒:設計嵐

嵐.jpg  

房匠網 發表在 痞客邦 留言(22) 人氣()

      我們常常在網頁或是Blog中放置內容圖片,只是純粹放入圖片,有時候會覺得在視覺效果上略顯單調,但是如果想要針對圖片加點設計效果,往往又需要使用美工軟體進行編輯才可以做到,所以今天設計嵐來分享一個簡單的手法,利用CSS語法在圖片上製作具有拍立得效果的外框,瞬間就可以讓沒有特色的圖片擁有吸引眾人目光的魔力喔!

      這項設計手法的教學會有兩篇,本文針對網頁設計者如何在Dreamweaver網頁編輯軟體中進行CSS規則設定與建立,製作出圖片拍立得效果;下一篇文章設計嵐則會針對Blog使用者,分享如何在Blog內容圖片製作拍立得效果,讓大家以後寫文章放圖片的時候,圖片不再單雕乏味喔!

◎完成圖:

19.jpg 

在原本圖片的外圍多出了底色和邊框,還可加上圖片的說明文字喔!

房匠網 發表在 痞客邦 留言(8) 人氣()

      Facebook人人都在用,其中的遊戲和心理測驗相當受歡迎~~然而,在每次的FB改版中,最令人詬病的總是『隱私』的問題,相信有許多人發現自己的塗鴉牆最近幾乎都被朋友的遊戲或心理測驗訊息塞爆了!(也或許你也正在塞爆別人的塗鴉牆),坦白說還蠻令人感到不快的!因此如何進行設定好讓自己不要在不知不覺中成為被其他人討厭的人,設計嵐分享一下設定方法,大家花個十秒鐘設定一下就萬事OK嚕!

1.在自己頁面右上角點選『帳號』→『隱私設定』。

1111.jpg 

2.點選左下角『應用程式與網站』→『編輯你的設定』。

2222.jpg 

房匠網 發表在 痞客邦 留言(12) 人氣()

     身為痞客邦圖文小學堂的一員,自然是要秉持著KUSO惡搞同學的精神..^^...所以設計嵐KUSO第一彈,先來點『清淡小菜』,利用Flash製作了一個blog玩意~數位電子時計,提供給圖文小學堂成員以及所有格友取用,完全免費!歡迎任意流傳~希望大家可以賞光多多取用喔!

1.成品預覽:

p.s.1.點選畫面中小學堂成員圖片還可連到小學堂介紹頁面喔,方便各位同學們去串門子!

p.s.2.本電子時計不定期更新,有取用的人會自動更新,讓大家的格隨時有變化!

房匠網 發表在 痞客邦 留言(11) 人氣()

 嵐說1.jpg

貓說1.jpg 

嵐說2.jpg 

貓說2.jpg  

1.用PhotoShop開啟一個新檔案,並且輸入任意文字(文字色彩選藍色調)。

房匠網 發表在 痞客邦 留言(6) 人氣()

 ※圖文小學堂重要訊息:圖文小學堂時計公佈了~~不嫌棄的話歡迎大家多多複製流傳喔~~^^..請往下捲畫面即可看到!※

◎FLASH版貼紙串聯教學:

 1.貼紙預覽:

2.複製以下語法:

房匠網 發表在 痞客邦 留言(21) 人氣()

      今天設計嵐來介紹一個自己非常喜歡,但是在國內設計作品卻很少見的設計手法~影像拼貼效果,然而每次在教授這個設計手法時,總會有學生提出『蒙太奇』這個名詞來問我,彷彿『拼貼v.s.蒙太奇』是『同義詞』似的,既然許多人對於這個名詞有興趣,那就趁著這個機會順便說明一下,畢竟『蒙太奇』在設計領域中也是一個常被掛在嘴邊的詞,既然要掛在嘴邊,那就不能一知半解嘛~對不??

      所謂『蒙太奇』最早是被使用在建築領域上,原文是法文的Montage,含有組合、結構的意涵;到了西元1915年德國的達達主義者(Da Daist)照相藝術家詹‧哈特費路(John Heartfield)把照片的斷片剪貼成一幅作品,將它稱為照片蒙太奇(Photo montage),此作品成為視覺藝術上第一次使用『蒙太奇』之開始。而到了西元1920年代初期,蒙太奇則開始被運用在電影創作上,成為學習電影必學的理論之一。

      電影理論家貝拉‧巴拉秋(Bela Balazz1886-1952)曾經對蒙太奇下了較為具體的解釋:『蒙太奇就是把導演攝影下來一個一個的鏡頭(Shot或Cut)依照著一定的順序連結,進而將這些具有連續性的鏡頭綜合,使它產生導演本身所意圖的效果。』換個口語化一點的說法,就是『將原本彼此之間沒有關聯或意義的影像片段,經過蒙太奇(編輯組合)之後,轉換成能表達設計者意念,有系統的作品』。

      因此從設計嵐自己的『廣義』解釋來說:『將各種設計元素經過設計師的想法重新編排,製作出一個完整有特定主題的作品,就是蒙太奇』,然而每次我這樣解釋,總是引來更多的疑問,因此更具體的縮小範圍解釋,所謂的『蒙太奇』就是將各種片段重新組合編輯,成為一個作品!

房匠網 發表在 痞客邦 留言(8) 人氣()

     『簡報』在目前的工作職場上相當常用,舉凡企劃提案、成果發表、專案報告等等都可以透過簡報輔助口頭的說明,因此現在要在職場上『走跳』,簡報設計能力似乎能了必備的技能了;然而,簡報製作是一門學問,如何製作出獨有的版型風格,符合各家公司本身專屬的簡報格式,卻不一定是每個人都會,因為多人都習慣使用『簡報設計範本』直接套用內建版型,所以設計嵐剛好利用這兩天要幫公司製作一份簡報的機會,順便寫一篇簡報版型製作的教學文章吧!各位客觀請看了~~

1.首先我們要先準備幾張用於版型的圖片素材,各位可以自行利用影像處理軟體或是繪圖軟體進行製作。

     一般而言,簡報的版型最主要有兩個主要格式,一個是標題投影片專用、另一種是內容投影片專用,因此各位在準備素材上,最基本的要準備兩個不同樣式的素材來進行製作。在此設計嵐準備了兩張圖片如下:

◎標題投影片版型使用圖片:

001-1.jpg 

房匠網 發表在 痞客邦 留言(4) 人氣()

      這兩天設計嵐忙著將上課的教學影片進行轉檔,由於有這樣的需求於是便想:『難道沒有方便又好用的轉檔程式嗎?』於是設計嵐便上網搜尋了一下!結果『皇天不負苦心人』,讓設計嵐在網路上搜尋到了這一個完全免費的萬用影片、音訊、圖片轉檔程式-『格式工廠』,經過試用後發現確實好用,於是趕緊分享給大家,有轉檔需求的可以看看喔!

1.格式工廠簡介:

      格式工廠可以把所有影片轉成MP4、3GP、MPG、AVI、WMV、FLV、SWF檔,把所有音樂轉成MP3、WMA、MMF、AMR、OGG、M4A、WAV檔,還有圖片轉檔、擷取DVD影片、抓音軌、任何影片轉到自定義影片、幫影片加入浮水印(支援PNG、BMP、JPG),而且重點是『完全免費』喔!

2.官方網站:http://www.pcfreetime.com/CN_index.html

3.下載頁面:http://www.pcfreetime.com/CN_download.html

房匠網 發表在 痞客邦 留言(12) 人氣()

      在很久之前設計嵐曾經發表一篇文章,用來說明『影像解析度』與『圖片品質』之間的關係,(詳閱:『解析度』的名詞解釋~By設計嵐一文),各位可以利用這篇文章說明的技巧進行圖片品質的確認,以確定是否能夠用於印刷,算是一個平面設計師必定要會的一個小技巧。

      然而,一旦經過確認後如果圖片的品質不足以用於印刷上時,該怎麼辦呢??這個問題對於設計師而言是一個時常遇到的困擾,因為從客戶那邊所取得的影像素材,不一定每一張都是高解析度的優秀圖檔,如何解決此一問題,設計嵐特別分享一個從書上學到的好用密技,可以讓解析度不足的影像經過處理後依然可以做印刷輸出之用喔!

1.用PhotoShop開啟影像並確認目前圖片的品質狀況,執行『影像』→『影像尺寸』。

1.jpg 

2.不要勾選『影像重新取樣』項目,將解析度改成300dpi,此時出現的文件尺寸,即為目前此張影像可以印刷的最大尺寸,超過這個尺寸印刷品質就不好了。

房匠網 發表在 痞客邦 留言(30) 人氣()

      今天設計嵐要來『老王賣瓜』一番,相信常常逛『嵐設』部落格的格友們應該都知道這個部落格在Facebook上有一個專屬的粉絲團,也承蒙許多格友的支持參予了粉絲團的互動,使得粉絲團的每天都持續了相當熱絡的交流;但由於設計嵐的學生各種程度都有,所以也會有些學生詢問要如何加入以及使用粉絲團進行交流,因此為了統一解答這些疑問,寫了這篇文章說明一下,也請大家知道之後多多支持並且利用粉絲團進行交流互動喔!

◎加入粉絲團:

1.要加入粉絲團有兩種方式,以下介紹方法一:

A.直接點選『嵐設』布洛格畫面右上角的粉絲團區塊的『讚』進行加入。

1.jpg 

房匠網 發表在 痞客邦 留言(2) 人氣()

      今天設計嵐來分享一個之前在國外翻譯書上學到的設計手法-利用Photoshop製作出『鑽石』的效果,很適合用在時尚精品或是特定主題的商業設計上,大家可以試著做做看!

final.jpg 

1.利用PhotoShop開啟一個新檔案。

1.jpg 

2.尺寸不用太大,解析度則和待會要製作的作品設定為一樣,在此設計嵐假設要用在印刷上,所以設定為350dpi。

房匠網 發表在 痞客邦 留言(15) 人氣()

        在設計嵐忙著撰寫『人物插畫-五官篇』教學文章的同時,百忙之中抽空決定寫一篇初階教學文章~打字指法的介紹與練習方法,由於有時候會教導到電腦初學者,心中有很深的感觸,很多人很有心學電腦,但總是在『打字』這一關遇到阻礙,甚至中途放棄,相信有一定程度的電腦使用者一定會同意,會打字與不會打字,在學習電腦上佔有決定性的關鍵,所以這篇文章請有心學習電腦的初心者務必熟讀並且努力練習,只要突破了打字這個難關,一定會發現電腦學習之路平坦許多。

1.打字指法圖示:

1.jpg 

      在上圖中可以看到,打字是用雙手,每個手指管控特定的按鍵來進行打字的動作,『利用固定的手指按固定的按鍵』就是打字指法。

2.指法說明:

房匠網 發表在 痞客邦 留言(3) 人氣()

      成為CSS高手之路系列文章第七篇來嚕!!上一篇設計嵐說明了如何針對文字設定邊框以及轉灰階圖片的CSS語法,今天來介紹一個更實用的技巧~文繞圖的設定,這個技巧之所以重要,原因有二:1.網頁內文不作文繞圖排版上很難看 2.使用DIV+CSS排版是目前網頁標準化的一個標準作法,網頁設計師必備技能!!

1.首先設計嵐先用Dreamweaver開一個新網頁並且放入文字以及一張圖片在同一個段落,此時各位會發現,由於圖片有長寬大小,與文字同段落會造成文字上方被撐開而有一大塊空白,在版面上不但造成空間浪費也不好看。

1.jpg 

2.為解決這個問題,在傳統的做法中,有人習慣用表格排版,但表格有其限制比較不靈活;另外則有人使用以下方法:

A.選取圖片→屬性面板→對齊→靠左或靠右對齊。

房匠網 發表在 痞客邦 留言(4) 人氣()

      今天設計嵐來介紹『成為CSS高手之路』系列文章第六篇,經過前面五篇的基本功訓練,有閱讀並且練習的人應該對於CSS有了基本的認識,接著開始我們正式進入實際運用的介紹,當然,我們還是要由淺入深,先從最簡單的圖片效果開始介紹,慢慢的再進展到更進階的CSS設定。

‧CSS相關系列文章請參閱:成為CSS高手之路(五)~CSS在DW中的設定與語法宣告方式Part III-套用外部的CSS檔案

      系列文章之六設計嵐介紹兩個可以運用在圖片上的CSS效果做個暖身,分別為『圖片套用邊框』以及『將全彩圖片轉成灰階』兩種效果,各位可以試著做做看:

一、在圖片上套用邊框:

1.利用Dreamweaver開啟新頁面並且插入一張圖片。

房匠網 發表在 痞客邦 留言(2) 人氣()

      今天來分享一個實用的技巧~GIF動畫圖檔製作,這種格式的動畫可以應用於廣告Banner、Logo、貼紙等等的設計,製作簡單又具有動態效果,相當受歡迎,實作上有許多軟體都可以完成,像是早期很流行的Ulead Gif Animator或是PhotoShop早期版本有一個ImageReady的附屬程式都可以製作。由於今天有學生問了如何使用PhotoShop製作GIF,所以本文就以PhotoShop作教學示範吧!

      上面有提到,在早期的PhotoShop版本中,有一個專門製作GIF動畫的ImageReady程式,但是現在的版本已經沒有了,所以我們要直接在PhotoShop中製作。

◎完成範例:

GIF製作.gif 

1.先準備幾張『長寬尺寸相同、解析度相同、內容不同』的圖片,在此設計嵐簡單準備寫了123的三張圖片。

房匠網 發表在 痞客邦 留言(133) 人氣()

     今天設計嵐繼續針對『成為CSS高手之路』系列文章發表第五篇~套用外部CSS檔案的方式進行說明,如果是第一次學習CSS相關課程的人不妨先針對此系列文先前的文章進行閱讀,循序漸進的學習效果更好喔!

  • 成為CSS高手之路(一)~CSS入門QA教室

  • 成為CSS高手之路(二)~認識基本HTML語法

  • 成為CSS高手之路(三)~CSS在DW中的設定與語法宣告方式Part I-整頁套用的CSS規則(上)

  • 成為CSS高手之路(四)~CSS在DW中的設定與語法宣告方式Part II-整頁套用的CSS規則(下)

  •       而今天系列文章之五所要介紹的套用外部CSS檔案的方式,是先將CSS的格式語法寫在一個獨立的檔案中,並且儲存成CSS格式的檔案,然後再將此檔案以連結或匯入的方式套用在不同的網頁中,讓這些網頁同時擁有相同的CSS格式設定,相當方便快速,而且日後有需要,只要修改CSS檔就可以同時更新所有的網頁格式設定了,這對於需要統一格式設定以及同時管理大量網頁的設計師來說,是個省時簡便的好方法。

     1.首先設計嵐先準備兩個網頁檔案,並且輸入簡單文字作區分,但是不作任何的格式設定。

    ◎以下為a1.html畫面:

    1.jpg 

    房匠網 發表在 痞客邦 留言(0) 人氣()

          今天來聊聊一個室內設計的案子從開始到結束的流程介紹,這對於正在學習室內設計的新手們或是即將為家中進行裝潢卻不了解裝潢設計相關事務的人,是個很不錯的參考喔!

    1.現場丈量放樣、草圖繪製及討論

          這階段很重要,後續工作是否順利,這個開始是關鍵,設計師會帶著丈量工具到現場進行相關尺寸的丈量與記錄,並且與業主進行裝潢構想的討論,在此階段必須詳細的記錄現場各種情況並且拍照,然後以手繪方式繪製草圖。

     

    2. 用電腦繪製平面圖、估價分析以及設計概念發想。

    房匠網 發表在 痞客邦 留言(6) 人氣()