菜园子 » 设计

笔记：css实现透明背景

郁闷的白菜 — Sun, 21 Aug 2011 17:36:48 +0000

1、半透明背景，内容不透明
2、兼容ie6、7、8，chrome、firefox，若有其他兼容问题请告知，跪谢
3、独立背景浮动，不涉及父级和内容层
搜了一下，网络上兼容性做的很好的大都把透明背景设定在父级上，内容给予position:relative，然后在html里面做兼容代码。因为我所涉及的页面position:absolute图层特别的多，容易互相影响，所以想了其他方法，等于在内容层的背后贴了一张半透明的即时贴。这种方法似乎并不成熟，没有搜索到类似的教程，有个别因为没有解决部分问题的求助贴，主要集中在ie6兼容上，我最终解决了它，分享之。

提示：你可以先修改部分代码再运行。

做笔记随机背景的js代码

郁闷的白菜 — Wed, 17 Aug 2011 16:06:57 +0000

<html> <head> <title>JS随机背景效果</title> <meta content="text/html; charset=gb2312" http-equiv="Content-Type"> <script language="JavaScript"> bg = new Array(2);//有几个背景这里的数就要改为几，然后下边要对应 bg[0] = '/attachments/month_0812/82008126131225.jpg' bg[1] = '/wp-content/uploads/2010/05/2010-05-09%E5%86%B0%E6%BF%80%E5%87%8C1.jpg' bg[2] = '/wp-content/uploads/2010/05/201005070001.jpg' index = Math.floor(Math.random() * bg.length); document.write("<body BACKGROUND="+bg[index]+">");</body></script> </meta></head> <body> 刷新一下背景吧，是不是每次都不一样？ <a href="/">点我</a>！ </body> </html>

提示：你可以先修改部分代码再运行。

用到，所以做笔记mark一下

淘宝店铺装修一枚

郁闷的白菜 — Wed, 10 Aug 2011 04:31:13 +0000

由于淘宝不开放普通用户css，css只开放给设计师用户，设计师用户还要通过审核，通过了审核还不能只给自己做设计，必须进入市场的结果就是你得交保证金一万大洋，于是乎装修只停留在图片堆叠，也只能这样了。
淘宝，杭州地价太贵，你占个山头多方便。

毛毡包

wp非插件添加缩略图

郁闷的白菜 — Mon, 09 May 2011 03:25:30 +0000

为wp缩略图这事折腾了许久了，据说2.9版本就提供了功能，我到3.1折腾模版的时候才知道，有了这个，很多插件都可以不用了。于是谷了一下，找到详细的使用方法。
首先在function.php内插入代码

add_theme_support( ‘post-thumbnails’ );

提示：你可以先修改部分代码再运行。

多个缩略图就是

set_post_thumbnail_size( 155, 110, true ); // 默认缩略图 add_image_size( 'one', 300, 200, true ); // 名为one的缩略图 add_image_size( 'two', 200, 100, true ); // 名为two的缩略图 add_image_size( 'mini', 50, 30, true ); // 名为mini的缩略图

提示：你可以先修改部分代码再运行。

然后在后台发布文章的时候，右栏会多出特色图片板块，在这个板块添加一下当作缩略图的大图，服务器会生成相应的大小，这步跟上传图片很类似，就是在插入图片后面多了一个链接，很简单不赘述。然后在模版需要添加缩略图的地方写入代码：

< ?php the_post_thumbnail(); ?>

提示：你可以先修改部分代码再运行。

就调出第一个大小的缩略图，如果想调其它大小的，只要在括号里对应上相对的名称：

< ?php the_post_thumbnail(mini); ?>

提示：你可以先修改部分代码再运行。

现在玩点花活：

< ?php if ( has_post_thumbnail() ) { ?> < ?php the_post_thumbnail('two'); ?> < ?php } else {?> < ?php } ?>

提示：你可以先修改部分代码再运行。

以上内容均参考自[ 文库 ] WordPress 自带的缩略图功能全解析，这年头网站被墙的被蟹的被裁被黑的被降权的太多，不知道下次用的时候还能不能搜到，所以乾坤大挪移过来白菜自己家，笔记备用。另外说，搜了跟多文章介绍这个，就jeff这个看着最清楚，还有拓展自己点进去看。

js不用display实现滑动门（标签）效果

郁闷的白菜 — Tue, 12 Apr 2011 09:26:33 +0000

文中所提到的很多东西，对很多编程牛人来说不算什么，我也就是做个笔记，因为对js非常不熟悉，一直只是在下载代码改数据的水平上。
那是一个滑动门或者说标签页效果的代码，这个效果代码里常用的display与另外一段效果代码相冲突，所以要避免display去实现它，想了许多方法，最终看到一篇讲解四屏切换效果的文章给了启发，改为用z-index，当点击一个链接触发，不是让指定div显示，同时隐藏其他div，而是将指定div的z-index改为1，其他改为-100，这样在页面在载入时所有的div都是显示的，只是用户是否能看到而已。
在改的过程遇到了另外一个问题，横线在js中是会报错的，查了很多资料才知道z-index在js中应该写为zIndex来避免横线，同理，其他css的表达都应该是这样，比如background-color。
这个这个滑动门的源程序是很多年前一个朋友给的，很好用，没有多余的其他效果，代码简洁而且易于修改，onclick或者onmouthover都可以，以及触发后的css，我共享的这个已经将display改为了z-index。

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script>function scrollDoor(){ } scrollDoor.prototype = { sd : function(menus,divs,openClass,closeClass){ var _this = this; if(menus.length != divs.length) { alert("菜单层数量和内容层数量不一样!"); return false; } for(var i = 0 ; i < menus.length ; i++) { _this.$(menus[i]).value = i; _this.$(menus[i]).onclick = function(){ for(var j = 0 ; j < menus.length ; j++) { _this.$(menus[j]).className = closeClass; _this.$(divs[j]).style.zIndex = "-100"; } _this.$(menus[this.value]).className = openClass; _this.$(divs[this.value]).style.zIndex = "1"; } } }, $ : function(oid){ if(typeof(oid) == "string") return document.getElementById(oid); return oid; } } window.onload = function(){ var SDmodel = new scrollDoor(); SDmodel.sd(["a01","a02","a03"],["b01","b02","b03"],"css01","css02"); }</script> <style> .links { background:#CCCCCC; } .css1 { background:#FFFFFF } .css2 { background:#CCCCCC; border:1px solid #CCCCCC } .white{ background:#FFFFFF; width:100%;position:absolute;z-index:0;} </style> </script></head> <body> <div class="title"> <ul> <li id="a01" class="css01">链接一</li> <li id="a02" class="css02">链接二</li> <li id="a03" class="css02">链接三</li> </ul> </div> <div class="content"> <ul> <li id="b01" style="position:absolute;z-index:1;">内容一</li> <li id="b02" style="position:absolute;z-index:-100;">内容二</li> <li id="b03" style="position:absolute;z-index:-100;">内容三</li> <li class="white"></li> </ul> </div> </body> </html>

提示：你可以先修改部分代码再运行。

初涉drupal的一些笔记

郁闷的白菜 — Thu, 10 Feb 2011 05:05:06 +0000

比较wp，教程实在少的可怜，关键词也是答非所问，找个数据不容易，做笔记如下：
输出模版路径< ?php print $base_path.$directory?>

js实现判断高度自适应多栏滑动的页面布局

郁闷的白菜 — Wed, 19 Jan 2011 11:16:55 +0000

命题是这样的，做一个满屏的页面，象普通页面一样有题头页尾，内容部分分栏，并中栏和右栏等齐适应屏幕高度，超出部分用滑动条显示。
要解决的问题：
1、用浮动DIV固定头尾，定义内容部分div
2、为了样式设置，不在Quirks Mode模式下运行
3、判断屏幕高度，设置分栏高度
4、全部分栏都用百分比分配

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>js自适页面高度</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style>  </style> </head> <body> <div id="header">头部文件</div> <div id="wrapper"> <div id="main"> <div class="leftbar" id="leftbar"> 左部文件 </div> <div class="centerbar" id="centerbar"> <p>中部文件</p> <p>中部文件也很长</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>中部文件也很长</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>中部文件也很长</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>中部文件也很长</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>中部文件也很长</p> </div> <div class="rightbar" id="rightbar"> <p>右部文件</p> <p>右部文件会很长</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>右部文件会很长</p> <p>右部文件会很长</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>右部文件会很长</p> <p>右部文件会很长</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>右部文件会很长</p> </div> <div style="clear:both"></div> </div> </div> <div id="footer">底部文件</div> <script type="text/javascript"> document.getElementById("rightbar").style.height=document.getElementById("centerbar").style.height=document.getElementById("leftbar").style.height=document.body.clientHeight-140+"px"; </script> </body> </html>

提示：你可以先修改部分代码再运行。

我不知道我是否用了笨办法，不过总算是做出来了。ff,opera,ie678通过测试
参考：
解决列高度自适应的五种方法
 clientHeight、offsetHeight 和 scrollHeight
div仿框架布局

看了很多资料，有一种我不太习惯用的布局方式貌似也行得通，ff，opera和ie678都可以，不知道按照那个做下去会出现什么问题，哪个更好呢？

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>js自适页面高度</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style>  </style> </head> <body> <div id="header">头部文件</div> <div id="wrapper"> <div class="leftbar" id="leftbar"> 左部文件 </div> <div class="centerbar" id="centerbar"> <p>中部文件</p> <p>中部文件也很长</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>中部文件也很长</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>中部文件也很长</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>中部文件也很长</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>中部文件也很长</p> </div> <div class="rightbar" id="rightbar"> <p>右部文件</p> <p>右部文件会很长</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>右部文件会很长</p><p>右部文件会很长</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>右部文件会很长</p><p>右部文件会很长</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>右部文件会很长</p><p>右部文件会很长</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>　</p> <p>右部文件会很长</p> </div> </div> <div id="footer">底部文件</div> <script type="text/javascript"> document.getElementById("rightbar").style.height=document.getElementById("centerbar").style.height=document.getElementById("leftbar").style.height=document.body.clientHeight-140+"px"; </script> </body> </html>

提示：你可以先修改部分代码再运行。

另外补充：

document.body.clientHeight和documentElement.clientHeight：
因为ie6和其它浏览器document.body.clientHeight的返回值不太一样，而且wp的runcode无法输出!DOCTYPE标识，所以要留意，无!DOCTYPE的时候使用document.body.clientHeight没问题，有!DOCTYPE的时候要使用documentElement.clientHeight。

css控制图片缩放ie6适应代码：
img {
width :expression( (300 / 225) < (width / height) ? width / height * 225 : 300 );
height:expression( (300 / 225) < (width / height) ? 225 : height / width * 300 );
}

今天去猫猫家玩软陶

郁闷的白菜 — Sun, 22 Aug 2010 13:58:24 +0000

中午和狐总一家去吃小肠陈，下午到猫猫家玩软陶，周末的一天的安排还挺满。

我家的黄金猪，呃，只做了大概不到两厘米，还真是考验手指的粗细。（背景的管状物是支笔）

狐总，忽然想到，眼睛用白色的会诡异一点。

猫脸鱼，有点象海狮的说，鼻子旁边那两根是猫猫的头发，囧。

裸奔小人一只。

给个背后

这是狐总一家子，噗

一只象铅笔线圈的耳坠

郁闷的白菜 — Wed, 11 Aug 2010 09:40:37 +0000

掩面，其实我很喜欢钢丝圈这种材质

扔地址http://item.taobao.com/item.htm?id=7018438789

新的搭配

郁闷的白菜 — Mon, 02 Aug 2010 11:52:19 +0000

我发现，我发现，我怎么混到这圈子里面来了

戳我，请用力戳我！

紫色系的搭配设计

郁闷的白菜 — Thu, 29 Jul 2010 11:39:19 +0000

修身气质非凡办公室服装白领丽人西服外套 +同款简洁风格抹一步短裙纯棉布料多穿 + 施华洛世奇水晶耳坠圆盘水晶耳环紫红色 925纯银正品 + 夏正品香港诗柔春夏丝袜彩色菱形提花袜连裤袜流行袜子

新添耳饰和挂坠

郁闷的白菜 — Tue, 27 Jul 2010 07:17:31 +0000

都是极其简单的，不过我还是觉得，好口耐

重拾那些珠串

郁闷的白菜 — Thu, 22 Jul 2010 14:15:51 +0000

翻出这些压箱底的行当

设计还是粗砾的

都是低价的东东，喜欢的都来支持下！

moss magic街拍搭配

郁闷的白菜 — Wed, 21 Jul 2010 03:36:14 +0000

American Apparel同款简洁风格2010新款夏装黑色连衣裙

可爱，也可以不用蕾丝花边

郁闷的白菜 — Tue, 20 Jul 2010 02:37:39 +0000

SimpleMore.net正品限量版无袖T恤深蓝色堆堆领+新款时尚条纹热卖大口袋短裤+SimpleMore.net布袋系列简约风格帆布包+玲珑水晶精细形手镯超正点亮红水晶天然水晶品质保证

清新自然风的组合

郁闷的白菜 — Sat, 17 Jul 2010 02:24:48 +0000

施华洛世奇水晶耳环＋白色针织开衫小外套＋白色时尚蕾丝短裤＋粉蓝色抹胸小裙＋中宽白色猫眼手镯

第一次做软件界面设计

郁闷的白菜 — Mon, 26 Apr 2010 13:08:51 +0000

其实，就是做了个图而已，剩下都是技术员自己弄的，忙活完有事出门，现在才来显摆一下

Exe Errors Fix and Repair, Easy, Safe and Fast.

flash as3.0　mc随机位置、大小、透明度

郁闷的白菜 — Wed, 17 Mar 2010 10:02:59 +0000

本人，flash及as小白一只，因为用到这个效果，到处找不到正好的案例，于是呼翻了翻教程，抄袭改编，哈哈，我比较擅长这个啦！弄是弄出来了，可是控制数量上不是很理想。

mc的名字是yuan，as如下，求围观，求鉴定，求指导！
var i:Number = 1;
addEventListener(Event.ENTER_FRAME,xx);
function xx(event:Event):void {
var x_mc:yuan = new yuan();
addChild(x_mc);
x_mc.x = Math.random()*480; //宽范围
x_mc.y = Math.random()*200; //高范围
x_mc.scaleX =x_mc.scaleY = 0.1 + Math.random(); //纵横同时缩放为10％至110％
x_mc.alpha = Math.random();//随机透明度
i++;
if(i>30){
this.removeChildAt(2);
}
}

一只页面

郁闷的白菜 — Mon, 21 Dec 2009 10:17:00 +0000

越改越磕碜，于是存影留念

解决淘宝装修在firefox下图裂的方法

郁闷的白菜 — Thu, 03 Dec 2009 13:21:47 +0000

用table进行淘宝产品描述的装修时，免费模版下，在firefox测试会出现图裂。

造成这个原因的罪魁祸首是淘宝css在body上定义了“line-height:1.5;”，造成img也行距加大。白菜也搜过几个店看过，极个别的店店就没有这个问题，至今没有查出原因。

解决图裂的方法有两种：一是做成一整片图，在table里写成背景；第二种是比较简单的方法，只要在table标签里面加入style=”line-height:0 !important;” 保证药到病除万事ok！

<table width="950" height="1406" border="0" cellpadding="0" cellspacing="0" style="line-height:0 !important;"> <tr> <td colspan="3"> <a href="http://shop33952879.taobao.com/" target="_blank"></a></td> </tr> <tr> <td colspan="3"> </td> </tr> <tr> <td> </td> <td width="578" align="right" background="http://www.f-quan.com/taobao/1/index_04.jpg" style=" font-size:14px;">秋冬首选|科蒙博卡|草花纹拉锁开衫</td> <td> </td> </tr> <tr> <td> </td> <td align="right" valign="top" background="http://www.f-quan.com/taobao/1/index_07.jpg"><table border="0" cellspacing="5" cellpadding="0"> <tr> <td></td> </tr> <tr> <td><font color=#ffffff>克重:340 　本店包邮599元　零售价:2269 </font></td> </tr> </table></td> <td> </td> </tr> <tr> <td colspan="3"> </td> </tr> <tr> <td colspan="3"> </td> </tr> <tr> <td colspan="3"> </td> </tr> <tr> <td colspan="3"> </td> </tr> </table>

提示：你可以先修改部分代码再运行。

wordpress前台登陆的代码

郁闷的白菜 — Fri, 27 Nov 2009 03:06:34 +0000

虽然完全不熟悉函数，不懂程序，看过很多资料拼了拼，终于让我给折腾出来的了。

因案例的注册用户设为投稿者，所以有登陆以后有文章投稿一项；
登陆后显示问候语及头像；
因为案例中没有必要，所以没有为管理员提供更多管理链接，这需要一个判断，我记得水煮鱼的教程里有这段；
头像链接读者资料上填写的主页；

#logform{font-size:12px;height:100px;} #logform ul ,#logform ul li{list-style:none;} #logform ul.loginput li{padding:4px 8px;} #logform ul.loginput #log,#logform ul.loginput #pwd{width:150px;margin:0 5px;} #logform ul.loginput .button{margin-left:45px;padding:1px 8px;} #logform ul.loginput a{padding-right:8px;} #logform ul.avatarpic{width:70px;height:60px;float:left;} #logform ul.avatarpic a img{border:3px solid #CCCCCC;} #logform ul.avatarpic a img:hover{border:3px solid #3366CC;} #logform ul.userlink{width:210px;float:right;line-height:20px;padding-top:20px;} #logform ul.userlink li a{padding-right:6px;} <div id="logform"> < ?php if (!(current_user_can('level_0'))){ ?> <form action="<?php echo get_option('home'); ?>/wp-login.php" method="post"> <ul class="loginput"> <li>用户名：<input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?/>" size="20" /></li> <li>密　码：<input type="password" name="pwd" id="pwd"/> <label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> 记住我</label></li> <li><input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?/>" /><a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">忘记密码</a><a href="/wp-login.php?action=register">注册用户</a><input type="submit" name="submit" value="登陆" class="button" /></li> </ul> </form> < ?php } else { ?> < ?php global $user_ID, $user_identity, $user_level?> <ul class="avatarpic"> <li>< ?php echo get_avatar( $user_ID, $size = '50', $default = '' ); ?></li> </ul> <ul class="userlink"> <li>欢迎< ?php echo $user_identity; ?>！</li> <li><a href="http://www.wuzao.com/wp-admin/profile.php">修改资料</a><a href="http://www.wuzao.com/wp-admin/post-new.php">文章投稿</a><a href="<?php echo wp_logout_url(urlencode($_SERVER['REQUEST_URI'])); ?>">退出系统</a></li> </ul> < ?php }?> </div>

提示：你可以先修改部分代码再运行。

runcode运行不了php，之所以用这个显示，是为了不要让标点变成全角。
我一个拼图的折腾出来这些东西，得意叉腰笑。

仪器产品公司的网页

郁闷的白菜 — Wed, 16 Sep 2009 09:26:13 +0000

很久以前的网页设计，当初做了很多稿，拿出来晒晒。这只是其中的四稿变化比较多的。最终的效果跟效果图仍旧差别挺大，无奈。

logo是我换下的，以免有不必要的麻烦。

话说，其实感觉第一稿比较好。

服装网站的设计

郁闷的白菜 — Tue, 15 Sep 2009 11:27:45 +0000

asp的静态发布程序

静态模版制作

摸索发布系统用了不少时间

设计样品和最终实现还是有不少差别，这是正常的

用photoshop的图案制作虚线

郁闷的白菜 — Tue, 01 Sep 2009 03:54:19 +0000

在网页上用，其实这个不是很重要，到写html的时候有代码可以直接实现。不过为了给没有想象力的领导看，常常有人会需要一笔一笔的画，然后复制，单线还可以，box的线框就苦了设计师了。
于是白菜把白菜的方法共享一下，使用图案来做各种宽度的虚线。不过可惜的是，这种方法的尺寸只适合小像素细线，看来也就网页上能用到了。

同时，加了个斜纹背景，都是在网页中常用的素材，并提供图案文件下载。只有黑白两色，可以通过各种混合模式作出不同效果，这个可以拓展的效果就太多了。

dotpat下载>>

photoshop水墨云纹抽线和动作下载

郁闷的白菜 — Thu, 27 Aug 2009 05:39:35 +0000

还是总结上次的抽线方法，做了很多png的素材，留着以后用。大图没保留，这个尺寸做网页已经绰绰有余了。想搞印刷的，下载动作自己来，嘿嘿。

下载动作>>

LOGO设计和更换背景的抠图方法

郁闷的白菜 — Wed, 19 Aug 2009 07:48:49 +0000

因为工作设计了一个LOGO，结果项目停滞了，难得做了个催赶出来还有点感觉的东东，于是拿来曝一下。为了避免被牵扯到名字的版权问题，改了两个字，于是，“白菜”出现在这样的LOGO上还真是奇怪。

我PS向来不喜欢看教程，尤其看到那种半瓶子水逛荡的教程，绕了一大圈为解决一个不是问题的问题，因而多年一直处在自学状态。

做这图的时候发现了一个能够配合背景更换的抠图方法，尤其适合浓淡粗细不一的笔触效果，应该也适合在扫描图线稿上抽线绘画。弄了个半瓶子水的教程，以便给自以为是的自学过程一个阶段性的交代。如下：

　　实例是一张水墨祥云，将这个图案抠到一个深色的背景上去，做成反白效果。不过要求这个原始的素材图案，背景是没有其他颜色干扰的单色，然后处理成纯黑或纯白。

　　白底黑图，建成图层，要把想留下的部分处理成白色，想去掉的部分处理成黑色，那这个图只要给一个去色－反向就好。反向以后ctrl+m调一下黑白对比，注意保证不要的部分是纯黑，灰色的部分最终会变成半透明。

　　其实这时候给这张图一个滤色，目的就达到了，不过在制图过程中往往需要给这个图案更多效果，比如一个渐变或者一个阴影，单纯的滤色是不可能做到的。所以我们需要打开通道标签，按住ctrl去点第一个通道的缩略图，也就是名为“RGB”或者“CMYK”的那个通道，这样会出现一个选区。

　　再回到图层标签，新建图层，快速蒙板，然后关闭刚刚被我们处理成黑底的那个图层。这时候就可以给有蒙板的图层加上颜色，对，我们开始是说的白色来的，同时别忘记还有深色的背景。

　　如果对浓淡不够满意，还可以通过编辑蒙板的对比度来实现，确定后继续保留蒙板，可以给制图过程带来很多便利。

叹气，这样比原来的魔术棒和色彩范围选区实在是方便了太多。

帮朋友做的软件启动画面

郁闷的白菜 — Sun, 09 Aug 2009 05:37:43 +0000

设计的很简单，秀一下而已。

帮一个社团做的招贴

郁闷的白菜 — Sun, 12 Jul 2009 11:06:13 +0000

耽美向，非腐误入。

密码保护：恭喜酸姐开新坑

郁闷的白菜 — Sat, 23 May 2009 15:25:54 +0000

参与p图的活动

郁闷的白菜 — Mon, 17 Nov 2008 13:11:04 +0000

一个论坛的小标和title，呵呵，p个玩玩，论坛在这里→点击

又一作

郁闷的白菜 — Thu, 10 Apr 2008 02:28:15 +0000

又一作，比较简单的

又添成品一枚

郁闷的白菜 — Mon, 24 Mar 2008 09:08:49 +0000

无他

增加成品一枚

郁闷的白菜 — Wed, 05 Mar 2008 04:00:06 +0000

技术含量较低，耗时有限，仅资记录

压箱底的作品，翻出来晒晒

郁闷的白菜 — Sat, 05 May 2007 13:43:27 +0000

2007/5/5

以前，帮一个公司做的，只是因为某种原因事情搁置了四年。好久了，拿出来晒晒，见见阳光。

菜园子 » 设计

笔记：css实现透明背景

做笔记随机背景的js代码

淘宝店铺装修一枚

wp非插件添加缩略图

js不用display实现滑动门（标签）效果

初涉drupal的一些笔记

js实现判断高度自适应多栏滑动的页面布局

今天去猫猫家玩软陶

一只象铅笔线圈的耳坠

新的搭配

紫色系的搭配设计

新添耳饰和挂坠

重拾那些珠串

moss magic街拍搭配

可爱，也可以不用蕾丝花边

清新自然风的组合

第一次做软件界面设计

flash as3.0 mc随机位置、大小、透明度

一只页面

解决淘宝装修在firefox下图裂的方法

wordpress前台登陆的代码

仪器产品公司的网页

服装网站的设计

用photoshop的图案制作虚线

photoshop水墨云纹抽线和动作下载

LOGO设计和更换背景的抠图方法

帮朋友做的软件启动画面

帮一个社团做的招贴

密码保护：恭喜酸姐开新坑

参与p图的活动

又一作

又添成品一枚

增加成品一枚

最近的设计

压箱底的作品，翻出来晒晒

2007/5/5

flash as3.0　mc随机位置、大小、透明度