Faux Batik: The Big Reveal

I got the faux batik samples in the mail yesterday and I am so thrilled.  They look awesome.  These are all printed on the basic cotton which is a nice middle weight basic fabric.  I didn’t wash or press the fabric yet, this is just what it looks like out of the envelope.

Here is the original colorway.

Photo Oct 15, 4 13 07 PM

Photo Oct 15, 4 13 13 PMAnd a couple of alternate colorways…  (The color in these following two isn’t quite right in the photos because the light wasn’t cooperative, but they look good in person.)

Photo Oct 15, 4 14 06 PM

Photo Oct 15, 4 13 38 PM

I also made a set of coordinating prints for each of the colorways.

Photo Oct 15, 4 14 44 PMearthcoolswarmWhat do you think?  Which colorway is your favorite?  Although I love the warm colors I started with, I am also really loving the neutrals and I think that’s the one I might print to make a t-shirt.

More in this series: Part One • Part TwoPart ThreePart FourPart FivePart Six


Digital Design Tutorial: Part Six

Part six of our faux batik journey takes us back to Photoshop.

I have all of the motifs for my faux batik laid out, I have my color palette chosen, so now it’s time to put the finishing touches on my design.  This next bit might seem like a little bit of over-the-top, but I want to add a little bit of subtlety to this design, which is why I am going to go back into Photoshop before I add the final colors.

First I hide the colored background layer that I put in to help me lay out my design and I replace it with just basic black in my Illustrator file.  This is going to make it really easy to do the design cleanup next.  I export it, using the edges of my artboard or canvas to crop the design (getting rid of all the bits I left hanging off the edges).  It looks something like this.

Screen Shot 2014-10-06 at 5.58.44 PM

My first task is to make the edges of the design seamless.  Since I have very organic shapes, the lines and shapes at the right side of the tile aren’t going to exactly match up with the things on the left side of the tile.  But I want to make everything match up so there aren’t little flaws in the design when I repeat it.  Photoshop has a tool called “Offset” that will wrap the design around and match up those outside edges so you can do the touchup work.

Screen Shot 2014-10-06 at 6.08.32 PM
Here is one section of that matched up edge. I separated the black background […]

2014-10-06T19:07:43-05:00Spoonflower & Fabric Design, Tutorials|Comments Off on Digital Design Tutorial: Part Six

Digital Design Tutorial: Faux Batik Part Five

Today is all about color!  Now that I have most of my design laid out, I want to start to think about the colorway for this fabric.  The colorway is the set of colors I am going to use.  I really love the colors that were in my original inspiration fabric.  I could pick these colors out on my own in the color palette in Photoshop, but I want to show you a really fun tool that you can use for creating colorways.  It’s called Adobe Kuler and it is a free app for your iPhone or iPad. Edit: You would know it. In the week since I posted this tutorial, Adobe did an update. The app is now called Adobe Color and the screens are slightly different but still work essentially the same.

photo(3)It uses the camera to look at whatever you want to capture a colorway from and it picks out a set of colors from what it sees.  As you move around 5 little circles pop around the scene and identify colors.  You can tap the screen anytime to freeze it and then click the check box to save the colors.

photo 2Once I have saved it, I can open up the colorway by tapping a little icon that looks like a panel of sliders and here is the best part…

photo 1For each color, it shows me the HEX code and the RGB values, which are codes I can type right in to Photoshop or Illustrator.

Now remember that it is using a camera to capture the […]

2016-03-16T09:48:00-05:00Spoonflower & Fabric Design, Tutorials|Comments Off on Digital Design Tutorial: Faux Batik Part Five

Digital Design Tutorial: Faux Batik Part Four

Part Four of my batik-behind-the-scenes series takes us to the fun part: starting to put it all together.

It’s time to start laying out my canvas for putting together all of the elements into a whole design.  I decided to think about this as two layers: the background colors and the batik designs.  I wanted a large repeat area so I made a new canvas 24 x 24 inches.  The original faux batik design I was inspired by worked almost like a stripe pattern with bands of designs that went across the width of the fabric.  I decided I would like something a little less directional and more versatile than a stripe, so I decided to lay out a “crazy quilt” kind of background made up of squares and triangles.  I made this background as a layer all by itself to act as a guide for where to place my designs.

Screen Shot 2014-09-29 at 11.55.21 AM

The shapes that extend off the edges of the 24 inch square “tile” are my reminder to myself that those blocks are going to help make this design more seamless.  If you look at the large green rectangles on the bottom corners, I want that color to continue across the edges of the design, so when you repeat and put these tiles next to each other, those two green blocks will connect up and look like one larger green block.  Make sense?  This makes it harder to see the edges of my tile.

Screen Shot 2014-09-29 at 12.45.06 PM

Here’s what it looks like when I tile it.  I see that I still have a […]

2016-03-16T09:47:16-05:00Spoonflower & Fabric Design, Tutorials|Comments Off on Digital Design Tutorial: Faux Batik Part Four

Digital Design Tutorial: Faux Batik Part Three

Part Three of my faux batik tutorial is all about making your scanned paintings into vector shapes.  For this we are going to switch over and open the files in Adobe Illustrator instead of Photoshop.  As I said about Photoshop, there are certainly other vector based programs that you can use as well, but I am not as sure that they have some of the specialized tools that Illustrator includes.  Way back when I was first learning Illustrator, I hated it.  It did not make any sense to me at all.  I think it might now be my favorite tool, but it is a heck of a learning curve.

Making simple vector shapes.

I opened a new blank file in Illustrator and then placed one of my painted elements into the document.  (Place a file by going to the File menu and choosing Place.) Select your image by clicking on it using the black arrow or select tool.  You can tell it is selected because Illustrator draws a box around it.

Screen Shot 2014-09-24 at 5.01.48 PMTo convert this element into a vector shape, go to the Object menu and choose Image Trace -> Make and Expand.  This Image Trace tool has lots of settings you can tweak but I just went with the built in defaults for these designs and that worked great. When it traces your image, it looks for the contrasting edges and it draws new vector lines to match them.  Here’s what it looks like after it has been traced.

Screen Shot 2014-09-24 at 5.02.05 PM

The little blue dots and outlines are showing me the new points and lines […]

2016-03-16T09:46:27-05:00Spoonflower & Fabric Design, Tutorials|Comments Off on Digital Design Tutorial: Faux Batik Part Three

Digital Design Tutorial: Faux Batik Part Two

This is the second post in a series: a digital fabric design tutorial making a faux batik print.  Yesterday I painted some batik-inspired designs on paper and today I am going to show how to scan and clean up the designs.
Screen Shot 2014-09-24 at 4.55.55 PM

Part Two:  Scanning and preparing your paintings

This (above) is the program I use with my scanner.  It’s called Image Capture and is built in to the Mac.  You can use whatever scanner software you have – they are really pretty much the same.  I scanned each page of my paintings.  I chose to scan them as black and white at 200 dpi.  (This scanner software has a drop down menu with defaults set, so I couldn’t scan to 150 dpi exactly as I mentioned in the previous post.)  I scanned the whole page and then saved it.

Next I opened up the scanned painting in Photoshop to do a little touchup.  I am going to adjust the Levels in my design, which basically makes the blacks blacker and the whites whiter.  It will help smooth out anywhere where the paint was uneven or lighter and get rid of a few smudges on the paper.  In Photoshop I choose the Image menu, then Adjustments, then Levels.  You don’t have to do this in Photoshop.  There are a number of really great (and somewhat more affordable) graphics programs out there that have tools that do the same things.  The tools are sometimes labeled slightly differently, but if you are willing to experiment, you can usually find a tool to do what you need.  (Photoshop is 100% worth the price, but I get that not everyone […]

2016-03-16T09:45:41-05:00Everything Else|Comments Off on Digital Design Tutorial: Faux Batik Part Two
Load More Posts

Sign up for my e-newsletter to see tutorials, events, upcoming classes and more.