Archive for the ‘Nerdy Stuff’ Category

Behind the seams…

November 4, 2008

How to create embroidery on Zazzle
Yes, folks, embroidery will keep you in stitches. Sew I wanted to get right into it and show you just how seamless an experience it can be. I will show you the ups and downs and the ins and outs of the process.

These embroidery puns doin’ anything for ya?


Guide Us
First, I want to point you to an important document, the Embroidery Design Guide (PDF). This guide explains a lot of the details about creating successful embroidery products on Zazzle. Read it. Know it. Love it.

Also have a look at our embroidery information page. It contains important information regarding our process as well as links to pricing information.


Walkthrough
In this section, I will guide you through the process of creating an embroidered product from a standard JPG, GIF, or PNG image. It’s very similar to the normal print process, with a few key differences.


Step 1: Choose a product
The first step is simply to select what kind of product you would like to design: shirt, hat, or bag. Go to http://www.zazzle.com/custom/embroidery and choose one of the options:

Choose an embroidery product

Once you select a product, you will be taken to that product’s design tool. For this example, I chose Hooded Sweatshirt.


Step 2: Add an image
Once you are in the design tool a “Get Started” dialog appears where you can add an image or text. This is just like our print-on-demand design tool:

Let’s add an image. Click the Select Image link and you will see your image collection. Select an image, click Add Image, then click Make it now.

Now here’s one of those “key differences” I mentioned above. At this point, a new dialog will appear explaining to you that this particular image needs to be converted for embroidery.

This is an informational dialog only. It explains why we need to convert your image, how to choose an image that will convert well, and talks about the fee and time it takes to convert. In traditional embroidery, this conversion process is called “digitization”.

The conversion process is done by skilled technicians who know how best to interpret designs into stitches. It’s not an automated hit or miss process. It’s looked at by actual people using actual human eyeballs.

Once you finish reading the dialog, click Ok, add this image.

At this point, I’d like to mention that if you already own a stitch file in .OFM format, you can upload it and bypass all conversion costs. If you’ve had images digitized in the past for embroidery by a traditional embroidery company, you might have an .OFM file.


Step 3: Size your image
Now that the image is placed on the product, we can calculate the conversion fee. You will see that there is now a big yellow box under your image that tells you the cost of conversion at the current size.

In this example, the image is sized to 1.7″ x 2.1″ and it’s telling me that will cost $30 to convert. If I wanted to reduce that price, I could do a couple of things:

  1. Reduce the size of the image
  2. Simplify the image by removing fills and keeping outlines

The conversion fee is calculated by how many stitches it takes to create the image out of thread. The rate is $5 per 1000 stitches. The smaller the image, the less stitches it takes to create. Also, fewer blocks of solid color means less stitches required.

Keep in mind that once you convert an image at a particular size, you cannot change its size as an embroidery file.  You must convert it again if you want a different size embroidery design.  A handy tip is to convert images at the smallest size you can.  You can convert a smaller image once and use it on a greater number of products.  If you convert an image in a larger size, it will only fit on some products.  Hats, for example, have very small design areas and can only accept smaller images.


Step 4: Buy or post
Once you’re satisfied with the size and placement, you have the option to Add to cart or Post for sale. If you choose to add this product to your cart, you will see two line items in your cart…the product itself, and the conversion fee.

If you choose to post this for sale rather than purchase the product yourself, you will be presented with the normal Post for sale page first. Fill it out normally with the description, tags, title, etc. Click Continue when finished.

Now you will get a page reminding you about the conversion that is required.

This page gives details about the conversion fee as well as how long it takes to convert. You must click Continue to cart to add the conversion fee to your shopping cart.

Once it’s in your cart, simply checkout normally, and your image is sent off to be converted.


Step 5: Enjoy!
That’s it! Once the conversion is complete, you will receive an email with a link to your stitch file so you can see how it will stitch out. If you purchased the product, this is when the product begins its normal manufacturing process.

If you posted for sale, your product will appear in the marketplace when conversion is complete.


Free Text
What if you want to create an embroidered product, but don’t want to pay to convert an image? Use one of our over 100 embroidery fonts and create a text only product! No conversion required!

We have specialized monogram fonts, cool fonts, and traditional block and script fonts.

Bend it like Beckham
Another cool thing about using our built-in embroidery fonts is that you can automatically arch your text up or down, or re-orient to vertical or horizontal text, using a simple drop-down menu.

Templatizing the stitchy way
Did you know you can create templates from embroidery products? Any text object in an embroidered product can be made into a template placeholder. This is great for sports teams, family reunion shirts, etc.

For more information on how to create templates, see the post titled More than just embroidery…

More than just embroidery…

October 31, 2008

Release O’Plenty

Wow. What a release! If you haven’t noticed already, we’ve just pushed out one of the biggest releases in Zazzle history. Not only are we now doing real embroidery, but we’ve packed this release full of candy-coated goodness! Unfortunately, we’ve hit a couple performance snags, but we’re getting those resolved very quickly – keep your eye on the Zazzle Forums for updates on that front.  For a quick overview, read our main blog post entitled Embroidery AND New Features. In this post, I’m going to get into some detail on some new features of the Zazzle Design Tool.


I’m such a tool(bar)

One of the first things you might notice is the look of our toolbar. We’ve reorganized it to show more options in a familiar menu style.

There are now Select, Edit, and Align options in the toolbar. These features help you select design elements, copy and paste them, and align them relative to each other. Next time you create something, check them out!

Also, if a product contains more than one design area (front and back of a t-shirt, multiple areas of a shoe, etc.) an Area selector appears on the left. This is a quick and easy way to select the different areas of a product to design on. And the best part is that now they contain easy to understand icons.

Oops, I messed up again

One thing a lot of people do is customize an existing design. You see a cool design and want to add your name, or you want to nudge the image a bit higher. If a contributor has allowed customization, anyone can do these things.

Of course, when you start messing around with a design, you may end up with something that doesn’t quite look like you pictured it. What to do?

REVERT! Yes, now there is an option to revert any design to its original state before you started changing things. Revert is located just under the Post for Sale button.


Templates made easy

So here’s the big one. The top banana. The Big Kahuna. El Jefe. Yes, ladies and gentlecontributors, we now have an easy way to make templates! Zoinks!

“You mean we don’t have to double-click somewhere and add cryptic brackets anymore?”

Correct. There is now a template UI!

You can make a product become a template by simply defining which image(s) or text object(s) can be replaced by the buyer.

Example:
Add an image to a product. You will notice an “Advanced options” link on the image object.

Click the Advanced options link to show all advanced options.

One of the options is a checkbox labeled “Make this a template object”. Checking that box will display all the options available for defining this template image placeholder.

When you select “Make this a template object”, you have access to four options:

  1. Product page label – This is the label that the customer will see on the product page. Use something descriptive here, like “Your picture” or “Your logo”.
  2. URL parameter name – If you are using the Zazzle API to pass data to this product from an external source, this is the parameter name the API will use. Avoid spaces or special characters. You can safely ignore this field if you are not working with the API (see the Zazzle API documentation for more information).
  3. Inner fit/fill mode – For images.If your template allows the buyer to replace your placeholder image with one of her own, this setting determines how the buyer’s image replaces yours. The options are none, fit, or fill.

    none
    – If you set Inner fit/fill mode to none, the buyer’s image simply replaces your placeholder image, and may be larger or smaller than the placeholder.fit – Selecting fit will resize the buyer’s image to fit inside of your placeholder image object’s dimensions. This will ensure that their image is not cropped.

    fill
    – Selecting fill will resize their image to fill the entire dimensions of your placeholder image. If the buyer’s image is wider or taller than your placeholder, this may result in zooming and cropping of the customer’s image.
  4. Allow editing on product page – Keep this checked if you want to enable EZ Templates on your product page. Unchecking this option is usually only done when working with the Zazzle API.

Once you have filled out all the options, click Post for Sale. You are then presented with the normal Post it for Sale page. Notice the checkbox labeled “This product is a template”. This tells you that the product contains template objects, and that it will be posted for sale as a template. Only uncheck it if you decide at this point to not allow customer personalization of this product; otherwise keep it checked.
Congratulations! You have just created a template product!

Lock it up!

Sometimes, you may want to create a template product but have items that are not changeable by a customer. Now you can simply check the box labeled “Lock this image” or “Lock this text object”. This will essentially lock the item and not allow any editing of it whatsoever (can’t delete it, move it, resize it, etc.)

That’s all there is to it, folks!

Zazzle Store Builder…Zazzle products on YOUR website

September 5, 2008

 
 
On Monday, August 18th, we launched our redesigned Zazzle website. Guess what we snuck in there for ya…the Zazzle Store Builder! Yes, now it is possible to put Zazzle products on your website with just a couple of quick text edits!



How easy is this?

All you have to do is enter your gallery name and your associate ID in a configuration file…and voilà! Instant store front! But it can go way deeper than that…over 20 different configurable parameters deeper. Here’s a taste:

  • Google Analytics support
  • Product line filter
  • Product type filter
  • Keyword filter
  • Display product thumbnails in 5 different sizes
  • Sorting and pagination controls
  • Enable local caching
  • Display product titles, descriptions, prices and contributor link
  • Change the image background color

All these parameters and more can be set in a simple configuration text file. No programming required. But if you know a little CSS and HTML, you can do so much more.
 
Oh, and did I mention we are releasing this as Open Source? Yup. If you are a PHP programmer, feel free to dissect this, make it better, add features, create services…the possibilities are as open as you are!

 
Why do we need this?
Some of you may be asking “But Ed, why do we need to have an external web site when I have a perfectly good gallery on Zazzle.com?” The answer is simple. By driving your own traffic to your gallery on Zazzle, you will make more money! A potential customer that visits your Zazzle Store Builder site and clicks on a product thumbnail will be taken to that product in your gallery…with your associate referral ID tagging along for the ride! That means that anything that user buys from Zazzle during that session funnels a percentage to you. And there’s a good chance they’ll buy YOUR product since that’s how they got to Zazzle in the first place. Which means double whammy! Referral AND royalty!
 
And another cool thing is that customers who click over to your gallery from your Store Builder site will be treated to the zBar (a much smaller Zazzle header), putting YOUR brand where it matters most…right in front of the customer that YOU brought to Zazzle.

 
What are the requirements to set this up?
All you need is a web host that supports PHP, and about 10 minutes! We provide documentation (pdf: 3MB) to guide you during setup, and there is now a Tools Forum where you can ask questions or help others if you are wise in the ways of geekdom :-)

 
How does it work?
So what’s the magic behind the Zazzle Store Builder? Simple. RSS feeds. Zazzle’s new gallery RSS architecture lent us the opportunity to build a pretty robust application that gives you, the store owner, the power to design your own store front just the way you want it.

 
Ok, where can I download this?
I can go on all night about the Zazzle Store Builder. But you should really just download it and try it yourself. It’s FREE, so you have nothing to lose…and so much to gain!
 

 

Face the Typeface…or Meet FontZee!

June 30, 2008

I gotta tell you…playing around with Zazzle’s text tool is fun. There are so many cool fonts to choose from that I don’t think I’ve ever actually seen them all. I always end up finding one I like before I explore deeper.

But therein lies a problem…with so many fonts to choose from, it takes a long time to test each one out to see if it works in your design. Add to that the fact that you would find a font, select it, the font chooser would go away, your design would get updated, and THEN you make the decision whether it works or not. If it doesn’t, you start all over and open the font chooser dialog again. Phew.

Well, be weary no longer, folks! There’s a new font selector in town, and he’s kicking picas and taking names! I call him FontZee. (Hey, why not? We have Maggie the magnifier!)

Bask in FontZee’s glory:

Cool, beautiful, easy...it\'s Fontzee!

So what’s so great about it?

  • Fonts are organized better…each font category now lists how many fonts it includes
  • Select a font and see it update on your design immediately! This is the big one for me. Now I can scroll through and select a font, immediately decide whether it works, choose another one, etc.
  • Recently used fonts are now saved in the dialog
  • The font dialog actually loads a bit faster :-)

See, people? It’s the little things that make me happy!

The name FontZee is not official, nor does Zazzle promote the use of it. It is simply a product of this editor’s sick mind, and any similarity to any person, living or dead, is purely coincidental. The end.

New design tool features…

March 3, 2008

These new features are so cool, I just have to cross post here in the Tech Blog! Line things up accurately…check! Space things out evenly…check! Follow the link for details…

Please form an evenly spaced single line

To keep things on the tech topic, here’s a little CSS tip on how to center a block element inside another block element. Here’s a CSS class:

.centerme {
  margin-left: auto;
  margin-right: auto;
  width: 140px;
}

And here’s the HTML:


<div style="width: 400px">
<div class="centerme">This is text inside a DIV tag.</div>
</div>

The idea here is that we are setting the left and right margins of the parent DIV to be equal (auto), and the inner DIV, with a width of 140px, automatically gets centered. Neat.

Please form an evenly spaced single line…

March 3, 2008

One thing that has always frustrated me when designing a product on Zazzle has been the inability to place text and images precisely and accurately. For example, when adding two or more text objects, I usually want them to line up with each other. Until now, that was a manual trial and error process that usually ended up with a comment like, “Close enough!”

Well, we can now say goodbye to the eye strain, goodbye to slightly irregular designs, and goodbye to micro-mouse attempts at non-attainable perfection. Introducing the align dialog!

Align Dialog

Now, when you have multiple items selected in the design tool, you can bring up this dialog from the Edit menu and select what type of alignment you need! YAY! It is finally possible to accurately line up all your text or images!

Align left

How cool is that? What? You want more? Wow, you guys are picky. Fine. Hmmm, let’s see. What else do we have in our little bag of tricks?

How about Vertical & Horizontal Spacing!

What is that, you ask? Well, in very simple terms, it’s an algorithmic construct designed to eschew random or unequal voids in the midst of visually rendered binary objects. (duh!)

Ok, maybe it’s easier to show you an example:

Space evenly
Yes, from the Edit menu in the design tool, you can space selected objects evenly either horizontally, or vertically! Combined with the Align dialog, this gives you a great set of tools to start you on your way to precision-greatness, and save you from prematurely going bald by pulling out all of your hair. Word to your mother.

The Zazzle Facelift

September 13, 2007

Trudging Across The Tundra

Sometimes, you have to take a step back and look at where you are before you are able to move forward in any reasonable way. When you have your head down, trudging across the tundra, mile after mile, you forget to look up every so often to see if you are moving in the right direction. Well, we just looked up. And we noticed that there were many places we could optimize in our code…from CSS to HTML to JavaScript.

In this latest incarnation of the Zazzle website, there are more behind the scenes changes than there are…well, things that there are a lot of. We took the time to essentially restructure our pages for performance and scalability, by doing a few simple things: organize page elements to load in a specific order, remove huge chunks of now redundant CSS, and implement a new design that allows us to use less images and HTML.

If You Build It Right, It Will Come Faster

Our first task was to take a look at the overall structure of our pages. This includes everything from what’s in the HEAD section, to where we load in our JavaScript. The important thing to note about this is that by structuring our pages in a consistent way throughout our site, we could now make better decisions about what external files need to be loaded, and where. This also allowed us to make the decision to load most, if not all, of our JavaScript at the very bottom of every document.

So what, you ask? In our old site, we would load in a default CSS file for all pages, and if anything on that page needed special stylings, we would override them with styles from another file specific to that page. Ok, makes sense. And we still actually do that.

But the big difference is that now that the pages are structured in a consistent manner, it’s a lot easier to NOT have to do an override of an override of an override to achieve a particular look since we are only loading in the CSS files that are needed. There were many cases before where we had many CSS files loaded for a page, each performing overrides.

On top of that, the CSS itself has been optimized in many places, mostly due to the simplified HTML markup that makes up the page. Simpler markup means simpler CSS…which leads to much less code. How much less? We estimate that there is approximately 50% LESS CSS than before, and with a much cleaner user interface. Win-win baby!

Loading JavaScript at the bottom of each page also serves two purposes. One, the page HTML loads and displays to the user while downloading instead of waiting for JavaScript to download. Second, it allows us to easily “wire up” scripted elements on the page once the page is complete. The advantage there is that at this point we are certain all elements exist and the JavaScript can run unfettered.

Rounded Corners Are So 2003

There are some things HTML/CSS just doesn’t do well. Rounded corners are one of those things. Our old design used many rounded corners all over the place, which caused us to create something we called a “zBox”. What is a zBox? It’s basically a bunch of HTML and CSS that would render a box container with rounded corners. We made it so easy for us to use that whenever we needed to add a new container to our page, we’d simply call our zBox component.

The only problem was that a zBox contained a significant amount of HTML and CSS, not to mention images that needed to be loaded for the corners. It was not unheard of to have a page with half a dozen or more zBoxes.

With our redesign, we decided to simplify…not only the code, but the entire look of the site. This meant getting rid of the ubiquitous zBox. By simply replacing zBoxes with single DIV containers, we were able to remove huge amounts of markup and images, making each page that much lighter to load.

Here’s an example piece of code for a zBox:

<div class=”zBox” id=”divId”>
<div class
=”zBoxTop”>
<
div class=”zBoxTopDiv1″></div
>
<
div class=”zBoxTopDiv2″></div
>
</div
>
<
div class
=”zBoxMiddle”>
<
div class
=”zBoxContentWrapper”>
<
div class=”zBoxContent clearfix” id
=”innerDivId”>
##content##
</div
>
</
div
>
<
div class=”zBoxContentDiv1″></div
>
<
div class=”zBoxContentDiv2″></div
>
</
div
>
<
div class
=”zBoxBottom”>
<div class=”zBoxBottomDiv1″></div
>
<
div class=”zBoxBottomDiv2″></div
>
</
div
>
</
div>

And here’s that same container without using zBox:

<div class=”myClass id=”divId”>
##content##
</div>

And that’s not even including the CSS and images that are needed! So needless to say, with our new simplified design, we were able to cut tons of unneeded code from the site. It’s like Zazzle went on a diet and looks great!

Even The Skin is Low Fat

With our svelte new design and our consistent page structure, we are now able to provide room for future growth. And where do growths usually occur? Well, on the skin, of course! Yes, gross analogy aside, we will be able to offer the ability to skin parts of our site!

We already provide themes for contributors to skin their entire galleries. This helps contributors create a brand and experience tied to their art and designs. The steps we’re taking with our website technology move towards deep level customizations. Imagine being able to skin the gallery with even more control (like custom CSS!) – just like we’ve started to on Zazzle. The possibilities will be endless!

LicensePlateShirts – One Plate at a Time

September 13, 2007


When we started our LicensePlateShirts gallery on Zazzle, we actually used the Zazzle API to create an external website where customers could choose a state, then type whatever text they want to appear on that state’s license plate. They would then click over to Zazzle’s design tool with the license plate and custom text already loaded. (See http://www.license-plate-shirts.com/)

This approach works well, but contains a few drawbacks. First, there is a huge time commitment in designing and coding up a website. Even if you already have a website, you’ll need to write some code to add your products. Also, once the user lands on Zazzle, they are dealing with a single product design, and how to change to a different design (another license plate, for example) is not obvious.

Show Me the Buffet
So how do we make it easier for both contributors and customers? For contributors, we need to remove the difficult barrier of writing web code. And customers need to be able to customize an entire buffet of products at once, without jumping through hoops.

Enter project “Template Buffet”…the internal code name for this new feature. Here’s how it works:

1. A contributor creates a set of template products (see documentation)

2. The contributor creates a new gallery product line and publishes these template products in that category.

product_line.gif


3. From the Create-a-Product API page
, the contributor selects to create a category link. In three easy steps, the contributor generates a web address to this product line. (Visit LicensePlateShirt’s category link)

create_link.gif


4. Navigating to this address takes customers to a simple page that shows all the products, and allows easy customization.

buffet_grid_500.gif

buffet_dialog.gif

No programming needed by the contributor, and no back and forth by the customer to get the right design on the right product. Dinner is served.

What's in a Button name?

September 12, 2007

Overheard in a Zazzle internal email thread about new button objects. Had to share…

Annette: What's a better unambiguous name for z2 Buttons?

Ed: How about HTMLButton (since that's really all it is)

Chris: How about ButtonButton, since it uses a BUTTON tag?

Ben: How about BenButton since I'm so vain?

Annette: BenButton.GetLint()

Ben: That would return Lint.Empty :-)

Rich: if (aBenButton.GetLint() != Lint.Empty)
          throw up;

Ben:if (aBenButton.GetLint() != Lint.Empty) {
          aBenButton.NeedsToBathe = true;
          throw up;

        }

Sneak Peek…EZ Templates!

July 31, 2007

Cool and easy…that perfectly describes a new feature we would like you to check out in our latest SNEAK PEEK!. We call it “maize”…oops, sorry, we call it “EZ Templates”.

“EZ Templates? Why, that sounds like fun!”

Why yes, it is, Bobby! Here’s a scenario: You are browsing through Zazzle and find that perfect greeting card you want to get for your little sister’s birthday, if only the image on the front was a cat instead of a dog. And also, you want to add her name to the card.

Luckily, the card is a template that allows you to change these things directly from its’ product page on Zazzle! You don’t need to load up our design tool and fiddle with the overall layout anymore…all you have to do is click the “change image” button on the product page to choose your own image, and fill out a simple text field to totally personalize this card! Add it to your cart and voila! One perfect birthday card, no muss, no fuss! Plus, you get to say “voila” and sound all smart.

This feature makes it simple for customers of your products to personalize and buy on the spot, without having to use our more advanced design tool. This means more sales, and more sales means…well…you…sell more of your stuff. Yup. Stuff sellin’. That’s what it’s all about. Mmm hmm.

Just look at the screenshot below to get an idea of how it all works. Oh, and by the way, EZ stands for Eat Zucchinis. Long story.

EZ Templates

Read more and discuss this new feature in our forums!


Follow

Get every new post delivered to your Inbox.

Join 630 other followers

%d bloggers like this: