Review: AddThis

This widget has been around since September 2006. As a reluctant user of third party services, this is the first time I have implemented it on any site. However it was becoming increasingly difficult to ignore what is now the standard button for bookmarking and sharing. AddThis provides a simple service for bookmarking or sharing website content, provides some great statistics, and is free - how can you argue with that?

Signing up

From the outset everything is very easy. The sign up process is quick, and in less that 2mins had my code ready for insertion into my blog. Dead simple.

Reporting

There’s a nice simple interface and you can see how many people have bookmarked your pages, or emailed to a friend. It doesn’t offer depth of analysis, but this app is not intended to fill the role of analytics software, however it can complement it.

Customisation

Although I have not yet tried, I am told I Can customise the following:

• Button Image and Link
• Branding - provide company specific logo
• Language - localise menu language
• Service Options - change the order and inclusion of bookmarking/sharing services

Feature set

43 different social bookmarking/sharing options
Free service
Customisation available
Reporting interface

Limited statistics
Records clicks on bookmarking links, but not follow-though i.e. inaccurate statistics
shows dropdown on rollover (not click), which is unexpected behaviour

Competitors

The biggest competitor is Share This a similar product but with less market share. There are different views as to which provides a better service. Having had a brief look at both websites I believe Share This is less straightforward to implement but provides a greater range of services. David Tan has written an article on why he chose AddThis over Share This. However Vlad Zablotskyy of ‘Go Beyond’ has written a similar article expressing the opposite opinion.

Is it a bug? Testing your site for IE 8

I have spent many hours pouring over a page in Internet Explorer (6 and 7) trying to work out where that extra padding comes from. Now I have another tool in my arsenal to work out if the problem lies with me, or if it’s just a bug.

The Windows Internet Explorer Testing Center produced in “conjunction with the Beta 2 release of Internet Explorer 8” provides a series of CSS cases that can be used to assess how well a browser conforms to CSS 2.1 standards. This is more useful than the Acid 3 test because it provides a way for developers to test their code rather than, what the acid test is, a yard stick for browser makers.

The site structure of the testing centre is particularly unfriendly, but if you know where to find it, the information is there. Take, for example div centering using auto margins.

The following test should display as one div with a thick blue border. This is produced by three divs. One empty div with an id of “reference” has a red border and is positioned absolutely. However this is overladen by two other divs (ids 1 and 2) which sit within each-other. To pass this test no red should be visible.

Firefox displays as it should:

However IE 6 and 7 have an awful time:

Instead of using the auto margin to centre the second div inside the first it add additional margin so the first div fills the whole screen

Strangely within this website the CSS cases are sorted by chapter and start at chapter 4. As they are not labeled this is what the cover (roughly):

• Chapter 4: How browsers treat malformed code
• Chapter 5: Selectors
• Chapter 6: HTML attributes and CSS specificity
• Chapter 7: media targeting
• Chapter 8: Box model (borders, padding, margins)
• Chapter 9: Positioning
• Chapter 10: height / width
• (no chapter 11)
• Chapter 12: Generated content and lists
• (no chapter 13)
• Chapter 14: Backgrounds
• Chapter 15: Fonts
• Chapter 16: Text
• Chapter 17: Tables
• Chapter 18: User interface

N.B. After further research this order follows the chapters in the CSS 2.1 specification. There is Some method to this madness. However should we read into the fact that chapters 11 (visual effects) and 13 (print/paged media) have been omitted? Will IE8 at least support the CSS 2 standards?

This site wasn’t intended to highlight bugs in previous versions of Internet Explorer, but instead to demonstrate how IE8 now conforms to the standards. However it does a great job of the former, showing just how far the browser has come (but from such small beginnings).

IE8 may be finally catching up to the standard, but it looks like they’re still a long way behind providing support for the standards of the future. Apart from perhaps some selectors there is no talk of support for CSS 3.  At least in the meantime we have in this site a tool to stop us hitting out head against the brick wall of IE. Thanks guys!

Can’t wait for my .net subscription to arrive!

I've been a subscriber to .Net magazine in the past and have found it a great resource. That’s why I’m so excited about renewing my subscription and about their latest offer.

At the moment .Net are offering a discount (42%) along with a USB stick containing pdfs of 30 back issues. I think this is a great idea, and a cost-effective one.

But is there a market for web design magazines?

Yes!
Whilst most of my research and learning still happens online, it’s been great for widening my field of view, and let’s face it, there’s something very appealing about printed material that the web can never quite capture. My first love-affair was with paper and scissors, not the screen.

However with 30 back issues on pdf, I don’t even have to choose between these two mediums. I can have both!

I guess I’ll go wait by my letterbox…

Promote your blog: technique 3

This obscure reference is not about adding any dynamic code to your blog, as the nerdier amongst you might think. That is a discussion for another post, one that, as yet, I am not qualified to write. Instead, as I have focussed on more direct and intimate ways of driving traffic and subscriptions in earlier posts, I did not want to ignore the large-scale methods. We are of course speaking of the world wide web.

As well as bringing individuals’ attention to your blog you also need to be able to say “hello” to the world. With a new blog, you may have few inbound links, and be poorly indexed by search engines. So who’s going to know that you just posted a ground-breaking discussion on the advantages or firefox 3 or how the mac/PC divide is actually a wider metaphor for the split within the human soul? All this brilliant discourse will be lost, unless…

You can tell people it’s there. The most common way to alert user to a new post in your blog is to use a pinging server.

Ping Servers

In the blogosphere pings are notifications sent by updated blogs to ping servers. So if you can tell these servers you have added new content, this can then be pushed out to the wider web. Unfortunately many ping servers are proprietary so you will need to alert multiple servers to cover as much ground as possible. Ping-o-matic, BlogFlux Pinger and some other sites provide multiple pinging services to do this for you.

If this all seesm to complex for you, don’t worry. In the blogosphere pinging is so common that many popular platforms have this service automated for you.

“WordPress automatically notifies popular Update Services that you’ve updated your blog by sending a XML-RPC ping each time you create or update a post. In turn, Update Services process the ping and updates their proprietary indices with your update. Now people browsing sites like Technorati or Sphere can find your most recent posts!”
(from http://codex.wordpress.org/Update_Services on 19th July 3:32)

Expression Engine allows you to ping its servers (for paid accounts) or you can add you own list, which you will need to do manually. Movable Type also provides a similar service. If you don’t know where to begin there are many places which provide a list of suggested servers, such as the list supplied by Elliott Back, or you may just want to target a service like Ping-o-matic and allow it do do the hard work for you.

Blog Directories

The next service you will want to employ to get make your blog known is blog directories or blog aggregators. Whilst pinging a server may be enough to make these sites aware of your content you can always add your blog manually, and this way you can include a description and keywords with your submission. Master New Media has a great list of these sites Many such as Technoarti also have methods of ranking blog for relevance and quality. Technorati calls this its authority rating, and is based on the number of inbound links to a blog. Very useful when comparing your own blog to other blogs which cover similar topics.

So go out there, tell the world what you’re up to!

New Blog on the block

From July 1- August 1 I am participating in Blogging Idol. A competition set up by Daniel Scocco that pits bloggers against each other to see who can gain the most subscribers. Here’s a look at some other new blogs which have sprung up over the past year, and which I will be competing against for the crown.

I make no apologies that these blogs focus on internet topics, such as design, development and optimisation for websites. This is, after all, the arena in which I work.

Blogging and internet marketing

This is by far the most popular topic covered by bloggers. “Learn from your experience” translates well into a vibrant blog which documents the owners own learning curve. This is an approach I have taken myself.

The University Kid
Topics covered: blogging and internet marketing
Established in 2007 this blog has taken off, thanks to dedication of blogger Jason Pereira. It contains lots of very practical information unlike many high level marketing concepts touted on similar blogs.

I’m Blogging That
Topics covered: blogging
Setup in 2006 this topic-focussed blog has a nice clean design, and some great posts full of examples. If you’re a blogger yourself it has plenty of great advice.

Catch the posts
Topics covered: blogging, internet marketing and web development
Started in January 2008 this is another crisp blog design with some great content on blogging, and internet marketing techniques. I like seeing what stock images are used to illustrate each article, these definitely boost the entire site dynamic.

Blogote
Topics covered: internet, technology, blogging
A growing resource for information, including some tips on creating wordpress themes using Artiseer, and how to watermark your images.

Rajaie Talks
Simple tips to make the most of your blogging experience. It includes some honest reviews of personal blogging experience and some great help on how to drive more traffic to your blog.

Mr Javo
Topics covered: internet, blogging tips
This tone has a friendly feel, from the caricature of Mr Bravo, to the helpful “Blogging for beginners”, it guides you through all you need to know to create your blog and make it a success.

Teen Blogger
Another young blogger, this blog proves that wisdom has nothing to do with years. This blogger occupies the common ground of how to make money online, and proves that determination and passion will get you far.

Ward on the web
Topics covered: internet marketing and SEO
Some great insights. The latest article includes some revealing stats which show that the trends in browser preference, with combined users of internet explorer, tending downward, compared to an increasing use of Mozilla browsers. This blog contains some really valuable insights and some really thoughtful analysis.

Techno diary
Topics covering: Internet marketing and SEO
With a strong focus on search engine optimisation, this blog answers all the questions you had about Google, including those you never knew you had!

Technology

Crenk
Topics covered: web apps, mobile apps and reviews
Founded in 2007, this is a webBlog dedicated to reviewing some of the newest and best web and mobile apps on the web.  With three contributors each bringing different disciplines and experiences this blog has a tone of authority. One article I found helpful was a review of picapp, which is another take at stock photography, but targeted at bloggers.

TechnoWorld
Topics covered: general computers and technology
The technology area is one that is well-covered by blogs. Established this year, TechnoBlog already has a rich collection of articles. Covering topics from Google and SEO through to Baraha, a word-processing software for writing Hindi. There is certainly lots to explore!

Web development

Promote your blog: technique 2

From July 1- August 1 I am participating in Blogging Idol. A competition set up by Daniel Scocco that pits bloggers against each other to see who can gain the most subscribers. Here are some of the techniques I will be employing to get me ahead of the pack.

This article was preliminarily subtitled “Comment like mad”, and this is because the most sympathetic audience you will find is your fellow blogging community. Utilise them.
Just like when you are promoting any other website outside links are invaluable for driving new traffic. This is because you will get traffic directly from people clicking on this link, and because search engines will pick them up and elevate you in the search rankings. Rather considerately standard comment forms on blogs have a field for you to enter your web address, so you can generate a natural link to your own blog simply by commenting on others.

Curiosity killed the cat, and may gain you some traffic

We as people are naturally self-interested and also naturally curious. If you comment on someone else’s blog then you will probably prompt the owner to discover who you are. And if you’re lucky they may even subscribe to your feed.
Another method is to write something controversial, this will probably encourage further discussion from other readers and may take on a life of it’s own. However remember there is a fine line between being controversial and being obnoxious. Be sure to tread it carefully.

Find like-minded people

If you are going to comment, try to find blogs which cover similar subjects to your own. This way your comments can add to the discussion, rather than the, always appreciated, but somewhat banal, “nice post”.
So, if this post has been of any help to you, please add a comment. Banal comments are accepted!

References

• The proof is in the pudding: Darren Rowse with the help of some site analytic software, and a screencast, demonstrates the power of comments to drive traffic
• Some great tips from LifeHacker to take note of when commenting on other people' blogs
• ProBlogger lists some techniques for how to encourage commenting on your own blog
• University kid covers this topic thoroughly in his post, "Make Money Online Blog Commenting Part 2"

Yet ANOTHER rounded corners technique

Does the web really need ANOTHER ROUNDED CORNERS technique? Whenever I do a design with rounded corners I find myself using a different technique, and I can never find one that fits my exact needs. So as with all silver-bullet solutions what usually happens is you end up building one for yourself. This is the technique I used in Sellotape and and I find it has the right combination of flexibility, clear markup and few images to meet my needs.

The result

Here's how the technique looks in a collection of the most popular browsers thanks to Browser Shots.

See in in practice here

Why is the technique superior?

With so many methods out there, my first job is to defend why my my technique is superior:

• It only uses two images (can use one with a simpler design): One image contains the top and bottom of the div, whilst an optional second can be used to tile vertically allowing flexible height
• The CSS markup is minimal
• Just 5 classes and eleven properties produce the result
• It is flexible
• The height of the styled div is not limited by the height of your image
• It allows a wide variety of variations
• The way this technique is implemented means you are only limited by your imagination — and how long you want the page to take to load. You can have transparency and ornamentation on the header and footer as well as down the side of your div.
• It works cross-browser with NO hacks. If you are using Internet Explorer 6 and transparent PNGs you will need to use a workaround.

The Process

1. Create the image that will provide the top and bottom styles of your div

I will call this "rounded_corners.png"

This shows the parts of the image I will be using in the background for the top and bottom of my div

As with this example you can include ornamentation in your images

2.Create an image that can be repeated along the length of your div

If this is going to be one solid colour, you will not need this additional image. I will call this image "middle.png"

3. Now comes the code

You will need 5 divs for each box, I have named these: "rounded_corners" , "top", "container", "content", and "bottom". The content div is the one which will hold the text.

<div class="rounded_corners">
  <div class="top"></div>
  <div class="container">
    <div class="content">
      <!-- content -->
      <p>Place your text inside the content div</p>
      <!-- end content -->
    </div>
  </div>
  <div class="bottom"></div> 

Copy the above code into an HTML page. You may wish to rename rounded_corners to something more descriptive of the content, but you will need to change the CSS accordingly

4.Write the CSS

body {
 background: orange; /* just to demonstrate the transparency */
}
.rounded_corners {
 position:relative;
 width:350px;
 color: #FFF;
 font-family: Arial, Helvetica, sans-serif;
}
.rounded_corners .container {
 position: relative;
 background:transparent url(./images/middle.png) repeat-y 0 0;
 padding: 110px 60px 10px 50px; /* padding accommodates for decoration around box */
}
.rounded_corners .content {
 margin-top: -170px;/* this is the height of the top of the div*/
}
.rounded_corners .top {
 height: 170px;
 background:transparent url(./images/rounded_corners.png) no-repeat 0 top;
}
.rounded_corners .bottom {
 background: transparent url(./images/rounded_corners.png) no-repeat 0 -170px;/* bottom of background image */
 height: 40px;
} 

5. Customising code

If you want to change the code for your own purposes you will need to edit the following:

Set the width of "rounded_corners" to be the same width as your image

Set the height of your "top" and "bottom" div to show the portion of the image you would like to use

Position the background for the "bottom" to show the portion of the image you would like to use. Set the height of this to the height of the image minus the height of the top div e.g 210 - 170 = 40px high.

Position the background for the bottom div to be the inverse of the top divs height e.g. -170px if your top div is 170px high

Set the negative top margin of the "content" div to be the the same as height of the "top" div

Then use padding on the "container" to position your content within your image

And, that's it. You can download the source files here

If you use this technique PLEASE add a comment below with a link to the page on which it is being used.

Collections of rounded corners

Smiley Cat have a great list of over 50 different CSS and JavaScript techniques with an at-a-glance table that shows how many images each one uses and whether they are fixed or flexible. CSS Juice also has a great pictorial reference of 25 Rounded Corners Techniques with CSS, which is great for easily seeing the result each technique accomplishes. Remember, all rounded corners were not created equal.

References

• Smiley Cat’s CSS Rounded Corners ‘Roundup’ represented in a table which compares features of each
• CSS Juice: 25 Rounded Corners Techniques with CSS
• Spiffy rounded corners generator
• Semantically clean code for rounded corners with variable widths

Promote your blog: technique 1

From July 1- August 1 I am participating in Blogging Idol. A competition set up by Daniel Scocco that pits bloggers against each other to see who can gain the most subscribers. Here are some of the techniques I will be employing to get me ahead of the pack.

In preparation for this competition I have written a number of articles in advance. This is in order that I might try various methods of promoting my blog during the coming month rather than focusing solely on the task of writing. Thi brings me to the first technique for promoting a blog…

Write quality content

This probably goes without saying, but as it’s the first chapter that is excluded from every get rich quick book, maybe we need reminding. Blogs that are started as an advertising space are destined to fail. The best bloggers are inspired to write because they have something to say, and these blogs can grow into an income source, but not without a lot of ongoing hard work!

In addition to writing quality content I would say write consistently. If you want to gain subscribers and a dedicated readership, you will will need to write regularly. This is not necessarily daily, but ideally it is often enough to convince irregular readers that if they don’t subscribe to your feed they will be missing out on quality content.

Write well, write consistently and write targeted content. Unless you are an extremely enigmatic personality, chances are the world will not be interested in reading about your daily thoughts and encounters. Some people are exceptions to the rule, but most of us must deal with the fact that are lives are somewhat mundane. At least, they appear so, when put into prose.

However if you have skills, interest, or experience in a particular area, then you more easily find a captive audience. I have heard it referred to as the 80/20 rule. That is, 80% of your content should be surrounding the focus subject of your blog, and 20% can be a diversion.

And finally, write for yourself. By all means, write content that you believe your audience may find useful or interesting. But primarily, write content that you would like to read yourself. If I learn something new, or want to record the processes I have undergone in a design, I write about it. This means, that if nothing else, this blog is a reflection of what I have learned, and a reference for me in the future. If, even by no other measure than this, it is a success!

Happy writing!

Freebies: Photoshop custom shapes

This custom shape library contains: pen, pencil, notepad, tape-dispenser and paperclip for use in Photoshop.

Install custom shapes

• Download folder to your computer and extract the file.
• Open Photoshop and go to ‘Edit’ > ‘Preset Manager…’
• Select ‘Custom Shapes’ from the Preset Type dropdown menu. Click load and select the file (.csh) you have saved.
• Now these shapes will be loaded in as presets when you open up Photoshop.

Hint

To create more versatility try combining custom shapes with layer styles for varied effects. You can use the paperclip shape with a bevel for increased realism.

Download file: stationary_photoshop_brushes.zip

Please note: These files are free-to-use for personal projects. If you would like to use in a commercial project please contact me. Back-links are always appreciated!

Blogging Idol contest

I just signed up to the Blogging Idol contest on Daily Blog Tips (the home of blogger-extraordinaire, Daniel Scocco).  It’s a blogging contest for new blogs (1000 subscribers of less), and the aim is to get a many subscribers as possible in a one month period.

You may well ask why a very busy girl, who is easily distracted, has decided to join this competition. Especially when her current subscriber count stands at 2. (Note as the competition is measured through Feedburner this will drop to 0).  I, too am asking myself that question.

Am I afraid that I will become like those early contestants on American Idol who are ridiculed because they cannot hold a tune? They parade themselves in front of the judges and shake their bodies in such an excruciating manner, that you just can’t look away. Perhaps like them I have delusions of grandeur, I aspire to a blogging empire, when in reality I cannot string one sentence together. Let’s hope not.

The real reason I am entering this competition is to drive what I write. If I am blogging for myself there is some value, but if I have an audience, one who has subscribed to my blog, then there is motivation, nay, responsibility, to produce quality content.

Also, the advent of this blog was as a testing ground for me, I have been working on it as I go, beginning to blog before I had a completed design. (There’s still much work to do.) Perhaps this competition will be another step in the learning curve. Let’s just hope it’s not a painful one!

To vote for Felicity simply subscribe to the RSS feed between July 1 and August 1. Why not send her a message of support?

Review: WinMerge

According to the website WinMerge is an Open Source visual text file differencing and merging tool for Windows. The name says it all. It provides a quick visual comparison between text files and allows you to merge changes between versions. Very useful if you have multiple copies of your files and struggle to keep track of them.

For anyone familiar with SubVersion software, this sort of functionality will look very familiar. Whilst it doesn’t handle all the versioning that a weightier application like Subversion will, it is a very nifty little tool and can be very useful even in small-scale projects.

Process

When you compare files WinMerge places them side-by-side in the application window, allowing you to compare line by line. On the far left there is a long strip of white with highlights of orange indicating where files differ. This gives a visual representation of differences between files. I think of it as analogous with a piece of litmus paper — where there is a conflict between two files the paper reacts.

Where files do differ the text window will highlight the text and give you the option of selecting which version you would like. As you merge the files the orange lines will disappear and at the point which both files are identical an alert message will pop up informing you that the files are identical.

For those who have been used to scanning files by eye to compare them, this process will be very satisfying, and surprisingly fast.

Feature set

Can compare two files or two directories
Syntax colouring
It’s free
Easy to install and use
Intuitive interface
Saves a backup file to preferred destination so changes can be rolled-back or tracked

Only allows merging two files i.e. three-way comparison not possible
Windows-only software
Limited capabilities — not a full versioning solution

Competitors

Compare and merge file compare utility for Windows
Merge software for Windows, includes 3-1ay comparison
DiffMerge by Sourcegear free for Windows and Mac

How to: Create a Favicon

Google has a new favicon, in true Google manner the new small “g” is only a beta version - open for suggestions according to the Google blog. Whether you love or hate the new favicon (I love it), it does remind us of the importance of this VERY little icon.

What is it?

A favicon (short for ‘favorites icon’), is a graphic image (icon) associated with a particular web page and/or web site.

Where will I see it?

It appears (on most browsers) at the left hand side of the URL in the address bar. It can also be displayed in the bookmarks or favourites (its original intention) and on the tab bar of the web browser.

Why should I have one?

No longer just an extra gimmick, a favicon is actually part of your site’s identity. It is the first thing a visitor will see – as the favicon is loaded in the head of a web page before the body content.

As I show you in this ‘How to’ it’s also extremely easy to make, so really the question you should be asked yourself is, “Why shouldn’t I have a favicon?”. I would like to note here that there are legitimate reasons for not having a favicon; if, for example a site is a sub-domain and doesn’t have its own unique branding, however these issues are not for this post.

How do I create a favicon?

1. Decide which part of your logo/identity you want to represent

A favicon is a 16 by 16 pixel image. Unless you have a very simple logo, you won’t be able to show it at such a small scale and still retain clarity. Remember, this is not your brand, it is just a visual aid to remind visitors of which website they are on. However it does need to be in-keeping with what you are communicating in the rest of your logo and branding.


Some tips: you will want to use a distinctive part of your logo – something which has identifiable colours and shapes.If the logo is text, you can use one letter (e.g. wikipedia and Google) otherwise use the image component of your logo.

It’s amazing how much creativity you can fit is such a small space. Smashing Magazine recently showcased 50 remarkable favicons.

2. Sharpen your image

At such a small size this is important for creation definition.
In Photoshop go to Filter > Unsharp mask and set to about 50%

3. Resize your image

You will need to crop so that the image has equal width and height. If your favicon is not equal dimensions you can leave transparent or coloured background around it. Alternatively you can crop the image so that the edges are chopped off. Smashing Magazine utilises this last method to great effect. To see the final effect resize to 16 x 16px.

4. Convert to .ico file

To use your image as a favicon it will need to be in .ico format. You can download plugins to generate this from Photoshop, or you can use an online convertor like Favicon Generator or favicon.ico Generator. One tip â?? some of these generators can make your favicon animated â?? steer clear of this feature!

5. Name favicon.ico and upload to the root directory of your website

This is where your index page resides. For many browser this will be enough or them to recognise this file as the favicon, but I highly suggest you add the following code to your webpages in-between the

tags

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

References

• Daily Blog how to create a favicon
• Smashing magazine showcases 50 remarkable favicons.
• Wikipedia entry: favicon.
• W3C methods for adding favicons to website.
• Plugins for ico format

Why live to work when you can work to live?

Unless you work in health, aid or the teaching professions chances are using your professional skills to make a difference in this world can be a challenge. However whilst you are lining big businesses’ pockets nine to five there may be opportunities that you are missing.

I love it when I hear of people who work for themselves and dedicate one day a week to pro-bono work. I think that web design retains much of it “grass roots” movement and there is a sense that the internet should be an even playing ground for charities and multinationals alike.

Ironically it is often the “little people” who have the greatest appreciation for the ability of the web to empower. The classic example of recent times is Barack Obama, who gained the majority of his financial support from website donations. Formerly the underdog he now looks set to take the White House later this year.

Many people in the world are slaves to their work by necessity to feed themselves and their family. We in the West are slaves by choice. It’s a huge blessing if you love what you do, another if you get paid to do it, but why do we stop there? If we can offer something valuable why not make our work work a blessing for others also?

I think the best place to start is to get inspired. There are so many worthy projects, that we can struggle to know where to begin. My advice: think close to home. I have many friends who use their time and talents in far more noble pursuits than myself. One friend began a bottled water company, Wellwellwell, who donates 100% of its profits to provide safe drinking water, decent sanitation and hygiene education for the world’s poorest people. Another is organising a speaking competition, Speak Up, which encourages students to engage in world issues, challenge others and inspire action.

A little help can go a long way. If you can find someone who has vision you’ll be surprised at what difference an insignificant website can make.

Review: Vector Magic, a bitmap tracing tool

Vector Magic allows you to upload a logo or photo and convert to a vector graphic, in much the same way Adobe Illustrator and Flash use their Live trace feature. The advantage is that it has much more intuitive controls, and you don’t have to purchase a very sophisticated product just for one feature.

Produced by Stanford university this was originally a free product, and now is charged as a subscription ($4.95 month) or on a per image basis – approximately $2.80 per token.

The process

I mentioned before that Vector Magic has an intuitive process to vectorising images. I think this is its biggest advantage. It distinguishes between what type of image you are trying to convert (photograph, logo with anti-aliased edges, logo with rough edges) and applies a different algorithm depending on the input.

It also allows you to set the level of detail in the original e.g. if you have a very low quality JPG or a high resolution original file. You can also adjust palette colours, and the biggest advantage: at each stage you can step backwards and forwards and tweak your changes.

Feature Set

Bookmarking
Retrace photo until happy with the result
Displays original and vector version side-by-side
Intuitive controls
Accepts: PNG, GIF, JPG, BMP, TIFF, PSD

Expensive
Does not allow for high degree of control
Doesn’t cope well with complex images

Competitors

Adobe Suite
InkScape

It is my hope that the growth of SVG will see this sort of product come under increasing competition in the future.

References

• Creative Curio demonstrates the results of Vector Magic
• Steven Clark examines Vector Magic’s decision to begin charging for their service.

Credits…

Many thanks to all the people below for making my work so much easier. I’m putting this list up here for a few reasons:
1. These resources were so helpful for me, and it’s always kind to share
2. I want to acknowledge that my humble achievevments have been whilst standing on the shoulders of giants
3. If I have used any of these resources without permission now you can track me down! Ouch!

Icons

RSS feed adaped from Customize.org
RSS feed adaped from Nyssaj Brown
Footer icons from Free icons pack
Home icon adapted from Iconaholic XP iCandy set

Images

Brown paper background from Deviant Art
Tag used in header from Pixel pusher
Sellotape used in graphics site-wide from Blog Spoon Graphics

Beginning with some inspiration

When you write you begin with ABC, when you design you begin with… your identity.

Who knows where to start a website or a blog for that matter? Usually the answer is “with a client”, but when the client is yourself, that’s not quite so easy. So for want of a better subject to start my posting to the world wide web, I thought I’d begin at the beginning (I’ve been told it’s a very good place to start).

My blog is entitled ‘Sellotape and <String>’ as I wanted to bring together all my ideas, thoughts and inspirations in a kind of collage. So for me that’s where I will begin. First I need some inspiration, and the web is a very good place to get it.
Below I’ve collected some things that for me represent what I want this blog to become:

Great resources to begin with

Brown paper texture by Spiteful-Pie sourced from Deviant Art

Free Vectors of Tags from PixelPusher

Photoshop brushes from Blog Spoon Graphics

String by Sirranon sourced from Deviant Art

Some CSS styling

CSS Decorative Gallery / Demos from Web Designer Wall

I want to select a feature font which will be integrated into the design…

Great fonts

Alpha Mack
Ahnberg hand
Aenigma scrawl

Then have a look at how other people have used similar design elements to great effect…

Inspiring Sites

Shop Moss
Css Addict
Design Sponge
Sellotape sculptures -  wow! Elevating an everyday material to high art