酷站兩連發(fā)！收錄日本都市圖片素材庫+響應(yīng)式在線預(yù)覽網(wǎng)站

編者按：今天給大家推薦兩個(gè)網(wǎng)站。一個(gè)是專門收錄日本幾個(gè)大城市街景為主的圖庫網(wǎng)站，可以自由使用于個(gè)人或非商業(yè)用途。另一個(gè)是用來檢視自適應(yīng)設(shè)計(jì)的免費(fèi)在線工具。可以隨時(shí)預(yù)覽在不同移動(dòng)端口下的樣式。

街畫ガイド

http://komekami.sakura.ne.jp/

「街畫ガイド」（街頭相片指南）是一個(gè)日本免費(fèi)圖庫，以收錄日本幾個(gè)大城市街景為主。包括東京、橫濱、大都會(huì)區(qū)、大阪、京都、關(guān)西等地區(qū)，根據(jù)網(wǎng)站說明，這是一個(gè)相當(dāng)完整的免費(fèi)照片數(shù)據(jù)庫，所有相片皆可免費(fèi)下載并自由使用于商業(yè)或非商業(yè)用途，無須標(biāo)示出處（授權(quán)說明）。

如果你想去日本旅行，「街畫ガイド」也能夠告訴你有那些值得造訪的景點(diǎn)名勝，通過網(wǎng)站搜索功能，可以快速找出東京在內(nèi)的幾個(gè)日本府縣知名的建筑設(shè)施或街道。若你想要給網(wǎng)站或博客文章找插圖，但手邊又沒有合適的相片，也可以到「街畫ガイド」碰碰運(yùn)氣，或許會(huì)有令你滿意的結(jié)果。

STEP 1

開啟「街畫ガイド」網(wǎng)站后，可以看到網(wǎng)站已經(jīng)沒什么更新了，但依然有相當(dāng)多的庫存照片可以使用，右側(cè)有分類標(biāo)簽可快速選擇，看不懂日文沒關(guān)系，其實(shí)大部分都是漢字，當(dāng)然你也可以通過 Google 翻譯將網(wǎng)站翻譯成中文顯示，對于中文用戶來說可能會(huì)更簡單一些。

STEP 2

右上角篩選功能可根據(jù)地區(qū)、城市來查找收錄的街景或名勝景點(diǎn)，包括東京、神奈川、大阪、埼玉、千葉、京都、靜岡、滋賀、兵庫、愛知及三重縣，選擇大分類后可于下方再選擇小范圍區(qū)域。

STEP 3

我還蠻喜歡「街畫ガイド」網(wǎng)站的排列方式，瀏覽動(dòng)線相當(dāng)流暢，除了會(huì)有某個(gè)地區(qū)的重要圖片外，下方還會(huì)有包括 Google Maps、地址、最近車站、營業(yè)時(shí)間和入場價(jià)格等基本數(shù)據(jù)，點(diǎn)擊上方照片可開啟更詳細(xì)內(nèi)容。

STEP 4

要如何從「街畫ガイド」圖庫免費(fèi)下載相片呢？點(diǎn)擊到詳細(xì)信息頁面后，會(huì)顯示拍攝的各項(xiàng)細(xì)節(jié)，再點(diǎn)上方相片就會(huì)打開原始圖片。只要右鍵另存新檔即可將它下載、保存使用。

下圖就是我從「街畫ガイド」獲取的其中一張相片范例，有興趣的朋友可自行去尋寶一下。

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

• 以收錄日本各城市街景、景點(diǎn)名勝為主的免費(fèi)圖庫。
• 涵蓋東京、橫濱、大都會(huì)區(qū)、大阪、京都、關(guān)西等地區(qū)。
• 免注冊可免費(fèi)下載使用，適用于個(gè)人及商業(yè)用途無須標(biāo)示出處。

Responsive Screenshots

「Responsive Screenshots」是一款用來檢視自適應(yīng)設(shè)計(jì)的免費(fèi)在線工具，只要輸入檢測網(wǎng)址，即可預(yù)覽網(wǎng)站在 iMac、Macbook、iPad 及 iPhone 下的顯示情形，比較可惜的是 Responsive Screenshots 不支持中文顯示，中文字在圖片上可能無法完整出現(xiàn)，但這個(gè)工具主要用意是查看網(wǎng)頁整體的版型或樣式，即使無法顯示中文也不影響它的可用性，只是截取的圖片沒那么好看。

STEP 1

開啟 Responsive Screenshots 網(wǎng)站后，可以看到一個(gè)網(wǎng)址列及四個(gè)默認(rèn)設(shè)備，默認(rèn)情況下會(huì)在 iMac 27、Macbook Pro 15、iPad 及 iPhone X 下測試網(wǎng)頁的顯示樣式情形。

STEP 2

如果有特殊需求，也可以從下方設(shè)備部分點(diǎn)擊、選擇其他同類產(chǎn)品，例如 Macbook 也可以選 13 吋或 Macbook Air 等不同產(chǎn)品線。

桌面計(jì)算機(jī)除了 iMac 27 外，也有 iMac 21.5 及 Apple Thunderbolt 屏幕。

STEP 3

輸入網(wǎng)址后，點(diǎn)擊右側(cè)的「Grab Shots」按鈕來獲取攝取畫面，網(wǎng)頁會(huì)提示你可能會(huì)耗費(fèi) 5-10 秒鐘時(shí)間，取決于你測試的網(wǎng)頁大小而定，在結(jié)束前請先不要關(guān)閉網(wǎng)頁。

STEP 4

測試完成后 Responsive Screenshots 會(huì)顯示網(wǎng)頁在不同屏幕大小的設(shè)備呈現(xiàn)出來的效果，如同前面所說，有些使用 RWD 的頁面，當(dāng)整體寬度足夠時(shí)才會(huì)顯示選單及側(cè)邊欄，若寬度不足（例如使用平板計(jì)算機(jī)或手機(jī)）就會(huì)隱藏選單及側(cè)邊欄，讓有限的空間可以被更有效率應(yīng)用，也更能符合各種屏幕大小閱讀。

如果你想看更大張的攝取畫面，Responsive Screenshots 網(wǎng)頁最下方能下載JPEG格式攝圖，也能點(diǎn)擊「Download ZIP」批次下載所有測試結(jié)果。

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

• 測試網(wǎng)頁在 iMac、Macbook、iPad 及 iPhone 設(shè)備顯示情形。
• 可依照需求調(diào)整不同屏幕尺寸大小。
• 產(chǎn)生后的截圖可下載，或打包批次下載所有畫面。

「2017年1月-10月的設(shè)計(jì)圈干貨大合集」

• 《新年福利！2017年1月設(shè)計(jì)圈實(shí)用干貨大合集》
• 《終于等到你！2017年2月設(shè)計(jì)圈實(shí)用干貨大合集》
• 《這一波穩(wěn)了！2017年3月設(shè)計(jì)圈實(shí)用干貨大合集》
• 《接貨！2017年4月設(shè)計(jì)圈干貨大合集》
• 《干貨來了！2017年5月設(shè)計(jì)圈實(shí)用干貨大合集》
• 《2017年6月的這些設(shè)計(jì)圈干貨，你就別錯(cuò)過了~》
• 《收貨！2017年7月超有用設(shè)計(jì)圈干貨大合集》
• 《暑期福利！2017年8月設(shè)計(jì)圈超實(shí)用干貨大合集》
• 《開學(xué)福利！2017年9月超實(shí)用設(shè)計(jì)圈干貨大合集》
• 《快看！2017年10月設(shè)計(jì)圈超實(shí)用干貨大合集》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com?是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com