Arc and Angle

Maker Profile – Kinetic Wave Sculptures on MAKE: television from make magazine on Vimeo.

Artist Reuben Margolan shows us where he finds his inspiration and how he experiments with his ideas to create wave scultpures.

I love so much about this: how making things has been a part of his life since he was a child, how he takes one thing about the world that he finds beautiful or fascinating and then uses his art to experiment and explore that, the way he notices and loves things in every day life that are easily missed.

This blog entry covers:

• Why it is important to use relative text sizing units (ems and percentages)
• Why NOT to use pixel units
• Why NOT to use point units
• Why NOT to use keywords
• Helpful resources

When designing web pages, you might think that choosing a font size should be amongst the easiest and quickest decisions a web designer makes: simply choose a readable pixel size and move on right? Well, that is one way to do it…but it certainly isn’t the most thoughtful, adaptable and accessible. It is, for several reasons, bad practice and anyone designing a website should seriously consider getting acquainted with the relative way of sizing text. It takes more work, but it’s a more efficient method that produces better results across multiple browsers and devices and allows your content to be accessible by a wider audience.

Pixels are not the only way to size text. The units available to web designers for sizing text are pixels, points, percentages, ems, and even keywords.

So which should you use?

Ems and percentages are considered the desirable units for sizing fonts using CSS because they avoid the pitfalls of pixel and point sizing (explained below), are re-sizable in all browsers that support resizing, AND are relative to a user’s font size preferences.

Yeah, well, computer screens display in pixels. I love pixels. Why shouldn’t I design in pixels?:

That would be lovely if everyone used the same browser, the same monitor and if we all had the same vision. We, however, don’t live in that world and good design keeps functionality at the forefront. A well-designed website will allow text resizing and will do its best to look the same across different browsers, platforms, devices, etc. The proper text sizing tool in the web designer’s arsenal is not the pixel, it is the em (with a little help from the %).

When it comes to text (and line-heights), our usual friend The Pixel, ignores user preferences and doesn’t re-size in Internet Explorer. This makes pixel-defined text sizes a bad idea when considering accessibility issues and we must consider accessibility issues. Accessibility to equal information and services is not only a human rights issue (which is reason enough), but also about making sure your code can be adaptable to a variety of devices and applications.

The resizing issue can’t be underestimated. Internet Explorer stills claims the largest audience and small text is a very real problem for countless users.

Another drawback, albeit one that I am guessing is not an issue for the majority of websites, is an inconsistency amongst browsers on how to handle non-integer pixel values (i.e. some can handle 12.5 px, while others can not). This matters if pixel-perfect sizing is desired on every major browser. I doubt designers regularly (if ever) code non-integer pixel units for text sizes, but it can accidentally happen when a pixel value is applied to a parent and a percentage or em to its child.

Ok, what about points?:

No! Don’t do it! Points were not designed for screen-based design. They are a great desktop publishing unit, but not a great web design unit. When being converted to pixels, the math is extremely inconsistent amongst different browsers. It’s a confusing explanation best left at: don’t use points for text sizing unless you are writing a print-media style sheet.

Hm, well, that leaves keywords?:

No again and I find them too confusing to explain very well, but they offer up the same issues as points regarding consistency and control problems. For a detailed explanation by someone much better at explaining these than me, feel free to read this concise explanation.

Helpful Resources:

The Em Calculator: Converts pixel sizes into em sizes

A List Apart article: Explains how to use ems and percentages to size text using CSS

After taking several computer-based design classes, I’ve come to expect at least one assignment per course to be some sort of variation of recreating an image as accurately as possible using the tools and techniques taught in class. We did this twice in Illustrator and I’m amazed at how much progress is visible between my first recreation project and my last one. The first attempt was much harder and looks much worse, BUT it was part of the learning process. I struggled to get Illustrator to recognize specific objects as selections. I struggled to get colors to work. It was a pain and I hated how it looked! HOWEVER, that assignment made me much more grateful for everything I learned later.

Early in the course, we were to recreate an image from a list of themes (being a bookseller, I chose the literary theme.) Here it is in all its glory:

original image (L), my frustrating attempt at recreating it (R)

The end of our course culminated in a three-part final project, part of which was to recreate a wine label as accurately as possible. I have to say, everyone in my class improved so much. It was awesome. We had to get each of our three illustrations printed and mounted to present on the final day of class and some of the work was simply breathtaking. I went to (risd)prints by concept link in Providence because they work with the RISD community. I had my wine label printed on a huge piece of archival paper that would normally cost about $75, but as a student, cost closer to $25. I recommend them, although they can get really backed up at the end of a school semester; I was lucky and was able to get all of my stuff done within about two hours.

original wine label (L), my recreation of the label (R)

The vast majority of the time spent on the wine label project was spent using the pen tool to create all of the shapes. The text for “Orangedale Sunflower Brand” was also created using the pen tool, but I typed in the smaller pieces of text with fonts from my computer that matched closest to the original poster fonts.

To create the shapes, I placed the original image on its own layer and lowered the opacity to somewhere around 50%. Then, I put on some good music and settled in with the pen tool.

original image with lowered opacity and the beginnings of the shape tracing

near the end of the tracing period w/ the original image turned off

larger image of my recreated wine label

The trickiest part to recreate was the center of the flower. It’d be nearly impossible to trace because it is simply too detailed and busy. My teacher asked me how I planned on doing the center of the flower, and I said I was thinking of using the symbol tool to spray a bunch of custom symbols inside of a circle shape. She told me one of my classmates was having a huge issue with his file size after using the spray tool for a similar issue (in his case, he was trying to recreate plants in a field).

I told her I’d try using a pattern instead. She suggested creating a few circle shapes on different layers with transparent backgrounds. That would create a more random detailed effect. I think it was a time-saving tip that worked pretty well. Now I have nice print that I’m going to frame and put somewhere in our new apartment.

This was one of my first “exercises” in Illustrator class. I can’t even recall the specific instructions. I think we were supposed to use basic shape/line tools, some color, a little text, and stick to only a few specific themes (I remember choosing the “spring” theme). My teacher showed us this fun little technique using the tilde key (it’s that sideways looking “S” to the left of your 1 key). If you hold the tilde key down with a shape tool selected, Illustrator will rapidly repeat the shape as you move your mouse. It can create some complex looking designs in a matter of seconds. I’m probably going to be saying this over and over again, but I love Illustrator. It’s amazing. So in the spirit of this entire blog, I am posting some of my “training-wheel” pieces.

It’s amazing to look back at the exercises and assignments I did at the beginning of the course and remember how I struggled to get things to look the way I wanted them too, simply because I wasn’t familiar enough with Illustrator to know how to do them better/easier.

On this one, I was testing out the tilde technique, the gradient window, the pathfinder window, and text on a path.

I was stumbling along some web sites yesterday and came across a really cool Photoshop tutorial on how to create planets from panoramas. I’ve seen examples of these before, but never thought they’d be relatively easy to do in Photoshop. This person posted some fun examples that inspired me to give it a try. I suggest clicking on the tutorial above if you want to try it out yourself; it’s clear, short and has nice screenshots for us visual learners.

I made a few, most of which came out interesting in the not-so-good use of the term. The problem is that I have very few images on my computer that are well-suited for this technique. It truly works best with panoramic shots because you want a relatively simple foreground (i.e. grass or water) and a relatively simple background (i.e. sky) with a busy center.

This is more along the lines of the type of photo that works best. This is Manhattan from a boat in the Hudson River.

Welcome to Planet New York. This one is my favorite.

This is the original photo, a pic taken in London a few years ago.

This is London Planet. I like this one. It doesn't really look like a planet, but I think it's pretty anyway.

This is a really dark pic that was taken from a boat off of Manhattan during sunset.

I brightened it up a bit. This photo was small, so it looks pixelated. It was accidental, but I kind of like it that way anyway.

The photographer who wrote the tutorial has an awesome Flickr set of his planets. Take a look at them; they’re beautiful.

This is the poster that I chose to base my event poster off of:

Original World's Fair Chicago Poster (1933)

I love the colors, the type, and the general sense of organized chaos. Here is the event poster I created for class:

Chicago Olympics 2016 poster

Certainly there are things I want to change and work on, but I’m very happy with it overall given the amount of time I had to work on it. I’m proud of myself for trying some techniques that I’m new to and learned some new things along the way. I deem this a success.

The main pieces I want to work on are all of the pieces of text. The tracking and spacing of the paragraphs at the bottom are truly awful, but I just didn’t have enough time to fix that. I also need to get rid of that dead space above the Olympic logo. The list of venues on the right isn’t tight and seems to draw too much focus to itself, so I’d work on that as well.

I like the buildings and the colors used on them. I like the backgrounds of the left and right columns. I kept on creating a pattern swatch using the splatter brush, but it kept looking terrible when I applied the pattern to the background. Finally, I just used the symbol sprayer and it created the random look I was aiming for. I like that the background looks like stars and that it contains faint hints of the building color scheme.

I struggled with Live Paint on some spots, but managed to work around those problems well enough.

Now let’s hope Chicago can add another star to the Chicago flag in 2016.

I’m about half-way into my Illustrator class at RISD and I’m so glad I’m taking it. It’s not terribly difficult to teach yourself Photoshop or Illustrator, but they are both massive programs with  a lot of sophisticated features and it’s hard to know where to begin. This class has really helped speed up my learning curve. One of my blessings and curses is that I’m comfortable with Photoshop and the two programs are similar in significant ways and yet very different in others. When things are different, it makes it more confusing and frustrating when something doesn’t work the way I expect it to (i.e.- I’m addicted to creating layers in Photoshop and have really had to change that instinct for Illustrator because it is simply designed to be used differently. I’m getting there!)

Most of our projects have been short exercises in using specific tools and techniques. They are starting to become a little bit more complex now, which is a lot more fun because we’re actually designing fun pieces like posters. Our last assignment was to create an 11×17 vertical event poster meeting these requirements:

• a customized headline or title treatment
• sub-headlines
• three-threaded paragraphs of type
• drawn, traced, placed and/or blend-mode images
• patterns (if applicable)

My first plan was to make up a fake band and a fake concert event. I spent a week creating one and liked what I made well enough to bring the work-in-progress to class for a critique, but I also thought it was a boring concept and I couldn’t stop thinking of other event ideas, which is a good sign that my heart isn’t into it and I’m not going to create something I actually like.

My hometown of Chicago has come up a lot lately and at one point it occurred to me that I should do a Chicago event poster…maybe a blues or jazz fest? It eventually occurred to me that Chicago is a candidate for the 2016 Olympics, and I had that “Yes! That’s it!” moment. I scrapped my fake band for my former city. It felt somewhat ambitious for my skill level, but screw it, I didn’t sign up for classes to avoid challenges. I’m supposed to be making mistakes and learning.

My aim with this blog is to learn about, explore, and share design ideas, creations and processes. At this point in time, I imagine I’ll probably focus largely on graphic and web design, but I see design as a state-of-mind that can be a part of nearly anything rather than any particular occupation. I’m open to thinking about creative processes and functionality in any form (graphic, computer, product, furniture, architecture, clothing…ad infinitum).

I simply want this to be fun and exploratory. I’m not a design expert. I won’t pretend to be.  I’m hardly even a design apprentice. I’m just interested in it and hope that’s enough to keep the blog rolling.

So welcome, thanks for viewing my blog and if you have any advice, tips, related commentary or questions, please don’t be shy.