I know I’ve been quiet here for a little bit, but life has just been happening. I do have some new things to start posting, though. And the first one is…
This little video I made, about using Recolor Artwork in Illustrator! It’s a super handy tool and saves me lots of time changing colors in a project, or when I just want to explore a different color palette.
Check it out on my brand new tiny YouTube channel.
Happy designing!
Boy, starting/keeping a blog sure is a popular class assignment. At least in my classes so far!
I’ve been musing for a while about adding a new dimension to the purpose of this blog, and thanks to a prompt in my WEB214 class, I think I may have it. I mean, I have a writing background. I love design, illustration, art, etc. Why not…write about that? Genius, right?
One of the great things about design and illustration is that they look both forward and backward in time. Even while we design for the future, their histories are bound up inescapably in everything we do as designers and artists. And not coincidentally, they have a rich history of being employed to bring stories to vivid, fascinating life. I’m keenly interested in these things, alongside actually designing and illustrating myself, which is why I want to make writing about them part of my creative life.
So, here we are. All posts pertaining to this class, such as this one, will get their own special tag so they can be viewed more easily as a group.
Huzzah!
This was a very long project, starting with some basic sketches of the object to be done and ultimately producing a realistic technical illustration in Illustrator of the object “exploded,” that is, with all of its parts visible.
I began with these pencil sketches of my chosen object, a Mr. Coffee French press, which produces my husband’s lifeblood every morning. Then the work in Illustrator began. This was the first draft of the object, just a simple line drawing on an isometric grid, with a color background so that the transparencies could be seen.
Next to that is the second in-progress version, also shown with a draft mockup of the product’s presentation. It’s clear that some things were developing well, like a couple of the gradient meshes used on the lid and the flat plates, while some things were still eluding me, such as the right gradient to use on the cylindrical frame and smoother shaping of the handle.
(If you click that image to embiggen it, you can also see the false starts with fonts and layout of the annotations, and the messy spirals on the spiral plate that I gave up on that night. They were hard, dangit!)
But after lots and lots of work on those things, and much refining of the gradient meshes (during which I learned A TON about using them: namely that I’d been doing it wrong from the beginning and really needed to start over!), this was the final result.
This is just the exploded object by itself, clean with no background or mockup, although the purplish reflected light is kind of obvious. (I used that purple because of the background colors in the mockup, which are based on Mr. Coffee packaging.) That handle’s looking a lot better, as are the linear and radial gradients on the cylindrical shapes and the meshes in general. The spirals on the spiral plate look more spirally AND connected to the plate. Plus! There are glinting edges on the frame and carafe, so they don’t look two-dimensional. But you can probably see them better in…
The final mockup!
Shadows and reflected lighting and light flares, oh my! Plus a font overhaul (thank you, peers who suggested doing so), and a return to my original idea for the layout.
Were this to be printed, it would need a specialty size, but there is a standard-ish specialty size for it, as I found. But this is a tall object fully exploded, and I decided to work with that instead of against it.
The focus of this assignment was to create an email newsletter “based on the subject of medicine or veterinary medicine for retina devices.” After some research, I decided to interpret that as veterinary ophthalmology, which is a specialty surgical field of vet medicine, and so I created my newsletter along those lines.
I made this at a set width of 600px, since, according to my research, that is a standard width for email marketing templates. Length is somewhat less of a concern, as email users are used to scrolling down to see more content.
After looking at other email newsletters for products and services (rather than information-driven newsletters like the ones I’m familiar with), I decided that mine should be pretty short (both in terms of content and pixels), with a focus on images, and grabby headlines with brief copy introducing each article before a “Read more” link.
Here’s what it looks like mocked up in an email like you might actually see in your inbox.
Images were grabbed from Pexels and have a CC0 license and were edited in Photoshop. The spring floral pattern used came from Freepik. The fake-company OCULR logo was done quickly in Illustrator.
Just wrapping up from the last post about this app project now.
After the second round of feedback, I made sure to make some serious adjustments to font size throughout the app. I’d clumsily gotten used to looking at everything zoomed in where I was making small tweaks, and forgotten to check for readability at roughly the size of a real smartphone.
Other things that were added between stages: a fourth main menu item and its attendant pages, a contact info screen, a login screen, and a small user area.
This page from the PDF presentation shows the splash screen as well as the app icon, both standalone and in position on the phone’s main screen. Clicking this image opens up the entire PDF.
This assignment is another doozy! For this, we were to design a mobile app that doesn’t but should exist. Every screen of the app would need to be created, as well as an icon for the app, and then the app would need to be mocked up in a PDF presentation.
My bookish and nerdy tendencies led me to a “baby name” generator that initially would pull from literature, but on suggestion of my husband, quickly expanded to include history and fandoms as well. There are tons of great names given to figures both fictional and larger-than-life, and if you mash them up, voilà, an even better name. With this app, there’s never a need to reach for the nearest object to hand when naming your baby (I’m looking at you, Blanket Jackson), or your pet, or your own character if you’re a writer. Hermione Havisham! That’s rad. Cersei Roosevelt! Or maybe don’t name your baby Cersei. But here I am, getting ahead of myself…
The first stage of the project was to come up with a few preliminary screens, to give an idea of what direction we were taking. Then we had another round of feedback a few days later, when we presented our progress thus far.
Here are the screen images of 1) the main progression from loading screen > about page > main menu (which at the time only included three items); 2) generating a name from the selections page > results; 3) searching for a name using the search form > results list; 4) submitting a name to the app’s database via the add form. I know these look tiny, but clicking any of them should embiggen the image for better viewing.
This project’s conclusion in the next post!
After a round of peer feedback on the logo thumbnails and roughs, I chose two of the four to turn into finished logos. One relies on the word “center,” with a few changes to its DNA, to carry the message. The other is a bit more abstracted and deliberately creates a sense of friendly availability.
I’m not in love with either of these, to be honest, but I think they’re okay and I could defend them to a client. If other classwork hadn’t gotten in the way during the idea generation part of things, I would have done probably upward of a 100 thumbnails. I felt like I could have found some more ideas to mine, and when I got to 40 I remember thinking, “But I don’t have anything good yet!” Ah well.
Finally, I’m including a mockup for each of these logo concepts. Instead of doing something boring like a business card, I wanted to see what these might look like as a window sign and as a standing banner like you see in college bookstores. Et voilà!
This project was to create a logo for the new Computer Tech Skills Center on the Wake Tech main campus. The client didn’t have a lot of preconceived ideas about the direction the logo should take, aside from using the school colors blue and gold, but they did want it to convey that the center exists to help computer tech students, with a particular focus on programming and networking students. This is what sets them apart from other learning and success centers on campus.
With that as the starting point, I began with some thumbnails.
While I wasn’t shutting anything out at this point, I was trying to at least circle the idea of a centralized location of assistance (literally the word “center” is used in a few of these) and the partner idea of availability and openness. But I also tried to incorporate some imagery that connected things to networking and programming. Then I took four that seemed like they had something to maybe develop, and roughed them out a bit.
The finale of this assignment in the next post.
This little assignment involves orthographic drawing, which I hadn’t done before but find kind of fun. The idea was to build a simple shape out of Legos and produce six orthographic sketches of that shape, one for each side. Here’s the shape I built. The front view is a little off since my camera was slightly above the shape, but it gives the right idea.
And here are the original hand-drawn sketches, presented based on the Glass Box theory. It was more difficult than I’d anticipated to draw without paying attention to perspective, especially since my shape involves a piece with a slope in the front and things stacked on other things.
I’m still not sure if some of the views are quite right, because I keep getting tripped up on the perspective. But as the next step, we were to refine the sketches in Illustrator. I made sure to add the dashed lines to indicate invisible shapes.
::UPDATE::
The third part of this assignment was to translate the orthographic designs to isometric. Illustrator’s neat 3D Isometric settings did most of the work for me on the main body shape. But the 3D conversion didn’t handle the round bit stuck on the top of the thing or the little connective Lego nubs, so I just had to draw those out myself on the isometric grid, using a tutorial I found on Tuts+ that explained how to do circles and cylinders. Here’s the result!
Sketchblah 