Using the DevStyle Icon Designer

Getting Started

Ready to start contributing icons to the DevStyle theme for your favorite plugin? You can help! To get started, install the Icon Designer feature of DevStyle theme & plugin either when installing DevStyle initially or adding from the DevStyle site inside Eclipse.

Selecting the DevStyle Icon Designer during install

Planning Your Icon Design

Before creating your icon, it’s a good idea to consider your color palette, as well as your image design.

Color Patterns

Before making your own icons, take a look around your Eclipse. The DevStyle theme uses colors in specific ways to help simplify recognition of actions and provide consistency. For instance, Green is traditionally used to denote actions you take and Red is used to stop actions. Try to avoid icons with large quantities of red and green that are not primary places for the developer to look. The two main secondary colors being used in the icon set are Orange and Blue. This provides a consistent feel across icons. The remaining supporting colors are available for more options.

Sample toolbar using the DevStyle theme

There are a few special colors like Foreground and Background that are bound to colors in the theme, though technically all of the actual color codes are programmatically defined, and we’ll be allowing some control later to tweak the exact color palette.

Design Patterns

After getting a feel for why certain colors were chosen, take a look at styles of icons. You’ll notice that many icons follow certain patterns — if there is a folder, generally all folders will be structured the same for consistency even though they come from different plugins.

From the screenshot above, the series of folders all look consistent. For example, take a look at the Open Type icon which is a folder similar to the original Eclipse icon with a blue circle as a generic “object” concept. It is a simplification of the original icon to feel similar to an existing Eclipse developer but with a simplified modern feel. The Icon Designer intentionally limits the number of colors you can use in designs to force a more simplified model. While it would be possible to render multiple circles of different colors, it isn’t needed for rapid recognition of the action you are using.

There are a few specific places where the DevStyle theme has deviated from the original icon more significantly where the original icon is overly complex for the location the icon is being used. We recognize this is subjective and as part of moderating icons (more below) will be looking for fair representation as much as possible.

Using the Icon Designer View

Use the Icon Designer view to see the customized icon and original. To open this view, go to Window>Show View>Other and search for Icon Designer. From the Icon Designer view, you can select the Show on Control+Shift checkbox to easily locate icons in the Icon Designer. With this option selected, you can hover an icon in the toolbar and press Ctrl+Shift to quickly jump to that icon in the Icon Designer view. 

The Icon Designer view

Understanding the Icon Designer Editor

Before starting to make your own icons, double-click on a few icons in the Icon Designer view to see how current icons are made. If you double-click the Open Type from the previous example, the Icon Designer Editor displays the properties for opentype.png.

The Icon Designer Editor

Decomposing this editor section by section, you can understand the key elements of the Icon Designer Editor.

Overview of Icon

This section provides basic information about the icon being edited including the natural dimensions of the image. Note that the DevStyle technology will render the icon at any zoom level requested allowing for rendering at @2 @1.5 and other resolutions at full quality.

The Overview of Icon section

Preview of Icon

This section shows the initial icon as it is currently configured, as well as the replacement icon that will be used in the DevStyle theme. It is important to note that on a high DPI system, the preview will show the high resolution version of the icon — as can be seen here with 32×32 images being rendered despite the actual image being 16×16.

The Preview of Icon section

Settings for Replacement

This section allows configuration of the icon starting with the key layout which lets you choose to have a Standard or Overlay layout. When in overlay mode, two different icons can be configured.

• Padding allows setting a certain amount of padding around the edges of the icons to be configured including if the padding is on all sides or just certain ones. An example usage of padding is providing replacement icons for the Quick Fix indicators in the ruler of the editor.
• Icon allows for selection of the specific icon to be rendered as chosen in the Browse area of the editor. All icons are rendered using webfonts to allow flexibility of scaling and minimize size of the DevStyle theme despite being able to render thousands of replacement icons.
• Scale controls the sizing of the icon within the layout. Used in combination with the overlay mode, the scale allows a lot of positioning flexibility to create icons. The location can also be set inside the bounding box, such that if you are rendering an I or – you can position center in the icon or shift within it.
• Color allows setting the main color for the icon, as well as filling in any fully enclosed areas in the icon from the webfont.

Overlay Icon

This section allows configuration of the icon shown on top of the primary icon. Most of the settings are shared between the two, though the Position allows configuration of how the overlay icon is positioned with regards to the primary icon.

Overlay Icon section

Browse for Icon

This section is a shared component that allows searching for icons that can be used as part of making your own icon combination. Click on the desired Icon field on the left to control which icon is being specified. When searching, get creative! These are webfonts from things like Ionic and Material as well as some extra icons we’ve made at Genuitec.

Browse for Icon section

Making Your First Icon

Ready to dive off and make your own icon? Our suggestion is to be lazy!

Step 1: Find a similar icon & copy it

Find an icon similar to the one you want to create. For this example, we’ll create one similar to the Open Type icon. Hover the mouse over the Open Type icon in the toolbar and press Ctrl+Shift to select the icon in the Icon Designer (if this doesn’t work, be sure you have selected this option). From the selected icon, right-click and select Copy (or press Ctrl+C).

Step 2: Find the icon to replace and paste onto it

Now hover over the icon you want to replace and press Ctrl+Shift  to select the icon in the Icon Designer. From the selected icon, right-click and select Paste (or press Ctrl+V). The replacement icon appears on the toolbar.

Step 3: Open the icon in the Editor

From the icon list in the Icon Designer view, double-click the replacement icon to open it in the editor. Edit the icon to your liking. 

Step 4: Click Save to see a live preview

For many controls in Eclipse, the DevStyle theme’s Icon Designer is able to track usage of images and will dynamically reload the image into the control when you save the editor. Tweak, save, review, tweak again.

That’s about it to start making your own icons. When you restart Eclipse, you’ll see your customized icons in use! But, don’t stop there, sync the icon changes to Genuitec.com to let others benefit from your hard work.

Contribute Icons to the DevStyle Theme

Now that you’ve made icons, share them with the world. Simply click the Sync action in the view.

You will be given an opportunity to log into your Genuitec.com account (same for forums, etc.) to track contributions by community members.

From that point, the icons will automatically be uploaded and reviewed for moderation. Designers at Genuitec will review suggested icons and potentially make small tweaks to contributions before releasing updates. The good news is that icons are updated over-the-air so that your friends don’t need to wait until another release to see your cool icons — they’ll get them within a couple days of moderation!

Curious about status of icons you have suggested? Drop us a note @genuitec on Twitter.