手把手教你做超酷的条形码效果

声明

  1. 这篇文章教你在web页面上实现条形码效果,体现的是利用网页制作技术综合解决问题的思路。旨在使对HTML, JavaScript,PhotoShop具有入门级水平的人巩固入门级水平。
  2. 若有问题不能及时回复,麻烦请担待,不胜感激。
  3. 高手免进。

制作条形码总共分几步?

第一步,把冰箱门儿打开——使用PhotoShop绘制小图片

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

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

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

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

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

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

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

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

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

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

时间: 2024-11-01 02:34:26

手把手教你做超酷的条形码效果的相关文章

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

原创作品,转载请注明出处By dknt From bbs.blueidea.com声明:1.这篇文章教你在web页面上实现条形码效果,体现的是利用网页制作技术综合解决问题的思路.旨在使对HTML, JavaScript,PhotoShop具有入门级水平的人巩固入门级水平.2.若有问题不能及时回复,麻烦请担待,不胜感激.3.高手免进. 制作条形码总共分几步? 第一步,把冰箱门儿打开--使用PhotoShop绘制小图片 我们需要制作出一个含有16个元素的条形码图片. 首先打开Photoshop,本篇

PS手把手教你打造超酷炫的宇宙飞船

  在本教程中,我们将在Photoshop创建一个复古风格的火箭.过程非常细致,效果超级赞,适合有有心在UI设计方面更进一步的同学练习,当然,有耐心的同学也可以一点点研究,如果能全程跟着完成,能力一定会提升很大的 :) 此外,我们将研究如何使用图层蒙版,以及如何利用多图层来节省时间,接下来,就让我们开始吧! 最终效果 1.在Photoshop中打开一个新的文件使用以下设置,并保存为Retro Rocket.psd.切记要经常按Ctrl + S保存文件. 2.首先,让我们来看看本教程的原型.这是一

PS手把手教你绘制超逼真的湖面冰层

  Step 1 按照透视定义水的区域. Step 2 新建图层,使用矩形选框工具(M)选择水的区域,使用任意颜色填充. Step 3 使用图层蒙版或橡皮擦工具露出砖柱部分.我们将使用这一图层作为剪贴图层. Step 4 复制(CTRL+J)背景图层,并将其剪贴至上一图层(CTRL+ALT+G).使用滤镜>模糊>高斯模糊--这能创建冰层厚度效果. Step 5 冰会有反射效果,背景的反射效果很容易,我们要花费更多工夫在砖柱的反射上.反射需要符合透视效果!使用钢笔工具(P)选择前面的砖柱,将路径

手把手教你绘制超逼真的积雪场景

  Step 1 在图片上新建图层.选择地面区域并用带点灰蓝色填充(#d6d8e3) Step 2 使用图层蒙版(如果懒的话可以直接用橡皮擦)把砖柱露出来,我们只需要积雪的区域. Step 3 大致调整下砖柱跟远方的山的形状,让场景更自然. Step 4 创建一个新图层并按住Shift键使用椭圆工具画出一个正圆. Step 5 创建新图层并用灰蓝色(#6d85ad)填充,剪贴蒙版至之前的圆内(按住ALT在两个图层中间点击或者使用CTRL+ALT+G). Step 6 使用柔圆画笔,用比之前更亮的

使用CSS3实现的超酷幻灯图片效果

  在线演示 这个教程将介绍如何使用纯CSS创建一个干净的幻灯图片面板.主要想法是在面板中使用背景图片,然后在点击标签后使之动画. HTML标签 HTML主要包括了3个主要部分:radio按钮和标签,容器,及其标题,如下: <section class="cr-container">     <!-- radio buttons and labels -->  <input id="select-img-1" name="ra

Photoshop调出女杀手照片超酷质感冷艳效果

  本教程主要使用Photoshop调出女杀手照片超酷的冷艳效果,教程调节出来的照片色调非常的酷,这样的色调运用范围也非常广,特别是喜欢冰山美女范儿的朋友都可以试试这种色调的赶脚. 先来看看原图和效果图的对比吧: 效果图: 原图: 其它效果: 作者使用的软件是CS6.通常处理片子我会分2个大的方向去处理: 第1:在RAW中调大体色彩基调方向! 第2:然后再PS中处理气氛和细节! 一个片子的重点不是去想怎么调的好看怎么调往往许多人就是没有目的的处理色彩到最后显的花哨!片子的重点应该在层次上多下功夫

10款重量级CSS3的全新特效 实现超酷前端动画效果

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式.CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的.本周极客社区推荐10款使用CSS3实现的超酷前端动画效果.希望对大家有

手把手教你实现慕课网引导页效果(一)——分析验证

手把手教你实现慕课网引导页效果(一) 前言 相信程序员大多用过或者听过慕课网这个网站,今天我们要讲的是慕课网Android客户端引导页效果的模仿实现. 首先,让我们看一下慕课网Android客户端的引导页是什么样的. 正文 1.分析 看上面那个GIF图,分析可知.首先是一个显示慕课网LOGO的Activity,然后跳转到了今天我们要讲的引导效果的Activity(命名为GuideActivity). 根据它滑动的效果,可猜测是由ViewPager实现的. ViewPager中有三个播放着动画或者

Photoshop制作超酷水墨字效果后期教程

给各位Photoshop软件的使用者们来详细的解析分享一下制作超酷水墨字效果的后期教程. 教程分享: 最终效果   1.创建一个尺寸为1275*610 px的背景画布,画布颜色为默认的白色.然后将下载好的"纸张纹理"素材导入Photoshop中,并选取其中的一部分,将其复制并粘贴到我们的文件中.如下图所示:     2.如下图所示,用柔软的橡皮擦来使纸张的边缘褪色   3.将以下的两个调整图层添加到这个纸张图层的上方: 色相/饱和度,具体参数设置如下图所示.   色阶:   效果如下: