飞鱼 ^_^ 浆抱罗斯‘s blog » 乱翻乱教

乱翻乱教 – iOS5 通知栏背景制作

飞鱼 — Sun, 16 Oct 2011 08:23:20 +0000

Photoshop 制作ios5通知栏背景

制作工具：Adobe Photoshop cs5
作者：飞鱼
iOS5发布后评价都说很棒，于是毫不犹豫的刷了，算是纪念Jobs的临终大作。改进的功能很多，其中一个大功能就是有了一个跟android几乎一样的通知栏，同事看了说：我擦，这功能跟android 的下拉框有啥区别？完全抄袭么… 然后就有人说了：那不是，瞧，对比一下，明显… iOS5的通知栏帅多了，瞧这背景，瞧这细节…。
好吧，仔细看了下的确很酷，细节纹理做得很棒，像一块布。发现做起来也不复杂就几步就可以了^__^。

最终效果

步骤 1

新建psd，大小800*600，填充背景色(#45454c)。如下图。飞鱼：填充神马的不用我教了吧 XD

步骤 2

新建图层, 填充黑色(#000000)，选择 滤镜-杂色-添加杂色，杂色数量20%左右。然后将图层模式改为：滤色。如下图。

步骤 3

分别选择 滤镜-模糊-动感模糊，角度90，距离30左右。然后选择 滤镜-锐化-锐化，如下图：
这个时候基本有点感觉了吧^__^ 继续。

步骤 4

接下来只要做横向的效果就差不多了，新建一个图层，按照步骤2，只是角度变为45度。结果如下图：
这里其实还有另外一个办法就是复制一层，ctrl+t 旋转一下就可以了，不过长度会不够。

步骤 5

到这里效果基本都出来了，只要加个图层，做一下内阴影，或者黑白渐变，然后叠加一下就有效果了。

总结

可以发现，做这个东西只要几种滤镜就可以轻松达到效果，具体细节需要仔细去调，比如颜色，阴影等。
个人觉得主要的难点在于如何做成可以平铺的图案，抽空研究一下。^__^

您可能还对这些日志感兴趣

乱翻乱教 – 制作可爱的小鸟勃起图标

飞鱼 — Wed, 09 Mar 2011 15:06:43 +0000

Photoshop 超级可爱的勃起小鸟图标

制作工具：Adobe Photoshop cs3
原文地址：猛击此链接
飞鱼:这只小鸟教程好久前就想做了, 但是发现篇幅太长, 每次看到我都无语的叹了口气哈.
这个个教程原文描述的难度是初学者, 但是有些小细节还是比较难的.
不过这个教程精髓就是在成充分利用ps 里的 图层混合选项 这个东东,
做完之后可以发现仅仅用混合选项调出来的颜色也是非常有质感的.

最终效果

步骤很多, 但是每步都比较简单,
只要按照步骤一下一下来一定能做出好东西^__^

步骤 1

新建psd 文件,尺寸 800*600 , 72dpi, RGB, 白色背景, 使用圆圈形状工具, 颜色#0099ff, 在图上画蓝色的圈圈, 大小适当即可. 给图层命名: 身体. 如下图.

步骤 2

使用路径选择工(A) 选中圆圈路径, 同时按住 alt + shift 往下拖动路径, 就可以在同一个图层复制一份圆圈路径出来 , 注意: 图片里是拖动的时候截的图, 复制完后应该有两个圈.

步骤 3

用(A)选中下面的圆圈路径 ctrl +T 对下面的圆圈修改调整其大小.

步骤 4

使用直接选择工具(也是A, 空心的箭头) 选择圆圈上面的节点, 调整节点 , 将圆圈形状调成下图所示.
注意: 调整节点左右弧度的时候,按住 shift 可以保持不会上下偏移.

步骤 5

使用圆圈形状工具, . 在身体图层上方, 画长条的圆圈, 图层命名为眼圈, 图层面板中修改形状颜色为白色, 使用同样的方法,复制一只眼睛. 注意眼睛比例.

步骤 6

然后用钢笔工具在头部制作小鸟头发的形状.

PS: 这里原文似乎少了一步,就是画眼珠子的图层 , 其实跟上一步一样,只不过是两个小的正圆, 就不用教了吧嘎嘎. 眼珠的颜色值为: #5e3b11

reader用户想继续阅读请猛击标题. 图片太多,于是分段

您可能还对这些日志感兴趣

乱翻乱教 – M8开发环境(vs2008)配置 [菜鸟版]

飞鱼 — Fri, 07 May 2010 16:04:56 +0000

每天看着[魅族论坛]的开发者版块那寥寥一百左右的帖子，真是揪心啊，并且里面大好多问题都是平台搭建的问题，这个问题很严重，并且非常打击初学者的积极性呢。于是乎，折腾了几天把平台搭建及同步调试等常见的问题及细节都跑了一遍，希望有所帮助。

准备活动

都说我解说技术比较银荡，那就更银荡一些 ^_^ 要大干一场，那是需要一系列性情道具的····
M8的系统是基于wince 封装出来的，这个大家应该都知道。所以咱们需要的东西如下：

1. Visual Studio 2008 下载地址 点进去捡专业版 下载
2. M8SDK 下载地址 是魅族的开发社区的下载地址
3. M8SDK中文版文档 同楼上
4. M8 一只 （选填） 如果你真的想开发M8应用，去整一个，因为同步调试比模拟器调试要真实多了。
5. 同步驱动 下载地址官网有的下
6. 电脑一只 不要告诉我你想在M8上开发 =，= 我用的win7 64位，很销魂
7. .NET Framework 3.5 下载地址 win7 就不用装了。

前戏

前戏一定要有不然怎么OOXX，是安装软件，且顺序如下：
.NET Framework 3.5 (win7)可以忽略
Visual Studio 2008 选择自定义安装，除了C++意外的都不要勾选(除非你还要开发其他东西)，我就是这么干的，当然MSDN也不要装了，有问题google 吧，然后是耐心等待，看看X片吧。

然后装 M8SDK(SDK要在vs之后装，不然是装不上的)，这里要注意一下，论坛里有老多人卡在这里，多少也要先看看SDK文档再下手么，文档里写得还是蛮清楚的，虽然有些地方要误导人。如下图，装的时候，不要勾选文档部分。

接着是装驱动，叉p 跟win7 要装的东东不一样，去文档里看吧。这里就不说了。确保同步成功就ok。

前戏结束，应该湿了~~~~~ 哼哼~~~

剥橘子，带TT

论坛里好多初学者碰到了N多关于怎样开始这个hello M8 的项目。这个灰常蛋疼，虽然SDK文档里有步骤但是却很蛋疼的漏掉点什么，总是调试不成功，同步不成功。就像正要OOXX 的时候同事来电话一样，立马倒塌~~~~

那么开始我们的hello M8 的项目，
1. 新建项目，智能设备 – win32智能设备项目 见文档 – 创建基本MZFC程序
按照文档里说的复制 hello M8的程序到cpp里。

2. 项目建好后，选择项目 – XX属性配置(重要) ，这里文档虽然有步骤，但是似乎漏了点，
首先是 添加依赖项 选择[链接器]-[输入]-[附加依赖项] 写入： mzfcs.lib platformApi.lib (文档里有说明) 如下图：

3. 接下来是设置预处理器，[项目]-[属性]-[C/C++]-[预处理器]-[预处理定义]，添加 MZFC_STATIC，这里文档的图片容易误导人，因为文档中图片中只有一个MZFC_STATIC，很多人以为是吧其他都删掉，其实不是，是在前面追加一个。不然后面编译的时候会出现如下图的错误。

4. 然后是设置 不使用预编译头，这一步文档里没说，但是论坛里好多帖子都在问这个问题，不下十个，觉得官方有必要改改文档了，
[项目]-[属性]-[C/C++]-[预编译头] 设置成不使用预编译头，顺便贴一个没设置这一项编译不成功的截图。

5. 使用模拟器调试，如下图 M8SDK Emulator 代表模拟器模式(默认就是这个)。选择[生成] – [编译] Ctrl+F7，看到下方成功了之后，再按(F5)[调试] 应该就跳出个恶心的模拟器，为什么恶心呢？因为一开始是黑屏的以为模拟失败，等了10秒，丫才开机·· 囧rz 还要开机啊······，并且效果不好，感觉怪怪的速度也不很慢。有大虾知道如何优化，请留言告诉我下，我补上。

6. 同步调试。这一步留给有小八的童鞋们。连上小8后，(确保同步驱动装好，同步模式可以跑)，然后将 M8SDK Emulator 下拉选为 M8SDK ARMV4I Device，然后点击右侧的小手机按钮进行手机同步测试。看看是否同步，

7. 配置远程目录，这个文档里也有说明，选择 [项目]-[属性]-[部署] 设置远程目录，建议： 将目录设置成Disk目录下的某文件夹，如\Disk\MM ， 文档里的说明是Windows 生成之后找都找不到，

同样，设置远程调试文件 [项目]-[属性]-[调试] ，远程文件，如下：

8. 编译生成文件 这个是关键的一步，因为之前刚开始整的时候一直连接不到手机，都是直接弹出个调试器，或者提示找不到远程文件。

9. 屡试不爽，久久不放，然后按下F5 应该就能在你的小八上看到运行的软件了。

好吧，开始你的M8之旅吧。

有问题可以留言欢迎讨论。

您可能还对这些日志感兴趣

乱翻乱教 – 小鸡快跑 – Photoshop 超级可爱小鸡

飞鱼 — Wed, 03 Mar 2010 15:15:38 +0000

Photoshop 超级可爱小鸡

作者：Vaclav 此人的blog 很帅气··· 膜拜ing
制作工具：Adobe Photoshop cs3
原文地址：猛击此链接 (英文强悍的可以参考原文)
发现工作后就没有好好的干过自己爱干的事情(不想说做爱做的事)，reader上的tutorial 堆积如山，不过有人说的好，时间挤挤还是有的。
想到不知不觉订阅快200了，还是多写写吧，就当自己前进的动力，最近还是有挺多东西要写的，听飞鱼娓娓道来 ^___^

今天更新的东西是tutorial 上一个小鸡的制作，总体比较简单，有点小技巧，简单不简单。相信对初学者会有很大的帮助，像我这样的菜鸟也就做做小教程吧，谁让我爱分享，咩哈哈哈·~

最终效果

步骤1

新建一个文档，多大无所谓，够大就行，我用的是500×400，用形状工具画两个圈(按住shift 可以在同一个图层画两个圆)。用钢笔工具按住ctrl点击下图中的节点适当修一下形状。这个应该很简单吧，不用我教，什么？钢笔怎么修不会？ =，= 往下看
效果如下：

钢笔工具(P) 在使用的时候可以配合ctrl，shift，alt 可以完成很多好玩的东东，你可以自己试试看，自己总结。

步骤2

接下来用选择工具(A)选中头部的圈，按住shift 选中另外一个圈，(或者直接在界面拖动选中两个也可以)，点击上面 “组合” 就可以把两个圈圈合并，当然是不能分开的，所以要细心 接下来要使用钢笔工具将接口部分变得平滑。
如下图，钢笔工具在线上的3钟状态如下图中右侧的样子，分别是添加节点，删除节点，和重置平滑 (重置平滑，是按住alt在线上出现的，单击就是不平滑(角)，可以拖动重新拉平滑度，这个东西在调整曲线的时候非常有用。)

调整后的效果如下：

您可能还对这些日志感兴趣

乱翻乱教 – 时尚导航设计 – 傻瓜版教程

飞鱼 — Sun, 01 Nov 2009 11:59:19 +0000

时尚导航设计 – 傻瓜版教程

作者：飞鱼
制作工具：Photoshop cs3
最近给一个朋友的一个教育类的网站做了个设计稿，后来因为公司开始忙了，就只弄了个设计稿，就这么停掉了，说来也惭愧，人懒啊~，不过也不吝啬，整理了一下这个头部的制作过程放出来分享给大家。希望有所收获
最近yupoo，发神经了，然后又被花花教导了一下，把图片放在MT上了。 = =

最终效果

步骤1 准备工作

首先当然是新建文件啦，尺寸为 1150*1000，

按ctrl+R调出标尺。设置标尺的单位为“像素”(在标尺上右键)，然后在左边的标尺上拖动，拉出参考线
分别拉一条参考线在100px，和1050px
飞鱼：我比较喜欢950px的布局，两边各留100px的留白。

拉好参考线的效果图如下：

步骤2 制作顶部导航

通常一个网站的头部包括一个顶部的导航，显示欢迎，登录，帮助等信息。
新建一个图层(topline)，使用矩形工具，在顶部，画一个颜色为#e9e9e9 的矩形，高度为25像素左右。(可以根据自己喜好调整)

您可能还对这些日志感兴趣

乱翻乱教 – jQuery图片轮播插件 – 菜鸟版

飞鱼 — Fri, 25 Sep 2009 11:49:02 +0000

jQuery图片轮播插件

作者：飞鱼
制作工具：notpad++
使用语言：javascript
最近写的这个图片轮播插件，于是乎拿出来晒晒，分享点菜鸟心得。大虾可以旁观^_^

功能描述

就是一个简单的js轮播，第一张图变白，然后切换成第二张图。鼠标放上去后图片不切换，移开又开始了。可以给组图片加效果，并且不冲突。
有空补一下代码注释，以及 setInterval 的应用

演示效果图

演示地址：跳转地址

js 代码

(function($) {
  $.fn.fadPicture = function(d) {
    var df = 3000;
    delay = d ? (d < df ? df : d) : df;
    $(this).each(function(i){
      var t = $(this),
        mc = function(){
          var  ul = t,
            first = ul.find('li:first');
          ul.fadeOut('show',
            function(){
              first.appendTo(ul);
            }
          );
          ul.fadeIn();
        };
      var interval = setInterval(function(){
        mc();
      }, delay);
      t.hover(
        function(){
          clearInterval(interval);
          t.data('start',false);
        },
        function(){
          interval = setInterval(function(){
            mc();
          }, delay);
        }
      );
    });
  };
})(jQuery);

使用方法

$(document).ready(function(){
  $('.fadPicture').fadPicture();
  // $('.fadPicture').fadPicture(5000);  //时间5秒
});

html写法

您可能还对这些日志感兴趣

乱翻乱教- jQuery 制作N级导航菜单 – 插件版

飞鱼 — Wed, 15 Jul 2009 09:32:00 +0000

前几天做的jQuery实现N级导航菜单，实现起来超级简单，但是如果要将效果更丰富化的话，可能就不止这么点代码了。

于是乎，向笨笨先生(我哥)讨教了几番，得出了这么一个jquery menu 插件。代码依然很简单，稍微复杂点，可以在按钮放上去的时候触发一个动画效果，离开也可以触发一个动画效果，还添加了延迟释放效果(鼠标移开后有个缓冲，再消失)

代码如下：

(function($) { //N级导航插件
  $.fn.menu = function(options) {
    options = $.extend({
      delay: false
    }, options);

    this.find('li:has(ul)').hover(
      function() {
        var t = $(this);
        t.data('hide_menu', false);
        t.find('>ul').css('display', 'block'); // 可以换成动画效果
      },

      function() {
        var t = $(this);
        t.data('hide_menu', true);
        var hide_menu = function() {
          if (t.data('hide_menu')) {
            t.find('>ul').css('display', 'none'); // 可以换成动画效果
          }
        };
        options.delay ? setTimeout(hide_menu, options.delay)
            : hide_menu();
      }
    );
  };
})(jQuery);

代码非常简练，可以根据实际需求增加其他效果。
使用方法如下：


jQuery(function($) {  //调用插件
  //$('.menu').menu() //默认调用语法;
  $('.menu').menu({delay: 500}); //延迟500ms释放
})

PS：演示地址

您可能还对这些日志感兴趣

乱翻乱教- jQuery 制作N级导航菜单

飞鱼 — Sat, 11 Jul 2009 05:09:52 +0000

突然发现将近一个月没写东东了(拜托就是一个月好伐)。飞鱼：额，最近在做月子= =

jQuery 制作仿DNF首页导航菜单效果

作者：飞鱼原创
飞鱼: 偶然发现这个东东很实用，就手把手写了个。
DNF首页的那只导航，似乎纯手写的。我这次要写的是用jquery来制作，制作代码非常极其简单，看了就知道怎么做(老鸟可以绕过哈，谁让咱们都是菜鸟 = =)

最终效果图

支持N级导航(添加子导航无需另外添加代码)。

html代码

首先当然是html啦，代码如下，没有什么技术含量，

css代码

因为是仿dnf官方首页导航，所以样式也多少参考了一下它的样式，(图片我也给扣过来了嘎嘎)

.menu{
  height:27px;
  float:left;
  background:#1d1d1d url(http://ossweb-img.qq.com/images/dnf/web200812/box_bg1.gif) repeat;
  border:2px solid #000;
}
.menu ul{
    border:1px solid #3f3f37;
    height:25px;
    float:left;
}
.menu li{
  float:left;
  position:relative;
  text-align:center;
  width:70px;
  background:url(http://ossweb-img.qq.com/images/dnf/web200812/img.gif) no-repeat -480px 9px;
}
.menu li .sub{
  background:url(http://ossweb-img.qq.com/images/dnf/web200812/img.gif) no-repeat -420px 9px;
}
.menu li a{
  color:#b29056;
  display:block;
  height:25px;
  line-height:25px;
}
  .menu li a:hover{
    color:#fff;
    text-decoration:none;
  }
  .menu li ul{
    position:absolute;
    top:25px;
    left:-1px;
    display:none;
    width:68px;
    height:auto;
    float:none;
    border-bottom:none;
    background:#1d1d1d url(http://ossweb-img.qq.com/images/dnf/web200812/box_bg1.gif) repeat;
  }
  .menu li ul a{
    display:block;
    height:25px;
    line-height:25px;
  }
    .menu li ul a:hover{
      background:#070707 url(http://ossweb-img.qq.com/images/dnf/web200812/r_linkbg.gif) repeat;
    }
  .menu li ul li{
    position:relative;
    width:68px;
    border-bottom:1px solid #3f3f37;
    background:none;
  }
  .menu li li ul{
    position:absolute;
    top:-1px;
    left:68px;
  }

js代码

这个代码，可以说是相当滴简单，只用了一只语法(.hover)。
说明一下代码的用处细节：(菜鸟专用，老鸟请跨过去 = =)

$(document).ready(function(){
  $('.menu li').hover(  //给menu 下的所有li 添加 hover 动作
    function () {   //鼠标在li 上时让 li 下的ul 显示出来
      $(this).children('ul:first').css('display', 'block');
    },
    function () {  //鼠标在离开li 上时让 li 下的ul 隐藏掉
      $(this).children('ul:first').css('display', 'none');
    }
  );
});

上面代码中我用:first 来只取第一个来提高效率(不知道我这样做对不对，感觉上应该是对的 – -)。

PS：代码演示，因为最近用的都不是自个儿的电脑，FTP上不去，就委曲下自己尝试一下呢，效果还是不错的。

PS2：可以在这基础上增加其他功能：比如鼠标离开后，过半秒中导航才消失，这个需要用到setTimeout 函数来解决。有空我写个。^_^

您可能还对这些日志感兴趣

乱翻乱教-编号004-用photoshop制作绚丽的星球

飞鱼 — Mon, 08 Jun 2009 04:31:39 +0000

用photoshop制作一个星球

作者：Greg Martin
制作工具：Adobe Photoshop
原文地址：猛击此链接 (英文强悍的可以参考原文)
飞鱼: 偶然发现这个东东非常绚丽，就狠下心来把它啃下来分享大伙。
由于笔者用的是photoshop7的跟我现在的cs3相去甚远，于是我就简单看了一下原文，做了一下，然后自己整理出这个教程。步骤相当简单，但意义深远，亲手做过一遍才能领会。

最终效果

步骤1：绘制背景

首先当然是新建一个600*500左右的文件。填充背景为黑色，新建一层“星球”，在场景中绘制一个白色正圆。如下图：

飞鱼：可能你会纳闷为什么要画个白色的？继续往下看
新建一层“光照”，在“光照”层上右键- 创建剪贴蒙版，然后用选区工具圈出如下图的选区(当然你可以不圈，不影响)，使用渐变工具在“光照”层拉出如下图的渐变，渐变颜色为“#774c2f”~“#ffffff”。效果如下：

这时候大概有个星球的阴影啦^_^，那么继续。由于发现这个“阴影”渐变太平滑，看着有点假，于是加了如下步骤来解决这个问题。选择“光照”层，自由变换(ctrl+T)，在图上右键，选择变形，将中间部分的黑色阴影稍微往上扯一下，这样就比先前好多了。如下图：

好的看下效果图，嗯~这还是不像星球 =。= 不急，后面还有

您可能还对这些日志感兴趣

乱翻乱教-使用JS输出HTML串最快的方法

飞鱼 — Mon, 01 Jun 2009 04:11:40 +0000

无数次滴被丫头说“没更新”,最近刚答辩完，整个人像吃了蓝色小药丸一样，不想动不=。=

最近开始狂啃JS，因为上个月去淘宝UED撞墙了，因为那边的“叔叔”们，一直都强调技术，特别是JS @_@ 。然后就被派遣回来了。

飞鱼：如果你跟我有同样遭遇的话，那么，一起学JS吧嘎嘎···

得···切如正题。
=========== 华丽的分割线 =============

这文章是james.padolsey那看得，觉得挺有启发的，于是就翻译过来给大伙看看。

使用JS输出HTML串最快的方法

作者：James Padolsey
原文地址：猛击此链接(英文强悍的可以参考原文)
当需要将一大堆数组转换成固定格式的html，以下有几种实现方法。
注意：当然你可以直接手动将数组转换成html，如果那样的话，你就很有前途了^_^

方法一，拼接法

这种写法虽说不是最慢的，但是用的人却是最多的。额，貌似我以前都这么用


var arr = ['item 1', 'item 2', 'item 3', ...],
    list = '';

for (var i = 0, l = arr.length; i < l; i++) {
    list += '' + arr[i] + '';
}

list = '' + list + '
';

就是使用for循环将每个数组使用字符串拼接起来的意思。

以后千万不要用这种啦，又丑又慢=。=

方法二，堆栈法(我起的名，=。=)


var arr = ['item 1', 'item 2', 'item 3', ...],
    list = [];

for (var i = 0, l = arr.length; i < l; i++) {
    list[list.length] = '' + arr[i] + '';
}

list = '' + list.join('') + '
';

稍微比拼接法快些，但还不够完美。这次的代码使用了.join 方法 比上一种稍微高级了点，但是还是有万恶的for循环

方法三，圣杯(应该是说最佳办法吧)


var arr = ['item 1', 'item 2', 'item 3', ...];

var list = '' + arr.join('
') + '
';

看过后面的测试结果，你就会相信我说的，这是最快的方法。当然你也可以最近去测试一下。
作者很有自信，说这方法是最快速的。因为使用了join方法并且去掉了for循环，代码相当简洁，相比我以前老用的方法一，不禁大叫：oh 屎~~

浏览器测试

有图有真相

原文我就不翻译了，我的个人水平有限，从上图可以看出，大部分浏览器在处理以上代码时，第三种方法相对最快，但是chrome浏览器优点变态，估计是他独有的js 引擎在起作用吧。果然BT。

======补充======

原文下面评论提出了些问题：说如果数组里么有东西的话就只输出UL会有问题，说要使用三元式来解决。