全新 Photoshop CC 取代 CS，功能大改良

Adobe 近來真是動作很多呢，除了之前釋出 Lightroom 5 Beta 讓大家免費試玩之外，剛剛更發佈了全新的Photoshop Creative Cloud (Photoshop CC) 取代已經出到第六代的 Creative Suite (CS)，而且是只提供給 Creative Cloud 訂閱者使用，換言之，除了不會有 CS7 之外，整個軟件更與 Adobe 的雲端系統連結起來，以後也會以每月訂閱費代替一次過購買軟件，衍生出來的結果有很多，例如解決翻版問題、不用頻頻更新、入門費用較低之類。就這個改變，看來外界一般反應都不錯。(更新︰外界反應頗有爭議)

與之相應，今次 Photoshop CC 更一次過推出大量改良，大家不妨留意留意，以下是部份重點改良︰

1) 全新的智慧型銳利化

簡介︰「全新的智慧型銳利化是目前最進階的銳利化技術。該技術會分析影像，將清晰度最大化並同時將雜訊和光暈最小化，此外您還可以藉其進行微調，以取得外觀自然的高品質結果。」影片介紹︰

2) 智慧型增加取樣

簡介︰「將低解析度的影像放大，使其擁有優質的印刷效果，或從尺寸較大的影像開始作業，將其擴大成海報或廣告看板的大小。新的增加取樣功能可保留細節和清晰度，而不會產生雜訊。」

3) Camera Raw 8 和圖層支援

簡介︰「你可將 Camera Raw 所做的編輯以濾鏡方式套用到 Photoshop 內的任何圖層或檔案，然後再隨心所欲地加以美化。藉由新的 Adobe® Camera Raw 8，您可以更精確地修改影像、修正透視扭曲的現象，並建立暈映效果。」影片介紹︰

4) 相機防手震

簡介︰「挽救你以為因為相機震動而失敗的相片。不論模糊是由於慢速快門或長焦距而造成，相機防手震 (Camera Shake Reduction) 都能分析其曲線以回復清晰度。」影片介紹︰

5) 可編輯的圓角矩形

簡介︰「現在你可以調整形狀的大小、進行編輯，然後再重新編輯，而且這些作業在形狀建立之前或之後都可進行。你甚至可以在圓角矩形中編輯個別的圓角半徑。如果形狀將用於網路，可從檔案轉存 CSS 資料以節省時間。」

6) 改良的 3D 繪圖

簡介︰「現在當你在 3D 物件和紋理對應上進行繪圖時，即時預覽的速度最高可加快 100 倍，互動效果也更好。有了強大的 Photoshop 繪圖引擎，任何的 3D 模型都看起來栩栩如生。」影片介紹︰

還有其他新功能如下︰

7) 多重形狀和路徑選擇

透過同時選取多個路徑、形狀和向量圖遮色片，不需按多次滑鼠即可完成更多作業。即使在擁有許多路徑的多圖層文件中，也可以使用新的濾鏡模式，直接在畫布上鎖定路徑 (及任何圖層)。

8) 擴充的智慧型物件支援

有了新智慧型物件支援，你就可以套用非破壞性的模糊效果庫 (Apply Blur Gallery) 和液化效果。即使對影像或視訊加入模糊效果或進行推擠、拉扯、縮攏或者膨脹，原始檔案仍能保持完整。即使在儲存檔案之後，您仍可隨時編輯或是移除效果。

9) 改善的文字樣式

有了文字樣式，你便可以將格式設定儲存為預設集，然後只需按一下滑鼠即可套用。你甚至可以定義能套用到所有 Photoshop 文件的文字樣式。

10) CSS 屬性複製

現在，你可透過 Photoshop 針對特定的設計元素產生 CSS 程式碼，然後輕鬆將程式碼複製並貼至網頁編輯器，即可獲得您要的結果。

11) 條件動作

你可藉由條件動作，以「自動導航」的方式進行例常的處理工作。這些命令會使用 if/then 陳述式，根據你所設定的規則自動選擇不同的動作。

12) 改良的 3D 場景面板

3D 場景 (3D Scene) 面板可使 2D 到 3D 編輯的轉變更為順暢；此面板具備許多您已熟知的圖層面板選項，例如複製、範例、群組和刪除等。

13) 工作流程省時妙方

現在你可在執行常見工作時節省很多時間，因為眾多像您這樣的使用者要求我們提供實用的小功能，其中包括將圖層拖曳到標籤文件、使用新的輔助按鍵更輕鬆地建立路徑、使用空格鍵移動路徑、在 PNG 格式中加入 ICC 描述檔等等。

14) 改良的 3D 效果

陰影和反射能成就您的 3D 圖稿，也能使其一蹋塗地，而更高品質的即時預覽則有助於加快製作絕妙作品的速度。此外，你還可以輕鬆建立更優質的光暈效果、場景照明，以及凹凸和紋理的光源等。

15) 從網頁檔案讀入顏色

直接從 HTML、CSS 或 SVG 檔案讀入色票，以激發靈感或是輕鬆搭配現有網頁內容的色彩配置。

16) 用於文字的系統消除鋸齒

使用與 Mac 或 Windows® 系統非常接近的消除鋸齒選項，取得文字外觀的真實預覽。

17) 改良的最小和最大濾鏡

使用功能更為強大的最小和最大濾鏡建立更精確的遮色片和選取範圍，新款濾鏡現在包含保留方度及圓度的選項。

每項詳細更新，大家可以按此瀏覽官方網站了解。至於收費方面，你可以選擇以每月 HKD 388 訂閱 Adobe CC，以使用所有 CC 軟件 (六月開始)，或是以每月 HKD 148 只訂閱 Photoshop CC，可以按此了解更多。

---------------------------------------------
出處

你從未瞭解過的 z-index

以前在使用 z-index 的時候，心中隱約自以為是的認為就單純 z-order，不就是個絕對數值，就值越小深度越往下。實際上在實作的時候常常不如預期，不過使用試誤法還是可以解決，只是一直沒有瞭解原理有點不踏實，但慢慢已經發現這件事情沒有想像中的這麼簡單。

最近剛好讀到一篇文章，覺得解釋得不錯，所以就來翻譯一下這篇文。

大部分的人都沒有真正的理解 z-index 是如何運作。z-index 並不複雜，但如果你從未花時間去讀 spec ，那麼你肯定有些你完全沒有意識到的關鍵點。不相信的話來看看你有沒有辦法解這個問題：

問題

底下這個 Sample 裡面包含了三個 div ，每一個 div 中包含一個 span ，並且分別給予三個 span 紅、藍、綠三個顏色。每個 span 都是 absolute position，並且第一個紅色 span 額外設定了 z-index=1。

好的，那麼現在有一個挑戰是想辦法把紅色的 span 放到最下面，並且符合以下規則：

• 不能更動 HTML
• 不能對任何 element 新增或是改變 z-index
• 不能新增或改變任何 element 的 position

有興趣挑戰的話可以按一下上面的 Edit on Codepen 嘗試看看。如果你成功的解決這個問題，那代表你應該可以跳過以下文章了  提醒：不要按下面的 CSS 不然你就會直接看到解答了。

解答

方法是將第一個 div ( red span 的爸爸) 設定一個小於 1 的 opacity。

1 2 3

div:first-child { opacity: .99; }

如果你不懂 first-child 的話，其實你也可以直接在第一個 div 上給 inline style: stye="opacity:0.99″。 但我想不懂 first-child 的話應該不會來看這篇文章才對。 如果你正想破頭不知道為什麼，而且無法相信 opacity 會影響 element 的深度的話，嗯，你並不孤獨，我第一次遇到這個問題的時候也一樣的驚訝。 希望以下內容能夠幫助釐清這個問題與解答。

疊放順序 (Stacking Order)

Z-index 看起來似乎非常簡單：具有較高 z-index 的 element 會疊放在具有較低 z-index 的 element 上。但實際上不是的。z-index 的一部分問題就在於它看起來很簡單以至於大部份的開發者不會花時間去研讀這些規則。 疊放順序指的是 HTML document 中的每一個 element 可以被放在其他 element 的前面或是後面。而決定這個順序的規則很明確的寫在 spec 中。但如同前面所述，大部分的開發者並不會去看 spec 來完整的了解這個規則。 對於沒有指定 z-index 與 position 的 element 來說，基本上疊放順序就相等於在 HTML 中出現的順序 (好吧，其實也沒那麼單純，但如果你沒有使用小於零的 margin 的話，這應該還是基本上成立)。 當把 position 放進來考慮的時候，那麼所有具有 position 屬性的 element 會被堆放在沒有 position 屬性的 element 上 (這裡說的沒有 position 屬性，正確地來說應該是沒有明確指定而是預設的 static position value)。 最後，牽涉到 z-index 後，這順序的決定就會變得有點難處理了。首先 z-index 只對具有非 static position value 的 element 有效，也就是說 element 上必須是 relative 或是 absolute position，那設定在這 element 上的 z-index 才會有作用。再來是 z-index 的設定會創造疊放群組(stacking context)，於是看似簡單的規則就因為這個 stacking context 而變得複雜了。

疊放群組 (Stacking Contexts)

疊放群組 (stacking contexts) 指的是一組具有相同父元素的 elements 具有相同的疊放順序 (stacking order) 。能夠真正理解 z-index 以及疊放順序 (stacking order) 如何運作的真正關鍵是充分的了解 疊放群組 (stacking contexts) 。 每一個疊放群組 (stacking contexts) 會有一個單一的 DOM element 做為根元素。當一個元素構成一個新的疊放群組 (stacking contexts)的時候，所有該元素的所有子元素都會被歸類在在疊放順序(stacking order)中的同一個位置。也就是說如果一個元素被包含在一個相對疊放順序較低的 stack context 中，那麼即使你設定它的 z-index 為一千萬也沒有辦法再讓它出現在其他具有較高疊放順序(stacking order) 的疊放群組 (stacking contexts) 上面。 以下三種情況會產生新的 疊放群組 (stacking contexts)

• 當一個 element 是文件的根節點的時候 (也就是 <html>)
• 當一個 element 有非 static value 的 position 屬性以及非 auto 的 z-index 屬性
• 當一個 element 具有小於 1 的 opacity

前兩個合理並且一般開發者應該都懂 (即使不知道它們叫什麼)。 但第三個 (opacity) 就幾乎從來沒有在 W3C Spec 以外的地方被提起過。

決定元素的疊放順序 (Stacking Order)

事實上，決定全域的所有元素在一個頁面中(包含邊框、背景、以及文字節點等等)的疊放順序 (Stacking Order) 是極度的複雜並且遠超過本文所要討論的範疇。(有興趣的話還是建議參考 spec) 但一個基本的了解在大多數情況下還是可以幫助讓 CSS 的開發是比較符合規範的。

疊放群組 (stacking contexts)中的疊放順序 (Stacking Order)

以下所示是基本規則，這邊直接使用對應的 CSS 設定來解釋，但有一點需要注意的是因為 transform 會導致不同的 z-order，但這邊並未包含 transform 之後的規則。

這邊有一點有趣的是具有負值的 z-index 元素會排序在疊放順序中較底的位置，因此這使得這樣的元素有可能會被自己的 parent 蓋住。關於這部分可以參考這個由 Nicolas Gallagher 所提供的很棒的範例。

全域的疊放順序 (Stacking Order)

對於疊放群組 (Stacking Context) 以及單一群組中的疊放順序有了比較具體地瞭解之後，對於全域的順序的理解就沒有這麼難了。 要避免被 z-index 困住的關鍵在於能夠標注出疊放群組的所在元素。當你對一個元素設定了上千萬的 z-index 但它的順序還是不受任何影響的話，那麼看看它的子節點或是父節點看看是不是其中一個構成了新的疊放群組 (Stacking Context)。如果有的話，那上千萬的 z-index 是不會有任何幫助的。

總結

回到原始的問題，以下是對應的 HTML 原始碼並標注上對應的疊放順序 (stacking order)

123456789

<div><!-- 1 --> <span class="red"><!-- 6 --></span> </div> <div><!-- 2 --> <span class="green"><!-- 4 --><span> </div> <div><!-- 3 --> <span class="blue"><!-- 5 --></span> </div>

view rawgistfile1.htmlThis Gist brought to you by GitHub.

在解法中我們對第一個 div 設定了 opacity 小於 “1″ 之後，疊放順序 (stacking order) 就變成了

123456789

<div><!-- 1 --> <span class="red"><!-- 1.1 --></span> </div> <div><!-- 2 --> <span class="green"><!-- 4 --><span> </div> <div><!-- 3 --> <span class="blue"><!-- 5 --></span> </div>

view rawgistfile1.htmlThis Gist brought to you by GitHub.

1.1 指的是一個新的疊放群組 (Stacking Context)形成，於是 red span 被歸類在同一個 order 中。

(資料來源：http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ byPhilip Walton)

正在變平的世界

這兩年科技圈開始緩緩吹起一股「平面風」，從 Facebook、Google 到 Apple，大家紛紛把 Logo、網站、App，甚至是 OS 的使用者介面越改越平。雖然聽起來有點不可思議，但這一波風潮主要帶頭的似乎是微軟，他們在 2012 年推出的 Windows Phone 8 率先採用了完全平面化的設計。

接著在去年的全面 UI 大改版中，Google 也跟上了這個潮流：

近期，Facebook 也把 Logo 以及網站上的許多 Icons 平面化了：

最後連 Scott Forstall 走後，改由 Jony Ive 主導的 iOS，也傳出將在 7.0 版推出時大幅度的平面化：

當然 3D 立體、擬物或是平面，圓角或是方框，各自都有它們的擁護者。但不同的風格的確會讓使用者有不同的使用感受，當平面變得現代、時尚，立體就有可能會讓使用者感到比較傳統、復古。因此我鼓勵大家有空多欣賞別人的設計，感受不同設計給你的不同體驗，才能在做自己的產品時，選擇最適合你品牌精神的設計風格。
以上出處
----------------------------------------------------------------------------------------

在apple 帶領這麼多年擬真風格設計,也漸漸被平面風格取代了,趨式設計是有一定的流行走向,就像使用者的喜好是一樣,一但喜歡的風格久了,就會想換口味,另一種風格就會冒出而迎領潮流,現在當紅炸子雞 就是 很 "平"的風格.

Facebook廣告類型：哪一種適合你？(下)

在上一節我們說明了12種代表“企業聲音”的Facebook廣告，現在讓我們繼續，看看12種代表“朋友聲音”的“動態贊助”(Sponsored Stories)廣告有哪一些。

代表“朋友聲音”的12種“動態贊助”廣告

以下是在”動態贊助“類別中，最多廣告主選用的廣告：

1. Page Like Sponsored Story “專頁按讚”動態贊助

這種動態贊助最適合用用於取得粉絲。如果使用“精確瞄準”功能的話，它在觸及精準的受眾上的表現也很好。廣告的內容是根據你的專頁資料產出，所以要確定你的專頁名稱和圖片有準確地代表你的企業。另外，如果你有設定你的專頁類別(如：健康保健/美容)，那麼在桌面版的動態消息中也會把這些額外的資訊顯示出來。

2-4. Page Post Sponsored Stories “專頁貼文”動態贊助(讚、留言、分享)

如果你想推廣專頁的貼文，你將有三個選擇 －根據用戶的行為(讚、留言、或分享)來建立不同的動態贊助。在廣告中會附上貼文的原文，顯示朋友按讚、留言、或分享的內容。專頁貼文贊助廣告最適合用於增加互動和體認，也是一種在桌面和行動版上推廣內容的好方法。

5. Question Sponsored Story “提問”動態贊助

與上一節提及到的提問式廣告類似，“提問”動態贊助最適合用於增加互動，和向用戶收集有用的數據。這兩者之間的差別在於動態贊助中的社群元素－動態贊助會顯示用戶的答案，同時也會允許其它用戶作答。

6. Offer Claim Sponsored Story “領取優惠”動態贊助

與領取優惠廣告類似，這種動態贊助會顯示給粉絲的朋友看，並對帶動新的粉絲和轉換率有幫助。

7. Event Sponsored Story “活動”動態贊助

與活動廣告類似，“活動”動態贊助會推廣之前進行過的活動，並幫助帶動用戶參與新的活動。這種“活動”動態贊助會包含參加過這個活動的朋友姓名和個人頁面的照片。這個做法等於幫助活動作背書，可以增加參與活動的機率。

8. Check-In Sponsored Story “打卡”動態贊助

如果你在經營一家實體店面，你可以透過推廣打卡的動作，增加店鋪的知名度，並帶動店內的業績。與其它動態贊助一樣，用戶產出的內容，可以透過來自用戶朋友的建議，幫你觸及你的目標受眾，以增加回應率、潛在客戶、或銷售。

9. Game Played Sponsored Story “玩遊戲”動態贊助

這種玩遊戲的動態贊助可以增加你新推出的遊戲的知名度，帶來更多的潛在客戶。這種廣告的好處是用戶可以選擇透過動態贊助直接玩這個遊戲！要注意的是在動態中會使用你的遊戲的略圖(thumbnail)，所以確定你的圖片是精準而吸引人的。

10. App Shared Sponsored Story “分享應用程式”動態贊助

與“玩遊戲”動態贊助一樣，這種動態類型可以幫助增加你的應用程式的知名度，以達到帶動安裝次數的效果。確定你的應用程式描述有寫好，因為它會被用在桌面版的動態消息中。

11. Open Graph Sponsored Story “開放社交關係圖”動態贊助

如果你建立了“開放社交關係圖”的app，就可以利用這種動態贊助來推廣你的app、帶動安裝次數、並增加使用率。這是一種觸及新用戶的好方法，因為這種動態會受到用戶朋友的活動所帶動，例如：當一個朋友正在聽音樂，他們的朋友可能也會聽一首歌。

12. Domain Sponsored Story “域名”動態贊助

與其它動態贊助一樣，當一個用戶在某內容上按讚時，他的朋友就會看到其中的域名。這樣的話，你要推廣的內容被他們認識的朋友推薦，因此你的內容被分享的機率也會提高。這種動態一般是用來把訪客導入到你的網站，可以增加產生新客戶、訂閱者等的機率。

小結：以上就是兩大廣告類別(廣告和動態贊助)中可共選擇的24種廣告選項。雖然聽起來好像有點多，但是跟任何事一樣，只要去做實際的嘗試和試驗，相信必定可以找到其中的訣竅，掌握如何瞄準受眾和優化你的廣告了！

圖片來源：www.socialbakers.com

文章出處 

----------------------------------------------------------------------------------------------------

這類型的MGM廣告就像朋友掛保證無害+推薦!!!

精準的將粉絲的朋友們，一個一個拉進來~

Rita