酷站兩連發！人工篩選的可商用圖庫潑辣有圖+響應式網頁開發神器

編者按：今天的兩枚酷站，一個是特別強調圖片背后故事的可商用圖庫「潑辣有圖」，另外一個是能幫開發者測試不同設備上，網頁內容自適應是否正確的擴展插件，一個以品質取勝，一個以實用為傲，來收！

潑辣有圖

潑辣有圖是潑辣熊團隊出品的一個免費商用圖庫，它們家還有一款產品叫「潑辣修圖」，我們在之前介紹過，修圖上比普通的手機軟件專業，操作上比專業的修圖軟件簡單，也是國內為數不多的支持曲線功能的手機APP，至于網頁版的強大，可移步之前的介紹：《在線專業修圖神器潑辣修圖7個新功能（附調色教程）》，這兒不多贅述，直接來看他們新推出的這個圖庫。

網站的簡介中有兩個亮點，一是全部圖片采用COO 協議，無論是誰都可以下載原圖后免費商用，另外一個是人工挑選機制，現在大多數免費圖庫的圖片質量都參差不齊，推出這個功能確實很有吸引力，而且據小編打聽，團隊中還有后期高手@他山之眼 坐鎮，品質可以打包票。

網站現在剛開放，僅收錄了2016年1月份的精華圖片，我們滑動鼠標可以看到：

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

左下方分別是拍攝器材/拍攝地點/以及大圖鏈接，這兒提個小建議，如果能像Lofter那樣，加上拍攝時的光圈大小神馬的，會不會讓攝影愛好者學得更多？

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

由于網站新開放不久，圖片數量有限，所以潑辣熊團隊也在不斷征求新的作品，如果大家有興趣，進入網站后點擊「提交圖片」就可以上傳。

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

Responsive Web Design Tester

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

當今開發網站不僅要顧及不同瀏覽器，還要同時滿足在計算機、平板計算機及行動設備各種尺寸屏幕都能正確顯示，最常用的技術是響應式網頁設計（Responsive Web Design, RWD）。技術細節我就不多做介紹，但我想透過本文推薦一款很實用的開發工具，讓你在瀏覽器輕松仿真、切換不同設備類型，協助測試自適應網頁設計是否能正確顯示內容。

Responsive Web Design Tester 是一個瀏覽器擴充功能，支持 Google Chrome、Firefox 及 Opera ，使用非常簡單，安裝后就能快速切換要仿真的行動設備類型，內建包括 Android 手機、Nexus 平板計算機、BlackBerry、Kindle Fire、iPad 和 iPhone，也能依照開發者需求來自定義加入要測試的設備分辨率。

因為我們不可能找來這么多的設備實際測試網頁顯示情形，藉由 Responsive Web Design Tester 便能將瀏覽器仿真成各種行動設備分辨率，實際測試網頁顯示效果。

以往我都是使用 User-Agent Switcher 功能來自定義瀏覽器的 User Agent，不過這方法其實沒那么好用，又要經常切來切去實在很不方便，使用 Responsive Web Design Tester 徹底解決開發上的問題，讓開發者在修改網頁時能更加得心應手。

STEP 1

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

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

注意每一種設備都會有兩種選項，分別為橫幅式（Landscape）和直立式（Portrait）。這也會仿真手機或平板計算機在直立或橫放時呈現出的不一樣的分辨率。

STEP 2

試著選擇直立的「iPhone 6(s)」來仿真瀏覽優設網的樣式，Responsive Web Design Tester 會在瀏覽器內再開啟一個適當大小的窗口。

比較特別的是在測試中我發現網頁被正確載入為行動版頁面，這也表示 Responsive Web Design Tester 并不是只有調整窗口分辨率，而是連 User Agent 也一并修改了！

接下來我再使用「iPad」模擬瀏覽網頁的效果，這次使用橫幅式的設備，可以看到網頁依舊能在該分辨率范圍內正確顯示，這也就是前面提到的使用「響應式網頁設計」優勢。

STEP 3

當然，測試環境可能會依照每個人的情形而有所不同，內建的行動設備類型并不一定符合每一位開發者。還好 Responsive Web Design Tester 內建選項設定，能讓我們自由調整要仿真測試的設備類型和分辨率，同時也能編輯群組來管理更多的設備，非常強大！

值得一試的三個理由：

1. 支持 Google Chrome、Firefox、Opera 三大瀏覽器
2. 內建 24 種平板計算機、行動設備，可自由調整設定選項
3. 除了調整分辨率外，也切換 User Agent 達到最正確的模擬效果

【優設酷站22連發！】

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

作者：優設網程遠、free.com.tw

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量104萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com