手把手教你做超酷的条形码效果第1/3页

答案：原创作品，转载请注明出处By dknt From bbs.blueidea.com
声明：
1.这篇文章教你在web页面上实现条形码效果，体现的是利用网页制作技术综合解决问题的思路。旨在使对HTML, JavaScript，PhotoShop具有入门级水平的人巩固入门级水平。
2.若有问题不能及时回复，麻烦请担待，不胜感激。
3.高手免进。

制作条形码总共分几步？ 
第一步，把冰箱门儿打开——使用PhotoShop绘制小图片

我们需要制作出一个含有16个元素的条形码图片。

首先打开Photoshop，本篇教程中使用的是CS 简体中文 版本，仅就本教程所涉及的方面来看，操作都大同小异，只要认真阅读，应该不会遇到问题。




打开以后首先按Ctrl + N，建一个 8像素 X 8像素的图片，背景选择透明，如图所示：


为了看清楚，可以把图片缩放到最大 1600%。

按一下D，再按一下X，确保前景色为白色背景色为黑色。

使用Ctrl+Delele，填充背景色，黑色。

使用铅笔笔工具，参数做如下设置


刻画线条，隔一列画一个。画成下面这种效果：


将图层1拖动到下面的新建按钮上复制一下


选择 图层1 副本,将左边第一道白色用铅笔工具涂成黑色（可以按 X 将前景色变成黑色）。如下图所示：


选择 图层1 ，按Ctrl+A，再按 Ctrl + C，然后选择菜单命令图像=画布大小， 将宽度调整为16个像素，点中 定位 的最左边中间的小块，如下图所示：


选择 图层1 副本。按住Ctrl键，左键单击图层面板上的 图层1 副本 条目以选择 图层1 副本 的选区。按Ctrl + Shift + I 反选（这一系列也可以用魔术棒操作，选择透明部分就可以了）。按Ctrl + V 粘贴成 图层2。

关闭 图层1 和 图层1 副本 的可见性（左键点击小眼睛图标），选择图层2，将左边第二道白色用铅笔工具涂成黑色。如下图所示：


打开 图层1副本 的可见性，确保选择了图层2，按Ctrl + E 向下合并。

打开 图层1 的可见性，按住Ctrl键，左键单击图层面板上的 图层1 条目以选择 图层1 的选区。复制并扩大画布，按前面所述的方法继续绘制。在宽度为24,32的时候再做两次，分别把 图层1 模式(pattern)的第三和第四条白色涂成黑色。最后的结果如下图所示：


接下来还需要拓宽，方法是一样的，只不过这次的模式变换的方案是把相邻两个白色之间的黑色涂成白色。比如第五次拓展，其模式是这个样子：


再做几次后，等宽度为 64 时，画布看起来应该是这个样子的：


接下来仍然需要拓宽，思想是删掉相邻两个白色条(注意，可以认为第4个白条和第一个白条是相邻的)，于是再做4次的效果是这样的：
文字模糊特效
下一个：javascript生成/解析dom的CDATA类型的字段的代码
更多图片编程知识:

发两个小东西，ASP/PHP 学习工具。 用JavaScript写的

.net控件页面处用js赋值后台接收不到数据的解决方案

HTML5利用json对象来存取复杂数据

Flash & Ajax 操作 XML 实例:无刷新分页

struts2学习类型转换--DefaultTypeConverter

多图展示滑动过渡效果