(技术贴)设计师如何玩转浏览器

用户头像
广州/网页设计师/8年前/1973浏览
(技术贴)设计师如何玩转浏览器
用户头像
TransC

浏览器作为设计师资源搜索的直接载体,一切你想要知道的信息它都会告诉你

1.      搜索引擎

        谈浏览器首先得提搜索引擎。因为当我们使用不同的搜索引擎,相当于从不同的资源库获取资源,以下是各大常用的搜索引擎搜索总结。

96575948c599a8012193a338bef9.jpg

    所以,当你搜索时如果没有得到你想要的东西,不妨换一个搜索引擎,看看其他资源库,说不定会有意外的收获。

2.      浏览器云收藏夹

        收藏夹有以下好处:

     (1)迅速资源分类。新手设计师和资深设计师最大的区别是积累,无论是技能和资源的积累,都源自于日积月累,进而组成了庞大的资源库,分类很重要。

     (2)快速打开页面

     (3)便于链接转移。浏览器收藏夹导入导出功能为收藏夹无论是移植浏览器还是传播都提供了便利

     (4)最快进入设计状态。当给你一台陌生的电脑进行设计工作,登录浏览器,第一时间搭建一个熟悉的设计环境。

c5b759489fb7a8012193a3c04a45.jpg

3.      浏览器插件

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

564f5948c656a8012193a3927a9b.jpg

      (2)google翻译插件

        可以在打开google外文网站的时候对网页自动进行翻译

        当然每个人喜欢的插件都不尽相同。


4.      google翻墙

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

9c6b5948a1f2a8012193a3998f25.jpg

5.      审查元素

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

0aaf5948d05ea8012193a35ea700.jpg

        

        利用这个方法,右边的“box-shadow”会把阴影具体的rgb的颜色值甚至是具体的透明度告诉我们。

6.      抓取图片

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

7fea5948c06ea8012193a3d0d679.jpg

 

7.      一键批量下载图片

        当要下载同一页的图片比较多时,一张一张下载比较费时。网页右键“另存为”,选择格式“网页,全部”,将会获得该页面html文件和资源文件。(获取难易程度视网页封装程度)。

        此方法下载的文件会比较杂,因为除了图片,下载的同时还有这个网站使用的插件和样式等文件。这个时候简单的网站其实我们已经全部下载下来了(下载完整程度视网页封装程度),直接可以本地打开,有兴趣的同学可以提取插件。

        下面我们利用这个方法下载站酷首页所有展示图片:

7a105948c7fca8012193a3c5ffbd.jpg

        

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

90e25948c9c3a8012193a308fa49.jpg 


9
举报
|
11
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
卡通风格网页页面3D渲染
网页电商背景矢量插画
互联网,互联网插画,商务,数据,项目,合作,网页插画,插画,大数据,智能,商业,网页,网页设计,插画设计,互联,未来,沟通,渐变,蓝色插画,商铺,覆盖,管理,项目管理,效率,提升,高效,关系,拓展,
一个人拿着优惠券准备支付购物电商矢量插画
 网页背景
运动风人物插画
卡通风格网页页面3D渲染
网页页面矢量插画
卡通女孩与网页表格3D渲染
网页图标
互联网,互联网插画,商务,数据,项目,合作,精准,投放,网页插画,插画,大数据,智能,商业,网页,网页设计,插画设计,互联,未来,交流,沟通,渐变
一个男生和两个女生站在网页前面打招呼矢量
浏览电脑网页的元素
卡通风格网页页面3D渲染
商务网页
三个青年正在装修网页矢量插画
四个人物分别在上网贴纸合集
新年快乐送福网页矢量图banner
网页背景
男生坐在网页面前办公矢量插画
男生和女生站在网页面前矢量扁平插画
卡通女孩与网页表格3D渲染
三位美女围着网页看信息矢量插画
卡通风格网页页面3D渲染
卡通风格网页页面3D渲染
你可能喜欢
大家都在看
登录注册