Categories ➤ Guides

How to Replace Icons in OSX

Posted in Guides

Not only does OSX comes with one of the best icons around, but Apple made it incredibly easy to change default icons compared to other operating systems.

PS: file in this guide stands for files, folders, applications and volumes.

Using Finder's Get Info

Get Info
Get Info in the contextual menu item.

What you need:

  • The target file
  • Another file with the new icon: the source file

Steps:
  1. Select both files, right-click then choose "Get Info"
  2. In "Get Info" pane of the source file, select the icon at the upper left corner.
  3. Copy it using Cmd()+C or choose Edit > Copy in the top navigation bar
  4. In "Get Info" pane of the target file, select the icon at the upper left corner.
  5. Paste the icon using Cmd()+V or choose Edit > Paste in the top navigation bar
  6. Done!

To restore the original icon:

  1. In the "Get Info" pane of the target file, select the icon at the upper left corner.
  2. Hit delete(⌫) on your keyboard

Using Finder's Show Package Contents (Apps only)

Get Package Content
Get Package Content contextual menu item.

What you need:

  • The target application
  • The icon in .icns format

Steps:
  1. Select the target application, right-click then choose "Show Package Contents"
  2. In Contents > Resources look for the icon file with an .icns extension. Use spotlight for more efficiency.
  3. Back up the icon file by copying it elsewhere
  4. Rename the new icon to the name of the .icns file you just backed up.
  5. Drag-and-drop the new icon to the Resources folder, replacing the original .icns file.
  6. Done!

To restore the original icon:

  • Repeat the same steps as above to replace your custom icon with the original back-up file.

Using Third Party Applications

Candybar
Candybar, a powerful icon management solution.

Beside the native solutions detailed above, there are several third party applications that allow you to change icons in an easier and classier way. If you fancy yourself a premium, full-featured solution, give Candybar ($29) or IconBox ($24.99) a try. Otherwise, you can stick to the free LiteIcon, which is certainly more than enough for most of us, and even comes with a crappy icon for practice.

What you need:

  • The target file
  • The new icon in .icns (alternatively .png, albeit not recommended)
  • Third party application

Steps (LiteIcon)

  1. Drag-and-drop the new icon (.icns) onto the target file in LiteIcon
  2. Click Relaunch finder to see changes
  3. Done!

To restore the original icon:

  • Right click the target file
  • Select Restore.

Your questions and suggestions are welcome in the comments section!

Five Things to Avoid When Receiving Design Feedback

Posted in Guides

Many of you have enjoyed my previous article about giving design feedback, so here is a follow-up dealing with the issue from a designer perspective.

While our clients, bosses or peers might not always be able to communicate effectively their opinions about design, it is by no mean an excuse for us designers to put all the blame of a faulty communication on them. We are equally responsible, if not slightly more.

Dealing with criticism can be daunting at times, but it's inherent to the design profession. Skipping it is not an option, botching it is. Let's have a look at 5 things to avoid when getting design feedback:

1. Taking it personally

Do not take design criticism personally. Having your proposition rejected doesn't necessarily mean you are a bad designer. People have different tastes and opinions, so do not expect everyone to like what you do. Most importantly, keep those critics tied to your design work, not your persona.

2. Ignoring feedback

Turning a deaf ear to what the others have to say just because you are a design professional is outright amateurish. Listen to others, and learn from them regardless of their status or profession.

3. Jumping to conclusions

Try to understand what's going on, but don't second guess. Ask specific questions, lots of them. Every bit of info can help you define the problem, which is halfway to finding a solution. Your client or boss may lack any design background to pinpoint the source of the problem; help them find their words through your questions.

4. Denying mistakes

No human being is perfect. Admit your mistakes and try to correct them, instead of denying them and blaming it on the others' ignorance. That's uncool.

5. Acting untactfully

You may often realize that the views expressed by others are too subjective and wouldn't necessarily serve the original purpose of your work. Try to explain that tactfully, using arguments and examples for better results. Remember that you are not here to tell people that they are wrong.

Five Things to Avoid When Giving Design Feedback

Posted in Guides

It would be hard to argue that there is no place for subjectivity in design. Unfortunately, this is the very reason that makes giving constructive design feedback a daunting challenge. Add to this the fact that not all of us are designers: sometimes you feel that something is wrong, but you can't explicitly describe it, let alone conveying it to others. Needless to say, failing to provide constructive feedback makes things a tad harder for both parties. For better results, here are five things to avoid when criticizing design:

1. Vague statements

Avoid generic sentences that are too vague to communicate anything to the designer. Something in the lines of 'It looks horrible', 'It's off the mark' etc won't cut it. They just end up confusing the designer and delaying the project. Make an effort pinpointing what bothers you, even when you lack the jargon to clearly express it.

2. Personal tastes

Never ever criticize design based on your personal tastes; bringing personal tastes and preferences into play is highly counter-productive. Always refer the project brief and consult with your designer to make sure that everything sticks to the guidelines.

3. Uninformed criticism

Before voicing your opinion, always ask for the Why. Judging design without seeking to understand the brainwork underlying it is plain amateurish. Mutual understanding is key.

4. I-can-design-too attitude

Do not underestimate design. I know you can use Photoshop. I know you had already made a website or a logo for your college Art club. But let's be honest: If you know that much about design, you wouldn't be seeking the expertise of a designer in the first place. And even if you do really know about design, do not get too cocky, as this won't make things any easier.

5. Superfluous comparison

Do not try to constantly compare the work at hand with what you have seen elsewhere. External references should be used moderately, as every project is unique. Also, do not bring the argument of best practices, as there aren't any.

A problem well defined is a problem -mostly- solved. And when it comes to design, defining the problem can be the most difficult part. Let's not make it any harder.

Furfox Design Process

Posted in Guides

You heard it here first: there is no, there has never been, and there will never be a standard design process; each and every designer has his own. The steps detailed below describe roughly the process I followed to design Furfox.

Step 1: Sketching

Furfox Sketch
Sharp pencil sketch of the concept.

Many designers can't do without the good ol'pencil and sketchbook, and I happen to be one of them. Out of the few concepts I had jotted down, this one seemed to be a good starting point.

Step 2: Vector Tracing

Furfox Step 2
Manually drawn vector shape.

I then proceeded with scanning the sketch and tracing it in Adobe Illustrator. This step is optional, but I often resort to manual tracing when I can't get away with basic shapes.

Step 3: Adding Vector Details

Furfox Step 3

Drawing vector fur using Illustrator.

This step is all about adding details to the vector shapes obtained during the previous step. I admit that drawing vector fur can be irritating at times, but I got used to it thanks to my ephemeral experience with character design.

Step 4: Adding Colors

Furfox Step 4
Adding color to the vector shape.

This is my personal favorite. Nothing beats the joy of playing with colors, shadows and effects. I obviously had to cope with a pre-determined color palette (orange and blue predominantly) to preserve the visual identity of Firefox, and that's often the case in professional design.

Step 5: Adding Raster effects

Furefox Step 5
Adding various raster effects using Photoshop

I then exported the icon to Photoshop for the finishing touches. I added some layer effects, adjusted the contrast and changed the beach ball angle and colors. I also had to manually tweak the 16px version of the icon for a sharper and more contrasted result.

Although I could have switched to raster right after step 3, I tried to delay this transition as much as possible in order to preserve scalability and "editability". You gotta love them those vectors, they never fail you.

Step 6: Icon Packaging

Furfox Step 6
Exporting the icon and adding metadata.

Once the icon is ready, I exported it to CandyBar to edit the metadata and re-export it as an iContainer. I have previously used IconBuilder, a Photoshop plugin for building icons, but I recently noticed that the combination of the two above-mentioned apps can do exactly the same, with style.