Etsy for Everyone

Pimp your Facebook

Falls Ihr den Artikel auf Deutsch haben möchtet, bitte Bescheid sagen! Dann mache ich mich die Tage da noch dran. :)

Assuming that many of you already have a Facebook fan page for your business, I thought it was time to show you how to pimp that page - standing out from the crowd has never been easier!

I am assuming you have some knowledge of handling a graphics program. Check out my Facebook page to see what I did.

Basically, it is an image with a so-called image map, where different links are placed on areas of the image. It sounds more difficult than it is, though. :) The image may look a tad lost on the wide Facebook layout, but FB will soon (August 23rd) limit the width of these pages to 520px, so that is the widest your image can be.

Make your image

Use whatever graphics program you like. I usually work with Fireworks, a free alternative is GIMP. I would probably try and base your image on your banner or website. The image should be max 520px wide. Decide which areas you want to link to from that one image, and incorporate that.

In my case, I link to separate pages on my blog for the Disclaimer and About Me, to the My Etsy tab here on Etsy, to my Etsy, my blog, and my Twitter. So, it really works like a website on Facebook!

Trick for getting the typeface nice and crisp, although it is an image - write the text in Word, take a screenshot and paste that text into your image.

Add the image maps

To easily add which area of the image has which link, without an HTML editor, use Image-Maps. The site is awesome. Click on "browse" to select your background image from your computer, then click "Start mapping your image", the continue to next step.

Click on "Rectangle" on the right side. A rectangle pops up in the upper left corner; click and drag in the middle of that rectangle to move it the part of the image where you want start adding links.

 

Don't forget to click Save after you have adjusted the rectangle size, and added the link and possibly Alt text (the text that appears when you hover above a link.)

Continue doing that for the rest of your image. Once you are done, click "Get your code". Choose CSS Code from the tabs on top, then copy the whole code and paste it into Wordpad or Notepad - easier to adjust.

Upload image

The image needs to be uploaded somewhere, for example to your website hosting or Photobucket. You need to get the address of the image, so you can use that when adjusting the image map code.

Change code

In the code that you just pasted to Notepad, find the part at the beginning that says (for example) background:url(http://www.image-maps.com/uploaded_files/8201007151122591_fbcontent.jpg); - Take your own web address to your image and replace the bold part with that web address. 

For every link, there is one part of the code that says {background:black; border:1px dashed white; etc - unless you want a dashed line to appear for every rectangle box, change the border to 0px for each over the links.

Install Static FBML

FMBL stands for Facebook Mark-up Language, and basically works like HTML. They have an app that allows you to design a Facebook page with web coding. Go to Static FBML on Facebook and click "Add to my page" on the right side underneath the logo; if you have more than one page, you will need to choose which page to add FBML to.

Edit FBML

Go to your fanpage. Click on "Edit Page" on the left side, underneath your profile picture. Click on "Edit" for the Static FBML application.

The Box Title will be the title displayed on the tab. Copy the changed code from your Notepad and paste it in the large field. Save.

Frontpage

You now should have a tab with your new, good looking page - now all we have to do is make sure that people accessing your page see this pretty baby first.

Go to "Edit Page" again, then click "edit" for the Wall Settings. Select your new page from the dropdown menu... and you are done!

Free Etsy banners

Many, many Etsy sellers have difficulty when creating their own banner, which is why many sellers offer professional banner design. But - I do realize that this might not be worth it if you are just starting out.

The easiest way to make a banner is probably with Powerpoint, since almost everyone has that software. Scarlettcat has posted a great tutorial on the forums.

I've taken the liberty of coming up with some easy designs, incorporated them in Powerpoint and added them to my website. More can be found here. Only rule: Do not use these for banners that you sell, but only for your own shop.

You will find the designs below (all with prepared text fields); this is how you can use them.

1) Right-click in the one you like and select "Save target as..."
2) Save the Powerpoint file to your computer
3) Open with Powerpoint - add your company name & change the font
4) If you want to add a product, go to Insert-> Picture from file
5) When adding a picture, be sure to choose a design that allows for that
6) When you are done, go to "Save as...", then select GIF from the dropdown menu
7) Go to Your Etsy, Shop Appearance, and upload the new banner from your computer

 

Sometimes, you need change

What worked 6 months ago might not work today. You have evolved, your products have evolved, and in many respects, your competition has gotten better as well.

It is always wise to take a long hard look at your shop from time to time, and see if it is time for major overhaul.

In my case, I had already started with changing my banner around after my 6-month hiatus. But somehow, my original critters on a stark white background didn't do it for me, anymore.

So what did I do? Add a line of text to each and every one of my new critters. I am hoping to make them pop more in search results, and really give more of a feel for the inherent cuteness in each and every one of them.

Will it work? Time will tell. Most specifically, sales and treasuries will tell.

For now, I am liking it. Next big overhaul: the website.

Banner backgrounds

I figured it was time for some new banner templates. Only rule: Do not use these for banners that you sell, but only for your own shop.

To use the design, just click on the image to have it open in full size, then right-click and say "save as". Once the image is on your computer, you can easily open it in free software (even MS Paint) to add your shop name and other text.

Let me know if you have any difficulties?

New banner templates (Powerpoint)

I have added some more Powerpoint banner templates, all prepared for Etsy... All you need to do is change the name and tag line, some templates can even take a product image.

1) Right-click on the one you like and select "Save target as..." (or just open it)
2) Save the Powerpoint file to your computer
3) Open with Powerpoint - add your company name & change the font
4) If you want to add a product, go to Insert-> Picture from file
5) When adding a picture, be sure to choose a design that allows for that
6) When you are done, go to "Save as...", then select JPG or GIF from the dropdown menu
7) Go to Your Etsy, Shop Appearance, and upload the new banner from your computer

You can find all templates here, these are the new ones:

 

 

 

 

How to get the most out of MOO

What, you haven't heard of Moo cards yet? Almost impossible... they are awesome. Pricey, but awesome. Here's the deal:

What are Moo cards
Moo cards are business cards sliced in half (vertically) with your own image or design on one side, and text (name, address, domain, Etsy shop, e-mail, whatever) on the other. And the best part - you can choose up to 100 different designs.

They are more expensive than regular cards (100 cost app. 19€/ $27), but remember - they are a lot less likely to be thrown away, so they are worth every cent, in my opinion.

Where do I use them
I always carry some on me, in case I meet someone who is interested. Plus, I include 1-2 cards in every order. And - I have actually just mailed a bunch to a fellow Etsian (Panjo) to include in her orders, I will do the same for her - our products fit each other, we thought.

More stuff to do with them
I have just come up with a brilliant addition - I have ordered tiny earth magnets to glue onto the text side. That way, people can use the image as a magnet and one of my critters greets them every time they look at their fridge.

You can use them as tags, bookmarks, magnets - Moo has some more suggestions.

My initial mistakes
Now I got really excited about just uploading your own images when I ordered my first batch - and it would have paid off to prepare a tad better. Here are my mistakes:

• German tag line and phone number
• Busy photos (with background)
• A little dull outcome due to matte finish

Had I been prepared, I would have thought long and hard about the text. And I have since started extracting my images, which look a lot better on the Moo cards as well. And I would have increased the brightness and contrast, to counter some of the dulling that occurs through the matte finish (which gives them a really nice, silky feel, though.)

My second order
When re-ordering, I was prepared - and I downloaded their template beforehand. They have a prepared Photoshop file (or JPG for any other graphic program) that has the correct resolution (300dpi) and indicates the safe area (where they will never cut) and the bleed (where they will certainly cut.)

Now all I had to do was take that file and start adding my own extracted images and my domain name on the back - much better than a simple, busy image. I made sure that my images are a tad too bright, so that they will not dull that much with the finishing.

I am currently working on creating memorable Moo cards for another Etsian who also got her banner through me - it's an extra investment, but well worth the trouble if you really want to get the best out of your Moo cards.

Here are all my new card images:

Fireworks 101

Like I said, I gave up on Photoshop - but I'm good with Macromedia Fireworks. Here's how I extract my own critters. Please note that the menu names might be slightly different, since I am working with a German version... but you'll get the point.

This is how my photo looked first, next to it is the end result:

All I actually did was extract the monkey, added a tad sharpness, and then adjusted the lightness and contrast.

Finding the edges
Some programs have a so-called "magic wand". I never use that one, because it will only get you ugly edges. When I want to extract something from the background, I work with the pen tool

Every time you click on a spot, you start a new edge for a vector form. It takes some time, but it doesn't have to be perfect, because we need to do some more anyways. Here's the first vector form:

Each of the blue blocks indicates where I clicked with my little quill. It's still very rough, but we'll work on that.

Smoothing
With the vector selected, I go to Modify -> Change path -> Simplify. I usually stick with 4 for the simplification, but you can try different settings.

Adjusting the vector
The vector still needs to be adjusted, because it isn't quite covering the edges yet - this is easiest done without fill and a 2px line. When smoothing, you automatically added those little handles that curve the vector. To adjust the curving, hold Alt while clicking on the end point and moving it.
Play around with this, it is actually really easy once you get used to it.

Extracting the image
Once you are happy with the vector, go to Modify -> Convert path to selection mask. You can then cut out the image and paste it again. It is now separate from the background, which you can hide or delete. If the canvas is white, you are almost done.

Sharpen it
Is it a tad blurry? Then you can sharpen it with the filter window in the right corner. Sharpen some or more, depending on the size of your image.

Adjust highlight/ color
Usually, it is also helpful to adjust the lightness and contrast. Again, this is done through the Filter option -> Adjust color. Play around with it till the image looks like it does in real life.

Drop shadow
I usually add a shadow (again through the Filter) if I have a light image on a white background.

Photoshop 101

Okay, here it goes - I'm giving up on the Photoshop tutorial. I haven't worked with it in ages (I'm a Fireworks girl, myself) and my computer is too slow.

But!

In order to extract a background, there are different ways to do it - and they are all mentioned right here. So, use that awesome tutorial to play around with it?

I know that I usually used the Extract filter if the images were clear (i.e. with a lightbox), and added a vector mask when they weren't.

Gimp is still coming, as is Fireworks - my own playground.

________________________________________

Susan - looks like they moved the site. I have updated the link according to their new site. Hope this helps!

The avatar dilemma

An avatar is the small picture (75px by 75px) that is displayed in your profile and whenever you are posting in the forums. If you change your avatar, the picture will change in all of your past posts as well.

So the avatar is your signature, so to speak - people will remember you by your avatar, and if it looks interesting enough, people are also more likely to click on it to have a look around your shop.

There has always been a hot discussion on what a good avatar is - but here are your basic choices:

Picture of yourself
It's nice to see the face behind the art, so to speak. If you choose a picture of yourself, make sure it is clear, looks good and doesn't change too often.

Picture of a signature product
Even if the product is not for sale anymore - having a great looking product that sums up your shop in just a couple of pixels is great advertisement.

Picture of a product for sale
One of the first items I sold was my avatar. It's a great form of advertising, but since that product changes frequently, it might not be as recognizable as one steady signature product.

Changing, but recognizable avatars
See those pictures? That's Blossom, my spokesmonkey. She will change avatars frequently, indicating when she is asleep or celebrating certain holidays. Other people choose a certain style of photography, announce when they are taking a vacation or having a sale.

Labels: Shop advice

Banner design (Powerpoint)

Many, many Etsy sellers have difficulty when creating their own banner, which is why many sellers (me included) offer professional banner design. But - I do realize that this might not be worth it if you are just starting out.

The easiest way to make a banner is probably with Powerpoint, since almost everyone has that software. Scarlettcat has posted a great tutorial on the forums.

I've taken the liberty of coming up with some easy designs, incorporated them in Powerpoint and added them to my website. They will be slightly blurry and nowhere close to what I usually do, but that's Powerpoint - but they do look good enough to get started.

You will find the designs below (all with prepared text fields); this is how you can use them.

1) Right-click in the one you like and select "Save target as..."
2) Save the Powerpoint file to your computer
3) Open with Powerpoint - add your company name & change the font
4) If you want to add a product, go to Insert-> Picture from file
5) When adding a picture, be sure to choose a design that allows for that
6) When you are done, go to "Save as...", then select GIF from the dropdown menu
7) Go to Your Etsy, Shop Appearance, and upload the new banner from your computer