Lightbox

LightBox is a light weight sketch and drawing tool that combines SVG graphics with hand drawn art to create diagrams, banners, icons, network topology, flow charts, info graphics and digital art from within your web browser.

Draw now!
Getting started

 

Create diagrams, flow charts, images and more.

Dock
   


 white  none check mark



 off
 
 
Upload Library Clear Stage
Clear stage? Yes  No
Object options
Fonts Dock   Xdrag me


Choose font while text element is active!

Basic

Textured

Block

Fun

More Fonts

border:
Color:

Scale Object:
 
 
 
symbol square circle cube triangle Symbols Copy Delete Reset Disable Enable
V L R | Unfade | Fade | < > |
 
O | < rotate > |
 
 
Z: + -- |
Sketch draw
|
Text

Upload Library Dock   X drag me
u
Symbols Dock   Xdrag me
Stage:
PhotonJam.com
Edit Download
[ ]    

Watermark removal  Set get

Save project (optional)

Upload saved project



What is a LightBox?

A light box or trace box in the physical world is a box useful to artists, that lights up and shines through papers placed on top. The light makes tracing images easier. PhotonJam's LightBox is a drawing app that allows you to easily create custom artwork with the look and feel of a sketch. LightBox incorporates PhotonJam's Draw! to help you trace existing photos or images or create something entirely new.

The following is a brief overview of how to use the app and get started drawing:


The Stage and basic work flow

The stage is where you ultimately want all of your artwork to go. You can combine uploaded images and your own drawings then arrange them on the stage any way you like. When you are satisfied with your final product you then generate a final image. The stage is dual action. It serves as both an editor and a canvas. Add objects to the stage, edit them, copy them, move them and delete unwanted items until your stage resembles the image you desire.

Create a sketch or drawing using the draw app

You can open the drawing app if it is not already open by clicking the "Sketch" link. When the drawing app is open you can position it over the stage. This will allow you to draw / trace anything that is contained in the stage. For instance, say you want to trace a face or another object. All you need to do is get that object on the stage (see below), open the drawing app, position it over the stage. Then trace!

To ensure sure the drawing app is transparent for tracing items on the stage, click "Lightbox" option located next to "Clear BG" (this may already be done for you).

The contents on the stage and most objects can be individually sent to a Sketch. Everything you draw can be also be added to the stage (see capture region below).

Uploading and passing around content

You can upload images from your computer by first opening the upload library and then clicking the upload button there.

Moving data

You can move content around in the following ways:

  • From library to stage - Click an item in the library to send it to the stage.
  • Sketch to stage or library - To use or save a sketched item, click the appropriate links within Sketch.
  • Stage to Sketch - Click the sketch icon to use to edit the entire contents of the stage as an image in Sketch.
  • Object to Sketch - Click the To sketch link when available to send an object to Sketch.
  • Sketch contents to your computer - Click "download drawing" within Sketch to save sketches to your computer.
  • Capture region / Sketch selection to your computer or stage - Use selection tool in Sketch to select a region then click "download selection" button or "send selection to stage" link to save a selected portion of the drawing area to your computer or stage.
  • Stage to your computer - save the entire Stage by pressing the "Generate" button.

Symbols

Symbols that are not clip art are basic pre-drawn shape templates. Click the Symbols button to open up the symbols pane. Click a symbol to add it to the stage then click or drag the symbol to activate it. Once a symbol is activated the stage and the tools act as a symbol editor. Use the color tools and other tools like height height and width width to make new objects that inherit / clone a symbol's shape. Click the symbol icon to create the clone

The symbols and their clones are in SVG (scalable vector graphics) format and scale really well without losing quality. Once you are done cloning a symbol you can just delete the original. You can of course use a basic symbol without cloning in your work too.

Don't see symbol you like? Let me know. I am creating and adding new symbols everyday so feel free to contact me so I can make a custom symbol for you.

A note on quality

While the symbols are SVG, anything edited within Sketch will be rasterized. Which means raster based items will lose quality if later resized. Also the final images you generate will be rasterized. You can right click and save any SVG based symbol you create as an SVG for later use (save them and upload them again if you like).

Frequent symbol set bubbling

If you use a certain symbol set frequently, you can use these links load the app so that the symbols bubble up to top.
Electrical diagrams
Network Topology
Flow Chart
AWS (Amazon web services)
more to come soon...

SVG image clip art symbols

Most of the clip art is also in SVG format which are scalable without quality loss. However these are not customizable. You can easily tell if a current symbol is customizable because the Symbol icon will have a red border.

For example, the non customizable SVG categories include:

  • AWS - Amazon Web Services icons.
  • Networking - Cisco Network Topology icons.
  • Tango - Tango icon project icons.
  • Oxygen - Oxygen icon project icons.

Keyboard shortcuts

Most object options can be set using a keyboard shortcut. Below is a list of shortcuts and their corresponding action.

  • Left / Right arrow and A / D keys - move object left or right.
  • Up / Down arrows and W / S keys - move object up or down.
  • Del - Delete object.
  • < and > - Rotate object left or right.
  • - or + - Scale / re-size object.
  • CTRL and - or CTRL and + on Numpad - Zoom in page.

Generating a final image

Once you are satisfied with the contents of your stage you can generate a PNG image by clicking the generate button. Don't worry, you can still edit your work later.

At this time, only PNG export is supported. The reason for this is to preserve any transparent backgrounds.

Export to PDF the easy way

If you are using Chrome web browser, you can right click the Download link to view the image then use Chrome's built in print to PDF or Save to PDF functions. Access the print menu by clicking Chrome's hamburger (☰) menu > Print or press CTRL+P. You may have to tweak your printer settings. For instance, under options, un-check "Background graphics" to prevent blank areas from displaying as black. Checking the printer setup option to ignore size and shrink to fit may help if images are being cut off.

Alternatively, click the printer icon. In browsers other than Chrome, you may have to research setting up printng to PDF. I know Firefox has some extensions out there.

Pro Tips and Exploring the tools

There are quite a few tools to help you make exciting images. In the near future I hope to write tutorials to document the tools. But until then be sure to poke around to see what everything does.

Tips

  • The Stage is draggable - use your mouse to drag the stage by clicking and holding down on a clear area of the stage.
  • Docking - Tools and symbol panes can be docked to the left side of the screen. After docking you can also drag them to reposition.
  • Save any SVG object as an image - You can download and save any SVG image object you create by right clicking and and selecting "Save image as" option from with in your web browser.
  • Convert Text to SVG - For sharper looking Text with outlines, add a text element, choose font, size and color settings then click To SVG link to clone your text object to an SVG (vector) graphic. Just remember to delete any unwanted originals.
flash

Your feedback is welcome.


Have fun!