2012-05
3

ImageReady CS2做cinemagraphic

By xrspook @ 23:59:36 归类于:扮IT

估计cinemagraphic是现在最热门的gif形式了。这到底是个什么东西呢?简单来说,就是一大个图片里只有一部分是动的,其它部分都处于静止。这有什么好处?你可以把注意力放在某个部位,从大处说,这是一张照片,但从小处说,这是一个视频,所以,你应该能理解为啥叫做“cinemagraphic”了吧,cinema + graphic是也!不过,你必须知道,这种神奇的图片其实是我们已经认识了很久的gif!这种区域动态的处理简直给了gif第二个春天!

第一次见识cinemagraphic是在Alberto Del Rio 2012年4月,WrestleMania XXVIII后他回归的第一场比赛的Smackdown上!各种喜感,各种笑爆!那些gif让我叹为观止!从我看到的第一眼开始我就非常有兴趣知道这到底是怎么做的。我寻觅了好久都未果。后来我知道了微软有个叫做Cliplets的软件,能用非常简单的操作制作这种效果的东西。这个软件好是好,但安装之前必须装这个那个,然后呢,最严重的是它只适用于WIN7以上的系统,XP和VISTA泪奔了。于是,我无可奈何,只好硬着头皮去刨各种中文英文的用Photoshop做的cinemagraphic教程。

10 Amazing Cinemagraphs Tutorials – Code Fear
动手制作一张Cinemagraph
教你怎么做会动的静态摄影 (1),Cinemagraph: Still Photos With Subtle Motion (part 1)

为什么只能用CS5去做?为什么PS就只能导入avi或mov呢?各种限制让我很不爽。

所以,经过一番尝试并最终成功后,我决定写一个用老掉牙的ImageReady CS2做cinemagraphic的教程!

照片录像我就木有了,我选择的是一个普通的.mp4视频,里面有一段ADR挑眉的镜头,我就用那个做cinemagraphic。

有视频,我们第一步做的是截图!我推荐使用KMP播放器,KMP播放器内置强大的截图功能,其中的高级捕获更是见神杀神类的(提醒,在高速和超高速模式下是无法使用捕获的,如果你不知道如何用KMP进行捕获请自行搜索解决)。这里,我们使用的是KMP的高级捕获。屏幕-右键-捕获-画面:高级捕获。

设置高级捕获很简单,但也有一定的学问。格式:通常jpeg就好;要捕获的数量必须是连续;捕获尺寸:原始就好;位数,默认吧;要捕获的帧,这里是一个看情况而定的项,通常来说,做一个简单表情/动作类的gif,一共截取15个图或以下就可以了,如果你要做一个复杂的动作gif,建议最多也不要超过30个图,这里的帧数和你最终得到的图片数量成反比关系,这里的设置你得琢磨琢磨,就我选取的那个挑眉视频来说,我觉得每5帧一截图就好了,我最后选取了截取到的15个图片。(常识:通常来说,影片都是每秒24帧的)在什么时候开始截图,什么时候结束,这都是很自由的,你截取完以后可以把你不需要的之前之后的东西给del掉。

PS用avi或mov导入的是所有帧,因此,你还得花很多时间和精力去删除不必要的帧,但用KMP的话,适用于各种格式的视频,且各种帧间隙你都可以轻易调节。

截图完毕,我么可以启动ImageReady CS2开始做gif了。

首先,文件-导入-作为帧的文件夹,把你刚才得到的一堆连续图放到一个文件夹,在这里导入到IR。

注意,在这个教程里将使用到“图层”、“动画”、“优化”这几个信息窗口,请勾上。

刚才的文件夹导入后你将发现动画和图层以及主视图里有了东西,动画和图层里更是有一堆的东西。莫慌,我们一步步来。首先,点动画的第一张,然后你看到图层里最后一个蓝了。在图层里先复制这个最底层的图层,也就是在蓝色图层的上面右键,按“复制图层”。重新选回原始的最底部的图层,然后点图层下面,锁定统一那一行的“统一图层可视性”。这个操作相当重要,这个设置就意味着你把这个图层作为“遮罩体”,就等于这个图层永远至于最上层,其它图层可以变化,但都在它之下,这就是cinemagraphic图片大部分区域静态的原因!

点击统一图层可视性后会弹出一个窗口,选择匹配就好。

然后呢,在动画栏选择除了第一个图以外的所有图,同时把所有图层都选上。在工具栏里点选框工具,把Berto的头给选上,因为我们就是要他的挑眉而已嘛。

接着,我们点一下最底层刚才那个被我们“统一图层可视性”的图层,然后按Delete,噢~~~Berto的头给我们弄没了,别担心,这是必须的。

然后呢,我们把除了底层外的图层全部选上,然后在主界面的选框里右键并点击“选择反向”。

点一下倒数第二图层,按Delete,你应该看到了,那个图层里除了Berto的头以外的东西都被干掉了!

同理,把除了底层以外的图层都这么处理。

现在呢,最底层的图层没有Berto的头,其它图层只有Berto的头了。哈哈哈,这就是我要干的!

在动画栏把所有帧都选上,在这里我们要设置每一帧的持续时间,我们选择其他。

我设置的是0.07秒,因为我觉得这个时间刚好,面对不同的视频不同的效果你们可以随意设置。

然后呢,我们必须记得动画栏的这个选择动画重复情况的选项得是永远。

最后,我们确认一下优化的数据,按截图来就好。优化在哪里?窗口-优化!

好了,我们已经大功告成了!就差把gif导出,导出在哪里呢?就IR CS2而言,文件-将优化结果储存为即可!

哇咔咔,这就是我们的最终作品!静态图片中挑眉的Berto!

当然了,如果你们足够无聊,也可以做一个这样的——在挑眉Berto面前乱入飞过的xrspook,偷笑~~~

教程写完鸟,有任何问题欢迎留言交流。或许这个教程里有些纯粹多余的步骤,希望高手批评指正。

最后,我把制作这个gif过程的所有素材(zip的密码为20120503_cg)和大家分享,其中包括:

1、mp4视频文件
2、用KMP播放器截下来的图片组
3、ImageReady CS2的psd文件(psd文件通常默认PS打开,你用IR打开这个就好,又或者,你在PS的窗口那里把“动画”勾上)
4、最终成品的gif

2011-01
19

网址自动重定向

By xrspook @ 12:15:36 归类于:扮IT

在国内上http://www.wwe.com/*是很杯具的,通常都会得到这样一个页面。

于是你不得不把http://www.wwe.com/*手动更改为http://us.wwe.com/*,才能去到你要去的地方。很简单的一个操作,却麻烦。这么简单的事为什么要我们一次又一次人工完成呢?于是,今天我终于把目光投向了Greasemonkey,这个强大的油猴脚本控件。自写一个脚本实现网址自动重定向。

小白导向:

1、或许你压根不知道油猴是什么,所以请先看看wiki

2、知道油猴的神功后,你就得安装一个Firefox浏览器(你已经有了?忽略掉这步吧)。

3、安装Firefox油猴插件并激活。

4、打开xrspook写的WWE REDIRECT油猴脚本,右键油猴插件选择“新建用户脚本”。内容照抄下图。确定后需要你打开.js编辑,选择“记事本”就好,然后把WWE REDIRECT油猴脚本复制粘贴过去,保存。

大功告成了,开始无视http://www.wwe.com/*吧!

PS:附WWE REDIRECT油猴脚本源代码,很简单的说。如有需要你可以修改其中部分为你需要自动定向的内容。支持发散思维!

1
2
3
4
5
6
7
8
9
10
// ==UserScript==
// @name           rwwe
// @namespace      rwwe
// @include        http://www.wwe.com/*
// @exclude        http://us.wwe.com/*
// ==/UserScript==
 
(function(){
window.location.href = window.location.href.replace(/^http\:\/\/www.wwe.com/, 'http://us.wwe.com');
})();

说明:核心区域是“/^http\:\/\/www.wwe.com/”和“’http://us.wwe.com’”,前一个双引号里使用了字符转义,“\:”等同于“:”,“\/”等同于“/”,要知道,电脑不是人脑,你得用它懂的语言;至于后一个双引号的内容,不解释,纯粹字符串。

2010-03
24

压图原来是这样的

By xrspook @ 19:13:00 归类于:扮IT

首先,请看图:

图一,jpg,大小为44.27KB(经过Smush it压缩),原宽度度为977*561,由Photoshop CS2的图像大小强行缩小为530*304。

图二,png,大小为37.82KB(经过Smush it压缩),原宽度度为977*561,由Photoshop CS2的图像大小强行缩小为530*304。

图三,png,大小为7.54KB(经过Smush it压缩),原图大小为529*337,通过改变Excel行列宽形成,没有通过Photoshop CS2改变图像大小。

效果已经很明显了,至于原因,不知道呢~~~

2010-03
7

要并行还是要cookieless

By xrspook @ 19:23:51 归类于:扮IT

优化wp,一个困扰我一个多星期的话题。

其中有一个方法就是用cookieless的域名来放置静态的内容。于是就有了个叫“图床”的词语出现,图床啥意思?请看Kangzj解释。图床是建立在一个cookieless域名下的东西,顾名思义是用来放“图”的,但也用来放.css,.js等静态文件,由于域名是cookieless的,所以在传递过程中无需做无谓的小饼干来往,因此加快速度。如何为网站(尤指wp搭建的窝)建立cookieless的图床呢?详见:

cookieless真能提速,尤其是反应速度。但blog里全部图都放到某个cookieless的地方就是最快?不才的xrspook在折腾cookieless的时候经常借助http://www.webpagetest.org/测试X领地,不经意发现了个天知地知但xrspook不曾知道的东西——浏览器的并行下载!减少DNS查询是网站提速的又一重点,多个hostname就要求进行多次DNS查询,但如果不多,就2个呢?呵呵,这就是我要说的重点。

话说在建立了cookieless域名后,xrspook把所有静态图片都搬到了那里,毕竟那只是ftp的无聊操作而已。但接下来要把所有的图片都重新更改链接可不是开玩笑的,很懒的xrspook就只把一些图片的网址改了过来,先看看效果,惊讶地让xrspook首次看到了不同hostname的并行下载!很是厉害,普通的测速图里进度条都是成阶梯式分布的,上一个要进行到一定程度下一个才开始,所以,如果你的页面有很多很多的图片等非单纯文字的东西,那就杯具了,鉴于X领地模板的“美观性”,这里有不少的图片(简称CSSIMG)。(咋的?你没看到?圆角的都是图片,谁叫浏览器还不能广泛接纳CSS3啊,还有很多按钮底图什么的)而由于个人兴趣的需要,在sidebar加入了个叫做“鬼在这里”的文本widget(简称LOGO),不用多说,里面的也是静态图片。懒人我最开始的时候只是把LOGO的链接改过来了,CSSIMG的没改,做了测速,发现了并行法则,(见下,左图)。

并行很牛,但我的CSSIMG还没改呢,兴冲冲地把所有CSSIMG的网址也都改了,期待完美减少cookie的历史时刻。好不容易借着Firefox的页面高亮查找把CSSIMG都改好了,做个测速。(见上,右图)

(点击图片得详细测速报告)

我的天!图片半cookieless(即并非所有静态图片都放在cookieless域名)的时候,载入时间是4.654s,而全cookieless的时候载入时间却需要5.425s,差了接近0.8s,但后者的start rander(这个是什么?就是Firefox出现“载入中”或者Google Chrome“进度条逆时针转动”的时间)比前者快0.107s,归根到底就是First Byte那里快出的0.107s,是不是不传递某些小饼干的优势呢?到底是什么造成这个严重的0.8s差距呢?聪明的你或许发现了,在测速的前期,两者差距很小,但后期大量(接近15个)静态图片传递时,优势就很明显呢。前一个的阶梯“很陡”,后一个的阶梯“很缓”,在载入的这个问题上,我喜欢阶梯很陡,垂直的更好。显然,图片半cookieless时做出的hostname并行下载优势在X领地强于全cookieless的无小饼干交易。

事实胜于雄辩!

当Google和Yahoo的测速软件都告诉我们cookieless domain很好的时候,我们要相信,但不能尽信,毕竟问题得综合考虑。机器能告诉我们单项的完美解决办法,但适合自己的才是最完美的,而最适合的只有自己衡量后才能得出。

最后,X领地的提速效果是“并行>cookieless”,于是我选择把静态图片做成半静态的。

各位玩wp的朋友,什么形式的提速才最适合你们呢?实战一下吧!

PS小贴士:

在做cookieless图床的时候你或许还需要用到以下链接:

2010-02
8

豆瓣FeedSky认领

By xrspook @ 12:05:36 归类于:扮IT

doubanclaim68cafbfd0d18fddf

f0661154

Page 1 of 1412345678»...Last »
COPYRIGHT @ 我的天 | Theme by xrspook | Power by WordPress | Valid XHTML 1.1 and CSS 3 Go to top