spoonflower fabric palette display how-to

11 Sep

SFpalette

I’ve been designing and selling fabric on Spoonflower for awhile now and to do my small part to aid the community, I’m going to stick a quick tutorial on here showing how I add a palette display to my fabric descriptions so anyone else who wants to can do something similar with their designs.

Spoonflower Fabric Palette Display:
The only thing you really need to know ahead of time is what colors you used in your design, as I’m going to provide and explain the html/css you’ll need to generate the display. When I’m designing a fabric, I tend to make a 1×1″ image where I save the colors I’m going to be using for that particular design, so I usually have the list of colors handy.

The fabric I’m using as an example uses the following html colors:
#d4e6e2
#51858c
#a3a368
#d15359
#f68c2a

The first thing I’ll need is the basic wrapper for the palette display. The code for that part looks like this:


<div style="border:2px solid #cccccc; border-radius:15px; padding:5px; width:100px;">

</div>

Which makes this:

 

The result of this code is the rounded light grey box that shows around the colors. We will be putting the code for each of the colors inside of this code block, between the <div style="border:2px solid #cccccc; border-radius:15px; padding:5px; width:100px;"> and </div> tags.

For each color, we will need to add a modified form of the following code:


<div style="background-color:#51858c;
border-radius: 10px; width: 100px; color: #ffffff; text-align:center; vertical-align: middle;">
#51858c
</div>

Which makes this:

#51858c

First, let’s look at the pieces of this code so we can understand what parts will need changed to customize the palette for a given design.


<div style="background-color:#51858c;
border-radius: 10px; width: 100px; color: #ffffff; text-align:center; vertical-align: middle;">
#51858c
</div>

The portion of the code that is bold and underlined shows where you’ll change the html color code for that element in your palette. The first one is the one that controls the actual color of that portion of the palette. If I change that first instance of the html color code to #ff0000 for pure red, the code would look like this:


<div style="background-color:#ff0000;
border-radius: 10px; width: 100px; color: #ffffff; text-align:center; vertical-align: middle;">
#51858c
</div>

and the displayed palette element would look like this:

#51858c

That brings us a third of the way towards making a palette element to reflect one of the colors in our design. Notice that the text display of the color is still showing #51858c, which is the code for the original blue color in the example. We will now update that portion of the code so that it shows the #ff0000 that reflects the bright red of the element.


<div style="background-color:#ff0000;
border-radius: 10px; width: 100px; color: #ffffff; text-align:center; vertical-align: middle;">
#ff0000
</div>

and the displayed palette element would look like this:

#ff0000

The last part of changing an individual palette element to reflect a color in your design deals with the color of the text display itself. This is the portion of the code that sets the color of the display text:


<div style="background-color:#ff0000;
border-radius: 10px; width: 100px; color: #ffffff; text-align:center; vertical-align: middle;">
#ff0000
</div>

In this case, the display text is white, or #ffffff. White text works well with darker colors, but if we were working with a light color it would be extremely difficult to read. We’ll change it to black or #000000:


<div style="background-color:#ff0000;
border-radius: 10px; width: 100px; color: #000000; text-align:center; vertical-align: middle;">
#ff0000
</div>

which looks like:

#ff0000

You’ll notice that on the red background you can probably get away with using either white or black text. You can use any color you want for the text, but I would advise sticking to white, black, or grey so that it doesn’t get confused for one of the colors in your design.

Now that we’ve figured out how to change the actual color of the element, the text display value, and the color of the text, we can essentially ignore the rest of the code for an individual palette element. That portion of the code just sets up the element, the width, the rounding of the corners, and where the text appears.

The next step is to put our color element into the container we made for the palette. (I’m going to switch back to the original blue color element that reflects the blue in my design.) That code looks like this:


<div style=" border: 2px solid #cccccc; border-radius: 15px; padding: 5px; width: 100px;">

<div style="background-color:#51858c;
border-radius: 10px; width: 100px; color: #ffffff; text-align:center; vertical-align: middle;">
#51858c
</div>

</div>

which looks like:

#51858c

In the case of this design, I also have four other colors to add to my palette. For each one of them, I will add a new color element. First I need to add the light blue, #d4e6e2:


<div style=" border: 2px solid #cccccc; border-radius: 15px; padding: 5px; width: 100px;">

<div style="background-color:#51858c;
border-radius: 10px; width: 100px; color: #ffffff; text-align:center; vertical-align: middle;">
#51858c
</div>

<div style="background-color:#d4e6e2;
border-radius: 10px; width: 100px; color: #888888; text-align:center; vertical-align: middle;">
#d4e6e2
</div>

</div>

which looks like:

#51858c
#d4e6e2

Notice that because I added it below the previous color, it is below the darker blue. I want the light blue to appear before the dark blue since it is the background color and is used more heavily in the design, so I will switch the order in the code:


<div style=" border: 2px solid #cccccc; border-radius: 15px; padding: 5px; width: 100px;">

<div style="background-color:#d4e6e2;
border-radius: 10px; width: 100px; color: #888888; text-align:center; vertical-align: middle;">
#d4e6e2
</div>

<div style="background-color:#51858c;
border-radius: 10px; width: 100px; color: #ffffff; text-align:center; vertical-align: middle;">
#51858c
</div>

</div>

which looks like:

#d4e6e2
#51858c

Now I’ll add the final three colors #a3a368, #d15359, and #f68c2a:


<div style=" border: 2px solid #cccccc; border-radius: 15px; padding: 5px; width: 100px;">

<div style="background-color:#d4e6e2;
border-radius: 10px; width: 100px; color: #888888; text-align:center; vertical-align: middle;">
#d4e6e2
</div>

<div style="background-color:#51858c;
border-radius: 10px; width: 100px; color: #ffffff; text-align:center; vertical-align: middle;">
#51858c
</div>

<div style="background-color:#a3a368;
border-radius: 10px; width: 100px; color: #ffffff; text-align:center; vertical-align: middle;">
#a3a368
</div>

<div style="background-color:#d15359;
border-radius: 10px; width: 100px; color: #ffffff; text-align:center; vertical-align: middle;">
#d15359
</div>

<div style="background-color:#f68c2a;
border-radius: 10px; width: 100px; color: #ffffff; text-align:center; vertical-align: middle;">
#f68c2a
</div>

</div>

which creates the final palette display:

#d4e6e2
#51858c
#a3a368
#d15359
#f68c2a

This palette display can then be added to the description for your fabric on Spoonflower. It’ll looks something like this for the design in the example:


Planes, hot air balloons, and blimps weave in and out of the clouds in muted blue, red, green, and orange.

<p>
Color palette:
<br>

<div style=" border: 2px solid #cccccc; border-radius: 15px; padding: 5px; width: 100px;">

<div style="background-color:#d4e6e2;
border-radius: 10px; width: 100px; color: #888888; text-align:center; vertical-align: middle;">
#d4e6e2
</div>

<div style="background-color:#51858c;
border-radius: 10px; width: 100px; color: #ffffff; text-align:center; vertical-align: middle;">
#51858c
</div>

<div style="background-color:#a3a368;
border-radius: 10px; width: 100px; color: #ffffff; text-align:center; vertical-align: middle;">
#a3a368
</div>

<div style="background-color:#d15359;
border-radius: 10px; width: 100px; color: #ffffff; text-align:center; vertical-align: middle;">
#d15359
</div>

<div style="background-color:#f68c2a;
border-radius: 10px; width: 100px; color: #ffffff; text-align:center; vertical-align: middle;">
#f68c2a
</div>

</div>

which creates the description:

Planes, hot air balloons, and blimps weave in and out of the clouds in muted blue, red, green, and orange.

Color palette:

#d4e6e2
#51858c
#a3a368
#d15359
#f68c2a

When I’m adding one of these to a fabric description I usually cheat and copy one from another design and then just change the colors, adding or deleting elements as necessary so I have the proper amount. Even if you don’t fully understand html/css markup, with a bit of practice you’ll get used to what parts you have to change in order to make your palettes.

I’ll mention as an aside that this sort of thing would be pretty easy to automate with a web form. Unfortunately, I only have access to the one at work and I probably shouldn’t stick it on there. If someone wants to have a go at it, they can be my guest.

It’s a shame that I’m not more vigilant about adding these, because I really think a display of the colors used in fabric printed by services like Spoonflower is incredibly valuable. Though the newest iteration of the colors Spoonflower uses to print is much closer to what is seen on the screen, it’s nice to let people know exactly what hues you’ve used in your design. For example, maybe someone wants to make a quilt of coordinating designs by different designers, but has a hard time telling exactly what colors are used in a given design. Or perhaps someone wants to design their own striped fabric to match the colors in one they’ve purchased. I think allowing buyers these kinds of options gives them more flexibility and actually might make them more likely to purchase your designs.

Advertisements

One Response to “spoonflower fabric palette display how-to”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: