(技术贴)设计师如何玩转浏览器
浏览器作为设计师资源搜索的直接载体,一切你想要知道的信息它都会告诉你
1. 搜索引擎
谈浏览器首先得提搜索引擎。因为当我们使用不同的搜索引擎,相当于从不同的资源库获取资源,以下是各大常用的搜索引擎搜索总结。

所以,当你搜索时如果没有得到你想要的东西,不妨换一个搜索引擎,看看其他资源库,说不定会有意外的收获。
2. 浏览器云收藏夹
收藏夹有以下好处:
(1)迅速资源分类。新手设计师和资深设计师最大的区别是积累,无论是技能和资源的积累,都源自于日积月累,进而组成了庞大的资源库,分类很重要。
(2)快速打开页面
(3)便于链接转移。浏览器收藏夹导入导出功能为收藏夹无论是移植浏览器还是传播都提供了便利
(4)最快进入设计状态。当给你一台陌生的电脑进行设计工作,登录浏览器,第一时间搭建一个熟悉的设计环境。

3. 浏览器插件
(1)花瓣网页插件,可以对任何网页上的图片进行花瓣搜集(较少网页会屏蔽花瓣采集功能)

(2)google翻译插件
可以在打开google外文网站的时候对网页自动进行翻译
当然每个人喜欢的插件都不尽相同。
4. google翻墙
相信不少的设计师手上都会有vpn,如果只是进行google搜索(youtube视频无法打开),其实我们不需要购买vpn就能做到,而且方法很简单,只需要更改本机hosts文件,详细教程来自于一位技术大牛,我们搜索“老D 博客”,然后进入大牛的博客搜索“Google持续更新”就可以搜索到最近的hosts更新文件,跟着大牛提供的步骤就可以简单完成翻墙流程(当然你使用试用版的vpn每日流量翻墙也是可以的)。以下页面时可以利用改方法访问的网站:

5. 审查元素
当我们想借鉴页面颜色时,我们可以用吸管吸色,但是我们无法吸取渐变和阴影的准确值。这时,我们可以用审查元素的方法研究它具体的设置值(有空我会专门写一篇如何根据审查元素获取的信息作图还原的文章)

利用这个方法,右边的“box-shadow”会把阴影具体的rgb的颜色值甚至是具体的透明度告诉我们。
6. 抓取图片
如果我们想研究某个网站的图片布局(注意使用版权),但是有些图片是被脚本封装了,无法分离。这个时候可以在页面空白处右键点击“检查/查看元素”然后切换到“resource/Sources”栏,选择“images”文件夹,这个时候可以看见页面的原图(经测试,google浏览器对图片的抓取能力较强。)或者直接拖拽出来,我在上一篇《视差滚动网站逐层分析》(详情点击链接)就是用这种方法提取图片作分析。

7. 一键批量下载图片
当要下载同一页的图片比较多时,一张一张下载比较费时。网页右键“另存为”,选择格式“网页,全部”,将会获得该页面html文件和资源文件。(获取难易程度视网页封装程度)。
此方法下载的文件会比较杂,因为除了图片,下载的同时还有这个网站使用的插件和样式等文件。这个时候简单的网站其实我们已经全部下载下来了(下载完整程度视网页封装程度),直接可以本地打开,有兴趣的同学可以提取插件。
下面我们利用这个方法下载站酷首页所有展示图片:

下载后的文件夹将会显示站酷首页的全部图片如下图所示(截图为部分图片)








































