firefly grove workshop

After my moonbeam post yesterday, I went on a little curiousity rampage in search of “the way” to produce the effect I’m looking for. To guide you through my problem, check out the below illustration. Object A is a simple solid-red shape. Object B is that same shape with a simple gradient applied. Instead of an object being filled solid with a single color, a “gradient” is the filling of an object with multiple colors, spaced as you desire. This can be done in a linear fashion (left to right, top to bottom, or any angle in between) or in a radial fashion (from the center of a circle outward, like the shading on a sphere).

The problem with a simple linear gradient, however, is that it does not “bend’ when used on a curved object (as seen in Object B). This can create a big problem if you want to create an at-all realistic looking fade. For instance, imagine my moonbeams as being faded from a solid color (on the outside) to a transparent or lighter color (on the inside). This transition would only look good if the contour of the shading follows the contour of the curve. In Object B (regular gradient), this is not the case.

The answer, or at least one possible answer (as there are usually many solutions), is the use of a gradient mesh. These apply a sort of “grid” over top of an object, the contours of which curve with the contours of the object. You are then given the opportunity to color each “mesh” section of the grid. In Object C, the left two columns (which you cannot see) are colored red; the right two columns are colored white. Because its a gradient mesh, I suppose they’re setup to “transition” from color to color in a smooth manner. Object D is a super-quick attempt at adding some dynamic vertical shading as well. Doesn’t look that great, but its good to know there is much to learn.

I have found several different tutorials describing how to use this tool, some more accessible (and helpful) than others. Regardless, this is a perfect starting point to answer the question I posted in a previous post. I would love to update the appearance of the moonbeams (below) to involve these gradient meshes. I’ll surely have to practice some more (I spent only 10-20 minutes since my last post), but I’m feeling quite good about things.

I hope to have a real-deal drawing up that uses this technique in the next week or two, depending on my progress with other illustrations and my rate of learning this skill.

Here we have it — a bucket, filled with (what else) — moonbeams. Took me about 2 hours. “Buckets of moonbeams” is a line from a Bob Dylan song. Quite a wonderful image it evokes. Here is my representation.

What I learned: Some of the limitations of using layers. Or, said another way, I learned how I possessed many misconceptions about how to use layers properly. For those of you unfamiliar, Illustrator allows you to put groups of items into “layers.” Layers allow you to organize your objects with much ease, which is especially crucial when it comes to applying shading and such. Using layers gives you much more flexibility and control (and convenience), but learning to use them (properly) is not a simple task. Still, I came out of this stronger, and that is the point.

Thoughts: Perhaps the biggest question this piece has me asking is how exactly I shall learn to use gradients for more complex shading. Yesterday I started another piece, which I had to abort due to a severe lack of skills to get me the representation I was looking for (I’ll post the picture this piece was based off of later). The moonbeams are very similar — a misty, luminecsant, and somewhat transparent object. Gradients are nice and good, but as far as I’m capable (at the moment), I cannot “bend” them as I will need to. I stumbled upon a tutorial about how to do this a few weeks back, and I’m sure I’ll figure out how eventually. In the meantime, however, I’m gonna keep on pumping out stuff I’m well capable of doing.

What’s Next: I have several more story character sketches I hope to have up before next week. I’m quite excited for all of these. Look for the next one to be finished no later than tomorrow.

After my last Illustrator creation (directly below this post), I find myself wanting to take some time and catch up with the layout & design of this blog (and others on the site). So I’ve started digging around with Wordpress, which is the blogging software I’ve installed on my server to run this blog. Going into this stage of exploration, my confidence was sky-high: I was sure I’d be able to quickly learn, pick-up, and apply my vision to the site without trouble.

And to an extent, I was dead-wrong. Wordpress turns out to be far more complex than I imagined (in regard to what you can do with it). The last two days or so I sort of ran into a wall — all of my confidence and assuredness sort of left me high and dry when I figured out it would take more than 5 minutes to learn. Last night, however, I collected myself and feel quite good about everything today. After all, the fact that Wordpress is so incredibly flexible is a very good thing as far as what I hope to get out of this experience. There is in fact so much you can do with it, the possibilities are quite high. So, I now know that in a few months time when I have a much more firm grasp on all of this, I’ll be that much closer to where I want to be (toward mastery of web design and all that).

I’m quite happy (at the moment) with the layout as of now. It is certainly not how I plan to keep things in the long run, but its a sold start. By the end of the week I hope to have a few more Illustrator creations posted. I’m quite excited to follow along the lines of my previous entry (the story character). I have a bunch of other sketches I want to bring to life… some of which will take an hour or so each, others (two) which will take 5-6+ hours each. Its quite exciting stuff. The progress shall continue!

Here we go! Been slaving over this for 4-5 hours. I like to think it would take me less time if I did it again (which I think it would, at least a little bit). This one is base off of a photo-trace from a picture I drew a few months ago (of a character in my story). Of most of my by-hand drawings, this one is certainly much more detailed than the rest. I have a few other “characters” I want to get up on here soon, none of which should take nearly this long. I really liked this drawing, though, and wanted to get it up.

I used layers throughout this entire process and used them as effecitvely as I ever have (which made things tons easier!). Additionally, I continued to use the white/black transparency for shading (a trick I discovered on the previous entry). I realize that shading with this technique (differing transparencies of black and white) as opposed to differing shades of the individual color opens a lot of possibilities. For example, it would allow me to recreate this character with different “uniform colors” (i.e., blue instead of red) by merely changing the one (underlying) shade of red or blue (as opposed to the 4-5 different shades of blue or red throughout the drawing). That is definately a good thing to keep in mind.

Here we go!  These took me about 2 hours to do.  They’re for a make-shift logo for fireflygrove.com’s Workshop page (what you’re reading now).  After seeing them together, I’m definately realizing they aren’t exactly the “mood” or “tone” I’m going for (compared to the book&quill and guitar&parchment)… these objects don’t seem to “fit” together as well as I’d like.

All of that aside, I learned a lot while putting these together.  For one, I figured out an easier way to add lighter shading to objects: use the color white with a transparent setting.  Examples — check out the “glare” on the potion bottle, as well as the “glare” on the upper-left of the paintbrush brush and the “light shade” on each color in the pallet.

I just realized that I goofed the order of the colors on the pallet.

My most recent labor. A book and the corresponding quill (with which it was written). This took me about 3 hours (all but 20 minutes of which was the book… a lot of experimentation was going on).

Question — why didn’t the transparancy carry over when I turned my book into a symbol? Ideally, I wanted the text of the book to be a bit more faded (which is not as it is seen above). I don’t know, but I have a feeling it has something to do with layers (which I used rather well on this effort). I did a test where I made other new symbols (involving transparancy), and there was no problem. I’ll have to look into this.
This is probably going to be used as a make-shift logo for my journal/blog (as linked from the main page). That is, until the internet crashes or I design something better. Step by step.

Note — I just figured out that the current layout for this blog has this central column at a width of 450px. In the near future, all of the attached images in my posts will be sized no greater than 450. Otherwise, they get all messed up (don’t know the word, but their borders look quite jacked). See below for some examples of “bad” looking images (in regard to them being too big for the page). I fixed this one though, note the crisp edges.

Note #2 — I just figured out that my previous note (about column width being 450) may be browser specific.  Or at least, having just checked out this blog in IE, I realized it looks a lot different.

Here we go. Creation successful. First post in process.

This here blog will be a place for me to showcase my creative endeavors and achievements. Questions will be asked, experiments will take place.

I’m in the process of coming up with a cool name.

Here is another, this one from yesterday. Probably took me 1-2 hours. Stylistically, it is exactly what I’m looking for. I’m quite happy with the shading on the guitar face — it is a bit complex (realistic) but not too much. Equally am I happy with the shading on the “sides” of the guitar — that took me a long time!

The idea (currently) is that this will be used for an icon to lead you to my eventual guitar tabliture page. In the meantime, it exists for your pleasure. By the way — I am perfectly aware that the guitar is not shaped like a “normal” guitar. I purposely am going for the more simple oval-shape to stress an almost cartoony aspect (again, I don’t want to get too close to 100% realistic). I didn’t make the head of the guitar 3D (I didn’t give it depth)… did you notice?

Here is my take on a simple corncob pipe. This took me about 45-60 minutes to make. I’m rather pleased with it, I suppose. As with all things I create at this early stage, my style is finding itself one drawing at a time. This pipe is a sort of mix between my bold-lined and simple styled mixed with a little bit of “realisticness” (in the elaborate shading). I feel that I could create something just as good in far less time (with far less shading). Not right now, though.

In my head, I imagine many different pipes of increasing complexity. My inspiration, you might say, is the old manuals and guidebooks for video games I used to play. In these manuals, various items from the game would be illustrated with great detail. The illustrations really brought the items to life, as in the game they were described by nothing more than a simple name. Looking at a list of 10 different pipes, for instance, and seeing a corresponding list of pictures (each that much cooler than the one before it) — that was my inspiration… and maybe it is my goal. Of this imaginary series, this pipe would be the most simple. Fitting, is it not?

Here is an attempt at a working-version of a logo for my fireflygrove.com main page. At the moment, I’m quite happy with it. I found a tutorial online describing how to do gradients that fade to transparancy — I used these for the fireflies (which were previously constricted to a black background). I plan to change and elaborate upon the vines in a future revision.

In the version that is currently up (at fireflygrove.com), the leaves are gone (from the below pic).  I did this to simplify things a bit — I felt that too much was going on.  As a result, however, many people (I’m told) aren’t sure if they’re looking at vines or snakes.  I have an answer, and it is more time (thinner vines).  You’ll see soon enough.  For now, I’m just concerned with getting the ideas out there…