[心得] Photoshop 色彩描述檔小筆記

POST 凌晨2:41 標籤： , View Comments

ICC 最近比較忙，好久沒寫文章，這次來分享一下使用 Photoshop 色彩描述檔的心得吧！

話說有在做平面印刷的人一定都知道色彩描述檔這種東西，不過沒有接觸過的人可能就很難了解他的作用。可以把他看作是圖稿的顏色識別證，基本上掛上相同的識別證之後，作品在兩台電腦之間是不會有太大的差異的。

不同的色彩描述檔，有著不同的色域。色域越廣的描述檔所呈現出來的圖稿越鮮艷、漂亮！所以，如果我們想要讓自己的照片在經過 Photoshop 調整之後還能更加閃亮動人，我們就不能不認識這個了不起的功能了！

以下我們來作個小實驗，順便也能了解在 Photoshop 底下，如何將圖片色彩描述檔轉換成較廣色域的描述檔！

Step 1

首先，我們先將 Photoshop 內建 RGB 描述檔改為 Adobe RGB (1998)，這是目前色域最廣的描述檔。方法為：選擇「編輯」>「顏色設定」，開啟設定視窗。「使用中色域」的地方下拉選取 Adobe RGB (1998) 然後按下「確定」。

Step1

Step 2

然後準備一張圖片，並在 Photoshop 裡面開啟他。

Step 3

接下來，我們要用 2 種不同的方法來另存這張圖片：

A. 「檔案」>「另存新檔」，檔名任意，最好與原來有所區別。JPEG 儲存對話視窗中「品質」選擇最大，按下「確定」儲存。

Step3-A

B. 「檔案」>「儲存為網頁與裝置用」，開啟對話視窗，檔案類型選擇 JPEG，品質最大 100 ，然後記得勾選「ICC 描述檔」選項，按下「儲存」，檔名最好與原圖片與上面 A 方法有所區別。

Step3-B

Step 4

用 Photoshop 以外的軟體分別開啟剛剛 A、B 方法儲存的 2 張圖片（或是直接拖曳到瀏覽器開啟）。試著比較看看！是不是差很多呢？哪一張比較鮮艷？

Step4

很神奇吧！起初我以為只要 Photoshop 顏色設定就好，「另存新檔」之後描述檔也會跟著存出，但事實上並非如此。在「另存新檔」中即使勾選（預設）了「ICC 描述檔」儲存圖片，使用其他軟體或是裝置開啟之後，圖片依然呈現較少色域的顯示狀態。相反地，利用「儲存為網頁與裝置用」來存出，卻能正確表現圖片的鮮艷與色彩！

為什麼會這樣，詳細原理其實我也不是很清楚，不過至少我們知道，下一次把照片透過 Photoshop 修的美美之後，記得別只是按下「另存新檔」，使用「儲存為網頁與裝置用」將 ICC描述檔讀入，才能讓你的照片保留完美的顏色紀錄唷！

Read More...

來看看Google、Yahoo、Apple，10年前的樣子

POST 上午11:06 標籤： View Comments

網路發展10年間進步迅速，各種技術應用，以及 Web 2.0 興起，讓網路使用習慣與10年前大不相同！細看網站設計，也有許多大躍進。CSS 應用抬頭、Html 語義化、Flash 3D 強化、各種創意版型設計，讓目前的網站與10年前相較，除了賞心悅目之外，更增添互動的樂趣！前天在國外網站看到幾個知名企業的網站比較圖，讓我們可以檢視這段時間的改變，很有意思！

Apple 2008 V.S. 1998

history_apple2008
history_apple1998

Google 2008 V.S. 1998

history_google2008
history_google1998

Yahoo 2008 V.S. 1998

history_yahoo2008
history_yahoo1998

AOL 2008 V.S. 1998

history_aol2008
history_aol1998

Nike 2008 V.S. 1998

history_nike2008
history_nike1998

IKEA 2008 V.S. 1998

history_ikea2008
history_ikea1998

 

另外，Youtube 上面還有人將這10年 Google 網頁每一天的變化錄製成影片，很厲害！不過 Google 網頁10年來其實變化不大，大部分只是 Google 的 logo 隨著節日變化，呵呵！應該蠻適合晚上睡不著的時候觀看哩。

Read More...

Mirror's Edge 靚影特務，There's no looking back！

POST 凌晨1:12 標籤： View Comments

mirrors_edge_02_1600 「Run ! Forrest ! Run !」這段「阿甘正傳」裡的經典台詞，大家應該不陌生吧！而這正是「靚影特務 Mirror's Edge」這款遊戲的最佳 slogan 呢！

EA 與瑞典開發商 DICE 共同研發的第一人稱動作遊戲「靚影特務 Mirror's Edge」，與大家熟悉的 FPS ，也就是第一人稱射擊遊戲有所不同，不再只是拿著槍到處掃射，「靚影特務 Mirror's Edge」更著重於凸顯角色的動作層面！赤手空拳的逃離追捕，並且在偌大的城市裡面，藉由奔跑、攀爬、跳躍來找尋出口。遊戲透過第一人稱視覺，配合逼真的聲音效果，讓玩家更加深入體驗動作冒險的肢體臨場感！

這段逃離直升機追擊的影片真是相當經典！逼真的聲音，彷彿真的快被子彈打中，從大樓高處一躍而下，風從耳邊刮過，我想有懼高症的人可能不太敢玩吧XD。

有別於一般較為灰暗的背景，本作大膽使用白色，整個城市看起來相當明亮！製作人 Tom Farrer 提到，這是為了反應女主角眼中的世界，並透過找尋紅色的物品，象徵「希望」與「溝通」，讓主角追逐紅色、找尋希望。這點真的頗具巧思！想必這會是一款相當值得收藏的好遊戲！

這段影片訴說著這個城市的過去與現在，以及女主角的背景與命運。雖然還不是很清楚來龍去脈，不過看得出來製作公司在故事設定上也下了功夫。

此款遊戲預計於2008年11月11日發售，將橫跨PC、PS3、XBOX 360平台。所以不論是哪個主機的 Fans 都能享受到這款遊戲帶來前所未有的動作體驗唷！

120 119 139

Read More...

3 部音樂強烈的電影預告

POST 上午11:34 標籤： View Comments

自己還蠻喜歡看電影預告的，就像是一個精緻的小型電影，彙集了整部電影的視覺精華，搭配音效，短短幾分鐘，卻總是能讓人血脈噴張，或是捧腹大笑。最近在逛 HQTV 高清電視 ，看一些電影預告的時候，發現幾部預告配樂還挺有特色的！曲調類型我不是很清楚，也許是輕搖滾吧？我相當喜歡！下面這3部電影的預告都選了相似的配樂，畫面也充滿張力，整體氛圍像是快要窒息、力量要爆發似的感覺。跟大家分享。

watchmen_200807171600 Watchmen：守望者
上映日期：2009-03-06

改編 DC 同名科幻漫畫，由「300壯士」導演 Zack Snyder 執導，講述一群已經退隱的超級英雄，由於調查夥伴被殺害的事件，被扯入世界末日陰謀的故事。原作漫畫當年被公認為是美國漫畫小說巔峰之作，甚至影響了後期「蝙蝠俠」等英雄漫畫，以及迪士尼賣座的「超人總動員」動畫。

預告幾乎跟著音樂在走，感覺就像是在看一支精彩的 MV 一樣，音樂相當好聽，視覺充滿黑暗、嚴肅的色調，讓這部電影相當有看頭！令人期待！

maxpayne_200808151502 Max Payne：麥斯。潘恩
上映日期：2008-10-17

改編同名自暢銷電玩的作品。「麥斯。潘恩」，原本是一個有著人人羨慕的幸福家庭的緝毒組探員，在妻女被殺之後，化身為復仇者，追查幕後真兇。卻發現敵人竟是比他想像中的還要殘暴的惡魔！

復仇、喪失理智，加上地獄火焰與惡魔，題材真是相當具有張力。

前段鋪陳，後段配合視覺上的特效，如同地獄火焰爆發，營造潘恩與惡魔孤注一擲的大對決，世紀之戰，相當精彩！

thespirit_200805061207 The Spirit：閃靈俠
上映日期：聖誕節 2008

由「300壯士」、「萬惡城市」原創作者：法蘭克米勒執導，又一改編漫畫作品。描述一名年輕探員「丹尼。科特」死亡之後重生，並獲得神秘的力量，在城市中打擊罪犯，並對抗死對頭「章魚博士」。這位見人就殺的大反派，由「山繆傑克森」出演，在劇中變換各種造型，相當活躍！

劇中另一大賣點，就是網羅好萊塢各大美女，Scarlett Johansson、Eva Mendes、Jaime King 等飾演個性、職業、生活大不同的女主角們。閃靈俠拼死打擊罪犯，卻也豔福不淺。

Read More...

[CSS] 使用自訂圖片取代選單文字

POST 上午8:45 標籤： , View Comments

選單02 這是之前格友 Queen 提過的問題，稍微整理一下方法跟原理吧！

使用國內的「無名」、「Pixnet」等 BSP 的朋友，部落格的選單連結已經是 html 寫死的狀態，也就是說，如果不刻意去控制的話，預設的選單就是「相簿、部落格、留言、名片」這樣的連結文字，加上 Windows 作業系統對中文字型先天上支援不足，幾個大拉拉的電腦字就杵在那裡。雖無大礙，但是若能替換自訂的圖片，增加裝飾性與主體整體性的話，視覺就更棒了！

由於各家 BSP 結構不盡相同，各主題之間樣式差異頗大，在此需先做一個模型，我以「Pixnet」的架構為例子，樣式則假設為橫式選單。

html架構原始碼如下：

<ul id="navigation">
    <li id="link-album"><a href="/album/">相簿</a></li>
    <li id="link-blog"><a href="/blog/">部落格</a></li>
    <li id="link-guestbook"><a href="/guestbook/">留言</a></li>
    <li id="link-profile"><a href="/profile/">名片</a></li>
</ul>


CSS 樣式表如下：

#navigation {
    background-image:url(bg.jpg);
    background-repeat:repeat-x;
    position:absolute;
    width:400px;
    height:35px;
    left:200px;
    top:200px;
    overflow:hidden;
}
#navigation li {
    float:left;
    margin:0;
}
#navigation a {
    color:#fff;
    display:block;
    width:90px;
    height:25px;
    text-align:center;
    padding:5px;
}


顯示結果：view01

Step 1 替換自訂圖片

準備好自訂的背景圖片。最簡單的作法就是直接製作一整張底圖。以這個例子來說，就是製作一張寬：400px，高：35px的圖片，上面有設計好的與整體部落格風格搭配的背景，連結的文字也一併使用非電腦字的字體設計。上傳之後，修正 CSS 如下紅字：

#navigation {
    background-image:url(新自訂圖片.jpg);
    background-repeat:no-repeat;
    position:absolute;
    width:400px;
    height:35px;
    left:200px;
    top:200px;
    overflow:hidden;
}
#navigation li {
    float:left;
    margin:0;
}
#navigation a {
    color:#fff;
    display:block;
    width:90px;
    height:25px;
    text-align:center;
    padding:5px;
}


顯示結果：view02

Step 2 隱藏連結文字

上面可以看到預設的連結文字與我們自訂圖片上得文字產生重疊，只要想辦法把文字隱藏起來就可以了！修正 CSS 如下紅字：

#navigation {
    background-image:url(新自訂圖片.jpg);
    background-repeat:no-repeat;
    position:absolute;
    width:400px;
    height:35px;
    left:200px;
    top:200px;
    overflow:hidden;
}
#navigation li {
    float:left;
    margin:0;
}
#navigation a {
    color:#fff;
    display:block;
    width:90px;
    height:25px;
    text-align:center;
    padding:5px;
    font-size:0;
    *text-indent:-9999px;
}


顯示結果：view03

完成！！很簡單吧！

事實上，在 FireFox 底下，只要下「font-size:0;」屬性，文字就會被隱藏起來了，但 IE 不認這個屬性，所以我們必須在加上 only for IE 的屬性 「*text-indent:-9999px;」，這樣 IE6、IE7 都能正確的顯示出自定圖片之後的選單了！

另外一個重點在於 <a> 這個元素一定要給予高度「height」的屬性！如此才能確保當連結文字被隱藏之後，使用者還能正確點選連結！高度值最好與背景圖片設定相同。

進階

如果想要花俏一點，製作出滑鼠指向效果，也就是當使用者把滑鼠移到選單上面後會產生變化，我們該怎麼做呢？

Step 1 準備自訂圖片加上效果圖片

以上面的樣式為例，我希望平時選單為黑底白字，滑鼠指向選單上面的時候，才出現霓虹的效果。除了將「自訂圖片」改為白色的字之外，還必須為各各連結(這裡是4個)準備不同的效果圖片。

view04

Step 2 CSS樣式修改

依照上面的 CSS 為基礎，再分別新增下列屬性：

#link-album a:hover,#link-album a:active{
    background-image:url(01_over.jpg);
    background-repeat:no-repeat;
}
#link-blog a:hover,#link-blog a:active{
    background-image:url(02_over.jpg);
    background-repeat:no-repeat;
}
#link-guestbook a:hover,#link-guestbook a:active{
    background-image:url(03_over.jpg);
    background-repeat:no-repeat;
}
#link-profile a:hover,#link-profile a:active{
    background-image:url(04_over.jpg);
    background-repeat:no-repeat;
}


其中「#link-album」代表「相簿」按鈕，「#link-blog」則是「部落格」，「#link-guestbook」則為「留言」，最後「#link-profile」則是「名片」。而 01_over.jpg~04_over.jpg 代表各單元按鈕的效果圖片。「#」後面的名稱，各家 BSP 結構不相同，可以開啟網頁原始碼來得知，FireFox 使用者則可以利用 FireBug 套件來觀察元素。通常結構都會是<li id="xxxxx">，這裡 id 名稱 xxxxx，在CSS裡面就是 「#xxxxx」。

顯示結果：view05

Read More...

激發創作靈感的的插畫欣賞

POST 下午5:06 標籤： , View Comments

整理幾個不錯的個人插畫網站、Blog。看看這些令人驚嘆的作品，不僅可以啟發自己創作時的靈感，也能讓我們思考這些創作背後的意義與技巧，也是很有趣的一件事情！看看他們如何製作的，什麼時候打亮光源，什麼時候利用模糊效果，或是配合照片，讓自己的插畫更具質感。

Alberto Cerriteño

來自美國的插畫家 Alberto Cerriteño，相當喜歡富有朝氣與生命力的設計！目前在波特蘭擔任行銷與設計總監，閒暇時刻就會進行一些插畫創作。很喜歡他的角色，造型可愛，搭配一些材質質感，構圖都相當豐富、多彩，每每讓目光停留、探索更多有趣的地方！

background01_1024

background03_1024

future_1024

tres

Ars Thanea

一個團體創作的設計工作室，喜歡鑽研、著眼於一些嶄新的創作技巧，大量使用 Photoshop 的效果在他們的作品上，給人酷炫到不型的強烈印象，就是他們的風格！像下面這張酒類的海報設計，同樣一個酒瓶瓶身，透過光影效果，就能呈現在4個不同場景的氛圍，相當厲害！

mart_blog

TrashTalk

Stay-Alive  

byroglyphics

來自英國的插畫家 Russ 的作品，充滿張力的線條，像來自人體的靈魂得到釋放，並獲得重生般，有股力量要爆發似的！我相當喜歡他的作品！畫面很有力量，促使著我們跟著他的線條，奔放、恣意飛翔，好像有無限可能似的！

page0_blog_entry3_1

page0_blog_entry6_1

page0_blog_entry9_1

Ghostco

Matthew Woodson 出生於美國的印地安納州，作品主題總是環繞在「人」的身上，透過畫面訴說一些想法、議題與情感，漫畫風格的線條相當容易讓人接受！網站上也有一些漫畫創作，沒有對白，僅透過幾格簡單的畫面，卻能讓人深刻感受到一股強烈的情緒，偏灰色調的風格，也總讓人看完作品之後進入沉思，值得一再玩味、讚賞。

ghostco09

ghostco22

ghostco17

ghostco20  

Mario Belem

來自葡萄牙的插畫藝術家，作品混用粉臘筆創作，讓他的插畫看起來別有一番特色！作品裡面多以衝浪、南島為主題，鮮明的色彩、有趣的畫面，商業色彩濃厚！

ess_cd01

buondi2007-01

TAM1

話說插畫家真是一個有趣的職業，感覺較為抽象、隱喻、隨性，多以豐富的色彩、圖紋、元素來構成畫面。自己很難做到這種程度，一直無法理解插畫家創作的思考過程是如何進行的，呵呵，每次想要試著創作插畫，就會感到挫折，因為很沒 Fu 啊！相當佩服這些內涵豐富的插畫創作家！他們所帶來視覺上、思考上、靈感的激勵都相當棒！

Read More...
訂閱： 文章 (Atom)