@南辰_designer  平面設計和網頁設計是兩個截然不同的領域，這兩個領域有不同的設計需求、設計實踐和設計方法。

例如，在網頁設計中更常使用基于像素或柵格的文件格式，諸如JPG、GIF或PNG。相反，在平面設計領域像logo這樣的圖形可能會用到不同尺寸，因此使用最多的格式則是EPS和AI這樣的矢量格式。然而，用于網頁的矢量格式，如SVG或HTML5 Canvas則不能廣泛應用，也不會被所有瀏覽器所支持。

另外，用于web端的圖形有基于它們自身的相關處理方式。其中一條便是你要時刻注意文件的大小，因為你需要使你的網頁加載越快越好。作為一名網頁設計師，你應當盡量減少HTTP對圖像的請求次數——無論通過減少圖片的使用數量還是將它們整合成CSS sprite——以及確保你選擇了正確的圖像格式，使其在圖像大小和質量間得以平衡。

Photoshop是平面設計師和網頁設計師使用的行業標準工具。以下是你在創建web端使用圖像時的一些簡單的小技巧。

1. 將圖片保存成Web所用格式

在網頁設計中，你必須確保你的圖像大小越小越好。當然，當你想要圖片完好顯示時可以拋棄這條原則。
在Photoshop中創建圖像的完美方法便是平衡質量與文件大小。
網頁設計師經常犯的一個錯誤便是使用“另存為”命令，而不是使用“存儲為Web所用格式”。

“存儲為Web所用格式”可以將圖像保存成基于網頁設計優化過的格式，包括圖像質量、圖像分辨率、瀏覽器兼容性和文件大小。

這一命令會有一個對話框，你可以用來微調你的圖像。當你調整圖像的設置時，它會顯示出文件的大小和圖像的質量。

在這篇文章中，我們展示的是一組免費漂亮的UI設計素材套件。這些線框圖和 UI設計工具包讓設計師在設計用戶界面原型的時候能夠非常便利，希望這個集合會幫助到你的 UI 設計項目。

優設11月超贊資源：
50套萬里挑一的設計師專屬精華資源包
超實用的PHOTOSHOP亮度調節腳本

UI Kit

iPhone UI

有時候一個紋理，一個文字，一張背景圖，一個顏色體系，甚至一個小圖標，都能讓頁面有復古的感覺。在這篇文章中，我們收集了許多這種風格的頁面。如果你的下一個項目是需要設計出復古的感覺的話，那這篇文章可以啟發你很多的設計靈感。

相關閱讀：

復古背景下載 →漂亮的復古紋理背景素材下載
復古字體下載 → 25套復古懷舊字體打包下載
復古網頁欣賞 → 44個絕贊的復古風格網頁設計

Cyclemon

Ready to Inspire

本文作者Mark Praschan是一位具有將近十年經驗的網頁設計師，Web開發師，Web項目經理人。 文中強調復雜的高級效果能為設計增色不少，但如果用得不對，只會影響用戶對重點內容的關注。高級效果可能正好是一項好的設計的沖擊力所在，但即便如此，也還是需要一些更簡單的效果與其配合。

　　簡單的效果和技巧是建造當今設計的基石。比方說，如果你都不知道如何正確選擇顏色和文字效果，燦爛的 星光效果又能有什么用?

　　本著“少就是多”的理念，通過十個簡單好用的設計技巧 ，就足以大大提升你設計的專業性和感染力。基礎先行。 學會走之前要先學會爬，讓我們從最基礎的簡單有效設計的概念開始。

基礎先行。 學會走之前要先學會爬，讓我們從最基礎的簡單有效設計的概念開始。

1. 增加對比

很可惜，添加額外的對比是最被忽視和棄用的技巧之一。

Joost de Valk 采用了細的高對比度邊線，讓訪客能更容易區分頁面的不同區域。在上圖中放大了的部分，你可以看到，大多數時候這種對比只是一條1像素的高亮線挨著1像素的暗線。

話說回來，這個頁面上的“More”和“Go”按鈕與周圍的對比度太小，即使你刻意在找也很容易被忽略掉。

大家應該都發現現在很多網站的首屏都越來越有”感覺“了，用我們經常調侃的一句話就是高端大氣國際化，那么如何做到這一點呢？

大家不妨打開支付寶、財付通等網站瞧瞧，不難發現規律：1、在首屏一條大橫紋上下功夫，區分下方的輔助信息；2、看上去更有人性（有人物素材出現在首屏），配合產品的精彩實物截圖。3、溫暖的色調、能烘托出產品氣質的色彩。4、簡要的產品描述文案。5、點擊欲望更強的（橙、綠）大按鈕。6、盡可能多的高斯模糊。

今天我們要在這篇文章向您展示30個偉大漂亮的網頁例子，看看他們是如何利用首屏的橫條紋的吧，瞧瞧是不是利用此布局更有助于分解頁面引導用戶更好了解產品、愛上產品。

Janko At Warp Speed

Theme Trust

我們灰常樂意每周在網頁設計佳作列表中展現設計精美的網站，不斷為你提供靈感。而今天我們打算另辟蹊徑，為網頁設計師收集了既能提供設計靈感又實用的優秀案例，與過往選擇單一”主題”的例子有所不同。我們將為你呈現不同的工具和技術分享網站，可讓你在得到靈感的同時還能發現不錯的工具或服務。在這篇文章中你將看到22個美觀又實用的網站，全部都不容錯過哦親！

responsify

Responsify是個用于創建響應式模板的瀏覽器工具。

iconmonstr

你下一個項目就可以用的免費簡約icon。

前言：該文收集了前輩們的一些關于圖片優化的技巧，在此收攏到一起，對于各個方法的優化原理做了一些研究，希望能給大家對于圖片優化這一塊起到拋磚引玉的作用。

騰訊財付通設計中心 Jia ：提到圖片，我們不得不從位圖開始說起，位圖圖像(bitmap)，也稱為點陣圖像或繪制圖像，是由稱作像素（圖片元素）的單個點組成的。這些點可以進行不同的排列和染色以構成一副圖片。當放大位圖時，可以看見賴以構成整個圖像的無數單個方塊。
常見的格式中JPG、PNG、GIF亦屬于位圖，所以它們的數據結構大致相同，只是每一種圖片格式都有不同的壓縮算法，不同的掃描方式，但是優化的方法都有一個共同點，都是圍繞著每個像素顏色值來下手，具體如何進行優化呢？
下面來給大家介紹一下圖片的一些基本原理和優化的方法：

1.JPG原理與優化
JPG是一種對彩色或灰階之類連續色調圖形作壓縮和解壓縮的標準．這個標準是由ISO/IEC JTC1/SC29 WG10所訂定。
壓縮算法為正、反離散余弦轉換，如下圖：

反離散余弦轉換即把整個流程反轉。

這里的8X8像素區塊是我們JPG優化方法的重點，在之后會涉及到取樣、區塊量化、掃描的步驟，然而取樣、區塊量化這兩個步驟將是導致圖像失真的過程，也是我們優化工作所涉及到核心部分。

取樣：

瞧吧！現在到處都是明亮的設計照亮我們的屏幕，有時甚至亮瞎到我們的眼睛！大伙應該都感同身受，接近節日或者年底的時候，以紅色為主色調的設計稿常常可以讓我們看到昏厥，還有那些色彩斑斕的促銷專題。

那么今天，我們要好好和大家來推薦一些低調內涵的網站，而這些設計者們也正采取了與熱鬧相反的路線：但他們依然創造了強大的網站，通過黑暗柔和的色彩！這些設計有一種誘人的存在，它們用黑白捕捉人的記憶情感。

這篇文章我們傾力推薦了20多個美麗的黑色系網站，微妙的色調和戲劇性的黑白圖像一定會讓你陷入這一場低調奢華的視覺盛宴里，來嘗嘗吧：）

另外也希望大家帶著問題去欣賞這些網站，這些設計師是如何把黑色設計的更有國際范？如果是你來，布局、素材、輔助色又會怎么選用呢？

我們也為您準備了其他色系的優秀文章，推薦您也有空一起來看看喲。
《配色秘要：奢華低調有內涵的米黃色》
《超贊！網頁設計色彩剖析之矚目紅（附百枚網頁案例）》
《淺談色彩學：以紅色為主的色彩配色》

MoreSleep

Apple Mac Pro

Rook

「Loading」是經常在APP以及游戲中見到的，因為需要用戶等待，為了避免用戶在等待的過程中退出，通常輔以進度條告知用戶大概還有多久，但等待總是讓人不耐煩的，所以一些設計師試圖用更人性化的方式來表現進度，他們將進度條設計成各種極具創意與美觀的形態，讓人們更樂意欣賞進度條的滾動。花瓣網設計師漢斯戴爾收集了上百張進度條設計圖，我們從中精選了10種進度條設計。

好東西越來越多了，免費的午餐也越來越多了，如果你買不起付費的素材，可以先用免費的應應急，而且不少免費素材也不差。
在本篇文章中，你可以看到很多熟悉的“老面孔”，沒錯，本篇便是十一月份UI設計素材精選。

一應俱全的PSD模板：包括iPhone、iPad以及其他移動設備的UI套件（包括的5s,iPad Air)、線框圖、展示效果圖（分層的、實物的）。

所有模板均為免費（有的是限免，所以抓緊），各位請一一挑選吧。

推薦閱讀：
《怒贊！50套萬里挑一的設計師專屬精華資源包》

iGravertical Screen Layers + iOS 7 Screen Converter

Isometric Perspective MockUp