Firetuts

Five easy steps to create a barcode in Fireworks.

Posted in Resources > Miscellaneous by Lucian

This tutorial will show you how to create a barcode for any purpose.

Step 1.

Select the Pencil Tool, set the color to black, and make sure both the Anti-aliased and the Auto erase boxes are unchecked. Holding down Shift, start drawing random lines on the stage. You should get something like this:

create a barcode

Step 2.

Make sure the layer of the bitmap is selected, and using the Marque Tool, create a selection box anywhere on the bitmap with a width of choice but a height of 1. Right click on the selection, then pick New Bitmap Via Copy.

create a barcode

Step 3.

Now that you have what you need, go ahead and delete the original Bitmap layer (the random pencil lines). At this time, on the stage you should only see a few black dots/pixels lined up. Increase the height of this Bitmap by using either the Free Transform Tool or by imputing the desired height of the barcode in the Properties Panel.

create a barcode

Step 4.

We all know a barcode has numbers. Using the Marque Tool, select a portion of the barcode as illustrated below, and press Delete. Add some randomly spaced out numbers in the cleared portion.

create a barcode

Step 5.

Get creative! Add text instead of numbers, or both. Place the barcode on a sticker and create a peeling effect featured in “Creating a Realistic Peelable Sticker Effect in Fireworks” tutorial. Give the sticker a Web 2.0 touch featured in Justin’s “Create Web2.0 logos with Fireworks” tutorial.

create a barcode

*Download not available*

There're 31 comments for this post.
  9. minikperi on said:

    i was designing a software company’s web site. i was making all site as a software box. i used this tecnique there for the barcode of box. but i couldn’t make a good style then i leave it and designed a solid site.

  10. Pingback: Fireworksのチュートリアルいろいろ - DesignWalker

  11. Pingback: Los mejores tutoriales de Adobe Fireworks

  13. Pingback: Real Tutorials Collected! » Blog Archive » Five easy steps to create a barcode in Fireworks.

  14. Pingback: Designfeed.me » 40+ High Quality Adobe Fireworks Tutorials, Resources & PNG files

  16. Pingback: 34 High Quality Adobe Fireworks Tutorials and PNGs « 68Design – (68ds.com) Creative Design Transmitor

  17. Pingback: 【004】Fireworksのチュートリアルをしてみる ｜ 新米WEB家ブログ｜Muracchi.com

  20. Pingback: fireworks チュートリアル | WebLab

  22. Pingback: 70+ Adobe Fireworks Resources – Is there a future for Fireworks? - Speckyboy Design Magazine

  25. Pingback: 20+ High Quality Adobe Fireworks Tutorials

  26. Pingback: 铭家 » 35个优秀的Adobe Fireworks制作案

  27. Pingback: [Fireworks] バーコードを作るチュートリアル | WEB-LABORATORY