Wednesday, September 29, 2010

TIP : File Formats for Web Graphics

Sometimes I find a beautiful site with only one problem- the designer chose the wrong image format. It's another one of those ridiculous things that can make me crazy... but they aren't doing it on purpose... right? I thought I would put the subject to someone who understands the math/programming side of it better, Patrick. Here's what he has to say about JPEGs, GIFs, and PNGs with a couple of visual aids – alison


Early on in the web, programmers and designers wanted to start using photos and other images for web content. However - these files were big and typical connections were slow, and compromises had to be made. Programmers and mathematicians have been working on these problems for years, and the result is a field known as image compression. In short, some data is thrown out, the file size shrinks, and web browser guesses at what used to be there. These are typically referred to as "lossy formats" because some of the original data is lost, and it's gone forever. Once the data is gone, you can't get it back. There are no magic tricks in existence that can make a blurry thumbnail look as clear as a professional photo. This all sounds bad, but luckily the lossy formats such as JPEG, GIF, and PNG were each designed to cause the least noticeable distortion for their specific purpose.


(Keep in mind that data will be lost when working in these formats. When you are working on master images or on images for print, you should use lossless formats such as TIFF, PSD, .AI, or .EPS that keep every pixel of the original file there.)


Here are some examples of the same images - compressed 4 different ways.

Click on the image below for an HTML page of examples.



JPEG files were originally intended as a way to cram photos into smaller file sizes. They're good for images with a lot of varying details, and a wide range of colors. However - this is all based on math designed to approximate everything and keep throwing out more details until the file is small enough. Quality is based on a sliding scale in applications such as Adobe Photoshop, and the farther you pull the slider towards a "small file" - the less accurate the color, and the blurrier the image.

Good for:
• Smallest size for photos
• Small file size for large-dimensioned files

Problems:
• Color Inaccuracy - Colors change slightly when files are saved. If you are trying to use the exact same color in two areas or in two different files - there's a likely chance they will not match. It will also be nearly impossible to match the JPEG’s background to an HTML background color, so the edges of the JPEG rectangle will show.
• Block Artifacts- Another interesting distortion that's common in JPEGs is the appearance of squares. The math is based on splitting the whole scene up into smaller squares, so as the file is more compressed, the squares appear as distortion in the picture. This is especially noticeable on vector based graphics like logos, or anything with a solid contrasting background color.
• Generational loss - Each time a JPEG is modified and saved - it gets blurrier. The result is very similar to repeated generations of copies on an old copier.



PNG uses math to find patterns in images to reduce the file size. The file will recognize large areas of solid color and other patterns to compress them toa smaller file size. You can also mark a background color as "transparent", where the background of a web page will show through.
When saving a PNG file, you can choose the number of colors used, and a best fit will be found. The more color variation, the less accurate the colors will be. At this point dithering is used. Dithering is when pixels are alternated between two or more colors to approximate another color in between them. (Inkjet printers rely on dithering to get the appearance of all the colors in a photo out of a simple 3 to 5 color ink cartridge, so if you look under a magnifier, you can see some of the alternating colors. )

Good for:
• Solid shapes - edges are more accurate and sharper than with JPEG
• Illustrations & detailed drawings - thin lines and other details remain sharp
• Color matching - if you have several images such as company logos and borders that need consistently matching colors - PNG is the right choice

Problems:
• Once a certain amount of color variation is reached - JPEG will make smaller files
• PNG is not well supported on older photo editing packages such as Adobe Photoshop (pre CS3), so consider GIF instead.
• Some older versions of Internet Explorer from before 2005 do not work well with PNG



GIF is very similar to PNG, but is an older format with some minor differences. It can only use between 2-256 colors, not a full spectrum (PNG can). In general, it works well with older software packages where PNG is not fully supported. GIF can also be used for low quality, looped, animations. The animations are just a sequence of images with no sound, which can be created by Photoshop, Adobe Flash, and video editing programs. However, they can be useful for simple tasks, like animated advertisements and don't require plugins such as Adobe Flash.

Good for:
• Solid shapes - edges are more accurate and sharper than a JPEG
• Illustrations & detailed drawings - thin lines and other details are not blurred out
• Color matching - if you have several images such as company logos, backgrounds, and borders that need consistently matching colors - GIF/PNG are the right choice
• Higher compatibility with older graphics applications and web browsers than PNG

Problems:
• 256 color limit (not typically good for photos)
• PNG makes smaller files in most cases



In conclusion, web graphics have a lot of complexities behind them. However, in most cases, using a PNG is the right thing to use today for everything except photos. JPEGs were designed specifically for photos, and remain the best solution for photos today.

If you would like to research the topic further - Lynda (of lynda.com) wrote Designing Web Graphics, one of the earliest books on the subject. Most of what she covers there is still relevant today, and she has some excellent tricks to get the best quality out of your graphics.

QUESTION : looking to buy an embosser

We are looking to get an embosser, with which we would be doing some debossing. Does Anyone know of a good place to get one? We would be using it on some 100lb cover, and with that would we need to buy a heavy duty one? Are there different kind of plates? Seem like metal would be nice, but not sure. We have limited experience with these so any help would be great! Thanks!

Sunday, September 26, 2010

Screenprinting Results!

Remember when I asked for your help with some screenprint designs? Well, I've finally finished this project and thought I'd share with you my results!



I'm really happy with these new scarves. I have these few now available in my shop and will have more for sale at Tender Loving Empire, a retail store in Portland.

Monday, September 20, 2010

QUESTION : How to send updated posts to RSS feeds

Well, I've hit a snag on the blog. Most likely many of the posts will have updates, and when I update them they do not show up in the RSS feed readers again (like google reader.) This means if you are using a reader to view the site, you might miss great additions like Rachel's.

• Right now I have a manual list of updates in the top gadget on the page, but you can only see it if you visit the page.

• I've played with the idea of using a twitter feed to show updates, but I'm not sure I like the way html links show up.

• What about facebook? Do enough people look at it to notice if I post updates? Is it annoying to have a personal facebook account and a business account? What are your experiences?

Does anyone have suggestions?

CRAFT CLUBBING : Quite a Fashionable Animal

Because we don't all have the time, right group of local friends, or social skills to be in a real craft club, I thought I'd start one right here. Email your submissions to adventures@andsothere.com. Don't forget to have fun! That's the point, right?


I am going to admit that I love animals in clothes, whether they're drawn, animated, or real-life adorable. I don't know why, but I do. They inspire me to be whimsical.

Thus the subject of our first craft club meeting - "Quite a Fashionable Animal." Doodle, paint, photoshop, knit, draw, and collage your heart out. Send an image of your creation to me at adventures@andsothere.com (max size 1000px).

------------------------------------------------------------------------------------
It's going to be pretty embarrassing if I'm the only one who shows up.

Caterine of Aragon - alisonml

Ninja Parrot - alisonml

Rachel brought props to the club.

another welcome!

Today we have some more great additions! Everybody welcome Jacqui and Scott of Slide Sideways, and some guy named Patrick (my husband, and technical resource.)


Scott and Jacqui Scoggin
Scott and Jacqui like to think of themselves as all around makers of cool stuff. They started Slide Sideways, a handmade and graphic design business, in 2008, mostly as an outlet for complete creative freedom. Typically they spend their days at the screen printing press and sewing machine busying themselves by making tea towels, posters, sketchbooks, zip pouches, and more for their shop.

They currently reside in Tacoma, WA, living a simple life and staying happy by drawing, picture taking, food making, bike riding, thrifting/estate saling, playing, watching movies, day dreaming and just all around creating and making stuff.

email: wearesliding@gmail.com



Patrick Lang
Patrick learned how to destroy and build things with electronics and other crafts at an early age by taking everything apart and putting it back together. Growing up, he also spent years in Boy Scouts learning the art of the kludge, how to survive outdoors, and plenty of other skills.

Today he lives near Seattle with his lovely wife, Alison, and work as a software developer. At night, he obsesses over coffee, computers, music, building, and fixing things around the house.







I know that Patrick has a tip article in the making about file types (jpg vs. gif vs. png), and I can only guess at what great things Jacqui and Scott are working on.

This is getting good.

(PS- Like I always say, if you have a question, problem, great resource, or project you'd like to share, send it to me at adventures@andsothere.com. If you would like to become a regular contributor, let me know, and I will send you a questionnaire right away!)

Sunday, September 19, 2010

Resource: Granny Squares


One of my goals this summer was to learn how to crochet granny squares so I could work on them during the colder months. As a complete beginner to the world of crochet, I find that it is easier to learn by watching others rather than staring at confusing diagrams, and thanks to this video by Mikeyssmail on YouTube, I was able to pick up the process rather quickly. In fact, his entire channel is dedicated to a wide scope of useful crochet how-to's.

Do you know of any other great online resources for granny square information or inspiration? If so, leave a comment below.

Happy crocheting!

Wednesday, September 15, 2010

welcome Kat!

We have another great contributor signing up-
Everyone say hi to Kat! I can wait to see what she's up to.


Kat Duke
When Kat was growing up in Texas, her family spent every school holiday making something. In fact, crafts and creating took up all the time that books didn’t.

Now in Seattle, she's a crocheter, knitter, photographer, singer/songwriter, occasional (and optimistic) artist, and general crafter. She has been refinishing tins, crocheting interesting creatures, perfecting patterns for knit and crocheted hats, and trying to figure out what to make for guy friends for the holidays.

email - kathebeth@gmail.com



(Oh, and in case the fancy animal isn't up your alley, check out the napkin challenge at Doodlers Anonymous.)

Thursday, September 9, 2010

RESOURCE : Briar Press for Letterpress and Vector Images

So I'll admit, I'm a letterpress junkie. Briar Press is where I get my stuff.

It's full of all kinds of letterpress info, discussions, and advice. There are even classifieds.

However, what the rest of you should know is there are people who take old ornaments and vectorize them for free and for sale. What this means is there are a bunch of files there that can be blown up without losing detail. Many are free for your personal (read: crafty) use as long as you log in (a painless process with no spam.)

Give it a try.

Friday, September 3, 2010

QUESTION: Vintage Filters



Do you know a good how-to/resource on the trendy vintage filters people are using lately in their photographs? I have some new jewelry that use vintage beads and charms and want to experiment with some different ways to photograph them.

Wednesday, September 1, 2010

Technology Question: Reviving a broken laptop

So I recently bought a brand new Macbook and it works great and I love it. This post/question is for my boyfriend, who has a 4-5 year old Macbook Pro that has been pretty abused being hauled across the country. The keyboard no longer works (he plugs in a normal keyboard to work off of) and recently he tore the battery clean out as it stopped working and only uses it when plugged into a power source. Anyway... despite all that it was still usable up until a few days ago. Now when you turn it on, it gets stuck starting up (it never makes it past the grey screen with the apple logo and a loading wheel). Is there no hope for getting it to turn on completely?

If it is completely broken, is there a way to turn it's hard drive into an external hard drive? Or is there a way to get what he needs off of the hard drive?

Help!