Make Art That Sells Bootcamp

So this year I have been taking classes. I have a lot of things to write and share but I thought I would start by just sharing where I am right now.

I'm currently enrolled in Lilla Rogers Make Art That Sells Bootcamp course. Bootcamp is a five month long class. Each month we receive a mini assignment to explore and play with. Then on week two we receive our assignment in the form of a brief.

Our first mini assignment was 1920's hairstyles. I began exploring the 1920s pretty deeply that first week. I watched a couple of TV shows, created a Pinterest board, and after a lot of sketching I even did some watercolor pieces. I discovered that I have spent a long time avoiding drawing faces and this assignment forced me to face that fear. 

The brief that we were given to work from was to design an adult coloring book cover. We were given leeway to make the project fun for us, so I turned my project into a color your own desktop calendar. Here is the layout I came up with:

How To Remove One Pixel Transparent Borders

So, you've finally mastered creating repeat patterns in Adobe Illustrator and you have this really cute pattern that you want to use as your website background. You save it for web, upload the graphic into your WordPress media folder, and excitedly refresh your page. It's awesome! Wait - what!? Why can you see the repeats? Where is that border coming from around your image - it worked perfectly in Illustrator?!

Read on to find out how to fix your pattern repeats on your website...

It's really helpful if you are an illustrator, graphic designer or surface pattern designer of any kind to have at least basic web design skills. Mine are just that - basic. I rely heavily on Google, Wordpress Forums, w3school and classes on (It is also helpful to be married to a software developer, although I am trying to do as much as I can on my own.)  When I set up this website I wanted to be able to showcase my repeat patterns as background images and in my header.

But I kept running into a problem - when I uploaded my images to WordPress and set them as my background image I could always see a very faint line where the pattern repeated. After a lot of head scratching I finally discovered that there was a one pixel transparent border that was totally ruining the effect, but I couldn't figure out where it was coming from. The repeats worked perfectly in Illustrator. When I searched online I found other people who were struggling with this same issue but I could not find a clear answer. Since I knew the pattern worked perfectly in Illustrator I assumed this was a problem with borders, margins, or padding in my .css.

It turns out however that it was an Adobe Illustrator issue after all! The border appears when you save your image for web without having your artboard aligned to the pixel grid.

After a couple of hours searching and posting on the WordPress forum I found this article which showed me how to remove one pixel transparent borders from my PNG files. Click over for great screenshots and explanations:

White border around transparent PNG after Illustrator export?

Following the steps in this article fixed my issue. Each time exported my artwork from Adobe Illustrator I was sizing the art board to fit the selected artwork wherever it happened to be located on the the screen. This was causing my art board to not be aligned to the pixel grid and giving me a transparent border in my PNG file.

So now I have a new routine. I make sure the art board is aligned as described in the article and has the same dimensions as my artwork. Then, I use the align tool to align the artwork to the art board before exporting by saving for web.

Voila! No more pesky transparent borders - only seamless repeats!

(Since writing this article not only have my web design skills greatly improved but I decided to go with a cleaner website design and ditched the pattern repeat in the background. 1/30/2017)