My website is live. It felt great to really dig into this and be able to come out the other side with a functional result that does exactly what I want and need. The process of building the site was really enjoyable. I started with some rough sketches and a general framework/checklist of the content that I needed.

—
A brief aside: No matter what the project is, this is how I begin. These papers never leave my side when I'm working because I know that for me, the act of taking notes and sketching by hand is how my best ideas will come out. I also love being able to go back into my notes to layer in more notes or write out answers to questions that had come up in ideation. For larger projects I often take the time to rewrite the design problem or project summary every time I sit down to work because I know that something slightly different will come out every time, especially as ideas develop over the course of a project.
—
Fortunately I already had all of my portfolio images organized and ready for web presentation from preparing a digital portfolio PDF and my previous Squarespace site, so that took a huge amount of time and planning out of the equation. Also, having gone through many iterations of template-based portfolio websites, I had an idea of what I did and didn't want in my site. All I need is a place to showcase my portfolio in a way that can be updated quickly when I want to replace older work with newer work.

One thing that was absolutely essential for me was that my site be responsive. It wouldn't do me any good to tell someone that I had just built my new website from scratch, the caveat being that it only looks good on a monitor, oh and to make sure that their browser window is open pretty wide.

Since this was so important I took a mobile-first approach to designing my site. Knowing that not only is this a good standard to work from, it's always best to work from a place that can be built on rather than wondering how to remove pieces without having the whole thing fall apart. Learning about and then implementing media queries into my CSS was a real "wow" moment for me. I knew that I needed to design the site in proportionate measures, rather than absolute pixel dimensions, but I didn't know how that would eventually manifest into being responsive. Since all of my global styles were set up for mobile viewing, the changes that I had to apply to my media queries at a tablet/horizontal scale and monitor scale were really basic.

That being said, there was more trial and error at this phase than any other and I was locked in mortal combat with the float function for some time trying to make my nav links go where I wanted them to. The trial and error was fun though. As I tried to get elements to do what I wanted and watched as nothing happened, I just kept adding to it. When something finally worked I would go back and start removing declarations, seeing if they truly had been doing nothing, or what combination of declarations were actually achieving what I wanted. The logic behind a lot of the work was fun to start wrapping my head around as well. At least twice while working on this site I woke up with a "what if..." in my head, rolling out of bed and jumping straight into my CSS.

Something that I had wanted for a long time that fell by the wayside time after time was a place to write project summaries. I wanted my projects to have a bit of a case study look. I could never seem to find a template that balanced how I wanted my images displayed and also provided a text field. Not all work can speak for itself, as much as we may want it to, context is the most essential thing that one can have when viewing anything. Easy.

I created a couple of div classes to specify rules for my gallery images, in addition to using global styles I had created. I had considered creating a carousel for my images, but I felt that it took away from the "case study" approach I was going for with my projects. I also felt that I better control over hierarchy and how the images related to the project descriptions. One thing that I would like to add as I continue to learn more advanced coding is the ability to click on each image and enlarge them. Another great thing about having control over my own site is that its development will be right in stride with mine and I can use it as a bit of a playground for my continuing education.

There is a small bit of Javascript that I tried implementing which isn't working, but I haven't really dived into JS yet. I'm going to let the squishy part of my brain firm back up a bit and lock in the HTML and CSS I've been learning first.

While I (impatiently) wait for my DNS changes to take effect, I want to write a bit about some things I learned in Illustrator the other day. I enrolled in a class taught by Chris Leavens titled "Digital Illustration: Creativity, Style and Efficiency in Adobe Illustrator" on Skillshare. It looked like it would cover some illustration styles that I had always been curious about but wasn't even sure that they were done using Illustrator and not some heavier rendering software. I've been using Illustrator for around six years and the basics Chris covered has already changed everything about how I'll approach the program and design challenges. Granted, I've never taken a course that approached Illustrator in an illustration heavy manner; my design education was very Swiss, so wild rendering effects were never really in mode. I can't fault anyone for that. Learn the pen tool and move on.

One of the first things Chris covered on the software side of the class was Illustrators' "Draw Inside" mode. This is hands-down the single most important thing I have learned about using Illustrator. Essentially using the draw inside mode turns a vector object into a mask while the mode is active, allowing you to make new vector shapes within the parent shape that can extend outside of the original bounds without being seen.

What this amounts to is the most unbelievably simple way to render dimension on an object. Take the object color, set its transparency to multiply, reduce the opacity and bam, perfect shade of your base color (generally speaking). Also, you can do it over and over. Whether you want to create more shapes within your parent shape or start nesting shapes deeper, you can reenter draw inside mode at any time.

There are some funky selection issues that come up once an object has become a "draw inside object" (you can only select the object by grabbing its' path, etc), but once you get a feel for the strangeness that can occur they're not terribly annoying things to work around. The benefit is beyond worth it.

I posted about this feature on Facebook and almost instantly people I know who work with illustrator in some capacity were freaking out. Why didn't any of us know about this? Selfishly I'll admit that I was glad that no one commented, "Yeah dude, remember our second day of Computer Graphics 1?"

I want to share my process photos of the illustration I created to play with this new-to-me Illustrator feature. I decided to work with a character that has become some pseudo-avatar for my consciousness over the past year or so.

 

I call him Aleister.

 

Above is the original drawing from one of my sketchbooks. I didn't scan this in and draw over it, I just used it as a general reference.

  

I started out by blocking in the drawing with the pen tool and set my color palette. I determined where I wanted my light source and used a basic landscape so I could apply some textures and play with custom scatter brushes to affect depth later.

 

Step two is where the draw inside feature came in. This took almost no time at all. There's no stacking objects on top of one another to create a rendering effect and no meticulously trying to match another objects path or copying and manipulating the base shapes' path. Click a shape and hit "Shift-D" twice. Draw inside mode.

  

After I got everything in place I added varying degrees of feathering to the rendering/shading shapes. If anything in this image had been plastic or metal I wouldn't have, but it's worth pointing out reasons for and against using additional effects.

 

Here is the final image. After feathering the the shapes used for rendering, I went back into each parent shape and added an additional rendering/shading form, but with a gradient applied. Using the sweater as an example: the body and both arms are 3 total shapes. I applied a gradient to a shape within each of those objects using a shade slightly darker than the base color (at 100% opacity) gradating to a slight tint of the base color (at 0% opacity). These shapes were also set to "multiply" with a decreased opacity. Tip: I did this on one object and then added that gradient effect to my graphic styles tab so I could quickly apply it identically to the other two shapes. After applying that gradient to each shape I selected them all together, then using the gradient tool I created a slider over the entirety of the sweater.

The texture effects were added with custom scatter brushes and bristle brushes, which are fun to play around with, but for the sake of not dragging on I won't get into that. I will say that once you start using them, your file is going to get big and maybe a little laggy. Make sure to rasterize any bristle brushes before exporting your work as well, I didn't when I first exported this as a jpeg and some areas appeared pixelated and wonky when I shared it online.

So that's the story of the best thing that's ever happened to me regarding Adobe Illustrator. I'm going to keep playing around and apply this to some tighter "graphic" illustrations. 

Until my DNS is ready at least.

best o/

I wanted to start this blog so I could talk about new things that I'm learning and the challenges that come with them. Lately I've been trying to add some new skills to my resume. I've been freelancing, but I really want to get involved with bigger projects and back into a collaborative studio environment. I know that design can't happen in a vacuum, but that's where I've been.

When I was in school I had just missed a shift in curriculum that added two levels of web design to the Communication Design program. I was frustrated that I had sort of missed the opportunity to learn the basics of HTML and CSS and that frustration ultimately lead me to be a bit resistant to web design.

To be honest, the idea of learning HTML and CSS really intimidated me. Whenever I had seen it in the past or tried reading things here and there, it gave me the same feeling that algebra gave me in high school. I couldn't visualize how it worked, and honestly, I just hadn't objectively tried.

I told a friend of mine that I was going to start using Code Academy to teach myself some basics. He told me to go for it, but to try pluralsight as well, finding Code Academy too "hand-holdy" himself (he was right). I wound up taking a few classes by Susan Simkins, following along with her provided files using Brackets, pausing to scratch down notes and taking some time to play around with what I was being shown.

Once I had taken an introduction to HTML course I followed it up with courses titled "Your First Day with HTML" and "Your First Day with CSS." It all started clicking and I was somehow wildly relieved. I was able to understand the basic architecture and syntax of HTML5 well enough to be comfortable writing it on my own. Anything that I couldn't remember or that I would write incorrectly was a simple google search now that I knew how to ask the right questions. At this point I went over to Code Academy and went through a few modules before I realized exactly what my friend was getting at with the "hand-holdy-ness." I was using it to enhance or bolster the basics I had already learned, and it was definitely great to go over the same material worded differently, but there quickly came a point where I wasn't "learning" as much as I was following instructions that could simply be copy and pasted into the next window.

I was enjoying playing with CSS as well, testing specificity, organizing my HTML into divs within divs (once I understood how a div was both nothing and the most important thing at the same time, like the Buddha or a 13-year-old nihilist) and calling them out. I really enjoyed thinking about organizational systems and being thoughtful as to how to create a foundation that can be easily built upon later if necessary.

Obviously I couldn't just put "HTML/CSS" on my resume and start firing it off to all of the junior-level jobs that require that knowledge. Also, having a marginally edited squarespace template for a portfolio site wasn't going to prove anything, so I decided that I had to code my own website from the ground up.

More on that once my site goes live.

best o/