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

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

Delivered by FeedBurner

      今天設計嵐來介紹『成為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) 人氣()

         『地板』在室內設計上是非常重要的一環,隨著裝潢技術的演進,地板施作所使用的材質與工法也越來越多,今天設計嵐針對幾種常用的地板材質來加以介紹,讓各位在規劃室內設計時作為一個參考。

    1.抿石子地板:

    3.jpg 

    A.施作方法:比較新式的做法是先將石頭黏貼在網格上,製作成以一才(30*30cm)為單位的網材,然後再利用土膏(水泥+海菜粉攪拌而成),將石子黏貼鋪設在地板上,等到水泥乾燥固定之後,再以海綿將石頭表面的水泥抿洗乾淨即可。

    B.特性:堅固、外型立體、造型與色彩豐富。

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

          公車車體廣告一直是廣告行銷常見的手法,只可惜在台灣似乎普遍都是『制式化』的版面安排,鮮少出現令人驚豔或是印象深刻的作品,以下設計嵐分享幾個在mop.com網站上找到的創意公車廣告設計,大家可以觀摩一下,或許在設計上可以激發出不同的創意靈感喔!

    1.人被狗拖著跑,死命抓著車體不放。

    image001.jpg

    2.利用車窗製作窗簾剪影效果,車門自然也有窗簾嚕。

    image002.jpg

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

          設計嵐今天針對商業設計上常見的CASE-廣告扇子的設計原則與完稿注意事項來寫篇文說明一下好了,類似這種行銷印刷品的設計在目前接案是重要的,為了避免設計上因為疏忽而出錯,以下整理說明各位可以參考:

    1.完稿基本規定:

    製扇說明.gif 

         上述的說明,是針對扇子在設計上的一個『通則』,但是不同類型的扇子以及印刷廠不同,在相關規定上都會有些許的變動,在實務上可以再跟合作的印刷廠做確認,依照規定來進行完稿;接下來設計嵐針對幾項重點再加以補充說明:

    2.刀模檔的作用:

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

         繼之前設計嵐發表過的室內設計長用圖塊表示方法以及常用尺寸相關文章後,接著補充一些其他室內設計常用尺寸的資料給大家,這對於正在學習室內設計的學員非常實用,大家可以參考看看。當然,已經在線上的設計師也是一個好用的參考資料。

    p.s.由於相關資訊太多,設計嵐沒有詳細整理,所以有些資訊會與之前發表過的文章局部重複,敬請包涵。

    1.設計的基本尺寸(單位:公分)
    A.衣櫥:深度一般60~65;推拉門:70,衣櫥門寬度:40~65
    B.推拉門:75~150,高度:190~240

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

          今天設計嵐來分享一個超實用的免費英文字型下載網站,這對於許多需要常常面對不同主題與設計風格的設計師來說很好用,大家不妨參考一下。

    1.在瀏覽器輸入網址 http://mks.jp.org (往後大家可以在側邊欄位的『好用資源』點選連結)

     1.png 

    點選首頁左上角笑臉圖示進入(上圖紅框處)

    2.點選頁面上方『DESIGN FONT』選項進入。

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

          接續前篇『[教學]平面設計師一定要知道的KnowHow~印務知識Q&A緊接著發表第二彈!針對重要的印刷相關知識加以說明,給所有從事設計的人做一個參考。

    Q:常見的印刷方式有哪些?

    A:常見的印刷方式如下:

    1.平版印刷:此種印刷方式的特色就是『製版的版材便宜且製版快速』,大部份的紙製品都用這個方法印刷。

    2. 凸版印刷:具備有打流水號、撕開線以及軋折線的功能,所以常用於燙金、瓦楞紙印刷、利樂包、塑膠袋以及票劵等印刷。

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

          今天設計嵐的朋友轉寄了一封信,標題為『馬克的履歷表』,看完之後覺得很有趣,有趣之餘更是佩服,佩服的原因有二:1.這就是『創意』,身為設計師你我或立志成為設計師的人,是否能有這樣的創意思維? 2.這就是『能力』,當我們有靈感、有創意時,我們能不能用我們所會的技術與工具,將我們的創意實現?

          本文中的馬克,有創意、有膽識,也有技術;他利用創意的手法應徵上講求創意的工作,有膽識在這面試的場合使用這樣的創意,更有技術將腦中的創意實現出來,所以,大家看看吧,或許你我在設計的這條路上,都要擁有這樣的條件。

    =============(以下為轉載內容)=========

    馬克的履歷表

    今天不靠腰,來聊聊我入社會時所作的第一份履歷表,(想想這好像也是目前為止唯一的一份)...

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

          今天設計嵐就來分享身為一個平面設計師,一定會接觸到的『印刷事務』上的相關知識,透過本篇QA,印刷相關知識一次學會,距離專業設計師就會更進一步喔!

    Q:印刷的流程是怎麼樣的一個情況?

    A:一般而言印刷的流程可以用下圖加以表示:

    1.jpg 

    p.s.本流程圖感謝巨匠名師黃龍文老師的分享

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

          今天『成為CSS高手之路』系列文章之四,繼續針對『整頁套用的CSS規則』作後半段的說明,能夠讓規則套用在整個頁面的方法除了前文『成為CSS高手之路(三)~CSS在DW中的設定與語法宣告方式Part I-整頁套用的CSS規則(上)所提到的設定方法之外,還有其他幾種設定方式,其影響範圍也都是一整個頁面的。

     

          以下要介紹以『類別』(CLASS)、『ID』以及『標籤』三種方式所建立的CSS規則,這三種規則的宣告有個共通性-『都必須寫在<head>及</head>之間,且用<style>標籤來定義CSS的內容』,這一點我們在上一篇文章有提過,溫故知新一下,但是這三種方式還是有其宣告與使用上的差異性,以下來分別介紹。 

    1.本文範例初始畫面如下: 開啟Dreamweaver建立新頁面後,輸入以下五段文字。

    2.jpg    

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

          延續著上一篇的豹紋文字範例,設計嵐繼續使用相同範例檔案,說明在商業設計上,設計師常用在製作高質感商品倒影的一個技巧,各位學會了可以運用在Logo設計、拍賣商品修圖等,都會有效提升質感喔!

    ◎完成結果如下:

    final.jpg  

    1.由於上一篇豹紋文字完成後,理論上圖層的結構會如下圖,我們必須針對背景以外的圖層進行合併,好方便後續作業。

    1.jpg 

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

          今天設計嵐來分享一個多年前在一本國外翻譯的設計書上學到的技巧,由於多年前Apple的Mac 系統曾將其10.2版命名為『Jaguar』(豹),所以當年在設計界還蠻流行豹紋的設計手法的,所以當初便學了起來記到今天,咱們今天就以Mac OSX虛擬一個主題,介紹這個設計手法好了。

          這個教學設計嵐想分兩部分,分別以兩篇文章說明,本文將重點放在於『豹紋』質感的製作;下一篇文利用本篇製作好的文字,來介紹一個在商業設計以及網站Logo都很常用的倒影效果製作,簡單又實用,大家不妨參考。

    ◎豹紋文字完成圖:

    39.jpg 

    1.利用PhotoShop開啟新檔案

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

          根據之前的新文章預告,設計嵐來介紹如何將數位相片製作成類似用彩色鉛筆素描繪畫的效果,大家可以找一張自己手邊的數位相片進行練習,效果令人驚艷喔。

    ◎原始圖                                    ◎完成圖

    1.jpg  final-2.jpg  

    1.選取影像素材

          在這個設計手法中,素材的選取也是重點的關鍵之一,在影像素材的選擇上,建議大家可以選擇『背景較單純、輪廓線條較明顯』的影像,這樣的影像製作這個手法會更完美。

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

          今天設計嵐來分享一個PhotoShop超絕技,那就是將數位相片製作成具有油畫質感的作品,只要相關參數調得適當,油畫的質感相當擬真,而且輕鬆簡單,大家可以試試看。

    ◎原始圖                                    ◎完成圖

    s1.jpg s2.jpg

    1.選取影像素材

          在這個設計手法中,素材的選取是其中的關鍵之一,由於油畫的特性是『顏色濃厚、鮮豔』,因此在影像素材的選擇上,除了構圖本身優美之外,最好選擇色彩鮮豔、豐富的較適合。

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

          今天『成為CSS高手之路』系列文章之三將來說明一下,CSS語法的宣告方式以及在Dreamweaver中要如何設定CSS,雖然有些人覺得應該直接用『寫』得方式來學習CSS,但設計嵐希望CSS被更多人所了解接受(包括初心者),唯有大家不害怕CSS了,也才會願意去深入研究它,所以即使直接使用軟體的設定畫面完成的CSS,只要使用得當,實用性還是相當高的。

          由於CSS的宣告方式很多種不同的方式,為了減輕各位學習上的負擔,以及分別說明各種不同的方式,設計嵐以一種方式一篇文章的方式來解說,大家可以分開閱讀,也比較好掌握重點;首先Part I 設計嵐先來講解第一種方式-『在整個網頁頁面中套用CSS規則』要怎麼設定以及宣告的方式。

         在這一系列的文章中,我們依然用上一篇的範例來做示範說明,下圖為一個純粹使用HTML語法撰寫的頁面:  

     

    1.網頁頁面內容圖解說明: (順便溫故知新一下)

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

          這篇教學是設計嵐一個學生在『嵐設』Facebook粉絲團中分享的一個教學網站連結,其中的一篇教學文章,很棒的分享~~剛好也可以讓學生們了解Photoshop曲線功能的運用,引用過來給大家參考.^^..這個網站設計嵐也會將它將在側邊欄位的『好用資源』提供大家連結學習。

    ◎上色前:                                ◎上色後:

    1.jpg 2.jpg

          設計嵐本身很喜歡這種利用簡單指令製作出有質感的手法,大家如果是相關軟體的初學者,不妨也從這個方向著手進行練習,容易有成就感又學得到實際的東西。

    以下文章引用自以下網址:

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

          今天來分享一篇教學,說明網頁設計相當重要的基本功-版型切圖的原則與流程,由於網頁的版型變化相當多元且能夠進行版型設計與切圖的軟體也很多,日後設計嵐會一一分別做說明,今天先以設計嵐自己最常使用的『Fireworks+Dreamweaver』搭配來說明。

    ◎先來看看完成畫面:

    final.jpg 

    這次的說明範例算是簡單的版型架構,主要分三個區域:

    ‧表頭區:包含Logo、網站名稱與連結按鈕

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