Haorooms博客-前端博客-前端技术，记录web前端开发的技术博客

photoshop网页精准切图及设计稿精准测量方法

2014年9月11日

今天总结一下ps的切图技巧，首先声明，这个方法好用，但是对你的图层比较混乱的来说，不一定好用，还是建议用传统的方式进行切图。

一、Photoshop 切图技巧

精确第一步，精准的使用 Photoshop 切图。拿到设计稿一般是 PSD 格式的，我们首先会认真观察一下设计稿，思考一下对应的 HTML 结构和 CSS 设计模式，然后开始根据需求进行切图。

传统的切图流程

确定好了切图方案之后，对于大的 PSD 来说，往往新建一个画布，然后将 PSD 里面需要切出来的图层拖动到新画布中，使用“剪裁”工具把这个图层进一步的剪切，变成最小内容，剪去多余的部分。然后打开“存储为 Web 所用格式”对话框，根据图片选择格式、压缩比以及是否是渐进式等等，然后选择路径修改文件名。这样的缺点很明显，有时候图标或者图层有半透明的阴影，这时候对于边界的界定就不好处理，此外需要大量重复的剪裁、返回上一步、继续剪裁、保存图片等等。人工操作过多，导致效率底下，成本增加，大量时间浪费在基础重复的操作中（为此一般项目的扣图都扔给另一个同学^_^）。

改进后的切图流程

计算机就是为了帮助人类完成大量重复的工作，有没有自动切图的功能或插件呢？为此我也在不断的搜索。然后有一天就发现了 Photoshop 内置的自动切图脚本。位于“文件”－》“脚本”－》“将图层导出文件”。意思就是将你的图层分层分别导出为文件，而且还支持剪裁图片和格式选择等等。 enter image description here

选择剪裁图片之后，将会自动给你剪裁到最小状态，由于是机器剪裁，所以精度非常高，半透明的阴影也完全 OK。

[阅读更多]

巧妙运用photoshop画虚线

2014年9月11日

我之前很少用photoshop画虚线，因为ps画线本来就不是很方便。我在做网页设计图的时候，虚线等等通常是截取的。实在不行，就在AI中画好，然后以矢量图的形式导入到ps中。

昨天，一个小盆友问我ps中如何画虚线比较方便。我现在在博客上总结一下，希望对有些朋友有帮助。

其实photoshop功能很强大，因此画虚线的方法也很多！在这里我总结一下我自己的方法，要是您有什么更好的办法的话，可以留言交流啊！

一、画矩形，正方形，多边形虚线

首先新建一个空白的文件（ctrl+N）,然后选择矩形等选择框。如下图：

enter image description here (图一)

然后在空白文档上面画一个矩形选择框。

enter image description here (图二)

选择画笔工具，按F5调出画笔调试框，如下图：

enter image description here (图三)

对其间距和大小进行设置，你可以根据自己的需要来，你的虚线有多长，大小就可以设置为多少大，例如，我画的虚线长度是5px，我设置大小是5px，如上图（图三）。

[阅读更多]

jquery仿百度文库数字滚动效果

2014年9月10日

去年做的易造价云文库中有一个数字滚动的效果：效果请看：http://wenku.91zaojia.com/

今天，我的百度博客上有网友私信联系我，希望我共享这个源码，今天在这里把这个源码共享一下，后期可能这些源码都在我的前端资料库中共享！(ps前端资料库正在建设中....敬请期待！)

百度文库刷新页面之后数字由0滚动到9。

思路，背景图片滚动，根据数字多少，进行相应的滚动。

要引用一个jquery插件animateBackground-plugin.js

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/animateBackground-plugin.js"></script>

用法如下：

<script type="text/javascript">
$(function(){
  show_num(12566);
});

function show_num(n){
var it = $(".t_num i");
var len = String(n).length;
for(var i=0;i<len;i++){
if(it.length<=i){
$(".t_num").append("<i></i>");
}
var num=String(n).charAt(i);
var y = -parseInt(num)*30;
var obj = $(".t_num i").eq(i);
obj.animate({
backgroundPosition :'(0 '+String(y)+'px)' 
}, 'slow','swing',function(){}
);
}
$("#cur_num").val(n);
}
</script>
</head>

<body>

[阅读更多]

CentOS常用的文件操作命令总结

2014年9月9日

我可以说是linux操作新手，有些命令经常忘记，特别是对文件的某些操作，经常要翻阅之前的笔记，今天把之前在百度上整理的“CentOS常用的文件操作命令”转载到我的新博客上面，以供后面查阅！

博客后面还会总结一下linux下面大家php,mysql和apache的一些文章，请持续关注！（最近博客新版块正在建设。。后面搭建php环境的时候，再把文章总结在博客上面）

下面总结一些linux，CentOS下面常用的命令：

cd pwd

NO1. 显示当前路径

[root@rehat root]# pwd

NO2. 返回用户主目录

[root@rehat root]# cd

NO3. 改变到其它路径

[root@rehat root]# cd /etc

NO4. 返回到上一级目录

[root@rehat root]# cd ..

NO5. 返回到根目录

[root@rehat root]# cd /

查询文件或文件夹的CentOS常用命令 find

NO1. 查找当前用户主目录下的所有文件

[root@rehat root]# find ~

NO2. 让当前目录中文件属主具有读、写权限，并且文件所属组的用户和其他用户具有读权限的文件；

[root@rehat root]# find . -perm 644 -exec ls -l {} \;

NO3. 为了查找系统中所有文件长度为0的普通文件，并列出它们的完整路径；

[root@rehat root]# find / size 0 -type f -exec ls -l {} \;

NO4. 查找/var/logs目录中更改时间在7日以前的普通文件，并在删除之前询问它们；

[root@rehat root]# find /var/logs -mtime +7 -type f -ok rm -i {} \;

NO5. 为/找系统中所有属于root组的文件；

[root@rehat root]# find / -group root -exec ls -l {} \;

NO6. find命令将删除当目录中访问时间在7日以来、含有数字后缀的admin.log文件

[root@rehat root]# find . -name "admin.log[0-9][0-9][0-9]" -atime -7 -ok rm { } \;

[阅读更多]

javascript设置广告显示日期，js设置广告有效日期

2014年9月9日

dede等后台都有广告有效日期设置等功能。

今天，分享一个设置广告有效期的javascript函数，比较实用。

你可以用该函数定义某段代码或者区块显示日期，对其进行定时显示。

代码如下：

function strToDate(str, ext) {
    if (str == null || str == '') return;
    var arys = new Array();
    arys = str.split('-');
    var newDate = new Date(arys[0], arys[1] - 1, arys[2], 9, 0, 0);
    if (ext) {
        newDate = new Date(newDate.getTime() + 1000 * 60 * 60 * 24);
    }
    return newDate;
}
function showit(str, start, end) {
    var date = new Date();
    var start = strToDate(start);
    var end = strToDate(end, false);
    if (date & gt; start & amp; & amp; date document.write(str);
}
}

[阅读更多]