Login / Registration Form: Ideas and Beautiful Examples

Posted in Uncategorized on April 14, 2011 by Creative Cartels

All throughout the modern web, we are seeing a growing amount of places for user input. These include shopping carts, interactive web games, and most certainly website registration forms. It seems that not only should designers be focusing on page design, but form aesthetics are also equally vital role.

Consider how many forms you may have filled out over the course of your Internet history. There are countless examples of these from forums, message boards, blogs, and so many more. In this article we’ll be taking a look at some great tricks to designing your in-page forms.

signup form Login / Registration Form: Ideas and Beautiful Examples

It is wise to consider some of the items here from an objective perspective. Although many login and registration forms work well with one type of site, there is no final judgment call on what’s the “best” solution. Use your design intuition to apply bits and pieces from forms you aspire towards.

Consider Multiple Inputs

To start things off consider a small contact form from Foundation Six Web Design. Yes this isn’t a login form so it may steer a bit off topic. However, their page design is very impressive and it shows you what a little creativity can achieve.

Each of the input fields offer room for you to type personal contact info – name, e-mail, etc. The styles go far beyond ordinary, offering user input in a type of handwritten calligraphy. This type of formatting will keep your users in a state of wonder and achieve a goal of much higher design standards.

multiple input Login / Registration Form: Ideas and Beautiful Examples

You’ll want to implement styles like these similar to all of your login pages. I certainly wouldn’t recommend sticking with the same style of input text and option/select menus. When jogging your brain for creativity, consider how each element should be layed out: plenty of space between layers, large easily-readable text, and even sidebar links to their direct e-mail line.

jQuery Login Boxes

This has been used on countless websites in the past and will surely be seen within new-age designs. Long gone are the days where standard practices would bring users onto a new page for each step of the login process. Normally this would mean a page to input your data and also a new page for processing login information.

Pixel2Life offers some fantastic insight into a new field of data input. From their homepage you can click the login link and bring up a dynamic jQuery-powered login box. This form contains an Ajax call to an external PHP script which checks the credentials of your login info and, once processed, either grants or denies access.

jquery login Login / Registration Form: Ideas and Beautiful Examples

Going another step further the astute may notice a registration link directly below the login box. This offers a much smoother user experience for those looking to sign up for the website but unable to locate the registration link.

If a user doesn’t have an account but would like to make one, this brings them onto the registration page without any buggy page glitches. The login box would still be a viable option for accessing your own account, however allowing the option gives way for greater returns and higher volumes of new registrants.

Simple One-Page Registrations

Another shifting paradigm we see is the lacking in such detail for new account registrations. This isn’t necessarily a bad statistic assuming users are growing impatient towards filling out data. The numbers actually suggest websites with shorter registration pages garner heavier lists of new users on a daily basis.

Sikbox offers a lightweight option for visitors to create their own search box for a website. The only requirement is your own custom domain which to provide search results for. The input fields are large, text is very simple to read and there are absolutely no advertisements to distract users from the task of building their search form!

one page registration Login / Registration Form: Ideas and Beautiful Examples

Now this isn’t the best form to build off when creating your own registration page for a forum or blog archive. These will, by standard definition, at least require some type of e-mail address/username combination along with a password. Some new-age web applications will generate dynamic passwords for users just to make the registration process quicker.

Of course, the trade-off here is lacking control on the user’s end to generate their own password which many people are accustomed to.

Build off Flashy Effects

One of the greatest signup experiences I’ve ever had was creating my first Tumblr account. The home page of their site offers both a login and signup form placed directly beneath each other with new CSS3 highlight/fade effects.

thumblr Login / Registration Form: Ideas and Beautiful Examples

This systematic approach is similar regarding Pixel2Life’s jQuery login area. However, the difference with Tumblr is the network cannot offer any content to those without a blog (aside from browsing others accounts). The real benefit from tumblr is creating your own blog and following others – thus your main objective on the front page is either to create an account or log in.

There are some bugs with this system. Most notably within IE6/IE7 not supporting these new CSS properties. Also used on the home page is a system for adding label elements into form input values – basically overruling the “default” characters used for email/password boxes.

twitter Login / Registration Form: Ideas and Beautiful Examples

These labels fade away on focus in modern browsers such as Chrome/Firefox. But no such luck with the deprecated browsers which, as you can imagine, is quite annoying trying to re-read your own input!

20+ Examples of Beautiful Form Design

Below is a quick roundup gallery of some fantastic login form designs. These have been picked from around the web and include numerous forms of web applications. If you have suggestions for other sites feel free to share them in the comments section below!

Snoggle News

Snoggle News Login / Registration Form: Ideas and Beautiful Examples


roboto Login / Registration Form: Ideas and Beautiful Examples


virb Login / Registration Form: Ideas and Beautiful Examples


grooveshark Login / Registration Form: Ideas and Beautiful Examples


storenvy Login / Registration Form: Ideas and Beautiful Examples


dropbox Login / Registration Form: Ideas and Beautiful Examples

Green Globe Ideas

green globe Login / Registration Form: Ideas and Beautiful Examples


freshbook Login / Registration Form: Ideas and Beautiful Examples


themeforest Login / Registration Form: Ideas and Beautiful Examples


mailchimp Login / Registration Form: Ideas and Beautiful Examples


basecamp Login / Registration Form: Ideas and Beautiful Examples


testflight Login / Registration Form: Ideas and Beautiful Examples


awesomejs Login / Registration Form: Ideas and Beautiful Examples


unlocking Login / Registration Form: Ideas and Beautiful Examples


popscreen Login / Registration Form: Ideas and Beautiful Examples


gowalla Login / Registration Form: Ideas and Beautiful Examples


kontain Login / Registration Form: Ideas and Beautiful Examples


mobileme Login / Registration Form: Ideas and Beautiful Examples


laterthis Login / Registration Form: Ideas and Beautiful Examples


launchlist Login / Registration Form: Ideas and Beautiful Examples


theidealists Login / Registration Form: Ideas and Beautiful Examples

Designing For The Future Web

Posted in Uncategorized on April 14, 2011 by Creative Cartels

Designing for the future Web. That’s a big subject. Where do we start when we’re talking about something that isn’t here yet?

In this article, we’ll look at what the future Web might look like and how we can adapt our current skills to this new environment, as well as how to create fluid websites that are built around a consistent core and that adapt to the limitations and features of the device on which they are viewed. We’ll also look at how our conceptual approach to designing websites should evolve: designing from the simplest design upwards, and not from the richest website down.

But before we get to that, let’s start with a question. What do we mean by the “future Web”?

What Is The Future Web?

Google-Classic in Designing For The Future Web
Back in the old days: analogous Google queries would have taken 30 days. Image: dullhunk

The one word that I hear more than any other at the moment is mobile. Mobile websites, mobile devices, mobile apps: the list seems to go on and on. In fact, a large swell of opinion says that the future Web is mobile.

But despite all this, focusing just on mobile isn’t the answer.

The way we access the Internet is changing, of that we can be certain. And in the short term, this does mean more mobile devices. But in the long term, we have to look a little wider. Thomas Husson, senior analyst for Forrester, summed it up nicely in his 2011 Mobile Trends report when he said, “The term mobile will mean a lot more than mobile phones.” In the long term, the word we should use instead of mobile is portable.

Why Portable? How Has the Internet Changed to Make It So?

First, the physical infrastructure of the Internet is spreading rapidly, so that our ability to access the Internet wherever we are grows daily. In the last 10 years, the number of Internet users has grown by 444.8% and now includes 28.7% of the population. That’s nearly 2 billion people, the majority of whom are in Asia. This growth is fuelled by investment in the underlying hardware that gives us access to the Internet: millions and millions of computers, millions of miles of cables, hundreds of thousands of wireless hotspots and, on top of all this, growing 3G coverage around the globe (around 21% by the end of 2010 according to Morgan Stanley).

Secondly, the way we use the Internet is changing. We are increasingly orienting our online experience around services rather than search engines. Services such as Facebook, Twitter and LinkedIn are becoming the hub for our online life, and we are blending them to create our own unique Web of content: Facebook for our social life, LinkedIn for our professional life, Spotify for music, Netflix for television and film. We’re seeing a very different form of information consumption here, one in which we expect information to be pushed to us through our social circle, the people whom we trust. We’re moving away from the old paradigm of information retrieval, in which we are expected to seek information using search engines and links.

Some of these services are tied to a single device, but increasingly they are available across multiple platforms, including the desktop, mobile apps, Internet-enabled TVs and others. Only last month, Samsung created the first tweeting refrigerator. Okay, that might not be the greatest use of an Internet connection, but it is an example of how these services are starting to spread out, away from the desktop and into our everyday lives. Evrythng, a start-up currently in beta, is working on a platform that would give any physical object an online presence, effectively making the Internet an ubiquitous entity containing data that can be consumed anywhere and by anything.

Given these changes, it’s important that we not be overly rigid in our approach to creating new Web content; we mustn’t allow ourselves to think in terms of devices. Right now, we are producing mobile apps and standard websites to deliver our services, but in a few years’ time, we may be looking at a completely different landscape, one where knowing exactly where and how our content is being viewed is impossible. Our content must be portable in the sense that it can be displayed anywhere.

Social-Media-Infographic in Designing For The Future Web
Media marketers have responded to the increasing use of mobile media. (Image: birgerking)

We may also find ourselves having to decide whether to concentrate on particular devices and channels at the expense of audience numbers or to take a less tailored approach and serve the widest spectrum possible.

Regardless of the route we take, the ability to deliver a consistent experience across all channels is paramount, and our ability as designers and developers to understand the options and deliver this consistency to our clients will be crucial.

So, this is the future Web, a mish-mash of devices and channels. Sounds good, doesn’t it? Let’s go back to the key word, portability.

How Do We Design For The Portable Web?

Ask yourself, how would your latest project cope in the following scenarios:

  1. The user is watching House on their new Internet TV. Hugh Laurie’s not on screen, so the user decides to check their email. A friend has sent a link to your website, which the user opens in a sidebar and views simultaneously with the program.
  2. The user is on a train back from work, probably delayed somewhere, accessing your website via 3G on an iPad
  3. The user is on a client’s website. They need to access your website to read an article, but they have only a company-supplied Sony Ericsson with Opera Mini installed.

Each of these scenarios presents us with a different problem to solve: (1) an odd aspect-ratio and browser combination, (2) a good display area but slow connection and (3) a very small display area. And they are all very possible scenarios. The first Internet TVs by big brands are now available from the big retailers. Opera Mini has over 85.5 million users and is the dominant browser in many areas of the world; in fact, in Asia, Opera and Nokia (with their combined 66.33% market share) are way ahead of the third-place browser (which is BlackBerry, with a 9.81% share). And Deloitte has predicted that 2011 will be the year of the tablet and that 50% of the “computing devices” sold will not be PCs.

Chances are that, unless you’ve really thought about it (and if you have, then you probably don’t need to read this article), your website won’t work in all of those cases.

When designing for the portable Web, we need to be aware of three things: design, content and integration. Approached in the right way, we can create websites that are accessible across the widest user base and that provide a consistent experience regardless of access method.

Consistent? How?

When faced with a multitude of devices to design for, all with varying specifications, the last goal that might come to mind is consistency, and with good reason. And yet we should be striving to achieve consistency. Not in design but in experience.

Conceptually, we should be thinking about our design in two layers: the core content or service, and then the display layer. The core of our website should not change from device to device, and it should deliver a consistent experience. As we shall see shortly, this means that we must ensure that elements such as the content and the navigation patterns work the same way always.

Tag-Cloud in Designing For The Future Web
The web’s future consists of vast possibilities, considering them all is virtually impossible. That is why we need consistency! Image: Juhan Sonin

Let’s say our user is at work and is browsing our website on an iPad. They work through the carefully designed navigation hierarchy to get to the piece of content that they want to read, but they are interrupted by a phone call and have to stop browsing. Later, on the train home, they access the website again, this time via their phone. The visual elements of the design will be different—by necessity—but crucially, the routes they took to find the content should be exactly the same, as should the content they read when they got there.

This consistency of experience is what will allow us to create great websites for the portable Web and a complete user experience.

Where Do I Start? And How Will I Know When I Get There?

If a single consistent experience is our goal, this begs the question, should we create a mobile website that scales up or a desktop website that degrades?

The answer is neither. We should try to create a single design that can be used across all devices without alteration. But in practice, at least for the moment, we should start with the simplest website and work up.

Why? Let’s go back to the introduction. On the portable Web, we have no control over how our content will be used or viewed, and as such we must throw out the idea that we are designing for a particular device or device size. We must approach the design of our website in a different way, one in which we create the core content or service first. After all, this will define our website in the end, not the visual elements. This may seem difficult initially, but as we shall see, many of the best practices for desktop website development hold true for the portable Web, especially with regard to content structure.

To recap, here are the key rules to bear in mind when working through a design for the portable Web:

  1. The website should be available to as wide an audience as possible;
  2. The website should contain the same content wherever it is viewed, where feasible;
  3. The website’s structure should be the same wherever it is viewed;
  4. The content should be displayed in a manner that is appropriate to its environment.

A website that meets all of these criteria would fit snugly in the future portable Web. But how do we go about making our websites do this?

Designing For The Portable Web

Design Using Web Standards: That Means HTML5

HTML5 Badge 1281 in Designing For The Future Web The good news is that the two most common browser engines on mobile, Webkit and Opera, both support HTML5 very well; Webkit has supported HTML5 at least partially since November 2007.

Using standard and descriptive mark-up throughout our websites will have the benefit of delivering consistent output across most devices. And the extended capabilities of HTML5 to deliver media, animation and local storage make it a great choice for mobile applications.

These three abilities allow HTML5 websites to reproduce behaviours usually associated with native mobile applications, closing the experience gap between the two. Video can now be played natively through HTML5 using the video tag, while animations can be played using the HTML5 canvas. Finally, local storage allows a website to store database-like information on the device, allowing for fully functional offline use of the website.

YouTube, Netflix and Gmail all have HTML5 versions of their websites that are designed for the mobile experience and that take advantage of the new capabilities of HTML5. They’re a great starting point for any developer who wants to see what can be achieved.

HTML5 is now ready to be used for development, and there’s no reason why you can’t start right away. Many excellent resources and tutorials are available to help you get started:

  • Dive into HTML5
    An overview of the HTML5 standard and a great starting point.
  • HTML5 Demos and Examples
    A series of demonstrations showing the capabilities of HTML5, with source code.
  • HTML5 Gallery
    A showcase of websites created in HTML5.

To get started using HTML5 in your projects, you can take advantage of any one of the number of development environments that support it. The most complete implementation is through Adobe’s Dreamweaver CS5; an HTML5 support pack can be downloaded that extends the built-in editor. Aptana also supports HTML5 in its beta of Aptana Studio 3. Links are provided at the end of this article.

Start Simple, Work Up

Thinking portable means thinking clean and simple. The wide variation in screen sizes—from a 40-inch LCD running at 1920 × 1080 pixels to a portrait-orientation mobile screen at 320 × 240 pixels—means that we must create designs that are scalable and adaptive. We must also be aware that someone may be interacting via a remote control or a fat stubby finger on a touchscreen. The simpler the design, the more adaptable it will be.

Simplicity2 in Designing For The Future Web
Bottom up conceptualizing males sense. Concentrate on the basic elements and let the context evolve around them. Image: Andrei Bocan

Create your basic website structure first and add only your core styles, the ones that are applicable to all devices and layouts. Starting simple gives us a great base on which to build. Essentially, we are starting from the most basic experience, available on even the smallest mobile device, and working our way up to the more capable desktop browsers.

Using @media queries in the CSS will enable your website to recognize the additional capabilities of desktop browsers and scale up for these environments, presenting a fuller and more interactive experience where possible.

A word of caution and a reason why we don’t work the other way around by degrading a desktop website to a mobile one: @media queries are not supported by every mobile device. Rachel Andrews provides a good overview of @media queries here on Smashing Magazine, albeit working from desktop to mobile, rather than the other way round.

Forget About Proprietary

Whatever you do, stay away from the proprietary technologies, because that’s the one way to guarantee an inconsistent experience. Flash and Silverlight as development platforms are living on borrowed time. Microsoft has already indicated that it will discontinue Silverlight development to concentrate on HTML5, while Flash is being used mainly as a game development platform and video-delivery mechanism. If we are going to create truly cross-platform websites that display consistently across all devices, then Flash and Silverlight are not wise choices because we cannot be certain that they will be installed on the user’s device. Not to say that Flash doesn’t have its place; as a platform for Web-based games, it is currently unrivalled. It’s about choosing the best technologies for the job at hand.

Be Wary of JavaScript… for the Time Being

The bad news is that we may have to sacrifice some of the things we take for granted now. We must learn to design for unknown screen sizes and ratios and allow content to flow as required. Think less about design structure and page layout and more about content structure.

We may have to forgo using JavaScript and AJAX (both staples of desktop development) to create more involving user experiences, because some lower-end devices will not have the hardware muscle to deal with complex libraries. Trimming page weight will also be a priority because we cannot be certain that end users will have broadband-speed access to the Internet, so large libraries will be unacceptable overhead.

This is particularly important in light of the recent “hash bang” trend, started with Gawker Media’s controversial redesign of its websites. The websites (including Gizmodo, Lifehacker and Gawker) present a more application-like experience to users, but do so by relying on JavaScript for content delivery. In effect, the websites consist of a single page that is loaded with dynamic content on request, instead of the multiple pages that they consisted of previously. Any users whose browsers cannot process the JavaScript, for whatever reason, will be unable to browse the website; they are greeted with only a blank page.

However, a number of libraries are being developed to be lightweight and usable on portable devices. jQuery has an alpha of its mobile library available for testing. The project has the backing of industry players such as BlackBerry, Mozilla and Adobe, so it is worth keeping an eye on.

JavaScript support will mature as devices worldwide move onto more modern platforms and as older devices are taken out of service. But for the time being, a conservative approach to its use will mean a wider potential audience for your work.

Test, Test, Then Test Again

On the portable Web, there’s a good chance we won’t be able to test against every possible platform on which our content will be viewed. But that doesn’t take away the need to test. And test we must.

Opera-Mini-Simulator1 in Designing For The Future Web
Opera Mini’s emulator lets you test your website in a virtual browser.

Buying a device from each platform would be prohibitive for the majority of designers. But alternatives are available. For most of the main platforms, device emulators are available that simulate the browsing experience. See the resources section at the end of this article for links.

At the other end of the scale, a paid service is available from DeviceAnywhere, which enables you to test your website on over 2000 handsets.

Unfortunately, there are no Internet TV emulators so far, but Google has released a guide to designing for Google TV.

Finally, of course, we mustn’t forget to test on our desktop browsers, too. The aim of designing for the portable Web is to create a single experience across as wide a set of devices as possible. Just because users are able to browse the Web in many ways doesn’t mean they will stop using their desktop, laptop or netbook. Use this to your advantage when testing simply by resizing your browser to ensure that your design scales and flows appropriately. The emulators will provide you with an exact rendering of your website on other devices.

The Ugly Duckling?

So, does the portable Web defy beauty and kick sand in the face of outstanding design? Of course not. Great design is not only about visual imagery, but about presenting information clearly, which involves hierarchy and importance through innovative and well-thought out typography, layouts and navigation. Which brings us to…

Content For The Portable Web

Content is once again king. The rise of Quora should be enough to convince anyone of that; it is a service based solely on content. On the portable Web, this is doubly true. By paring down the design elements, you leave even more focus on the content.

Understand What’s Important

Identifying what is most critical to users should be your first task when developing a portable website. There may not be room for complex navigation, especially on smaller screens, so keep it simple. Compare the mobile and desktop versions of YouTube’s start page:

YouTube-Desktop in Designing For The Future Web
YouTube’s standard home page.

YouTube-Mobile1 in Designing For The Future Web
YouTube’s HTML5-based home page works brilliantly on small screens.

Create a Solid Information Hierarchy

Structuring our content is important, for both readability and SEO. Understanding the content that we are presenting is essential to creating clear information hierarchies that guide users through it.

Map the user’s possible journeys through your content. There should be a clear route to every piece of content, starting with the top-level information categories and getting more granular with each click.

John-Lewis-Mobile-Screens in Designing For The Future Web
John Lewis’ mobile website has a clear information hierarchy to aid navigation.

A good example of this is the mobile website of John Lewis, a UK-based department store. From the home page, you can easily drill down to each department, and from there to individual products. It’s simple, and it also means that the amount of information on any given page is not overwhelming and that you know exactly where you are in the hierarchy at all times.

Keep Content Available

Even if users aren’t on a desktop, don’t treat them as second-class citizens. Provide as much content as is feasible. And for what content there is, present it appropriately. Remove the following:

  • Superfluous images
    If an image isn’t essential to the content, get rid of it.
  • Unsupported file formats
    Don’t include Flash or even the Flash placeholder if the file likely can’t be played.
  • Unnecessary text
    Good desktop copy doesn’t necessarily make for good portable copy. Is that second customer testimonial absolutely necessary? If not, remove it.

While we want to remove unnecessary content, we don’t want to remove too much. In the example below, we have a simple accessible website, but one that has no depth. The first level of information is presented well, but the headings for the company’s services at the bottom of the page should link to the next level of information. The way it is, if I want to find out more, I’m forced to visit the non-optimized website. This is a poor user experience, because it makes finding what I need more difficult.

Photo1 in Designing For The Future Web
Sapient Nitro’s mobile website displays really well but cuts a lot of information from the full website.

Integration And The Portable Web

If services are to become the new hub of the Internet, keeping our websites linked to these services becomes paramount.

Keep It Modular

Services will come and go (although the main ones will certainly remain for a long time yet… yes, I’m looking at you, Facebook), so keep your design modular. Being able to integrate with new services as they come online and to prune away those that have fallen by the wayside will ensure that your content is available to the widest possible audience.

The goal is to make it easy to push your content across multiple services and thus integrate your content into the fabric of the Web. Primarily, this will be through search engine optimization and social sharing.

Make Your Content Search-Engine Friendly

While the way people access content is becoming more social and less search-based, search engines are still a massive source of traffic. Keeping your content formatted for easy retrieval is a must. Quora has done this extremely well, leading to high rankings across the major search engines and generating traffic for its next-generation Q&A service. SEO may be old hat for some, but as quality of content becomes increasingly important, it will gain new life.

Quora-SEO-results-e1297191282742 in Designing For The Future Web
Quora plays nice with search engines, with great results.

Make Sharing Easy

SEO is important, but so are direct connections to other services through OAuth, OpenGraph and OpenID. If this isn’t an option for you, then at the very least give users some way to share your content. Services like AddThis and ShareThis make it simple to add sharing capabilities; take advantage of them. A single tweet can generate a lot of activity. Of course, modern development and content platforms such as WordPress have this functionality built in.

Bringing these three elements together will create websites that are discoverable, consistent and usable. Just one question now is raising its ugly head…

What About Apps? Aren’t They The Way Forward?

Apples-app-store-icon-o-150x150 in Designing For The Future Web Apps are big business. Gartner forecasts that mobile app store revenue will top $15 billion in 2011. It’s no surprise that Google, Microsoft, Nokia and others are trying to get in on the act. But just because app stores are commercially successful, does it mean they should be our first point of call when designing for the future Web?

Let’s look at why one might want to create an app:

  • Easy to purchase, install, use and throw away
    Apps are so usable that even your granny could use them. Installing them on a smartphone is a smooth process that requires minimal involvement from the user. And when you’ve had enough, you simply delete it and no trace of the app remains. This is a great user experience, period. That’s why Apple is now pushing the same concept for full-blown Mac apps through the Mac App Store. Apps also provide, in most cases, a good user experience, with their native controls and design patterns.
  • Brand association and lock-in
    Apps are designed to do one thing and do it well. The most successful apps are exercises in brand association: “I want to search the Web, so I’ll use the Google app,” or “I want to check up on my friends, so I’ll use the Facebook app.” You experience the brand through the app. I could easily use the Safari browser on the iPhone to access both Facebook and Google, but the apps make it easy for me. I’m locked into the experience, which is great for the companies because their brands get planted square in the middle of my home screen; in this case, a big F and a big G.
  • Money
    The most attractive thing about apps to many companies is the profit. Apple’s App Store has shown that monetizing content is possible. Even for independent developers, making a lot of money in a relatively short period of time is possible.

What’s remarkable about all of these points is that they have nothing to do with information consumption. They are all about brand and user experience. However, there are also reasons why you should think twice:

  • Apps are information silos:
    Apps do what they do well. But they don’t do a good job of bringing in the wider Web. Want to follow a link? You might be able to view the page in app, but you’re just as likely to get thrown out into the browser. That’s not a good user experience. You also lose control of the user’s actions and their focus on your content.
  • Apps are platform-specific:
    Writing an app automatically ties you to the platform you are writing it for. This immediately limits your potential audience. Smartphone penetration is growing but is still a small segment of the overall Internet-enabled phone market. To take the US market as an example, even though 31% of the population have smartphones, only 6% of the population have iPhones. That’s 19 million out 307 million. If you released an iOS-only app in the US, you would immediately lose 76.17 million potential users.
  • Apps work best for big brands and services:
    Regardless of how good the app is, you have to find a way to get it discovered among the tidal wave of apps that are released into app stores every day. Big brands can push their apps through their existing Web presence, but that’s a lot more difficult for smaller brands. And unless you can generate a lot of relevant content regularly, as the major services do, your app will be consigned to the trash very quickly. Research by Pinch Media (now Flurry) shows that free apps are used primarily in the first 10 days following installation, and then rapidly trail off to around 2% of the installation base after 70 days. Paid application usage drops off even more quickly.
  • Mobile users prefer browsers over apps:
    A study by Keynote Systems in October 2010 shows that users prefer mobile websites for nearly all types of Web content. The only categories in which apps came out on top were social networking, music and games, which makes sense because these apps usually take full advantage of a native platform’s capabilities.

So, if we want to create something with more permanence, that can evolve at a speed that suits us and our clients, then we need to look away from mobile apps and towards the mobile Web. We must execute good design, thoughtful content and solid integration to tie our portable websites into the social infrastructure of the Web.


The fully portable Web may not be here right now, but it will be before we know it. As it was with the browser wars, developers and designers must re-educate themselves to become the driving force behind these changes and be brave enough to let go of current design thinking and work to set new standards. Understanding how to create online presences that take full advantage of all platforms and preparing for the future shape of the Web will position us not just as technicians, but as people who can provide real value to our clients.

Photo Retouching Tips And Tricks In Photoshop

Posted in Uncategorized on April 1, 2011 by Creative Cartels

Two weeks ago we published the first part of Photoshop tips and tricks for photo retouching. Today, we’ll be presenting the rest of the article. We hope that these techniques will be quite useful for your workflow. You may know some of them, but hopefully not all of them. We have had articles on various tools in Adobe Photoshop but this one is focused more on the techniques rather than the tools provided. Please note that all images used in this article were purchased and are used according to their licenses.

Here is a short overview of the techniques we’ll be covering in this follow-up:

  • Defining Colors
  • Controlling Folders
  • Split-Toning Effect
  • Flexible Vignette
  • Skin Retouching In Camera Raw
  • Setting Lights
  • Distinguished Paleness
  • Dodge And Burn Look
  • Bright Eyes
  • The Orton Effect
  • Optimizing Lasso Selections
  • Aligning Layer Contents
  • Restoring Selections
  • More Photoshop Tips and Tricks

Defining Colors

If you want to redefine the foreground and background colors, use the Eyedropper tool to select the foreground color, and then switch the position with the background color, maybe by using the shortcut X, and pick up the next color. But there is an easier way. First, define the foreground color just as you’re accustomed to, but then define the background color by holding the Alt/Option key. Instead of changing the foreground color, you’ll redefine the background color with just one click.

30-tips-and-tricks22 in Photo Retouching Tips And Tricks In Photoshop
Define foreground and background colors.

Controlling Folders

Folders give structure to layers, which is especially important if you’re working on demanding compositions. Folders are often collapsed, so you can’t see the contents at first sight. This conserves space but it’s not always desirable. If you want nested layers to reveal their contents and offer a quick overview, hold the Control/Command key and click on one of the triangles to expand. All folders at the first level will expand. You can collapse them again using the same trick. To expand all nested folders inside the folders as well, hold the Alt/Option key as well as the Control/Command key.

30-tips-and-tricks25 in Photo Retouching Tips And Tricks In Photoshop
Hold the Control/Command key to expand the folder.

Split-Toning Effect

Create two new gradient maps via Layer → New Adjustment Layer → Gradient Map. You could, for example, create a gradient from dark-blue to beige and another from dark-brown to white. To change a gradient, click on it to open up the “Gradient Editor” dialog box. There, click on your chosen color patches and open up the color picker via the “Color field.”

30-tips-and-tricks17a in Photo Retouching Tips And Tricks In Photoshop
Blending Options: This Layer

Confirm with “OK,” double-click the layer with the second gradient map and, under “This Layer,” move the right slider to the left. To make the transition a little smoother, click on the slider while holding down the Alt/Option key and move it to the right. Confirm with “OK.”

30-tips-and-tricks17b in Photo Retouching Tips And Tricks In Photoshop
Split-Toning Effect

Flexible Vignette

To create a non-destructive vignette, go to New Adjustment Layer → Levels. Darken the image completely by, for example, setting the Highlights down to 80. Now use the Brush tool with black color to paint the light center into the layer mask. Instead of using a brush to paint the area, you could use the Elliptical Marquee tool and fill the selection with black.

30-tips-and-tricks16a in Photo Retouching Tips And Tricks In Photoshop
Adjustment Layer: Levels

You can use the Move tool to adjust the vignette’s position any time, or blur it using the “Gaussian Blur.” You can also increase or decrease the darkening. To do so, open the Levels Adjustment dialog box again.

Skin Retouching In Camera Raw

Again, open a photo in Camera Raw (for example, by using the right mouse key from Bridge and clicking “Open in Camera Raw”). In general, you can use the Spot Healing Brush tool and all other tools and sliders to improve the image. When you’re happy with it, hold the Shift key and click on “Open Object.” The image will be put on a new layer as a Smart Object.

You could also click the blue link at the bottom of the screen, which opens the “Workflow Options” dialog window. From there, you can control some other settings as well. Make sure to check the “Open in Photoshop as Smart Object” checkbox, and then confirm with “OK” to open the images (without having to holding Shift).

30-tips-and-tricks4a in Photo Retouching Tips And Tricks In Photoshop
Here, layers are smart objects.

Right-click on the layer and choose “New Smart Object via Copy,” and then open the Camera Raw dialog box again by double-clicking the layer icon. Set the “Clarity” value to -100 and confirm with “OK.” Hold the Alt/Option key and click on the “Create Layer Mask” button, then use a soft brush to paint over the optimized skin. Use the opacity slider to control the amount of retouching.

30-tips-and-tricks4b in Photo Retouching Tips And Tricks In Photoshop
Here is optimized skin with the help of Camera Raw.

Setting Lights

If you want to do some virtual re-positioning of your strobes, then neutralize the shot first. Go to Select → Color Range, and set Select option to “Highlights.” Copy the selection content to a new layer by hitting Control/Command + J. Activate the background layer again, and select the “Shadows” this time. Bring those to their own layer, too, with Control/Command + J, and then set the blending mode to “Screen” and the highlights to “Multiply.”

30-tips-and-tricks13a in Photo Retouching Tips And Tricks In Photoshop
Highlights and shadows

Reduce the opacity to about 30%, depending on the image content. “Shadows/Highlights” might also help. On a new layer, filled with a neutral gray and its blending mode set to “Overlay,” paint in the desired light quality with the Dodge and Burn tools. Alternatively, add a new layer and set its blending mode to “Soft Light” or “Overlay” and, with a low opacity brush, paint black and white on this layer.

30-tips-and-tricks13b in Photo Retouching Tips And Tricks In Photoshop
The lights were neutralized a bit.

Distinguished Paleness

For a distinguished paleness, copy the background layer and set its blending mode to “Screen.” Use Image → Adjustments → Desaturate or “Black & White,” then “Shadows/Highlights” to increase the effect. The exact adjustment options can vary according to your image content.

30-tips-and-tricks2a in Photo Retouching Tips And Tricks In Photoshop
Here’s the layer after creating the mask.

The effect will cover the entire image unless you click on the “Create Layer Mask” button while holding the Alt/Option key, and then paint the pale areas with the brush tool and white color. You can control the effect’s strength with the opacity slider.

30-tips-and-tricks2b in Photo Retouching Tips And Tricks In Photoshop
Distinguished paleness.

Dodge And Burn Look

Copy the reduced layers to a new layer with Shift + Control/Command + Alt/Option + E, and then set the blending mode to “Vivid Light.” Use Control/Command + I to invert the layer content, and apply Filter → Blur → Surface Blur with a radius of about 70 pixels and a threshold of 40 levels. Press Shift + Control/Command + Alt/Option + E again, delete the layer below, and set the blending mode to “Overlay.” Apply a “Gaussian Blur” to make the contours a little softer, and then click Image → Adjustments → Desaturate.

30-tips-and-tricks9 in Photo Retouching Tips And Tricks In Photoshop
Dodge and Burn Look

Bright Eyes

To make eyes appear brilliant, click on New Adjustment Layer → Exposure. Fill the layer mask with black (or invert the mask), and paint with white over the irises and with black over the pupils. Set the blending mode of the adjustment layer to “Luminosity.” Increase the exposure in concert with the gamma value to give the iris structure more contrast. Also, try changing the “Offset slider.”

30-tips-and-tricks11 in Photo Retouching Tips And Tricks In Photoshop
Create beautiful eyes with exposure.

The Orton Effect

With the Orton effect, sharp and blurred versions of a photo are mixed together. Copy the background layer with Control/Command + J, and click on Image → Apply Image. Change the blending mode to “Screen” and click “OK.” Copy the current layer again with Control/Command + J. Apply a Gaussian Blur to this copy by clicking Filter → Blur → Gaussian Blur. The value will depend on the size of the image. The shapes should always blur slightly. Set the blending mode for the layer to “Multiply.”

30-tips-and-tricks15 in Photo Retouching Tips And Tricks In Photoshop
The Orton effect creates contrast and depth.

Optimizing Lasso Selections

Many users (even professionals) prefer the Lasso Selection tool to the Path tool for uncomplicated selections. To switch to the Polygon Lasso tool for a short stretch, hold the Alt/Option key while working. To switch back to the regular Lasso tool, just release the Alt/Option key while depressing the mouse button.

30-tips-and-tricks28 in Photo Retouching Tips And Tricks In Photoshop
Switching between the Lasso and Polygon Lasso tools is easy.

It often happens that, during a zoom, you hit the edge of the work area while making a selection. Just keep the space bar pressed to switch to the Hand tool, and you can quickly change the displayed image section.

Aligning Layer Contents

Some areas in Photoshop are hardly ever noticed. This is one of them. If you activate the Move tool, you’ll see some mysterious symbols to the right called Align tools, in the option bar next to Auto-Select and the Transform controls (which are basically equivalent to Free Transform).

30-tips-and-tricks29 in Photo Retouching Tips And Tricks In Photoshop
Align tools

If you activate just one layer, the Align tools won’t do anything, but if you select two or more layers by holding the Control/Command key, then you can align the layer’s contents with these buttons. Choose from options such as “Align Top Edge” and “Align Vertical Center.”

Restoring Selections

Often, while in the middle of working on a tricky selection, you’ll accidentally deselect it by clicking once too often. You can restore the lost selection by pressing Shift + Control/Command + D. This will get the ants marching again. You can also undo (Control/Command + Z) the action, and even perform multiple undos with Control/Command + Alt/Option + Z.

By the way, you can hold the Alt/Option key to subtract elements from the selection at any time, or hold the Shift key to add to the selection. Pressing a combination of both keys creates a selection intersection. Important selections that you might need later can be saved by going to Select → Save Selection.

30-tips-and-tricks30 in Photo Retouching Tips And Tricks In Photoshop
Restore lost selections.

Type As A Graphic Image: A Sometimes Ignored Art Tool

Posted in Uncategorized on March 25, 2011 by Creative Cartels

It is amazing that one of the least known, ignored, or easily under rated graphic design tools is, believe it or not,the font. That’s right, the font.

previews Type as a Graphic Image: A Sometimes Ignored Art Tool
Image credit.

Type or typography is becoming a genuine art form within the graphics design world. Still, this incredible resource which lies on every computer geek’s fingertips is not always recognized. Even as graphic artists work night and day with type, it is very easy for them to forget the artistry that lies within the font. The challenge when creating graphic design with typography is to design the entire project with fonts. This includes:


  • Titles
  • Information
  • Pictures and/or
  • Images

In Visual Arts, Less Is More

less is more Type as a Graphic Image: A Sometimes Ignored Art Tool
Image credit.

Fortunately for the artist, using typography in graphic design is no different than creating any other piece of artwork.

For example, all fine art needs to reflect:

  • Negative and positive space
  • Light and dark

In the world of fine arts, this “white space” is just as important as in typography. In typesetting, one thinks about blank space; in using typography as graphic design, one considers what is called white space. If every inch of a canvas is completely covered with busyness, then the painting will be dull and uninteresting. A painting must have:

  • Opposition
  • Space and form

Designing with typography uses the same principals. Only then, it is on its way to becoming a work of art. So, when you begin to experiment with this kind of graphic design, remember your “white space” is as important as the filled space. This is known as letting a work of art breathe.

Stop Thinking..

Some of the best designs which use typography as well as any fine art have come from limited resources and time. Too much thinking or pondering can sometimes drive the creativity resulting a safe, boring outcome. This does not mean that you don’t need skills and a brain; it simply means art comes together when one lets the creative juices flow and most importantly, combines it with skill. A project will then flow easier and solutions come quicker.

The Experiment: Typography Only, Please

experiment Type as a Graphic Image: A Sometimes Ignored Art Tool
Image credit.

So, for your next graphic design project, take this challenge: limit yourself to only typography. This means every image, as well as headings and information in regular type, will be formed from fonts. Use this experiment to become reacquainted with the beauty of fonts and words. Typography has a class all its own and it can be very rewarding to find out what great products you can create with your own ingenuity using the grace and smartness of type and the different font styles

What can make typography, in graphic design, challenging is to really view it as its own art form. It’s time to find out what kind of magic one can create with the combination of computer skills, art sense and amazing fonts.

Basics Behind Color Theory For Web Designer

Posted in Uncategorized on March 25, 2011 by Creative Cartels

As a collective digital artist, it is important to understand the fundamental science behind color theory. It’s a popular topic with a vast spread of information to retain and digest. Not only does this topic focus on arts and design, it also involve jist of optics science.

color theory Basics Behind Color Theory for Web Designer
(Image source: Shutterstock)

There is plenty to cover on this topic so we’ll be glossing over some of the key points to extract what should be emphasize. Each of these topics consist of examples on which pertain towards color schemes and combination. Expanding further knowledge on such rich topic will flourish your creativity for future projects.

Beginnings Of Color Theory

When starting off into the pool of colors, we should base ourselves in square one. After breaking through all the mixes we are left with only 3 primary colors. These are red, blue, and yellow, and they are the root ingredients from which all other colors manifest.

color science mix Basics Behind Color Theory for Web Designer

These primary colors may be combined together in a mixing process to create other color scheme. These are known as secondary colors and will always contain a mix of 2 primaries. These three secondary colors are orange, violet, and green. This color scheme is based off the sample default style. When you start designing for web and print it may be required to switch between different color models. These include RGB and CMYK which are notoriously utilized in digital and print design, respectively.

Tertiary Color Pallet

Once we have our color wheel started we can use these resources to create tertiary colors. This group holds a 2nd layer beneath primary/secondary which is created when mixing between all six original colors. With this we are now able to create six brand new colors (2 from each primary). This will give out a blend of 12 colors in total. At this stage we are able to design a full pallet and fill in a 12-sided color wheel. This is often used within Adobe Illustrator to create color swatches and patterns.

tertiary color wheel Basics Behind Color Theory for Web Designer

Next we’ll be going over some of the most popular color schemes. These are useful for all digital artists looking to create illustrations, icons, vectors, or Photoshop graphics. Understanding how to combine colors to strike a chord will take practice, but through determination you will be able to create almost anything!

Monochromatic Colors

When delving into color schemes we can find an endless supply of creativity. This realm holds the possibility to create hundreds of different color pallets all with varying intensities.

monochromatic color comic Basics Behind Color Theory for Web Designer

Monochromatic color schemes are the raw colors as they only refer to a single hue. This can be green, blue, orange, aqua, or whatever fits best into your design. These are commonly seen with branding and background patterns to fit into an existing pallet.

In this reference colors are usually created by dimming opacity between each color (or hue) and a background. The most common example is creating an alpha channel and adding more white/black into a selected hue at varying degrees. Through this method you are able to design a useful monochromatic color scheme to blend into simple digital graphics.

Analogous Scheme

These colors are put into a generation based on their location on the standard color wheel. Analogous sets are created by points located directly adjacent to each other. Common examples include green/yellow-green/yellow or red/orange/yellow.

horse analogous artwork Basics Behind Color Theory for Web Designer

These are 3-part schemes also known as a base triad. You may combine two analogous schemes together to create a hybrid set. Often analogous sets are found naturally and promote a pleasing sight to the eyes.

Between the 3 colors it’s generally common to assign roles in a design piece. One of the three is used as a base to hold the project together. The second is an accompanied color and the third is referenced as an accent. This effect can be used to create contrast and vibrant edges or shadows.

Complementary Themes

Colors residing in opposing positions on the color wheel are known as complementary. They naturally complement each other and provide an equal level of energy to a piece of art. Examples of these include red and green, purple and yellow, or blue and orange. These color schemes will create a high level of contrast between elements. are great when used in illustrations to highlight a piece of scenery or cartoon character. Often we’ll see this used on an article of clothing or wardrobe attire. The matches can become very overpowering so, do use them sparingly.

Text will often perform well over high-contrast black/white but is best rendered with slightly less saturation. In this way text off the page won’t hurt the readers’ eyes but is still easy enough to follow. There is also a second lesser-known scheme titled split complementary. This contains a base color which also brings in two colors opposite the spectrum. It’s derived by the two adjacent neighbors to the base complementary.

split complementary artwork Basics Behind Color Theory for Web Designer

As an example for a split complementary with red as our base we would need both adjacent colors beside green (but not including green). This would target green-yellow and blue-green. This pair provides the benefits of a high-contrast ratio without the jagged tension from a strictly complementary relationship. Often, these can be difficult color schemes to balance out. The base color of choice is usually located in the warmer region so you have 2 cooler color options for highlights, backgrounds, and smaller graphics.

Triad Color Sets

The triadic color scheme is one of the most popular amongst designers, and this is especially the case for digital artists. This scheme uses 3 colors which are equal distance from each other on the color wheel. As common examples we could include red, blue, and yellow or orange, purple, and green. We derive this by picking our base color (red) and moving 3 equal paces over to the right. Once we hit this (blue) move 3 more units clockwise to hit yellow, with just three more placements separating between red.

n64 triad rby Basics Behind Color Theory for Web Designer

Triads create a sense of equality and security. In most cases you’re pulling an even distribution of colors out to balance graphics & icons nicely. These can be used to create beautiful artistic illustrations of towns, oceans, forests, and many other scenes as well.

Top 20 Android Photography Apps

Posted in Uncategorized on March 25, 2011 by Creative Cartels

Android is an amazing mobile platform from Google which has recently created a great amount of buzz in the mobile market. Being completely open, this mobile platform allows application developers to unleash their creativity and in the same time giving end users the privilege to experience freedom of experimenting new possibilities. There has been a plethora of android powered devices in the mobile market lately and that effectively increase the amount of great apps in the marketplace!

android photography apps Top 20 Android Photography Apps

Today, we’ll be giving you a complete round up of Best Android Apps for all your photography needs. It doesn’t matter if you’re a pro or just a beginner at photography. These apps combined with creativity will make that tiny-winy camera of your mobile phone, a power-house of amazing photography. So without further ado, here’s then entire list.

Photoshop.Com Mobile

Straight from Adobe, with Photoshop mobile app, you can edit and share photos virtually anywhere. Other functions include Touch to crop, rotate, adjust color, and add artistic effects. You can also access all your photos and videos directly from your free Photoshop.com account. and quickly share with family and friends.

ps final Top 20 Android Photography Apps


Vignette app allows you to add extra light flairs to your photographs and make them even more amazing than they already are.

vig final Top 20 Android Photography Apps


An all round photo app with frames, effects, rich hi-res clip-art,high resolution save, stickers, rotation, brushes and mask modes.

photoid final Top 20 Android Photography Apps


PhotoWonder is a fun app to edit pics on mobile. With amazing effects like LOMO, BlueTone and Ageing, lovely stickers and frames, this app is a great fun!

pw final Top 20 Android Photography Apps

PRO Paint Camera

Want to take better pictures? PRO Paint Camera app is what you’ll need. With cliparts, contrast correction, text-fonts, toy-camera and x-ray mode, you can’t ask for more!

pro final Top 20 Android Photography Apps

Love Photo Frames

This app allows you to make a very special personalized framed picture, save in your album or send to your loved one by email.

luv final Top 20 Android Photography Apps

Camera 360

Turn your phone into professional camera by aplying filters like LOMO, HDR, axis shift, draft, ghost, etc.

c 360 final Top 20 Android Photography Apps


Powerful and award winning photo editor. Color-correct your pictures and add word balloons, titles, graphics, and effects like distortion. All in a fun, intuitive, and easy-to-use interface.

pc final Top 20 Android Photography Apps

Camera Fun Pro

The only Android app to apply LIVE Photoshop lens to your Android camera.

cf final Top 20 Android Photography Apps

Camera Zoom FX

Camera ZOOM FX gives you the ability to apply 40 effects (vignette, lomo, retro, polaroid, etc.) to your photo.

zoom fx final Top 20 Android Photography Apps

Fast Camera

The quickest camera ever. Just press the camera button and take pictures instantly, the preview doesn’t even stop.

fast final Top 20 Android Photography Apps

FX Camera

FxCamera enables you to take a picture with various effects like ToyCam, Polandroid, Fisheye, SymmetriCam, Warhol, Normal etc.

Fx Camera Top 20 Android Photography Apps

Multi Camera

Take multiple shots with your camera and get a single image.

mc final Top 20 Android Photography Apps

OnSite Photo

OnSite Photo lets you take photos and instantly upload them to a specific project within ConstructionOnline.

osp final Top 20 Android Photography Apps

Photo Album Organizer

Photo Album Organizer will copy selected pictures on your phone into a new photo album that you create. It also organizes your photos for better viewing.

album final Top 20 Android Photography Apps

Photo Mail

With PhotoMail app, you can edit and send photos quickly, copy photos from the gallery, edit photos with text and graphics and also E-mail selected photos.

mail final Top 20 Android Photography Apps

Pic Bubbler

Pic Bubbler is a simple and fun way to make pics more exciting. Turn pics of your favorite guy or girl into titillating memories. Edit pics of your favorite models. Sometimes it’s what you don’t see that makes all the difference.

pb final Top 20 Android Photography Apps

Retro Camera

With Retro Camera you’ll take delicious old-school pics your friends will drool over. 5 cameras, 5 sets of vintage vignetting, film scratch, black and white & cross processing effects for that off-the-hip analog look. Inspired by the Lomo, Holga, Polaroid, Diana, the toy cameras and Hipstamatic.

retro final Top 20 Android Photography Apps

Photo Scrapbook

Create a scrapbook of photos on your homescreen. Tap the widget to display full screen version of pictures of your children, friends, kids, pets, babies, holidays, etc.

scrap final Top 20 Android Photography Apps

Photo Effects

Turn your photos into art with amazing effects, similar to instagram.

pe final Top 20 Android Photography Apps

Convert Bitmaps To Vector Online – Vector Magic

Posted in Uncategorized on March 25, 2011 by Creative Cartels

vectormagic Convert Bitmaps to Vector Online   Vector Magic

Vector Magic allows you to convert bitmap images to vector directly from their website. The process is fully automated, so for those who don’t have a Photoshop or Illustrator, converting images into vector format is not a problem now.

Vector Magic is extremely easy to use. Upload your image, select your configuration and let the system handle the rest. When it’s done, just download the vector output of your image.

How To Use Vector Magic

There are several resources available to learn about Vector Magic. If you haven’t already, we recommend viewing the videos below.

Videos – Online Edition

20 second video demoSegmentation Editor

Videos – Desktop App

20 second video demoBasic WizardAdvanced WizardTransparency,Segmentation Editor


Using Vector Magic is super-simple – no signup necessary and it’s free to try it out:

  1. Upload your image. Vector Magic automatically figures out what settings to use and traces the image right away.
  2. Download the result! You can review the result in detail online before downloading it, and there are several tweaking options for improving it as well.

The sections below go more in-depth about the tracing options, and it can be helpful to have read them to get more background information about what they mean.


Image Types

The Online Edition automatically detects the image type for you. To manually override the selected option, click on “Hand-pick options” in the Improve Result section.

Vector Magic distinguishes between three fundamentally different input image types:

  • Photos
  • Artwork with blending along the color boundaries
  • Artwork without blending along the color boundaries

The reason Vector Magic distinguishes between these three categories is that they require very different types of processing.




Photos are anything captured with a camera, including photos of artwork. Photos usually have colors that change gradually across the image, and the original was usually not an actual piece of vector art, but is rather a source of inspiration for making a new piece of vector art.

Photos are normally traced to create some form of effect, perhaps to use as the background for a larger composition, or to extract some key shape element.

Photos normally do not have sharp corners and since an artistic effect is desired, there’s no single correct answer, but rather many quite possibly acceptable answers.

Artwork with blending


Artwork with blending

This is the most common type of artwork by far – in fact, if you’re unsure, this is probably the correct answer (you can always reprocess your image with different settings, so don’t be afraid to experiment if the results don’t come out right the first time).

Artworks with blending have very important information captured in the blending – if you look closely by zooming in in the vectorization wizard, you will see that the pixels on the shape boundaries are colored in proportion to which shape they belong the most to. When zoomed out, this is what makes the curved sections of this type of artwork look smooth. If there is no blending, the curved sections usually end up looking a little jagged.


Vector Magic uses the information in the blending to produce more accurate results

Vector Magic uses the blending to make the vector result resemble the input image as closely as possible. As you can see in the figure above, Vector Magic traces out the precise location of the edge of the shape. This is something no other tracing program can do consistently, and is one of the things that set Vector Magic’s results apart.

Since Vector Magic makes the most of the information in the blending, you normally do not want to posterize your input images, as is common with many other tools. Instead, specify the colors Vector Magic should use to both get the information in the blending and limit the colors present in the output.

Whenever you convert a vector image to bitmap format, you should make sure to enable the blending (also known as “anti-aliasing”) in order to get the best looking result possible.

Artwork without blending


Artwork without blending

Artwork without blending have abrupt edges between the shapes in the image (see the example image). This type of image unfortunately contains much less information about the details of the shapes than a corresponding image with blending, which means that it’s much harder to recover the fine details from the original.

Notice the distinct difference at the edges of the color boundaries, when compared to the artwork with blending.

Vector Magic uses special techniques to get the most out of these images, and the techniques differ from those used in the with-blending case. It is therefore crucial to pick the right option, but if you’re uncertain you can always just try one and then the other.

Artwork that look like it has meaningful blending, but actually doesn’t


Artwork without and with meaningful blending. Note how the blending in the left image doesn’t give a very meaningful cue to the curvature of the shape.

A particularly tricky case is when an image looks like it has blended edges, but the blending is meaningless. This can happen when shrinking an image that did not use to have blending, but it’s shrunk by only a small amount (e.g. to 90% of it’s original size – if you shrink it by a lot, e.g. to 50% of it’s original size, then the blending starts becoming more meaningful; it’s a gradual scale).

In this case the blending does not give meaningful clues as to where the boundaries should be drawn, so the best option to use is usually “artwork without blending”. You’ll want to make sure to limit the colors used, to get as much as possible of the noise out of the image – the blending effectively becomes noise in this case.


Quality/Detail Level – Artwork

In the Online Edition this corresponds to the Detail Level setting in the Improve Result section.

For artwork, Vector Magic allows you to specify the quality level of the input image. This quality level is then used to tune the processing to get the most out of the bitmap original, and impacts the detail level in the result.


Impact of the quality level setting on the shape boundaries

When you specify a higher quality level:

  • More details are preserved when partitioning the image into basic shapes.
  • The shape boundaries follow the bitmap original more closely, allowing finer details to be traced out.

This allows you to recover the finer details of your bitmap original.

Conversely, when you specify a lower quality level:

  • More noise is rejected when partitioning the image into basic shapes.
  • The shape boundaries follow the bitmap original less closely, smoothing them out more.

This allows you to reject most of the noise in the bitmap original, while still staying faithful to the main features present in it.

There’s a tradeoff between rejecting noise and preserving detail. Experiment a little – you can use the buttons in the troubleshooting guide to quickly reprocess your image to see what the different settings do. This will let you quickly build up a feel for what type of image works best with what type of quality setting.


Detail Level – Photos

In the Online Edition this corresponds to the Detail Level setting in the Improve Result section.

For photos, Vector Magic allows you to specify the level of detail you would like to see in the output.





higher detail setting means that there will be more shapes in the output, and these shapes will follow the color contours more closely.

lower detail setting means that there will be fewer shapes in the output, and these shapes will be more smoothed out.

Vector images with more shapes take up more space, take longer to load and render, and are more difficult to manipulate, so it’s a tradeoff between simplicity and fidelity. Medium is the recommended setting, as it normally gives a very good balance between looking like the original and having a reasonable number of shapes.




Unlimited colors

Custom colors

In the Online Edition this corresponds to the Color setting in the Improve Result section.

For artwork, Vector Magic allows you to specify the colors to use when tracing your image (Custom colors). This is very useful for noisy logos, or logos that have faint outlines around the shapes, but you just want the shapes and not the outlines.

The point of specifying what colors to use, is that it helps Vector Magic produce a cleaner result that is guaranteed to have no extra colors in it. This can really help in removing crud in noisy images. If your logo has 12 or fewer colors in it, you pretty much always want to use this option.


Specifying the colors appropriately can mean the difference between a poor and a directly usable result

It can also be used to achieve an effect for logos with many colors, where excluding some of the colors can create a somewhat posterized feel to the result.

To help you pick the colors, Vector Magic generates a set of proposed palettes, with 2 to 12 colors in them. It then guesses which palette is the most likely and preselects that one for you.

You can pick one of the generated palettes and just go with that, or start with one of them and then modify it to suit your needs. The modification is very easy, you just select the color you want to change and then eye-drop the color you want from the image.


Convert Bitmaps To Vector Online – Vector Magic


%d bloggers like this: