Category Archives: Working with images

Crowd-sourcing a logo with 99 designs

99designs.com is a crowdsourcing site for graphic design. Crowdsourcing means that designers across the globe compete for the winning design. In the process you receive dozens and possibly hundreds of designs. Several of our clients have been very successful securing a logo through 99designs, so we decided to try them ourselves.

You start by signing up for an account then answer questions about the style of logo you want. Visual examples as well as value scales are included. You can write a description of the logo you envision, and upload sample images. 99designs then asks you to choose the amount you want to pay. We decided to start with $299 and see how it went.

Each contest lasts 7 days. The first stage lasts 4 days or 96 hours. After receiving about 20 different logos in 24 hours, we were asked to “guarantee” the money to encourage more designers to participate. This meant we agreed to pay for at least one of the logos by the end of the contest, which definitely seemed fair.

Early samples of logo designs from 99designs.com

The designers who participated in our contest came from the east. The majority were located between Bulgaria and Malaysia. Most submissions came in during the night while we were sleeping in Vancouver.

99designs encourages you to look at completed contests and to invite designers whose work you like. This was extra effort but very worthwhile. I opened about 40 contests and looked for designs I liked. Most contests in the $299 range had an average of 20 designers per contest, with an average of 60 designs each.

When I saw a design I liked, I linked to the artist’s portfolio to see if I liked the other designs. In all, I contacted 31 designers and asked them to look at our project. About 15 people I did not contact also supplied designs. We felt I substantially increased the odds of getting a good design by inviting people, rather than leaving the contest to chance. $299 is at the low end of the scale for a logo design.

You can rate each design with one to five stars, but can chnge your ratings any time. I found this useful for organizing our favourites. You can also write the designer directly about each design, and give feedback or ask for small changes.

I had described us as a website development company in Kitsilano interested in symbols to do with computers, the ocean, mountains and/or trees. There were strong cultural differences in subject matter. Designs came in with palm trees, tropical sunsets and Caribbean-coloured oceans. Most of the mountains were very pointy, like volcanoes or the Himalayans. If I did it again, I would provide mainly visual samples instead of text.

Samples of final entries from among the 320 submitted

We were amazed and astounded by the talent of the participants. When you work with one designer, you might go through 10 or 20 variations before the designer gets fatigue. By crowdsourcing the logo, more than 25 designers were able to participate and to bounce off each other’s work. (Although this was a bit of a calamity when one of them would use the wrong colour scheme or a palm tree and others would copy it.)

At the end of 4 days, we had 198 entries from 25 designers – more than twice what we had anticipated. We chose 6 finalists (who together had created about half of the entries). We also chose 6 designs and posted voting contests on Facebook to get feedback from other people.

During the final three days, the 6 finalists continued to produce variations on their ideas. At this point the designs became quite similar. We ended up with 320 designs, and eventually chose one that had been created early in the contest. You can see the winning logo at the top of this page and a white version of it in the footer below. It was an excellent experience and I highly recommend 99designs if you’re looking for a logo.

Graphic designer or website developer?

You are planning a new website and wondering whether to use a graphic designer or a web developer. What’s the difference?

Most graphic designers have extensive knowledge and experience with print media. That is, they understand how to work with files that have large file resolutions, to align text and images in grids using desktop publishing programs, and make color separations and master pages. They can set CMYK and Pantone colour specifications for digital print production, and prepare files for traditional printing companies.

Unfortunately, the layout and design of your site depend on many factors that have nothing to do with its graphic design. Websites are created like jigsaw puzzles, not like posters. Think of them as many different pieces that are assembled in the browser via coded instructions, rather than a grid or layout program. The design needs to be planned by someone who understands how the design elements will work in the context of headers and footers, content areas and sidebars, as well as menu structures, widgets, plugins, tags, categories and scripts. Knowledge of web fonts – as opposed to typography – is also vital.

To create a website, a graphic designer needs to be familiar with optimizing files for the web, so they transfer quickly over the Internet and web pages load quickly. The content must be prepared for flexible images and fluid grids, because text and images on websites re-size according to the dimensions and orientation of each visitor’s monitor or cellphone. (You have to plan for people turning their iPad sideways, among many other considerations.)

In other words, a web design is not one single page, but multiple areas all coded separately. To be search-engine-friendly, all areas of the website need proper image titles, alt tags, css style sheets and media queries. Experienced web developers further test for differences between current browsers and older versions of browsers, including IE 7, IE 8, IE 9, Firefox and Chrome as well as Safari. They also understand (or should) how servers work and the most recent server technologies.

If you want your site to work efficiently on all devices, and for people to find it on the Internet, you need someone with the knowledge and experience of a seasoned website designer. This is not to say a graphic designer won’t succeed at getting something visible on the Internet  –  after all, anyone can make a website, just like anyone can cut your hair. But you may not reap the benefits of a site made by someone who understands how websites are interactive and configure themselves differently on different monitors and in different browsers.

There are some areas where you might use the services of a graphic designer to prepare files for your website. For example:

– Have a graphic designer create your logo. The logo will likely be used extensively in print media, so it’s best to have it created in the first place by someone who understands printing. It can easily be adapted to the web, but an image prepared for the web cannot be adapted to print media.

– For the same reason, a graphic designer could likewise prepare any elements of the website that will be used on business cards and brochures.

In addition:

– Be sure he or she understands the conventions of naming structures for Internet images, such as no spaces or symbols in the file names.

– If a graphic designer prepares images files for you on a Mac, be sure he or she understands the differences between how websites display on PCs, tablets and cell phones, in addition to how they look on Mac desktops, laptops, iPhones, iPads etc. There are profound differences in brightness and contrast.

Read more about differences in monitors and testing for different browsers

Additional reading
Understanding responsive design issues
http://www.creativebloq.com/responsive-web-design/problems-8122790

How Much Code Should Web Designers Need to Know?
http://speckyboy.com/2012/03/22/how-much-code-should-web-designers-need-to-know/

How to keep people from stealing your images

Unfortunately this is a difficult topic without a solution. Anyone can copy any image from any site if they know how. Without really disfiguring your images quite badly, there is no way to prevent them. Personally, if I want a copy of an image on the web, I have many ways of copying it, and I’m certainly not alone in my skills.

Most watermarks only cover a small part of the picture. People can still see the image perfectly and copy it if they want. A little photoshopping can easily remove most traces of a watermark – often it is only a line of text along the top or bottom. A larger watermark that disfigures the images looks unprofessional and amateur. And people can still copy the idea.

You can add a “right-click disabled” to your images, but thieves can easily do a screenshot then cut the image out. They would have the same image as they would if they copied it in the first place. There is no way to disable a screenshot.

On the plus side, there isn’t much anyone can do with a copied image. The resolution of a web image is only 72 pixels an inch, while print resolution is 300 pixels an inch. This means that printed pictures are four times more detailed than web images (they have four times the resolution). Images from the web cannot be used for reproductions such as prints or postcards (they will be useless and fuzzy), unless the image size on the web is extremely large.

Example: A 600-pixel wide image produces an 8 inch print, but the lower resolution of only 72 pixels/inch will make the image unsuitable for most printing purposes. If it was converted to 300 pixels per inch, the image would be only about 2 inches big.

Unfortunately people with blogs are not usually in the habit of re-sizing their images before they upload them. I see a lot of WordPress sites with direct click-throughs from small images to large, full screen beauties that could easily be converted to 300 pixels per inch. These are prime targets for image stealing.

If you’re a blogger and you’re in the habit of uploading photos without re-sizing them, be aware that you’re making them available for people to copy and re-use in printed materials. If you don’t want this to happen, you need to pre-size any pictures you put online to a much smaller size (for example, 600 pixels wide). This is the most effective thing you can do to protect your images.

There are a couple of ways you can find out if someone has already copied one of your pictures. Use the Google tool as described on http://www.kitsmedia.ca/galleries/find-out-if-your-image-has-been-copied/

Or try linking to www.tineye.com and follow the directions. I personally haven’t  found either of these tools work very well for slightly modified images, but if someone has copied your image intact, it will show duplicates.

If you find that your image has been copied, you should first attempt to contact the site owner. You can also contact the host of the site and let them know about the copyright infringement. If you’re an artist represented by a gallery, have the gallery owner contact the thief.

It definitely helps to have a digital copyright (this is information about the image that is “hidden” in the code) in the case of disputes. However, in most cases direct contact by email or phone with the site owner or website developer will result in the copied image being removed.

Website developers usually add a link to their own company in either the footer or the source code. Since web developers are equally liable if a site uses a copyrighted image without permission, the developer is more likely to remove it or bring it to the attention of the site owner.

Otherwise you must be prepared to invest a great deal of time, money and energy following through. And if it’s the ”idea” you don’t want anyone to copy, it’s best not to show your work anywhere at any time, because there will always be someone who will copy your style, composition, colours, brushwork, themes or ideas.

It is very disheartening when this happens. When I was a painter, I frequently saw copies of my work. Once I walked into Malaspina College and saw a large, perfect duplicate of one of my paintings hanging in a graduate show. It had been used on a Bau-Xi exhibit invitation and I later saw it copied on two other occasions. A couple of years ago I put some small, decorative canvasses for sale on Etsy. Within only 48 hours, exact duplicates of my paintings were reproduced verbatim by another artist, right to the last detail. The only recourse offered by Etsy was to contact a lawyer. 

For many, many years I have had the same thing happen to my writing, especially my reviews of gallery shows. My art writing is frequently copied intact and used by artists on their websites as their own statements. My reviews for Preview Magazine have even been returned to me as “press releases” from galleries for their subsequent shows. Strangely, artists and galleries are usually offended when I contact them.

Either there are a lot of otherwise intelligent people who really believe that images and writing found on the Web are up for grabs, or they just don’t care.

Note: If you’re wondering whether your writing has been copied, try Copyscape, Plagiarism Checker or the plagiarism checker at Small SEO Tools.

Preparing and sending images by email

Unlike Facebook, where you can upload 10 MB files straight off your camera, attaching and sending images by email requires a little extra image preparation. This is a basic skill that’s good to have, whether you’re an artist working with a gallery or sending holiday pictures to friends.

Image files have to be sent by email in the right size and format. Often a publication or gallery will ask for two sets of images – one set as low-resolution jpgs for review, and the other as high resolution TIFs or TIFFs for printing. In both cases, the images should be prepared properly. It’s not at all difficult to learn – you just need to know where the tools are located. There are also differences in the way images attach in PC and Mac mail programs. It’s important for people to receive them properly or they may have trouble opening them.

Preparing image files for email
To create a jpg that will fly through the mail, open the original image in Photoshop and make it a decent size file first. Do this by opening Image/Image size, set the resolution to 72 first, then set the width or height to 800 pixels (one or the other, not both). The resulting image will display nice and large on most monitors, but it won’t be too large to fit the screen.

Next, under File click on Save for Web and devices instead of using “Save”. In the top right of the window which opens, set the quality to 80. Be sure the image type (also at the top right) is set to JPG. Then save the image to a folder and prepare the next one.

If you’re asked to send a TIFF, try to find out if the TIFF will be used on a Mac or PC. There is a difference in the file structure. Do not re-size the image unless you’ve been given instructions.

If you are asked to send 300 dpi CKMY TIFFs, here’s how to set the resolution and colour before saving the image. Open Image/Image size first and set the resolution to 300. To convert the images to CMYK for printing, open Image/Mode and select CMYK.

To save a TIFF, use File/Save As…  A window will open where you can type a simple file name (no spaces, no symbols). Also choose TIFF as the Format (at the bottom of the drop-down list). You should probably give the image a new file name so it won’t replace your original copy. On the following screen, choose either IBM PC or MacIntosh for “byte order”. Tip: you can always save it as one, then go back and save it as the other if you’re not sure which version is required. The PC version has a .tif file extension and the Mac version a .tiff file extension so you can tell them apart by the single or double “f”.

Attaching images to an email
Most PC programs make this pretty easy. Just start a new email, type in a recipient and subject, maybe write a line or two in the body. Then use the paperclip symbol or the word “ATTACH” to browse and attach your images.

If you work on a Mac, you’ve probably been told that PCs tend to display Mac image attachments in the body of the email instead of showing as attachments. This can be quite annoying to the PC (Windows) user. It happens because a lot of PC mail clients automatically convert HTML/Rich Text image attachments into inline images.

PC users have found ways around this dilemma although none of them are very satisfactory. In some cases, if a PC user right-clicks the image in the email body, they can save it to a folder in its original file format. In other cases, they will only get a crummy bitmap version of it. A third option is for the PC user to do a screenshot then cut out the image; however this is problematic for images which are huge and don’t entirely show on the screen.

The solution for Mac users is to switch to “plain text” email before attaching images. Find “plain text” under Preferences/Composing. You will not be able to use your graphic signature in plain text mode, but your pictures will be sent properly — as attachments — instead of being embedded in the email. Again, do not include any image signatures or your mail will be converted back to HTML and the images will embed themselves in the email.

Best wishes for your new skill set! You are welcome to email or comment for more information.