Show Off Your Good Side

Women Who Code Atlanta Hackathon 2017

While leaving the ATDC building at Georgia Tech around 10 p.m. on Saturday night, I told one of my teammates for the Women Who Code Atlanta Hackathon that we needed a weekend within this weekend. We had been at the ATDC working on creating a mobile app since 8:30 a.m. that morning and had also been there until 10 p.m. the night before making pitches, choosing teams, and brainstorming ideas and implementation.

Although I had been looking forward to the hackathon since I first signed up a couple weeks ago, I hadn’t been planning on pitching an idea until I was sitting in the main event room with the fifty or so other women participating in the hackathon on Friday night. As I listened to some of the other participants present their app ideas, I felt a growing urge to throw out an idea for an app that would offer users more information about what they could do to help mitigate climate change. I didn’t know if building a user-centric carbon emission tracking app was even possible in the two day time frame, but, inspired by the other hackathon pitches as well as Mint.com’s budget setting and tracking tools, I thought I would at least suggest it.

Before the pitches even started, the hackathon organizers had announced that they wanted the teams to consist of six to eight people with a minimum of five. So when all the participants began walking around the room, placing stickers on large sheets of paper describing the pitch ideas as a means of voting on them, and the sheet containing my idea received less stickers than several others, I was pretty certain and also pretty relieved that my idea wasn’t going to be chosen. Instead of narrowing down the number of ideas based on the number of participants and overall interest, which I heard was the original plan, there seemed to be some kind of miscommunication among the organizers though, leading the announcer to then tell the participants to go stand next to the sheet of paper for the pitch idea that they wanted to work on most.

To my surprise, a few participants hesitantly came over to me, asking me what I thought working on the app would involve and trying to ascertain if we all collectively had the different skill sets that would be needed to create it. Three of the four other women said they were full-stack developers with intermediate back-end experience while I and the other woman there agreed that we were more of designers. Instead of wandering over to one of the other groups, as I thought they would do, they all continued hovering next to the sheet of paper I had written my idea on. There were five of us in total so it was decided: we were going to try to build the app.

Over the next few hours, we continued talking about the app idea and tried reducing it down to its simplest form by making a list of “A,” “B,” and “C” features and also mapping user flow. We found an API developed by a team at UC Berkeley that seemed to offer all the carbon emission data that we would need and so we went home Friday night feeling confident about the app and what we thought we could accomplish over the next day and a half.

Working on the app was more challenging the next morning with progress coming in fits and starts. We needed a key to access the API we had found the night before and couldn’t find a comparable one to use instead. Women Who Code Atlanta had planned a truly amazing hackathon though and so there were several mentors with senior-level design and/or development experience that we could ask for help. An incredibly nice and talented back-end programmer named Sandy came downstairs to help us figure out what to do about the API. Sandy wanted to help us find a similar API to the one we had originally planned on using from UC Berkeley, but pointed out that the output we were hoping to get—a number that was in joules in some cases and in watts in others—wasn’t going to be easily synthesized. We told her that we were hoping to find a standard number of mtCO2e per year in tons, but, in describing this to her, we realized that that number probably wouldn’t make sense to our app’s users let alone us.  It felt exasperating to come in that morning and not be able to accomplish what we had thought would be fairly straightforward the night before, but talking to Sandy made us realize that we could simplify the process used to make our app’s prototype as well as the prototype itself if we pivoted towards offering our users a “carbon emission score” rather than an actual carbon emission estimate.

Our progress felt like it was interrupted again later that afternoon when Alicia Carr, one of the directors of Women Who Code Atlanta came to our team room to check on us.

“This is great and all, but how is your app going to make money?” she asked. At that moment, I felt like some kind of frustrated idealist stock character: We just want to help the planet. Do we really need to turn a profit? In talking to her and my teammates about advertisements and data, I started to remember some of the things I had learned about digital marketing and data segmentation while attending the SuperNova South conference in Atlanta last week though.

“We’re collecting a lot of user data,” one of our team members who had taken on a lot of the back-end development and who was also named Alicia, pointed out.

“If a large percentage of users indicate that they aren’t currently powering their homes with solar panels from one question, but that they have a mostly plant-based diet from another question, then companies that sell solar panels can buy our data insights and figure out they should be advertising on vegetarian blogs and in vegetarian magazines,” I tried.

“That’s it!” Alicia (the director) told us. “That’s what you need to tell the judges tomorrow.”

A day and several more GitHub commits later, our team had a very simple, but functional mobile app that we had built with HTML, Sass, JavaScript, and Firebase. It had a number of bugs (including the fact that the interactive “house map” we had created for the profile page only worked properly if viewed on an iPhone 6), but it was still a minimum viable product that we could show the rest of the hackathon participants and the judges.

Watching the other hackathon teams present was awesome! I especially liked the Not Today team’s mental health app as well as the Menuize team’s grocery and meal planning website. At some point during their demo, one of the Menuize team members showed the audience a calendar they had developed that allows users to drag and drop specific meals from their saved recipes onto certain days of the week, so that users can plan meals and ration food more accurately (the third most effective solution to reducing carbon emissions according to environmental researcher and author Paul Hawken).

It was an honor when Erica Stanley, one of the other Women Who Code Atlanta directors, announced about an hour later that the judges had decided to create a special Social Impact Award in addition to First and Second Place and that our app, which we named “Inhabit,” had won. I didn’t realize until the hackathon had already started that there were going to be judges and awards so it was really an amazing experience pitching an idea on Friday night, building an app with a team of smart and hardworking ladies Friday night, Saturday, and Sunday morning, and winning an award for the app Sunday afternoon.

I am so thankful for Alicia Barrett, Katie Brennan, Debby McRae, and Naz Sodanbek for being such a great team, the hackathon mentors for helping make our ideas and app better each time they stopped by our room, and the Women Who Code Atlanta organizers for hosting this amazing event—with amazing food! I will definitely be back at more Women Who Code events in the future!

DrupalCamp Asheville 2017

This past weekend, I went to my first DrupalCamp in Asheville, NC and was able to understand significantly more of what was being discussed than I was able to at my first WordCamp in Raleigh, NC back in April. I still have a lot to learn about both content management systems, but it was reassuring to see how much progress I’ve made in just a few months.

To start things off this weekend, I attended an all-day Introduction to Drupal training course on Friday. The course provided a basic overview of how to install Drupal, navigate the admin interface, create content as well as fields, modules, menus, and blocks, and download and activate different themes.

I had never used Drupal at all before this weekend and was surprised by how similar its capabilities and interface are to WordPress’. Drupal’s articles and basic pages seem to more or less serve the same purpose as WordPress’ posts and pages while Drupal’s content types seem to share a lot of similarities with WordPress’ custom post types. Downloading and installing Drupal modules and themes also seems to involve the same steps as downloading and installing WordPress plugins and themes. Although I’ve heard that CMS users tend to either be diehard Drupal or WordPress fans, the two systems appear to have a lot in common at least at first glance.

One thing that surprised me during the Introduction to Drupal course was the instructor’s advice to create all content types and fields, add content, and install modules before installing a theme. One of the very last steps in the Drupal development process should be to finish the design, he said. His advice seems contrary to what I learned about the design and development process in my User Interface Design course at The Iron Yard. There’s a chance that, while we may have learned how to go about making sites with more of waterfall style approach, the DrupalCamp instructor may have been advocating making sites with more of an agile style approach. I would love to hear another designer or developer’s opinion about this though.

After attending the Introduction to Drupal training course on Friday, I came back to Asheville for the main DrupalCamp on Saturday. Although the sessions that I went to on Saturday were more advanced than the training course I had gone to the day before, I remembered what I had learned from going to the WordCamp in Raleigh and simply remained calm and took detailed notes for later if I didn’t understand anything.

Over the course of the day, I learned a little more about creating custom Drupal themes, the new Drupal Commerce, agile design, writing site content, JavaScript ES6 (which the guy I met at WordCamp Raleigh had first told me about), and the merits of using PhpStorm. (I was actually lucky enough to receive a free one-year subscription for PhpStorm thanks to a really nice Drupal developer from Mediacurrent in Atlanta, GA.)

All in all, I would say that it was a great weekend and that I absorbed a decent amount of what was discussed. I’m definitely excited to try using Drupal on my own sometime soon and to attend more DrupalCamps in the future.

Learning How to Create WordPress Sites

Ever since I first started learning how to code, my goal has always been to one day be able to create WordPress sites and hopefully Drupal sites. While I was interning at a marketing agency almost two years ago, I noticed that so much of the company’s income depended on designing and developing new WordPress sites for clients. It seemed obvious to me that learning how to create custom WordPress sites was one of the best things I could do to help my career.

I was also fascinated by WordPress’ admin interface. After hearing from my former company’s contracted WordPress developer that I could edit the HTML of our company website’s posts or pages, I tried figuring out why some of the site’s pages didn’t have any content in the page’s admin editor while others did. I was more interested in how our company website was built than my job as a marketing coordinator called for me to be, so after taking a part-time Front End Foundations course at The Iron Yard in Charleston, I decided to quit my job, pack my bags, and move to Raleigh to take a full-time course through The Iron Yard as well.

Despite my many questions about content management systems while taking the User Interface Design course in Raleigh, we didn’t have time to cover them in depth in addition to everything else we were learning. So WordPress and the reason why some of my former company’s website pages didn’t have any content in the page’s admin editor remained a mystery to me.

When I started working on a second version of my portfolio site about two weeks ago, I spent several days trying to figure out how I could use Handlebars.js to display blog entries on multiple pages of the site I was building. After feeling particularly frustrated with Handlebars one afternoon, I took my dog on a walk and thought about how displaying blog entries on multiples pages was one of the main reasons for using a content management system anyway.

Feeling both scared and excited because I knew that learning how to develop WordPress sites with PHP was going to be a huge undertaking, but that I both needed and wanted to learn it anyway, I decided to spend the rest of the weekend watching WordPress development tutorials on www.teamtreehouse.com.

There were many aspects of the first few tutorials that seemed confusing to me. I had no idea what MAMP was, for one thing, but downloaded it and began running it the way the video tutorial explained. I took 3–4 more Treehouse courses on WordPress development over this past week, but still felt confused as to how I could turn the HTML, CSS, and JavaScript sites I’d learned how to make at The Iron Yard into fully functioning WordPress sites with PHP. That is, until I started taking the Treehouse course on WordPress Theme Development.

In the course overview video, the Treehouse instructor explained that anyone watching the video with a “static” HTML and CSS site would, by the end of the video, be able to covert their site into a working WordPress theme. By first showing us how the WordPress file structure and template hierarchy were set up, then showing us how to transfer the CSS and JavaScript from our static site to our WordPress theme using the functions.php file, and eventually showing us how to create PHP page templates from our static HTML files, the instructor slowly unveiled all the mysteries that had surrounded my understanding of WordPress for so long.

I was just talking to a classmate who was frustrated that he didn’t know how to create a website for his girlfriend using the skills we had learned at The Iron Yard. So, after finishing Treehouse’s WordPress Theme Development course a few days ago, I messaged him saying that this was the final thing we needed to learn to be able to put our skills to use. After months of not fully understanding how what we were learning applied to content management systems, I feel like I’m finally able to see the big picture.

To my surprise, a lot of the seminars I attended at the WordPress conference in Raleigh are beginning to make sense as well. I now understand what the WordPress “loop” is as well as the role of custom post types. I honestly can’t wait to apply my newfound knowledge to designing and developing my portfolio site. It’s been a long journey since first learning the basics of HTML and CSS in The Iron Yard’s Front End Foundations course in Charleston this past December and I finally feel as if I’m reaching the goals I set out to achieve.

Artist Relations at Moogfest 2017

Anyone who has spent a lot of time with me over the past two years can tell you that I’m interested in eventually putting my graphic design and web development skills to use in the music industry. Since August of last year, I’ve been to three different music industry conferences, listened to countless music industry podcasts, and even tried providing freelance music marketing services to an emerging hip hop artist in Washington state.

This past weekend, I was able to gain even more music industry exposure volunteering backstage at Moogfest 2017 in Durham, NC. I was one of the lucky few who was able to sign up for two artist load-in shifts at Moogfest’s main stage thanks to submitting my volunteer application within the first five minutes that the applications were opened back in April.

When I arrived at Motorco Park several hours before my shift was supposed to start last Friday, I lucked out yet again. I met up with the park’s stage manager, a guy dressed in white overalls who had flown in for the festival from Austin, TX, around 3 p.m. While we were both chatting and eating tacos, he asked me if I was interested in being reassigned to volunteer in artist relations. I eagerly said yes and, about an hour later, he led me past the security behind the park’s café and music hall into a room that was normally some kind of craft shop, but, for the festival, had been converted into the artists’ green room.

There, he introduced me to the stage’s hospitality manager, a short, British woman with curly hair, who soon led me into a kitchen area to explain to me which artists each of the riders belonged to. Within a few hours, I was able to meet and bring riders to Zola Jesus, Jessy Lanza, and to my utter delight and astonishment, the members of Animal Collective. Having listened to a lot of Animal Collective’s music and a lot of Noah Lennox’s solo work as Panda Bear, it felt truly unbelievable to see them arrive in the gravel parking lot outside the green room a few hours later dressed somewhat like bums with Dave wearing an old, green baseball cap and Noah, a sweatshirt that was several sizes too big for him.

Unlike the other artists, the Animal Collective members had their own room and mostly kept to themselves. During a slow period in my volunteer shift, I was able to go out and watch them perform for a while. I’d seen them a year before in Atlanta, GA and had forgotten how amazing they were live. After the show was over and the crew had finished loading Animal Collective’s massive amount of equipment back into one of their tour buses, the band left and the hospitality manager and I quickly finished cleaning up their room. One of the band members had actually left behind their artist badge, a green sticker with the group’s name on it that the hospitality manager told me I could keep. Although I’d been feeling starstruck all night, she told me I’d done a good job giving them their space and treating them like normal people.

They definitely felt more like normal people after getting to spend a few hours with them Friday night and I tried to bring that same polite but casual attitude to my volunteer shift the next night when I was able to meet King, the Grammy-nominated R&B group from LA, along with DJ Premier and Flying Lotus. Each of the artists on Saturday night were a little more sociable with DJ Premier turning out to be one of the most humble people I’ve met, all things considered. After what the hospitality manager called Flying Lotus’ totally “dirty” set, all the artists, their tour managers, and friends came back to the green room for an impromptu party with the hospitality manager, the crew, and me. It was a fabulous night and will probably turn out to be one of the highlights of my year. I’m aware that I will probably never have another volunteer experience quite that great, but it definitely was a lot of fun while it lasted.

Graduation from The Iron Yard

After three long months spending all our days and nights designing and coding apps and websites, my classmates and I finally earned our certificates in User Interface Design from The Iron Yard! I’m so proud of everything we’ve learned during this time and also a little bit nervous about what’s to come.

When I first went into the program, I expected to come out knowing everything there was to know about web design and development. Now I realize I don’t even know everything there is to learn. Based on talking to several designers and developers over the past three months, it sounds as if that’s just the nature of the tech industry though. I feel excited and a little intimidated all at once, because I can’t wait to learn languages like React and PHP, but those languages may eventually replace the ones I already know and feel comfortable using at the moment.

During one of our guest lectures, a full-stack developer from a firm called thoughtbot told us about his experience dealing with imposter syndrome. He started off by explaining to us that imposter syndrome is particularly prominent in the tech industry not only because designers and developers often have to learn new languages, but also because they aren’t required to pass any kind of certification test to be considered competent at their jobs. Part of the issue too is that once someone masters a new language or skill, they for some reason begin to assume that everyone else has mastered it also, he explained.

He told us that, at some point over the years, he began keeping a list of compliments that his boss or coworkers had given him, mostly as leverage to use in case anyone ever tried to fire him, but also as a reminder of how valuable he was to his team.

After coming home from our fabulous graduation lunch at The Iron Yard today, I thought about what the developer from thoughtbot had said and how it would have taken me years to learn everything on my own that I had learned at The Iron Yard in just three months. I still have a long way to go in my web design and development journey, but I’m no longer at the beginning and that’s a huge reason to celebrate!

People’s Climate Movement 2017

Earlier this month, I saw two videos in the span of a week that made me think about how little I’ve done to help the world around me since graduating from college. The first video was a new State Farm commercial encouraging viewers to volunteer more for the causes that matter to them while the second one was a skit that Louis C.K. performed on Saturday Night Live pointing out the ineffectiveness and hypocrisy of armchair activism.

The two videos combined motivated me to sign up to receive e-newsletters from 350.org, a non-profit organization that tries to raise awareness about the effects of fossil fuels on our environment. In just a few days’ time, I received an email from the organization notifying me that the Raleigh Sierra Club was organizing a trip to the People’s Climate Movement in Washington, D.C. at the end of the month. The email said that there were still seats available on the bus if I was interested in joining. Not knowing much of anything about the Sierra Club or even climate change, I decided to sign up.

At 4:30 a.m. this past Saturday, I grabbed my backpack and the Wizard of Oz themed poster I had made the night before, and drove to NC State’s McKinley Center where everyone taking the buses to D.C. would be meeting up. I wasn’t sure if I would have much in common with the people I was going on the trip with, but the fifty or more people in the McKinley Center parking lot seemed to come from all age groups and walks of life.

About half an hour later, everyone boarded the two buses and we started making our way to the US capital. On the way there, I sat next to a nice man who said that he was a dentistry professor at UNC. He told me that he had been a member of the Sierra Club for a long time, but hadn’t been very active the past few years.

We arrived in D.C. a few hours later and parked next to the former Redskins’ stadium along with many other buses that had traveled there for the march. With everyone from our group all of a sudden splitting up and joining the masses of people making their way to the metro station, the man I sat next to on the bus and I decided to stick together for the rest of the day.

Everywhere we went, we met and talked to people who had made posters that we wanted to take pictures of or who wanted to take pictures of the poster I had made. After we joined the crowds of people near the National Museum of the American Indian and waited probably an hour to begin marching, we were stunned to realize that everyone was standing in place because there were so many people there that the march could only barely move forward. Not wanting to miss the speeches that we knew would be taking place at the Washington Monument later in the afternoon, my new friend and I moved ahead, passing crowds of people with posters and banners, some of which were really beautiful or funny.

As we gradually made our way past the Capitol building towards the White House, the sheer magnitude of the event that we were participating in began to hit me. We were two people among more than a hundred thousand who had traveled to D.C. for the day because we cared about the people and species on our planet and didn’t want to see them destroyed as a result of human inaction. I realized right before we rounded the bend to the White House that this was potentially the most impactful thing I had ever done in my life and felt proud of myself at that moment for waking up at 4:30 a.m. to be there.

After we reached the Washington Monument and the 90 degree temperatures began to subside, we took the metro back to the Redskins’ old stadium and got back on the bus along with the rest of the group from Raleigh. On the way home, I got to know some of the others on our bus a little better and realized they were all normal people who had just decided to take a little bit of time out of their weeks and months to go to club meetings and volunteer events.

It’s only been a couple days since the trip, but I already feel as if it’s going to have a big effect on my life. For one thing, I think I’ve found a community of people who I can now look up to as role models. I’m also eager to find out more about what’s causing climate change and what I can do to help, which seems like a step that we’re all going to have to take in order to reverse the changes we’re bringing about on our world.

WordCamp Raleigh 2017

Part of what made Saturday seem so overwhelming was the fact that I met someone around my age who was well beyond my web development skill level and who felt compelled to offer me tons of probably really great advice. After struggling to comprehend what he was saying all day (but making sure to write down the names of any helpful resources), I went home feeling totally defeated that afternoon. I thought about not going back for the second day of the conference that night, but I’m glad I did because the keynote the next morning was something that was helpful for me to hear.

Standing in front of a crowd of probably two hundred people, the keynote speaker, who is, from what I could tell, a very talented WordPress developer, explained how he had battled a serious case of depression seven years earlier. He showed us a diagram of the “iceberg” that was his life at the time, pointing out the good things above the surface that were apparent to the people around him, as well as the bad things below the surface that weren’t even necessarily apparent to him. His point was that every person at the keynote address had their own “iceberg” and that, although it could feel intimidating to meet all these amazing developers who seemed, from the surface, to have everything going for them, we were each individuals with insecurities and other personal issues residing beneath what was immediately evident.

His address completely changed my outlook on the conference and I was able to attend the rest of the sessions that day with none of the anxiety from the day before. It no longer mattered to me whether or not I understood something. I just continued taking notes with the idea that maybe it would be something I would understand later. One of my favorite sessions that day was, to my surprise, led by the guy my age who I had met the day before. At the end of his seminar, I noticed that several of the people who had led sessions the previous day had questions for him, meaning both that the guy I met was a WordPress genius and that the other session leaders were still learning too.

When JavaScript Starts Making Sense

On Thursday, the instructors at The Iron Yard divided all the UI Design and Java students into teams to brainstorm, design, and develop a game of some sort within four days. I was grouped with two Java students, James and Ricky, along with my friend and fellow UI Design student, Ellis. Unlike some of our classmates, Ellis and I had both struggled to understand and use JavaScript since it had been introduced to us two weeks beforehand.

We were both somewhat nervous later Thursday afternoon when James and Ricky asked us what we were capable of making after we had asked them what they were capable of making. After tossing around several ideas, we all agreed we thought it might be possible for us to create a digital version of Snakes and Ladders (and also agreed we should call it “Snakes and Ladders On a Plane”).

The next day, Ellis and I sat around dumbfounded for a while, trying to figure out how the front end of the game, which we were developing, would tie into the back end of the game, which James and Ricky were developing. At some point, we finally asked the question, “What information are you going to send us?” and from there began thinking about how we could write some lines of JavaScript that would use that information, an array containing the player number, cell number, and roll number, to advance two different player tokens across the digital game board.

After getting some high-level advice from Doug, the Java instructor, Ellis and I sat down to work on our side of the game in earnest and had several breakthrough moments when JavaScript finally started making sense for us. We realized that we could place the two different player tokens in every cell of the game board and hide all of the tokens except for the ones that represented the players’ current positions using CSS. We could use concatenation to combine the numbers from the array with class and id names to specify which player tokens should be set to hidden and which ones to visible depending on the array or “moves,” which James and Ricky would be sending us from the back end.

Slowly seeing the JavaScript that we were writing start to create the output that we were hoping for was probably the most exciting thing that’s happened for me in the UI Design course so far. There were several moments when Ellis and I started yelling at the top of our lungs because we were so happy and surprised that what we were coding was actually working.

All four of us were extremely proud to present our Snakes and Ladders (On a Plane) game to the rest of the teams on Monday and, although we don’t have a randomized version of the game with both the front end and back end online right now, you can view a non-randomized version of the game with just the front end here.

Applying Gradient Mesh Tool Techniques to CSS

While working on a redesign of the My Books page on the Goodreads site this week, I discovered that the gradient mesh tool technique I’ve learned in Illustrator can be slightly modified and applied to CSS with some amazing results.

For this project, I was interested in creating a skeuomorphic bookshelf that would display virtual versions of the books that a user has added to their My Books page on Goodreads. I thought this would be an interesting take on the concept for the page.

To get started, I found an illustrated image of a bookshelf online and brought the .jpg into Illustrator where I created my own version of it by tracing the outline with the pen tool and then creating extremely simple nine point gradient meshes on each board of the bookshelf that had some kind of highlight or shadow. For the colors, I chose a brown that was already in the redesign style guide I had created to be the color of the shadows and used a tint of that color for the highlights. You can see the gradient meshes in the upper righthand image below.

After creating mockups of the page redesign with the new illustrated bookshelf, I used the bookshelf as a reference to create a virtual bookshelf in my browser using CSS. The first step in the process was to create a div that would become the left board of the bookshelf. After setting the width of the div to 60 pixels and the height to 100% of the parent element, I added a thick left border to the div that was the same color as the highlights on my illustrated bookshelf. This was supposed to represent the narrow side of the board that is directly facing the viewer. After that, I used the eyedropper tool in Illustrator to find the hex codes of the two different beginning and ending gradient mesh points going from left to right in the left boards of my illustrated bookshelf. I then added a background with a linear gradient to my div in CSS and used the two different colors I had pulled from Illustrator as the color stops on my gradient. (The two stops are $light-brown and $dark-brown Sass variables in the picture above.)

The last step in the process was to adjust the shape of the div so that it was no longer a rectangle but a sideways rhombus with the narrow corners representing the inner corners of the bookshelf that are furthest from the viewer. To do this, I used the clippy tool found here. I didn’t have much experience creating clip paths in CSS before this, so I spent a few minutes moving the points around in the clippy tool and seeing how the values in the corresponding CSS generator changed with each adjustment. After a few minutes, I had a decent idea of what the values should be for my div. I had to keep making little changes once I added the clip-path property to my CSS, but I eventually got it in what seemed like a good place. At this point, I had successfully created the left board of my bookcase. From there I was able to create the other boards using a similar process and adjusting which element appeared in front of another element using different z-indexes on each of my divs.

I’m really proud of the result, which you can view here and I’m glad that my experience with the gradient mesh tool in Illustrator can be applied to other mediums.

Album Artwork with the Gradient Mesh Tool

In between my assignments for The Iron Yard, I’ve been trying to finish the album artwork I’ve been working on designing for a friend for several months now. My friend, who is a talented DJ and hip hop producer who I’ve known since college, is planning on releasing his debut album in May and I’d like to have enough time to finish the first version and make any necessary edits to it before mid-April.

This project has turned out to be the most time-consuming one I’ve ever worked on, mostly because I’ve been creating it with Adobe Illustrator’s gradient mesh tool. A little over a year ago, I remember asking the creative director and the art director of the marketing agency where I was interning whether they had used the gradient mesh tool before. Neither of them had, but they both told me that it probably wasn’t an efficient use of my time. I’m beginning to wish that I had listened to them, but that doesn’t mean that I haven’t learned a lot from working on this project.

One of the biggest takeaways I’ve gotten is a better understanding of how the distance between two gradient points can create what I think of as “smooth” and “hard” transitions.

For instance, the area immediately below the prominent fold of the ski mask sharply transitions from a dark pink to a medium pink because the distance between the two rows of points is very small. Further down on the ski mask, the color values transition more smoothly because the distance between any two rows of points is larger.

In addition to learning how to create “smooth” and “hard” transitions, I’ve also learned that the best way to blend three gradient points, where the middle point is supposed to be closer in color to one outer point than the other, is to give the middle point the color of some area between it and the outer point using the eyedropper tool.

Although these are both technical takeaways, the best thing I’ve probably learned from working on this project has to do with planning. When I first started working on the project, I was adamant about making it in Adobe Illustrator because I wanted the final artwork to be a vector that could be scaled up or down as needed. That being said, I’ve realized from spending countless hours modifying tiny details of the artwork at a 200% or more zoom level that, when everything is complete, no will notice the fine tuning that I did because they’ll be viewing a raster version of it at a 100% zoom level (or less). For this reason, it’s entirely possible that I could have given the artwork a similar appearance in much less time using a different technique in Adobe Photoshop.

You live and you learn, at any rate, and this project has definitely taught me a lot.