With the rise of the smartphone app, icons have become increasingly indispensable to the way we navigate the technology around us – an iPhone homescreen without app icons is almost unimaginable. While icons have played a role in GUI interaction since, well, the earliest GUIs were developed, we tend to think of icons as belonging… Read more »
Enhancing your Website with custom Website Illustrations The use illustrations can be a powerful artistic tool in web design and can make a website truly unique. Working with a good illustrator to create a design which reflects the product or service the website offers can result in a great outcome: a timeless, distinctive website which… Read more »
As psychology teaches us, humans are fundamentally social creatures. Even the most seemingly isolated individual act is a social one. Signing up to a website might seem to involve nobody other than the person sitting at their computer, but what they are actually entering into is a complex social relationship made up of many different… Read more »
Technology is forever being used in new and exciting ways. That’s why it’s important that you consider all sorts of different target audiences in your design work. This includes children. Programs and operating systems are increasingly being designed with kids in mind. For example, with the launch of the Windows 8 operating system for Windows… Read more »
There are some simple, basic methods of good icon design which can yield great results if they are followed. Sometimes some designers stray too far from the basics by trying to be too original. Originality is important, but it’s also important to remember the basics. Here we outline some easy, memorable keys to effective icon… Read more »
Lately there’s been a lot of talk of how the ‘flat icon’ has come to dominate interface design across all different platforms. The flat icon trend can be seen as a conscious effort by developers to return to basics when it comes to design. Of course, the ideal icon is one that explains its function… Read more »
Although a good proportion of the icon design projects we work on follow an established icon style, such as those found in mobile Apps like iOS and Android or desktop software icons like Microsoft Office and Windows 7, the greatest demand is generally for custom icons in a unique style. Despite the shift in popularity… Read more »
Icon design is ever evolving. As new platforms embrace the use of icons, new terms and references are dreamt up and older terms fall out of favour. This glossary is an ongoing project to document the icon design lexicon. Contributions are very welcome. 16×16 Pixel Icons This icon size has its own entry here because… Read more »
Here is another great comic style illustration from David, one of my favourite Icon Designers at Creative Freedom. This time we have a Super-Villain with a decidedly bad temper which I am sure fans of the 2000 A.D. Comic will have no trouble recalling. Comic Style Icon DesignJudge Dredd Icons & IllustrationAs a kid I… Read more »
Despite the fact that most of my icons are drawn in vector editors, their output is almost always in a bitmap format. Use Pixel Preview mode to understand how Illustrator divides objects into pixels.
In Adobe Illustrator you can open multiple windows of a single document at the same time. Each window can have different view settings. For example, you can set one window highly magnified for doing close-up work on some objects and create another window less magnified for laying out those objects on the page.
You can arrange multiple open windows to suit your needs, using options from the Window menu. Cascade displays windows stacked and descending from the upper-left to the lower-right of the screen; Tile displays windows edge to edge; Arrange Icons organizes minimized windows within the program window.
To create a new window choose Window > New Window:
You don’t need use Zoom in/Zoom out or turn on/turn off Pixel Preview mode if you want to magnify some icon or view 100% or preview how icon will appear when rasterized. Just open several windows for your document:
1. In the left the biggest box we draw.
Choose the most convenient to work on the scale of an icon. There are several ways to zoom in or out of artwork.
Select the Zoom tool Click in the center of the area that you want to magnify, or hold down Alt (Windows) or Option (Mac OS) and click in the center of the area that you want to reduce. Each click magnifies or reduces the view to the previous preset percentage.
Select the Zoom tool and drag a dotted rectangle, called a marquee, around the area you want to magnify. To move the marquee around the artwork, hold down the spacebar, and continue dragging to move the marquee to a new location.
Choose View > Zoom In or View >Zoom Out. Each click magnifies or reduces the view to the next preset percentage.
2. In the upper right we see our work 100%.
To display a file at 100%, choose View > Actual Size, or double-click the Zoom tool.
3. The lower right are looking to hit our line pixel or not.
If you move, add, or transform an object, the object snaps to the pixel grid. As a result, any anti-aliasing along the “snapped” edges of the object (usually the left and top edges) disappears. Now deselect the View > Snap To Pixel command, and move the object. This time, you’ll be able to position the object between the grid lines. Notice how this affects the anti-aliasing of the object. As you can see, making very minor adjustments can affect how the object is rasterized.
Important: The pixel grid is sensitive to the ruler origin (0,0). Moving the origin of the ruler will change how Illustrator rasterizes artwork.
To understand how Illustrator divides objects into pixels, open new wondow for file that contains vector objects, choose View > Pixel Preview, and magnify the artwork so that you can see its individual pixels.
Pixel Preview mode approximates how your artwork will appear when it is rasterized and viewed in a web browser. Also when you save artwork in a bitmap format, such as JPEG, GIF, or PNG, Illustrator rasterizes the artwork at 72 pixels per inch. You can preview how objects will appear when rasterized. This is especially helpful when you want to control the precise placement, size, and anti-aliasing of objects in a rasterized graphic.
These little tricks make the designing of Icons even easier. ;)