Join Justin Seeley for an in-depth discussion in this video Exploring the principles of icon design, part of Creating Icons with Photoshop.
- Before we get started actually creating our icons inside of Photoshop, I think it's important for us to briefly explore some basic principles of icon design so that you're familiar with them as we begin laying out the plans for our new icon set. What exactly is an icon, anyway? An icon is basically a visual representation of something in an easily recognizable and click-friendly format. A single icon should be able to stand on its own, having purpose and telling its own unique story.
The key to a great icon lies in two very basic properties. Simplicity and its ability to be easily recognized for what it is. Take the one password icon for example. This is just a very basic icon made up of circles and a few interesting polygons. However, because of how it's presented and the story behind it, it's very effective. One password is an app that takes security very seriously. Thus, they have chosen a lock to represent that. They use this icon for both their desktop and mobile applications and also in their logo element to make it instantly recognizable to their users.
Icons don't have to stand alone, however. You can also have an icon set, but what exactly does that mean? Simply put, an icon set is a group of icons that share a similar theme, style and purpose. For instance, this icon set makes use of the same monochromatic color scheme. Similar lines and curves and they're all somewhat user interface related. All of these icons could stand on their own, most likely, but together, they become part of a bigger picture which could lay the groundwork for an entire user interface system of a website or even a mobile application.
What makes up a great icon set? In a word, consistency. You want your icons to look as though they were cut from the same cloth, so to speak. Take these examples here. All of these icons share a similar look or feel, maybe a common pattern or similar lighting effects. By keeping the elements as consistent as possible you create cohesion which is needed to create a thorough interfacing system for whatever it is that you might be working on. What's the process for actually creating an icon set? I break it down into four basic phases, all of which are important.
Research, planning, development and finally deployment. When you're doing research, you should be searching for common symbols for various tasks. For instance, what do play buttons and pause buttons and rewind buttons look like? What's the most common symbol for, let's say, saving a file or opening a file or even sending a message? Make note of these symbols and keep reference materials handy as you begin the planning stage. Sketching is also very important for the planning phase because it allows you to get your ideas out of your head and into a physical form that you can see, touch and interact with.
Later in this course, you and I will be sketching out our icons together. I'll walk you through my personal process for creating thumbnails so you have a better idea of what to look for as you create your own. Once you've planned out all of the icons you need for a given project and sketched out your rough ideas, it's time to move on to developing your vector assets based on those sketches using a program like Adobe Photoshop. After much revision, testing and refinements, your icons will then be ready for deployment. However, you must have a firm grasp of the platform guidelines for which you're designing in order to create the right size and type of icons needed for a given application.
For instance, iOS requirements are much different than those of Android or Windows. Mac OS X has different requirements from the standards of websites and so forth. In this chapter, I'll be talking a lot about platform guidelines, so make sure you pay close attention as we go through that portion of the course. Remember, design is a process and icon design is no different. If you work within the process, tale your time and don't rush it, you can create amazing icons just like the pros. You just have to know your guidelines, stick to them and focus on maintaining a consistent appearance throughout each piece that you create.
- Exploring file formats, sizes, perspective, and platform guidelines
- Choosing an icon style
- Creating sketches and assigning color schemes
- Building a grid system for icons
- Redrawing icons with shapes
- Saving icons
- Generating icons for different operating systems