«
»
08Dec
2007

Five easy steps to create a barcode in Fireworks.

Posted in Logo, Tips 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:

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.

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.

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.

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.

*Download not available*

Share this:

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Technorati
  • blogmarks
  • SphereIt
  • Reddit
  • Furl
  • StumbleUpon
  • NewsVine
  • TailRank
  • Fark
  • Spurl
  • MisterWong
  • Slashdot
  • Ma.gnolia

19 comments

  1. Gravatar Matt Radel says:
    December 10th, 2007 at 4:41 pm

    Very interesting technique! You can’t scan it of course – but it does the trick for pure visuals.

  2. Gravatar Lucian says:
    December 10th, 2007 at 6:43 pm

    Thanks Matt. hehe, no you cannot scan it – I didn’t try.

  3. Gravatar Nikola says:
    December 11th, 2007 at 11:08 am

    :) Country Codes – http://www.makebarcode.com/specs/ean_cc.html

  4. Gravatar Lucian says:
    December 11th, 2007 at 11:06 pm

    hehe. that’s good resource :D thanks Nikola

  5. Gravatar Sarthak says:
    December 13th, 2007 at 7:08 am

    Simple and neat. Thanks for the tutorial.

  6. Gravatar Willie says:
    December 19th, 2007 at 1:00 am

    barcode generator

  7. Gravatar Hammad says:
    January 17th, 2008 at 10:15 pm

    i must say… its an interesting tip…

  8. Gravatar Jake says:
    February 26th, 2008 at 2:34 pm

    nice concept but it would be pretty cool if you could scan it…thnx for the tutorial

  9. Gravatar minikperi says:
    March 28th, 2008 at 5:16 pm

    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. Gravatar Fireworksのチュートリアルいろいろ - DesignWalker says:
    April 22nd, 2008 at 6:20 am

    [...] Five easy steps to create a barcode in Fireworks. [...]

  11. Gravatar Los mejores tutoriales de Adobe Fireworks says:
    April 26th, 2008 at 7:00 am

    [...] Cinco pasos para crear un código de barras con Fireworks., visitar [...]

  12. Gravatar Vicky says:
    May 14th, 2008 at 4:02 pm

    thanks man……………really nice

  13. Gravatar Real Tutorials Collected! » Blog Archive » Five easy steps to create a barcode in Fireworks. says:
    July 12th, 2008 at 12:30 pm

    [...] Read More [...]

  14. Gravatar Designfeed.me » 40+ High Quality Adobe Fireworks Tutorials, Resources & PNG files says:
    March 31st, 2009 at 11:30 pm

    [...] 2. Add Radial Gradient in Text [...]

  15. Gravatar Heartburn Home Remedy says:
    April 15th, 2009 at 11:42 am

    I follow your blog for a long time and should tell you that your articles are always valuable to readers.

  16. Gravatar 34 High Quality Adobe Fireworks Tutorials and PNGs « 68Design – (68ds.com) Creative Design Transmitor says:
    November 10th, 2009 at 3:46 pm

    [...] 2. Add Radial Gradient in Text [...]

  17. Gravatar 【004】Fireworksのチュートリアルをしてみる ｜ 新米WEB家ブログ｜Muracchi.com says:
    December 12th, 2009 at 8:38 am

    [...] ■チュートリアル元記事 Five easy steps to create a barcode in Fireworks. ↑ が実際につくってみたもの。 [...]

  18. Gravatar MokutionJ says:
    December 13th, 2009 at 8:07 am

    Again,another very simple but effective technique.Thanks

  19. Gravatar areapal says:
    December 14th, 2009 at 7:30 am

    Thanks for your article. Now only i know how to create bar code

Leave a Reply