浆抱罗斯 - 飞鱼‘s blog

欢迎光临：飞鱼的东西有点糟糕，希望你慢慢享用，且有所收获 ^_^

9 Mar 2011

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

2011年3月9日 23:06 pm - 乱翻乱教 - photoshop - PSDTUTS

22 feet

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

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

最终效果

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

阅读全部>>

1 Mar 2011

html5 新思路的开始 – web标准化交流会 (杭州站第三期)

2011年3月1日 13:10 pm - 代码浅谈 - 生活琐碎 - html5 - web

12 feet

<p><img class="alignnone size-full wp-image-1154" title="20110228" src="http://qilei.org/wp-content/uploads/2011/03/20110228.jpg" alt="" width="600" height="240" /><br />
<em>飞鱼：等交流会洗照片中………^__^</em><br />
掐指一算 发现又有一个多月没更新blog 了，我勒个去~~ = =<br />
已经是第三次参加 web标准化交流会了，每次都还是有点收获的，更何况每次都是在不同公司感受不同的氛围。</p>
<p>本次交流会在 杭州东软的思科会议室里举行，依然由 <strong>蕃茄</strong> 主持会议，这家伙每次闲话都很多嘎嘎，是一个对web 情有独钟的淫啊。</p>
<p>闲话少说：大概 跟大伙回报一下 这次交流会的内容以及心得吧。</p>
<h3>一、div section article 傻傻分不清楚 – by 蕃茄</h3>
<p>蕃茄大概介绍了一下html5 的一些标签，引导大伙去讨论。分享了下自己对新增标签的理解。<br />
不过似乎是思科太高档了，（会议室里大大的会议桌，水果···）大家显得比较拘谨，可能是杭州人都比较含蓄。也可能是 前端淫类 都比较 闷骚~~~ Orz</p>
<p><em>说到对标签的理解，正如我在交流会上说的</em><br />
html5 新增的标签 如 header footer nav aside article section 等。新增的标签让原先赤裸裸的div 变得更加语义化。<br />
那么更加语义化对web 有什么好处呢。<br />
我自己总结了一下几点：<br />
1. <strong>页面结构更加清晰</strong> 。从标签的语义就可以看出 section 的中文意思是 地区，章节。让用户的体验是，预览网页更像是在看一本书(<a rel="bookmark" href="http://diveintohtml5.org/">国外的例子</a> <em>页面看起来就像一本书</em>)，一本书有页眉页脚(header footer) ， 目录(nav) ，旁注(aside) ，章节(section)，正文(article)，区块(section) (article 是特殊的section) 蕃茄写的文章里有说明(<a href="http://www.qianduan.net/html5-differences-in-the-div-section-article.html">HTML5 中 div section article 的区别</a>)。</p>
<p>2. <strong>让爬虫更懂你要传递的内容</strong> 。在搜索引擎如此发达的未来，语义化web 能让web 说要传递的信息更加 清晰。比如爬虫可以有选择性的 抓取 正文以外的内容。让爬虫(在你的网站上)多飞一会儿，那么呈现给用户的就越多越快。</p>
<p>3. <strong>让前端代码更加对象化，模块化</strong> 。这个思想也是最近在接触很多后端语言，接触手持设备开发语言(android and iOS) 越发期待的。就是期待未来的web 页面制作应该像 xcode 那样制作前端界面的时候 根本不需要敲任何html5代码，(<em>虽然类似Dreamweaver 也能做到，但不是最优化</em>)。那么假如web标准化 慢慢成熟之后 是否直接可以 建立一套类似 那样的界面。<br />
那么我们前端的工作就不再是：</p>
<ul>
<li>a. 觉得 section 标签比 div 长 (<em>交流会上有人提出这样的疑惑，这个不是问题，因为有自动补全工具</em>); </li>
<li>b. article 标签里是否可以嵌套 section (这个是我突然对这两个标签是否可以交叉嵌套的疑惑).</li>
<li>c. 检查标签是否闭合，(前端的很多bug 都是标签 误删没有闭合造成的, 当然html5 你可以不闭合，但必须遵循它的标准)。</li>
</ul>
<p>以上就是我对前端工作的未来的设想。<br />
当然前端的工作还有 javascript 部分，这块东西就像玉伯说的，水很深，我们还在河沿。</p>
<h3>二、canvas 应用开发, 真3d引擎 – by 周杰 hehe123 思科网讯</h3>
<p>第二部分有些高端，因为涉及到图形算法。听得好多在场的前端大大们 一愣一愣，因为之前做过flash 对空间算法 还是有点接触，所以听起来不是非常累。<br />
之前我也写过一篇关于 javascript 3d 的介绍 –<a href="http://qilei.org/200902/javascrip-for-3d-program/">强悍的javascript — 3D效果</a>。<br />
canvas 是个怨念物。想掌握这个东西，还需要有一定的 图形算法能力。<br />
周杰给我介绍了下 web中的真3d 开发。我一直以为web上只能做做伪3d呢，不过就目前来讲，真3d 在性能上 跟伪3d 还有有挺大差距的，真3d相当耗资源。可能是研究得还不够深入吧。也许未来的 web 版山口山离我们不远了。<br />
具体 还是 不深入讨论了，这方面真的好深。有空自己做点 canvas 的真3d 出来 show 一下。</p>
<p>顺便放一个 canvas 的帅气应用 <a href="http://weavesilk.com/">http://weavesilk.com/</a><em>非常帅气，用cavas绘制类似极光一样的图，算法帝啊·~~ 膜拜</em></p>
<h3>三、感慨： 我们走得还不够快</h3>
<p>发现不同的公司对web开发的理念就是不一样，像商业为主的 网站 大多都是以 业务为导向，注重实用。觉得思科网讯这一点挺好，它们有个专门针对web的研发机制。以追求领先技术为导向，有点labs的感觉。</p>
<p>相对于这点，不禁 膜拜 来自日本的那些前端大牛。就像 周杰说的当我们还在讨论 html5标准的时候，才开始学习html5的时候，他们就已经开始在研究canvas 的3d 引擎了。这样导致的后果是，我们永远都会在技术研发上落后于他们。<br />
<em>我就感叹一下~~~~ ^__^</em></p>

16 Jan 2011

壹周一嘀咕: 2011/1/17

2011年1月16日 23:01 pm - 嘀咕一下

13 feet

<p><img src="http://www.qilei.org/wp-content/uploads/2011/01/20110117-digu.jpg" alt="壹周一嘀咕: 2011/1/17" title="20110117-digu" width="600" height="200" class="alignnone size-full wp-image-1128" /><br />
突然发现微博有一个很大缺点，就是有的时候突然灵机一动的时候，发了一条推，结果事后缺沉淀不下来。<br />
<em>PS：当然 好像有将微博的内容聚合到blog 的插件，不过感觉不太好筛选，有那只大大 知道更好的方法？</em><br />
2011年每周记录一次最近一周，看过的好玩的东西，值得去分享的。用简短的语句去描述，去传播。</p>
<h3>1. 淘宝首页改版</h3>
<p>每次淘宝首页改版都能从中挖掘出一些可以进步的东西，比如<a href="http://www.gracecode.com/archives/3050/">彩蛋</a></p>
<h3>2. html5设计原理</h3>
<p>从<a href="http://shawphy.com/2011/01/be-pro.html">Be-pro</a>(好文)开始，到番茄的blog，然后到为之漫笔 的 <a href="http://www.cn-cuckoo.com/2010/10/21/the-design-of-html5-2151.html">html5设计原理</a>(<em>发现这文章之前看到过，但是由于太长就是收藏了一下</em>)，<br />
后知后觉的又重新认识了一边html5，相信很多人跟我一样。去了解一下吧，共同学习</p>
<h3>3. android 开发环境for mac</h3>
<p>应该是大势所趋的因素，之前折腾了好多个月M8 开发，因为各种环境因素，进展比较慢，<br />
相反android的开发环境就相对要好得多，不过也差不多折腾了好多天才将 mac 下的android 环境给搭起来，归根结底还是因为对 android 的一知半解，对eclipse的不熟悉。但是兴趣是学习新事物的原动力。<br />
用着满腔热情，会学到很多东西。— <a href="http://techolics.com/Android/2010/0602/7.html">图解Mac电脑配置Android开发工具</a></p>
<h3>4. 折腾叶子的 wordpress 皮肤</h3>
<p>作为两栖动物，平常还折腾一下 photoshop，让自己全面发展，曾经做了几套 bo-blog 皮肤 广为流传，后来bo的不争气，现在为wordpress 做皮肤，其实对于设计来说没差，并且更加灵活，可以敞开翅膀得去折腾。<em>PS：配图就是目前还没完稿的设计</em> 之前有好多朋友在blog里留言 问我现在的皮肤可不可以 分享一下，我都回绝了。<br />
当然，你可以学习这位小盆友，剥皮自己做，<a href="http://imox.me/">小米</a> 我表示鸭梨很大^__^</p>
<h3>5. GF2</h3>
<p>最近收服了一只二奶（<a href="http://product.pconline.com.cn/dc/panasonic/425187.html">GF2</a>），机子还在路上，白色的被炒得很高，果断收了只红的=，=，原先想年后买，因为有些特殊需要就年前买了，<br />
今年估计要两秀清风得回家了 Orz～  向老爹请安了～ （<em>飞鱼：月光难免 ^__^</em>）<br />
PS : 某男会问 为啥不直接上 D90，因为这东西会让我想起那句 烧钱的经典名言。<br />
PS2：又有某男会问 尊有钱，差不多都可以收爱疯4 了。 貌似这东西最近缺货，不过我对手机的需求并不是非常高，android 机子需求倒是有，因为今年有兴趣玩 android 应用。</p>
<p>PSP：《怪物猎人P3》 顺利到H5， 不容易啊，突然发现累积时间已经有 130+ 了。真杯具平男，</p>
<p>好了这周就到这了^__^。</p>

10 Jan 2011

野谈交互 — 淘宝商城的banner设计

2011年1月10日 0:09 am - 野谈交互 - banner - 设计

0 ~o~

<p><img src="http://www.qilei.org/wp-content/uploads/2011/01/20110108-banner.jpg" alt="" title="20110108-banner" width="600" height="210" class="alignnone size-full wp-image-1119" /><br />
<em>图源来自 淘宝商城截图，我去～ 这不是广告～～</em><br />
如果你经常逛淘宝商城，你会发现商城里的banner有好多设计起来风格都很像，比如配图这样的。</p>
<ul>
<li>也许你会认为，是同一个设计师承包了这部分banner。</li>
<li>也许你会认为，设计师比较懒，套用了同一个模版做的。</li>
</ul>
<p><em>我可以很肯定的告诉自己，这TM是有组织-有预谋的设计规范。至少我超级喜欢</em></p>
<h2>那么：这样的banner设计，有什么优点？</h2>
<h3>1.设计 区块化</h3>
<p>首先，左边是视觉部分，右边是文案信息部分。<strong>视觉部分</strong>通过简洁的商品搭配或者 模特搭配，来突出banner链接那边都有怎样的商品。右边<strong>信息部分</strong>，通过大小标题来突出，信息的层次性，更有利于用户去阅读。<br />
<em>下划线是亮点</em>，将信息中的精髓部分像标记笔一样刻出来。</p>
<h3>2. 更加迎合各种用户需求</h3>
<p>广大用户中，总有些人对banner上的字比较敏感，他们在阅读一张banner的时候，最先进入眼睛的时banner上的字，那么之后才是banner上的画。同样，另外一些人对banner上的图片比较敏感。<br />
那么这样的设计，能够引导用户按照各自独有的顺序来阅读banner。<br />
如果经过长期的用户定向培养，对用户识别banner内容的效率有很大的提升，同时间接的提高banner的点击质量。</p>
<h3>3. 视觉规范化</h3>
<p>相信去过宜家朋友们都知道，很多小细节都有它规定的成列方式，给用户的感觉是，整齐干，错落有致。当banner 都是非常规范的一种设计模式，页面整体看起来就非常的协调。</p>
<h3>4. 提高设计的效率，高产</h3>
<p>懒人要懒出一种境界，很多高效的人同时又是一个懒人。<br />
我相信，这样的banner 设计应该是 商城某位设计师不断的偷懒，总结出来的一种即不会很难看又很高效的设计模式。<em>因为，做活动页面的设计稿已经够折腾他了。</em></p>
<h3>5. 始终以内容为主导</h3>
<blockquote><p>举个事例：<br />
记得在一次交流会上，询问淘宝<a href="http://lifesinger.org/blog/">玉伯</a>，为什么淘宝好多产品设计开始直接使用直角，而不用圆角。他的回答让人满意，他说：通过调研，发现用户并不在意你设计的东西是否圆角，只要能点就行。于是后来设计师就开始尝试直角的设计。</p></blockquote>
<p>这个事例告诉我们，对于商业需求的设计，应该更加注重内容。那么banner设计是否也</p>

5 Jan 2011

三元运算符使用小技巧一则 – javascript

2011年1月5日 13:01 pm - 代码浅谈 - jquery

5 feet

<p>发现代码慢慢写多了的时候会不自觉的将if else 用 三元来替代，仅仅是未了让代码更简洁精辟，当然也有人说用三元可以让你有高潮的感觉。最近在写js 的时候也有这样的感觉，并且收集了一些小技巧，分享分享。<br />
<em>大鸟请跳过下面这段，大大鸟帮忙指正 ^__^</em><br />
====普及线====</p>
<pre><code>表达式 (expr1) ? (expr2) : (expr3)
在 expr1 求值为 TRUE 时的值为 expr2，在 expr1 求值为 FALSE 时的值为 expr3。</code></pre>
<p>============</p>
<h3>普通用法</h3>
<p>当你发现你经常用if else</p>
<pre><code>if(拜春哥 || 拜考试帝){
    不挂科;
}else{
    门门挂;
}
</code></pre>
<p>那么三元的表示法就是</p>
<pre><code>拜春哥 || 拜考试帝 ? 不挂科 : 门门挂</code></pre>
<p>很帅气的发现代码 精辟了 好多。</p>
<p>日常中经常会有这样的 if else 判断，特别是嵌套比较多的时候 用三元是比较和谐的，可以让你的代码看起来更加清爽，结构清晰。</p>
<h3>稍微聪明点的用法</h3>
<p>通过不断的变化，可以衍生出很多三元的用法。如下一段jquery代码</p>
<pre><code>flag ? $('body').addClass('hover') : $('body').removeClass('hover') ;</code></pre>
<h3>甚至更变态些的。</h3>
<pre><code>$('.item')[ flag ? 'addClass' : 'removeClass']('hover')</code></pre>
<p>上面的代码看着比较困惑。因为当flag = true 的时候 ，代码就变成以下代码：</p>
<pre><code>$('.item')['addClass']('hover')</code></pre>
<p>这样写法等同于。</p>
<pre><code>$('.item').addClass('hover')</code></pre>
<p>具体解释 详见 <a target="_blank" href="http://www.maisui99.com/javascript-object-literals-small-case/">豪妹的文章</a><br />
// <em>一开始我一直搞不懂为啥子可以这样写，经过沟通突然领悟了，咩哈哈</em></p>
<h3>再升华一下</h3>
<p>可以根据需要来调用自己想要的function来处理更多的事情。</p>
<pre><code>
function a(){
      do something
}
function b(){
      do something
}

flag ? a() : b();
</code></pre>
<h3>那么为师的完全体</h3>
<p>于是有了这么个案例，两个按钮 一个向前的行为，一个向后的行为。操作的功能都差不多。</p>
<pre><code>    var action_turn = function(e, type){
        var self = $(e).closest('li');
        var target = self[type === 'prev' ? 'prev' : 'next']();
        target.addClass('has-img');
        self.removeClass('has-img')
    }

var btn_next = $('#item-photo-panel a.next')
    btn_next.click(function(){
        action_turn(this, 'next');
        return false;
    });
    var btn_prev = $('#item-photo-panel a.prev')
    btn_prev.click(function(){
        action_turn(this, 'prev');
        return false;
    });
</code></pre>
<h3>尽量避免的情况</h3>
<pre><code>alert( true ? 'true' : false ? 't' : 'f' )</code></pre>
<p>我指的是尽量避免如上嵌套的 三元，因为在js 中 语句是从右到左，上面的代码等同于</p>
<pre><code>alert( true ? 'true' : ( false ? 't' : 'f' ) )</code></pre>
<p>如php 中这个结果就完全不一样，三元嵌套的时候是优先左边的。</p>
<pre><code>echo (( true ? 'true' :  false ) ? 't' : 'f'  )  //php中</code></pre>
<p>tip：<br />
另外发现php中的三元有这样的提示</p>
<blockquote><p>Note: 注意三元运算符是个语句，因此其求值不是变量，而是语句的结果。如果想通过引用返回一个变量这点就很重要。在一个通过引用返回的函数中语句 return $var == 42 ? $a : $b; 将不起作用，以后的 PHP 版本会为此发出一条警告。</p></blockquote>
<p>但是经过试验，发现在javascript 中上面的做法是可以起作用的，大概是js 比较BT，严谨度没有php那么大的原因。</p>

Page 3 of 361 234 5...»Last »

Who am I ?

飞鱼，男，浙江人士。
非专业前端、交互设计师。
目前在企鹅村通宵打酱油

成年往事

那些朋友

大猫不是猫，是妖怪
葉子家园小MM
小峰家园
小豪家园滴前端
引子歌词写得很棒
落落印钱的
丁丁淘宝
辉辉即将毕业滴网工
布拉格 Evance | 花花
笨笨开过淘宝店的前端哥哥
毛毛研究生大姐头~
余果 ISUX | 给力切图仔
陆续增加中...^_^

竟然忘了我？提醒一下

那些牛×的人

白鸦喜欢他的想法
Rokey 喜欢他的设计质感
跑调麦霸喜欢他的设计风格
韩寒喜欢他的职业

相信六度定理，有朝一日能认识他们。

飞鱼 ^_^ 浆抱罗斯‘s blog

欢迎光临：飞鱼的东西有点糟糕，希望你慢慢享用，且有所收获 ^_^

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

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

最终效果

html5 新思路的开始 – web标准化交流会 (杭州站第三期)

壹周一嘀咕: 2011/1/17

野谈交互 — 淘宝商城的banner设计

三元运算符使用小技巧一则 – javascript

Who am I ?

分类

最新在啃

成年往事

最新评论

那些朋友

那些牛×的人

飞鱼 ^_^ 浆抱罗斯‘s blog

欢迎光临：飞鱼的东西有点糟糕，希望你慢慢享用，且有所收获 ^_^

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

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

最终效果

html5 新思路的开始 – web标准化交流会 (杭州站第三期)

壹周一嘀咕: 2011/1/17

野谈交互 — 淘宝商城的banner设计

三元运算符 使用小技巧一则 – javascript

Who am I ?

分类

最新在啃

成年往事

最新评论

那些朋友

那些牛×的人

三元运算符使用小技巧一则 – javascript