人工筛选的可商用图库泼辣有图+响应式网页开发神器

   今天的两枚酷站 ,一个是特别强调图片背后故事的可商用图库「泼辣有图 」,另外一个是能帮开发者测试不同设备上,网页内容自适应是否正确的扩展插件,一个以品质取胜,一个以实用为傲,来收!

  泼辣有图

  泼辣有图 是泼辣熊团队出品的一个免费商用图库,它们家还有一款产品叫「泼辣修图」,我们在之前介绍过,修图上比普通的手机软件专业,操作上比专业的修图软件简单,也是国内为数不多的支持曲线功能的手机APP,至于网页版的强大,这儿不多赘述,直接来看他们新推出的这个图库。


  网站的简介中有两个亮点,一是全部图片采用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 内建选项设定,能让我们自由调整要仿真测试的设备类型和分辨率,同时也能编辑群组来管理更多的设备,非常强大!


  值得一试的三个理由:

  支持 Google Chrome、Firefox、Opera 三大浏览器

  内建 24 种平板计算机、行动设备,可自由调整设定选项

  除了调整分辨率外,也切换 User Agent 达到最正确的模拟效果

分类:

  • PS入门教程
时间: 2025-01-24 22:15:10

人工筛选的可商用图库泼辣有图+响应式网页开发神器的相关文章

一次查找21个免费可商用图库网站的STOCK UP

  找免费图片?有这个就够了!先前曾经介绍过很多免费可商用的图库,使用者可以从网站内轻松下载,找到许多高画质的图片.如果你觉得到各个网站寻找图片太耗费时间,本文要介绍的网站可以一次让你搜寻21个图库网站的免费图片,而且收录的都是顶尖的图库网站哟. Stock Up 注:不搭梯子打开会裂图.建议搭梯访问 Stock Up 是 SiteBuilderReport 网站提供的一项功能,它收录了包括 Unsplash.Life of Pix.New Old Stock.Startup Stock.Jay

移动网页设计9大原则——第2部分

[编者按]本文作者为来自 Mainstreethost 的站内营销专家 Kim Speier,主要介绍移动网页设计的九个原则,每个原则都配有生动的实例.文章系国内 ITOM 管理平台 OneAPM 编译呈现,点此查看文章的第一部分,以下为第二部分,主要介绍移动网页设计的另5个重要原则. 5)提供用户所需的搜索结果 一些移动用户在访问网页时目的十分明确,他们很少在模糊的菜单或一页又一页的商品间徘徊.搜索功能对于这类用户而言非常重要.而这也是要在搜索结果的第一页就提供精确结果的重要原因.搜索完成后,

提供超多HTML5+CSS3响应式网页模版免费下载的酷站

  今天介绍的HTML5 UP! 提供大量的HTML5 模版,而且这些模版都支持响应式网页设计 ,有了它我们就不用从无到有.从头到尾来打造一个网站,而是直接就现有的样版去做修改或调整,让建网站难度降低许多,也减少花费的时间和开支.来收! 因为自适应网页设计在开发上较为繁琐,一般很少免费提供下载的网站,但 HTML5 UP! 收录一系列共 28 种网页设计,通通都是 HTML5+CSS3 并有响应式设计 功能,网站采用的授权方式为 Creative Commons 姓名标示 3.0,也就是说你可以

高质量响应式网页模版的HTML5 ZERO

  HTML5 Zero 收录来自各个网站的网站模版资源,不过它并不是以数量取胜,而是精挑细选后的结果.在这网站上收集的模版都支持响应式网页设计 ,也就是能够依照不同的浏览画面尺寸,自动调整.弹性变化为适合阅读的使用体验. 网站收录的模版类型除了部分能直接套用于 WordPress.Bootstrap 外,还有近期相当流行的 Material Design,也可以透过颜色.类型.标签等方式来筛选你要寻找的免费网站模版. HTML5 Zero (搭梯子体验更佳) STEP 1 开启 HTML5 Z

响应式网页图片库设计的九个注意事项

  响应式设计无疑是当前网页设计领域当中,不可忽略的必要组成部分.而响应式网页中的图片显示又是老生常谈的问题,许多争论集中在响应式网站的图片应当怎么展示.继续延伸开来,那么响应式网站中的图片库应当如何设计呢? 相比于单个图片,图库的展示无疑更加复杂,牵涉到的变量更多,所以实现起来也更加麻烦费神.接下来,我们来看看如果要设计响应式的图片库,有哪些值得注意的基本规则和技巧. 1.轮播幻灯片:尽量隐藏导航 在桌面端上导航的存在可能没什么,但是在移动端上查看的时候,导航还是尽量隐藏起来,需要的时候再显现

帮你5分钟建一个响应式动态网站的CARRD

  让建站像搭积木一样简单!今天要介绍的 Carrd 是近期上线的免费建站服务,只要几个简单步骤就能快速设计出美观特色的响应式网站.我花了不到五分钟就做了一个优设网的简介,而且还有动态效果!如果你想给自己做个网站,不妨试试这个! Carrd 首页一语道破它的特色:简单.自由且完整支持响应式设计的单页面网站!如果你想建的网站内容不复杂,或许只需要一个页面就能轻松带过,Carrd 会非常适合你. Carrd 内建功能包括让你自定义网站背景.标题.描述以及内容链结等等,还能为网站加入图片.影片.图标.

来看这份超全面的SKETCH使用体验

  Sketch作为一个为UI设计而生的工具,全矢量.轻量级.像素级精准,非常适合做移动端应用类的界面设计和简单的扁平图标设计.下文是我通过一段时间的使用,对比PS,梳理了Sketch对我们而言的优点和痛点,探讨了下Sketch对提升工作效率是否有帮助. 它轻巧.优雅.高效,三点相辅相成 .出道至今已经强力地占据了一片设计师市场,经常被拿来跟PS对比. Part 1 Sketch的八大优势 1. 小清新颜值高 简洁高效 – 抗干扰 界面简洁美好,功能清晰.无悬浮面板,选择一个对象/图层(obje

2016 年最值得关注的16个网页设计趋势

  设计趋势每年都在改变,出于各种原因,有的设计趋势在演进中逐渐消失,有的则在大家的熟练运用过程中渐入佳境,甚至逐步蜕变成为主流.作为一个专注于网页和平面设计的设计机构,我们对所有相关的技术和设计趋势都极度敏感.通过过去一年的观察,我们总结出了以下16大设计趋势. 1. 可用性设计 2016年,设计的大方向将继续向着用户倾斜.用户体验在整个设计中的权重将继续加大.如果你的设计在可用性上不足的话,再炫酷也不会有人问津. 如果不能专注地做好用户体验设计,在即将到来的2016年,你是无法持久地吸引用户

2016年最值得关注的16个网页设计趋势

  设计趋势每年都在改变,出于各种原因,有的设计趋势在演进中逐渐消失,有的则在大家的熟练运用过程中渐入佳境,甚至逐步褪变成为主流.作为一个专注于网和平面设计的设计机构,我们对于所有相关的技术和设计趋势都极度敏感.通过过去一年的观察,我们可以总结出下面16大设计趋势. 1. 可用性设计 2016年,设计的大方向将继续向着用户倾斜.用户体验在整个设计中的权重将继续加大.如果你的设计在可用性上不足的话,再炫酷也不会有人问津. 如果不能专注地做好用户体验设计,在即将到来的2016年,你是无法持久地吸引用