編者按：今天的兩枚酷站，一個(gè)是特別強(qiáng)調(diào)圖片背后故事的可商用圖庫(kù)「潑辣有圖」，另外一個(gè)是能幫開(kāi)發(fā)者測(cè)試不同設(shè)備上，網(wǎng)頁(yè)內(nèi)容自適應(yīng)是否正確的擴(kuò)展插件，一個(gè)以品質(zhì)取勝，一個(gè)以實(shí)用為傲，來(lái)收！

潑辣有圖

潑辣有圖是潑辣熊團(tuán)隊(duì)出品的一個(gè)免費(fèi)商用圖庫(kù)，它們家還有一款產(chǎn)品叫「潑辣修圖」，我們?cè)谥敖榻B過(guò)，修圖上比普通的手機(jī)軟件專業(yè)，操作上比專業(yè)的修圖軟件簡(jiǎn)單，也是國(guó)內(nèi)為數(shù)不多的支持曲線功能的手機(jī)APP，至于網(wǎng)頁(yè)版的強(qiáng)大，可移步之前的介紹：《在線專業(yè)修圖神器潑辣修圖7個(gè)新功能（附調(diào)色教程）》，這兒不多贅述，直接來(lái)看他們新推出的這個(gè)圖庫(kù)。

網(wǎng)站的簡(jiǎn)介中有兩個(gè)亮點(diǎn)，一是全部圖片采用COO 協(xié)議，無(wú)論是誰(shuí)都可以下載原圖后免費(fèi)商用，另外一個(gè)是人工挑選機(jī)制，現(xiàn)在大多數(shù)免費(fèi)圖庫(kù)的圖片質(zhì)量都參差不齊，推出這個(gè)功能確實(shí)很有吸引力，而且據(jù)小編打聽(tīng)，團(tuán)隊(duì)中還有后期高手@他山之眼 坐鎮(zhèn)，品質(zhì)可以打包票。

網(wǎng)站現(xiàn)在剛開(kāi)放，僅收錄了2016年1月份的精華圖片，我們滑動(dòng)鼠標(biāo)可以看到：

圖片左下方是作者的信息，單擊后可以直接進(jìn)入攝影師的微博，中間的文字部分講述了這張圖片背后的故事，這也是有別于其他圖庫(kù)站的最大特色功能，你可以在這兒看到攝影師當(dāng)時(shí)的心境/拍攝過(guò)程/原因/思考等等，非常適合攝影愛(ài)好者。

左下方分別是拍攝器材/拍攝地點(diǎn)/以及大圖鏈接，這兒提個(gè)小建議，如果能像Lofter那樣，加上拍攝時(shí)的光圈大小神馬的，會(huì)不會(huì)讓攝影愛(ài)好者學(xué)得更多？

如果看中了哪張圖片，點(diǎn)擊「單張鏈接」后可以看到大圖，圖片右下方還有下載原圖的按鈕：

由于網(wǎng)站新開(kāi)放不久，圖片數(shù)量有限，所以潑辣熊團(tuán)隊(duì)也在不斷征求新的作品，如果大家有興趣，進(jìn)入網(wǎng)站后點(diǎn)擊「提交圖片」就可以上傳。

你也可以點(diǎn)擊「郵件訂閱」，以后每個(gè)月就可以收到人工挑選的一份高質(zhì)量圖片素材啦。

Responsive Web Design Tester

（谷歌瀏覽器要搭梯子才能下載）

當(dāng)今開(kāi)發(fā)網(wǎng)站不僅要顧及不同瀏覽器，還要同時(shí)滿足在計(jì)算機(jī)、平板計(jì)算機(jī)及行動(dòng)設(shè)備各種尺寸屏幕都能正確顯示，最常用的技術(shù)是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)（Responsive Web Design, RWD）。技術(shù)細(xì)節(jié)我就不多做介紹，但我想透過(guò)本文推薦一款很實(shí)用的開(kāi)發(fā)工具，讓你在瀏覽器輕松仿真、切換不同設(shè)備類型，協(xié)助測(cè)試自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)是否能正確顯示內(nèi)容。

Responsive Web Design Tester 是一個(gè)瀏覽器擴(kuò)充功能，支持 Google Chrome、Firefox 及 Opera ，使用非常簡(jiǎn)單，安裝后就能快速切換要仿真的行動(dòng)設(shè)備類型，內(nèi)建包括 Android 手機(jī)、Nexus 平板計(jì)算機(jī)、BlackBerry、Kindle Fire、iPad 和 iPhone，也能依照開(kāi)發(fā)者需求來(lái)自定義加入要測(cè)試的設(shè)備分辨率。

因?yàn)槲覀儾豢赡苷襾?lái)這么多的設(shè)備實(shí)際測(cè)試網(wǎng)頁(yè)顯示情形，藉由 Responsive Web Design Tester 便能將瀏覽器仿真成各種行動(dòng)設(shè)備分辨率，實(shí)際測(cè)試網(wǎng)頁(yè)顯示效果。

以往我都是使用 User-Agent Switcher 功能來(lái)自定義瀏覽器的 User Agent，不過(guò)這方法其實(shí)沒(méi)那么好用，又要經(jīng)常切來(lái)切去實(shí)在很不方便，使用 Responsive Web Design Tester 徹底解決開(kāi)發(fā)上的問(wèn)題，讓開(kāi)發(fā)者在修改網(wǎng)頁(yè)時(shí)能更加得心應(yīng)手。

STEP 1

在瀏覽器安裝 Responsive Web Design Tester 后，點(diǎn)選該按鈕會(huì)顯示工具的主功能，我們從「Select Device」選擇要測(cè)試仿真的設(shè)備名稱類型。

可以看到 Responsive Web Design Tester 預(yù)設(shè)已提供約 24 種的設(shè)備類型，包括大家熟悉的 HTC One、Nexus 7、BlackBerry、Kindle Fire、iPad、iPad Pro、iPad Mini 及 iPhone 。

注意每一種設(shè)備都會(huì)有兩種選項(xiàng)，分別為橫幅式（Landscape）和直立式（Portrait）。這也會(huì)仿真手機(jī)或平板計(jì)算機(jī)在直立或橫放時(shí)呈現(xiàn)出的不一樣的分辨率。

STEP 2

試著選擇直立的「iPhone 6(s)」來(lái)仿真瀏覽優(yōu)設(shè)網(wǎng)的樣式，Responsive Web Design Tester 會(huì)在瀏覽器內(nèi)再開(kāi)啟一個(gè)適當(dāng)大小的窗口。

比較特別的是在測(cè)試中我發(fā)現(xiàn)網(wǎng)頁(yè)被正確載入為行動(dòng)版頁(yè)面，這也表示 Responsive Web Design Tester 并不是只有調(diào)整窗口分辨率，而是連 User Agent 也一并修改了！

接下來(lái)我再使用「iPad」模擬瀏覽網(wǎng)頁(yè)的效果，這次使用橫幅式的設(shè)備，可以看到網(wǎng)頁(yè)依舊能在該分辨率范圍內(nèi)正確顯示，這也就是前面提到的使用「響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)」優(yōu)勢(shì)。

STEP 3

當(dāng)然，測(cè)試環(huán)境可能會(huì)依照每個(gè)人的情形而有所不同，內(nèi)建的行動(dòng)設(shè)備類型并不一定符合每一位開(kāi)發(fā)者。還好 Responsive Web Design Tester 內(nèi)建選項(xiàng)設(shè)定，能讓我們自由調(diào)整要仿真測(cè)試的設(shè)備類型和分辨率，同時(shí)也能編輯群組來(lái)管理更多的設(shè)備，非常強(qiáng)大！

值得一試的三個(gè)理由：

1. 支持 Google Chrome、Firefox、Opera 三大瀏覽器
2. 內(nèi)建 24 種平板計(jì)算機(jī)、行動(dòng)設(shè)備，可自由調(diào)整設(shè)定選項(xiàng)
3. 除了調(diào)整分辨率外，也切換 User Agent 達(dá)到最正確的模擬效果

【優(yōu)設(shè)酷站22連發(fā)！】

1. 免費(fèi)圖庫(kù)+導(dǎo)航收集站：《酷站兩連發(fā)！高品質(zhì)免費(fèi)圖庫(kù)站+專注WEB/APP導(dǎo)航收集站》
2. 音樂(lè)站+字體搜索：《酷站兩連發(fā)！幫你專心工作的音樂(lè)站+谷歌字體在線搜索神器》
3. 漸變色+代碼比較：《酷站兩連發(fā)！漸變色方案全聚合網(wǎng)站+在線代碼比較神器》
4. 配色+占位圖：《酷站兩連發(fā)！在線色彩搭配工具+快速生成占位圖片器》
5. LOGO下載+字體下載：《酷站兩連發(fā)！可商用的矢量LOGO下載+平面最愛(ài)的27款免費(fèi)字體》
6. 壓縮圖片+在線配色：《酷站兩連發(fā)！在線圖片壓縮神器+在線配色工具COLOURCO》
7. CSS Hover動(dòng)畫+寵物小精靈配色：《酷站兩連發(fā)！寵物小精靈專屬配色網(wǎng)站+CSS HOVER動(dòng)畫收集站》
8. 美女圖片+游戲配色：《酷站兩連發(fā)！游戲配色網(wǎng)站+免費(fèi)美女素材特供網(wǎng)站》
9. 在線配色+字體推薦：《酷站兩連發(fā)！在線配色神器+英文字體推薦網(wǎng)站》
10. 追波作品變代碼+16進(jìn)制顏色：《酷站兩連發(fā)！用代碼呈現(xiàn)DRIBBBLE作品+16進(jìn)制顏色網(wǎng)站》
11. 無(wú)縫紋理+多邊形背景：《酷站兩連發(fā)！專注無(wú)縫紋理素材站+多邊形背景生成器》

作者：優(yōu)設(shè)網(wǎng)程遠(yuǎn)、free.com.tw

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量104萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com