面包圈是一種用面粉做成的甜甜圈類型的面包。當它們烤好又閃亮時，看上去真的可口解饞喲！

本教程將會向大家展示如何使用Photoshop強大的圖層樣式功能、以及一些筆刷和濾鏡來創作一些美味的面包圈（效果字體）。

這是最終效果圖。

注意：

*本教程中使用的Adobe Photoshop CS6，但是你也可以使用CS3以上任何一個版本。

*你可能想要檢查BasixPage 這一頁來了解一些關于Photoshop基本操作技巧的有用主題，例如加載色板和一些快捷鍵。

（譯者注：教程所用的紋理和字體已經上傳，大家可以去下載哦 網盤下載）

注意：你可能需要加在本教程使用的等高線，所以可以查看這張圖片來了解如何操作。

第一步

新建1250×1250像素大小的文檔（你可以使用任何你想要的寬度值，但是請確保高度值不小于1250）。

選擇矩形工具，設置前景色為#d4d0c9，并拉一個眼神到文檔邊框外一點的矩形。

雙擊矩形形狀圖層，設置如下圖層樣式：

——斜面和浮雕

大小：3

勾選消除鋸齒

陰影模式：正片疊底—顏色# a89a86

HTML5如雨后春筍一般迅猛發展，用戶和開發者也漸漸熟悉了HTML5的環境，在游戲開發領域，HTML5更是比Flash更具吸引力。

HTML5在應用開發、圖像、視頻方面，HTML5的優勢凸顯，僅需原生代碼即可實現。

這里是30例創新十足、魅力無窮的HTML5游戲推薦，閑暇時間點開一個玩玩吧，同時別忘了借鑒一下經驗，以后你做類似設計的時候可以作參考！

1) Sand Trap

想辦法往桶里面倒沙子，簡單又有趣，鼠標點擊旋轉方塊來倒沙子。

2) Entanglement

容易上癮的益智游戲

六角拼圖，看似簡單做起來難，自己試試吧！

3) Galactic Inbox

在這個教程列表上我們為您收集了最具有代表性的各類型HTML5免費教程，它們會幫助你更好的利用html5來優化完善你的web項目，而且讓人驚喜的是HTML5的一些熱門特性都在這些案例里面體現出來了，相信這些前沿的交互細節會為你的項目錦上添花！教程都很詳細，您可以按著它們的詳細指南一步步制作，來挑選你的法寶吧。

延伸閱讀：
出爐的20個CSS3打包下載（附預覽+源碼）
給網頁設計師和前端開發者看的前端性能優化

Making a Beautiful HTML5 Portfolio

Create offline Web applications on mobile devices with HTML5

如果你對HTML5的了解還不深，建議可以先閱讀：一張圖讀懂HTML5 。
當然，我們也為您準備了40個超贊的HTML5教程。

在過去的10年里，網頁設計師使用 Flash、JavaScript 或其他復雜的軟件和技術來創建網站。但現在你可以前所未有的快速、輕松地設計或創造互動的、有趣好看的網站。如何創建？答案是HTML5。

這篇文章向大家展示12個創新的HTML5網站。看看這些驚人的 HTML5 網站，從這些優秀的 HTML5 網站獲取靈感并應用在自己的網站中。希望你會喜歡這個集合。

網站細節豐富，動畫強悍，網速著急的童鞋請稍等下，等待加載 : ）
這些還看不夠過癮，那么你得瞧瞧這個：
27例新穎的HTML5網頁游戲設計

Wildlife

這個網站一定要試試從上滾到下，感受一下頁面里的動效，十足令人震驚！

Saucony Kinvara 3

Vlog

Art Ingenious

Bj?rk

G-Force

Metropol Band

最初單頁面網站的設計風潮可能是由知名的網站設計師引起的。他們想要以簡潔創意的方式讓自己的作品公之于眾。久而久之，單頁面網站設計在創意上實現了巨大的飛躍。不管是時尚，App，還是動畫，游戲，現在全網都盛行這一趨勢。
單頁面網站設計容易實現，但是如果想讓你的設計成為大熱，一定要確保它適合這種多頁少字的設計模式。在你開始設計之前，最好要記得專注于主要內容，其他的煩惱分心的部分通通去掉，就算是你最好的點子，如果不切合主題，也要忍痛割愛。

網站導航是主要設計要素之一。用放大鏡效果創建漩渦型按鍵，使站點引人入勝，同時也告訴用戶如何使用。導航要顯眼易懂這樣用戶才能輕松的瀏覽你的網站。不管是視差漩渦，服帖的動畫還是簡潔的菜單，你都能發現非常酷的效果。

下面我們為大家展示40種極具現代感，將單頁網站設計發揮到的非常漂亮的例子。盡情的欣賞吧，希望會給你帶來靈感！這些設計讓人難以忘卻，引人矚目的圖像絢麗多彩，內容干凈整潔，實乃創意經典之作。

Fannabee

Browser Awareness Day

Mark Dearman

這篇文章中，我們為大家精心整理了一些有趣且富有創意的著陸頁面設計案例，幫助你快速掌握著陸頁設計技巧。大家都知道著陸頁面（Landing Pages）需要特殊的設計，才能抓住目標受眾的注意力。

著陸頁對于幫助網站把訪問者轉換成銷售非常重要。因此，產品的消息必須明確，設計必須能吸引人且簡單易懂。來看看這些優秀案例獲取靈感吧。

酷站推薦：
《推薦！那些令人贊不絕口的創新型HTML5網站》
《40個漂亮的單頁網站設計欣賞》
 

Prezi

inDinero

微博上都在說東北暴雪咯，大家注意添暖加衣，那么今天分享一個應景的pS教程。教您創建一個超炫的冰霜字體。真的很棒喲，過程很詳細，童鞋們趕緊來練練手吶 ^_^

小提示：教程是在CC版本下進行的，操作面板可能會有一點不同 : ）

這是完成后的效果圖：

開工前先來下載幾個文件，分別是：

• 墻壁背景
• coolvetica 字體
• 玻璃素材
• 煙霧素材

已打包咯，童鞋們下載整個文件就好 → 素材下載

挺胸收腹，練習開始：

第一步：

創建一個大小為1200px*700px的文件，填充黑色背景。把下載的墻壁背景復制過來，Ctrl + T 調整好大小，如圖：

界面設計包括哪些細節、如何深入？

我們常說“細節決定成敗”，有些界面會讓人覺得不精致，缺細節，而這些細節又包括哪些呢？如何去深入呢？

不妨來看本文作者，百度用戶界面設計師@JJ-Ying 為您娓娓道來：

• 界面元素的對齊，我見過很多同學對齊是永遠靠眼睛的。確實在布局的時候經常需要做到視覺上的對齊，而不是機械的對齊，但這不是界面元素可以隨意擺放的借口，該對齊的內容需要對齊，有時候只是舉手之勞，養成好習慣很重要，有點強迫癥也不是壞事情。
• 像素，雖然現在的分辨率越來越高，但是很多圖標、按鈕的邊緣還是最好都檢查一遍保證垂直和水平邊緣不會被虛化。
• 界面光源的一致性，一致性是個很大的課題，應該能寫一篇論文那么長，細節方面的一致性應該包括界面元素、文字陰影、圖標等的光源。假設深色的標題文字用了向下的淡色投影表現內凹效果，那正文就應該避免用深色的文字向上投深色的陰影
• 圖標面積的一致性，這也是一個一直難以避免的問題，而且有很多主觀成分，最好的方法是設計的時候放到實際屏幕上以較遠的距離查看，是不是有哪些會特別輕或特別重，然后再去調整尺寸
• 文案，雖然這不是直接的界面設計元素，但是嚴謹、完整的文案也是給所有設計加分的。常見的問題有中文錯別字、英文該大寫的沒大寫、拼寫錯誤等等
• 別直接使用 Windows 自帶宋體 / 黑體里的英文！！！這個不解釋
• 謹慎地使用高飽和度顏色、大差別漸變，我們 GUI 設計師總喜歡把自己當做藝術家，即使 GUI 真算藝術那也是限制最大的一門藝術（天朝的電影、電視劇不算。。。），大家大部分情況下遇到的設計場景沒有非常大的顏色空間去發揮，所以一些醒目出跳的顏 色和漸變使用起來要比較小心，否則很容易產生“俗氣”的感覺

互聯網界一直在有提倡簡約設計的聲音，可簡約設計有什么小技巧？

作者：龍泰 一個學日語的產品經理。愛貓，愛吐槽。現在在做智能手機的Rom。

談簡約設計的書籍有很多，互聯網界也一直在有提倡簡約設計的聲音。有人說，看國內的各大門戶的設計，通通都是文字和功能的粗暴堆砌，難道中國人真的不擅長設計簡約嗎？

產品長什么樣是跟產品的受眾有關的。我們看國內電視購物，從來都是以“有多少功能”的方向來推銷產品的。或許我們的目標受眾就是喜歡大而全的東西，并不是設計師和產品經理的錯。為了迎合大環境的產品需求，我們不得不用各種可有可無的功能點來吸引用戶。

臃腫易煩膩，簡陋生欲望

產品功能多并不是好事，臃腫的功能會讓產品本身的定位和識別度變得稀疏，同時帶來的是在視覺和心理上的壓力。也會讓產品顯得沒有深度，感覺像是一下子就略過了前戲進入高潮了。初期的版本，只要保證那些能讓產品的概念成立的關鍵功能點和特性就行了。

優異的用戶界面可以讓用戶用得順心，從而提高轉化率(conversion rate)，換言之，好的 UI 在使用與銷售層面上形成雙贏。本文整理了16點優化用戶界面的方法，希望對大家有所幫助。

文原作者加拿大UI設計師Jakub Linowski

單欄型式優于多欄

單欄型式讓你更能掌握自己的內容，從頂部到底部一氣呵成，用故事引導讀者，最終是要誘引他們「采取行動」(call to action，下稱CTA，意指下載或消費等目的);而多欄反而可能導致讀者分心。

不要劈頭銷售產品

「略施小惠」給使用者，販賣的意圖不要設計得太明顯。小小的優惠或禮物，對未來的銷售會帶來大大的幫助。

統一相似的功能，避免支離破碎的UI

瀏覽網站時，我們很常看到琳瑯滿目的元素或特色，但它們的功能毫無二致，而相似的選項太多，只會提高讓使用者無所適從。倘若發現自己的網站內有以不同 型式重復相同功能的狀況，不妨考慮重新設計UI，把類似功能整合起來。譬如圖中「Customer Service(客服)」、「Contact Us(聯系我們)」其實是一樣的意思，應當保留一個選項就好。