Wednesday, August 11, 2010

How to create a blog background with a scanner and CS4-

OK, here it is...
Step 1- draw funky flower and leaf designs on white paper with Black Staedler India ink pens
Step 2- scan drawings
Step 3- open with Illustrator. Live trace, expand, and clean up all the lines. This creates a pleasing vector line drawing.
Step 4- copy and paste the paths into Photoshop.
Step 5- save each item- flower, leaves, and cherry blossom, as a separate brush.
Step 6- create the drawing, layering flower and leaves. Erase overlaps as necessary.
Step 7- Using the paint bucket and color picker, fill areas with flat color. I chose this method, rather than using gradients, so I would get flat colors that would load more quickly. Remember, online, load time is important when you make a graphic intensive background.
Step 8- finalize the position of the elements. I created a large-ish repeat, my actual background graphic features the big flower with leaves and the cherry blossom 4 times, flipped and rotated so that a repeating background would look seamless and nice.
Step 9- save as a .png with a transparent background. This way, only the black lines and fills will need to be represented, and float over the background color I choose in my CSS. This way, I can actually change the whole color scheme of my blog on the fly- and not have to ever go back into my background graphic again if I don't want to.
That's it! Step 3 is what took the longest. When you convert line drawings into vector art, there can be an awful lot of cleanup involved.