Transform a white background into a transparent background!

A lot of digital illustrators do their work completely digitally, from start to finish. This includes the everything from the very early sketching and composition to the last final color-balance adjustments an illustrator may conduct on a piece. There is rarely any issue with coloring or painting in a digitally-drawn piece, because usually only the important lines have colored pixels, while the non-essential background remains transparent, allowing the user to easily work with multiple color layers "behind" the digital drawing.

However, there are some illustrators who begin a lot of their work traditionally, and finish it digitally. A traditional pencil-on-paper drawing can be scanned into the computer as a digital image file, but there is no way for a scanner to recognize that "white" should be "transparent". It would seem as if traditional-to-digital illustrators are burdened with having to color around a permanent white background that is near-impossible to remove.

In my years of working with this hybrid traditional-digital technique, I've learned of a way to essentially "transform" white pixels into transparent pixels with Photoshop. The method takes advantage of Photoshop's ability to make selections based on Alpha channels, picking pixels selectively based on their black-to-white quality.

Here's how you do it.

*I am working in Adobe Photoshop CS5.1 in this walkthrough. However, this technique should work for any version of Photoshop CS2 and above.

---

1.  Scan in a traditional drawing into the computer, saved preferably as a ".BMP" or a high-resolution ".JPEG" file.

2. Open the file in Photoshop. Note how in the layers panel the image is labeled as "Background".

3. Double-click the layer "Background" to change it to "Layer 0". This unlocks the image for further editing.

Dialogue box will appear after double-clicking the layer "Background".
Select "OK" to proceed.

Notice the change to the layer name from "Background" to "Layer 0".

4. This is the time you will want to improve the clarity and cleanliness of your scanned image. For general purposes you may use the "Auto Contrast" function, located in the "Image" section of the menu bar at the top of the screen. This will automatically balance the white and black contrast of almost all images to a decent quality.

Select "Image > Auto Contrast"

Linework becomes much clearer.

5. On your keyboard, select "Ctrl + A" to select the entire image.

6. On your keyboard, select "Ctrl + C" to copy the entire selected image.

7. Now, click on the Channels tab to switch the panel to view panels instead of layers.

Channels tab is located right next to the Layers tab in
the same panel.

8. The channels display RGB, Red, Green, and Blue. However, they are NOT important, so ignore them. Instead, click on the icon for "Create new channel".

"Create new channel" button framed in red.

This is what you should get after clicking
"Create new channel".

9. If you did the procedure correctly, your canvas will become completely blank. But you will also have a new channel called "Alpha 1" in your channels panel, as shown in the image above. At this point, on your keyboard, select "Ctrl + V" to paste the previously copied image selection into the new channel Alpha 1.

The image will re-appear in the "Alpha 1" channel.

10. While holding down the "Ctrl" key, click on the "Alpha 1" channel. This is the core of the trick; Photoshop selects all pixels here based on their black-to-white values. If you did it correctly, you will have selection marquees all around the images selecting the lines.

This is what the Ctrl + Click action should look like.
Don't worry if it doesn't seem as if all lines are selected;
Photoshop will grab them too.

11. Proceed back to the Layers panel by clicking on the layers tab.

Layers tab right next to channels.

12. Create a new layer with the "Create new layer" button, which is similar to the "Create new channel" button used in step 8.

"Create new layer" highlighted in red.

13. Once the new layer "Layer 1" has been created, select "D" on your keyboard to reset the current color selection to black.

14. On your keyboard, select "Alt + Backspace" to fill in the new layer by the selection only. You have finally created Layer 1 as a line-only layer with all white values transformed to real transparency!

Create and fill this layer with "Alt + Backspace"

Remove visibility of "Layer 0" to see only "Layer 1"
which is now truly transparent!

---

With a traditional drawing with truly transparent backgrounds, you are free to create and color layers behind it and form a coherent image without worrying about an obtrusive, solid-white background hindering your work. Having a truly transparent line work layer also allows you to color your lines, further increasing their flexibility in any illustrative work. Essentially, you can make the lines eventually disappear by blending their colors into the rest of the illustration.

Free to color with true transparency, I can blend
the colors in with the lines much better.

---

1. alucinarae (2012) expectations. alucinarae.deviantart.com. Retrieved from http://fav.me/d5ina4h 

Bungie's Secret Weapon: Grognok???

Apologies in advance; this post might be slightly short. But I promise, it's interesting.

The last few weeks or so I've been keeping more tabs on Bungie since they just announced their latest intellectual property, Destiny. Now, the reason I keep tabs on Bungie is mostly because I've been a big fan for a very long time, since their rise to fame with the Halo franchise. Bungie is very well known to be quite open and active within their own community, often releasing tidbits of information here and there about their work (thesirchelios, 2013).

Last week, I found one of the most interesting tidbits I have ever come across from them; a ViDoc highlighting their presentation at the 2013 GDC (Gamespot, 2013. Youtube link). In this presentation, there was one particularly interesting and relevant section I would love to share with the rest of you!

Grognok.

In the 2013 GDC presentation video I just linked, Bungie demonstrates a custom-made proprietary game-environment building engine around 29:00.

Youtube screencap - Grognok logo

The art director of Bungie pointed out that in the video game industry, there were multiple vectors of approach towards the concept of "creativity", and one of the biggest challenges in their sector of the creative industry was efficiently unifying multiple ideas of multiple forms from multiple people into a single, coherent, breathtaking and worthwhile product. They had searched high and low in their quest to find a tool that would aid them in such a large endeavor, but did not find any existing creative software suitable. So instead they made their own.

The most impressive demonstrated abilities of this environment-building engine appear to be rapid terrain generation and easy transition between two-dimensional and three-dimensional workspace. 

Youtube screencap 29:39 - Rapid terrain generation

Youtube screencap 30:02 - 2D~3D hybrid work technique.
The developer is literally "painting" pebbles into the terrain.

Of course I could go into endless speculation over what the Grognok development engine could be and make a completely uninformed article over such assumptions. In fact, there are several active forum threads right now still heatedly discussing the revelation of this privately-developed creative software, both in the Bungie.net forums and elsewhere (Multijirachi, 2013).

What I really just wanted to do was to share with you something amazing I found. Bungie's own little secret home-made game-development engine that was the result of a need in the industry that was not fulfilled by available commercial creative software products.

Just because a creative tool is popular and used by almost everyone doesn't necessarily mean it is the right tool for every job!

---

1. thesirchelios. (2013). GDC 2013: Bungie's Brave New World. DestinyHub. Retrieved from http://destinyhub.net/content/63-GDC-2013-Bungies-Brave-New-World
2. Gamespot (2013) Bungie's Destiny Panel - GDC 2013. Youtube video. Retrieved from http://www.youtube.com/watch?v=vUxRTCTr7ic
3. Multijirachi (2013) Forum Thread: "So About Ragnarok...". Bungie.net. Retrieved from http://www.bungie.net/7_So-about-Grognok/en-us/Forum/Post?id=3592446

The Features of GIMP! With Quattrochi

GIMP, otherwise known as the GNU Image Manipulation Program, is an open-source graphics editing software that is available to the public for free. As a program under the GNU development license, this means that the public is also free to contribute to GIMP's perpetual and continual development as they will to the best of their abilities. This highly successful system of "give and take" has resulted in one of the most valuable resources freely available to anyone in the creative industry.

The software is absolutely free, and there is no risk in trying it out at all. I've provided the link up above to their official website, where you may find more information from the developers themselves.

I thought it would be nice to have a few thoughts from an artist who was familiar with GIMP, however. Quattrochi of the art community website deviantART is well experienced with many different creative software programs, GIMP and Photoshop among them.

---

We were introduced by a friend in a chatroom

Between Photoshop and GIMP, which program do you use more often?

<Quattrochi>
Gimp pretty much all the time
the only thing I really use photoshop for is animating

What are some of the advantages GIMP offers over Adobe Photoshop?

<Quattrochi>
Well for one thing gimp is free
photoshop is really expensive
Gimp's a bit bulky but Photoshop's a heavyweight
it has an issue with my graphics card or something
it's worked better on my computers than Photoshop in general
it gets REALLY fussy when I try to use transparency
...and I'm also recalling that, where Photoshop has the "open stuff as layers"
as a script, Gimp has it as a regular feature

What version of Photoshop do you have?

<Quattrochi>
CS6

What is one of your favorite things about GIMP?

<Quattrochi>
Oh, also, do you know about Gimp's Color to Alpha function?
Ok
Turns whatever color you declare into transparent pixels
and declare "white" to be the color
boom, white is instantly gone, you're left with beautiful lineart.

Quattrochi probably became busy at this point as they became less-than-responsive.

---

Although I appreciate Quattrochi's input about their experience with GIMP, my interview intrigues me enough that I'd like to go do a little more research on my own. Perhaps try out the software myself someday? Again, if any of you would like to try the software out yourself, the program is absolutely free, and there is no risk, especially if you download from the official website in the link I provided. Besides my most recent conversation with Quattrochi, I have heard many other positive comments about GIMP in the past. If any of you would like to offer me more insight to this open-source creative software, feel free to leave a comment below. Perhaps I might even be able to arrange an interview with you!

On a side note, the little trick Quattrochi was explaining at the end--the trick to translate white pixels into transparent pixels via GIMP's Color to Alpha function--is also applicable to Photoshop. And it just so happens that I know how to do it! The trick is especially useful for those wishing to retain the lines of an actual traditional image scan in a digital format as lineart.

Stay tuned, I'll explain more in the near future.

---

1. Quattrochi. (5 April 2013). Online real-time correspondence. Her deviantART site at http://quattrochi.deviantart.com

How it all began: Photoshop

Adobe Photoshop is probably the most popular among the graphics-editing software out there.

Photoshop was initially designed as a tool used for retouching photographs digitally. But the current incarnation of this powerful program can be used for so much more! In addition to photo editing, Photoshop is also utilized:

• by graphic designers to design logos and icons.
• by commercial illustrators to create graphics for magazines and other works.
• by web designers to plan and build a structured visual layout for web pages.
• by digital artists to paint sensational and intricate digital works of art.
• by animators to lay out keyframes and build initial framework animations.
• by modelers to work in both 2D and 3D environments at the same time.
• by hobbyists to mess around with stuff.

The list goes on and on.

But it is a bit hard to imagine how this wonderfully complex piece of software came from an individual programming project. That is how Photoshop began, though; a personal programming project of Thomas Knoll, who was a PHD student who was studying at the University of Michigan in 1987. At the time, while he was studying engineering, his brother John Knoll was working at Industrial Light and Magic. Thomas Knoll successfully wrote a small program on his Macintosh Apple II Plus which allowed the computer to translate grayscale images for display on a monochrome screen. When Thomas demonstrated his work to his brother John, the latter encouraged the former to continue the small project into a fully-featured image editing program (West, 2010).

The initial result was a program released in 1988 called "Image Pro", which simulated simple photo-retouching effects on images that were scanned into the computer. They made their first market break with a partnership with Barneyscan, a company that manufactured photo scanners; the company bought 200 copies of their program to ship with their products. Although the partnership with Barneyscan could be considered a success, the Knolls had bigger ambitions and continued to seek support from other companies (West, 2010).

After being turned away by Supermac and Aldus, the Knolls caught the attention of Adobe management, who offered them a licensing partnership. Under this new partnership the brothers, with Adobe, launched Adobe Photoshop 1.0 in February of 1990 (Schewe, 2000). From here, Adobe and the Knoll brothers developed the Photoshop series of raster image editing software for over twenty years, releasing thirteen stable generations of the creative industry staple, and are still actively developing.

I'll save the evolution of Photoshop itself for another time, though. Today is just about how it all began.

---

1. West, Angela. (2010). 20 Years of Adobe Photoshop. Webdesigner Depot. Retrieved from http://www.webdesignerdepot.com/2010/02/20-years-of-adobe-photoshop/
2. Schewe, Jeff. (2000). 10 Years of Photoshop: The Birth of a Killer Application. Design by Fire. Retrieved from http://www.designbyfire.com/pdfs/history_of_photoshop.pdf (pdf document)