Блог: статьи

«Обрезание» — праздник детства

Дмитрий ЖуковАвтор: Дмитрий Жуков
15 марта 2007

Вспомним операционные системы прошлого века — куча Windows до 2000, Mac OS до 9-ой версии. Все они поддерживали только однобитную прозрачность для иконок. К счастью, прогресс не стоит на месте — современные операционные системы используют уже восьмибитную прозрачность. Однако ради обратной совместимости Microsoft рекомендовала включать в состав иконкок для Windows XP варианты картинок и с однобитной прозрачностью. Со временем возня со сведением современной восьмибитной прозрачности к однобитной обрела в среде дизайнеров-иконочников романтическое название — обрезание краев. Именно об этой возне пойдет сегодня речь…

Я уже слышу удивленные возгласы: «Кому нужны старые иконки в XXI веке?». Однако историческая справедливость требует осветить и эту веху в нашей работе. Тем более, что приемы, о который пойдет речь, могут пригодиться не только дизайнерам иконок, а вообще всем, кто работает в жанре цифровой миниатюры.

Чтобы не было вопросов:

  1. в скобках указаны горячие клавиши;
  2. пользователи Mac OS самостоятельно заменяют в голове Ctrl на ⌘ Command.

Хищный инопланетянинВ качестве подопытного кролика возьмем иконку 32×32 с хищным инопланетянином из заметки «Кристально чистый вектор». Для начала нам надо избавиться от областей с прозрачностью близкой к 100%. Для этого выделяем весь слой с иконками (Ctrl+Click в панеле Layers) и переходим в режим редактирования маски (q).

Select Layer Transparency
Режим редактирования маски

Теперь воспользуемся инструментом Threshold (Image → Adjustments → Threshold). Перемещаем ползунок вправо до тех пор, пока все ненужные полупрозрачные области не уйдут в красный цвет.

Threshold

Выходим из режима быстрой маски, инвертируем выделение (Ctrl+Shift+I) и очищаем все, что осталось за бортом (Del). Ура, мы избавились от всех ненужных полупрозрачных пикселей.

Дальнейшая работа сводится к тому, чтобы сделать нужные полупрозрачные пиксели непрозрачными. Для этого (прошу помидорами не кидаться) скопируем текущий слой раз 10 (Ctrl+J). Если кто расскажет, как сделать это проще — я весь внимание. Теперь осталось только кучу слоев с одинаковыми названиями объединить в один.

Объединяем слои

Хищный инопланетянин с обрезанными краямиМноголетний опыт рисования и обрезания дал о себе знать и результат для автоматического метода получился весьма неплохой. Тем не менее, настоятельно рекомендую пройтись по периметру с карандашиком и ластиком размером 1×1 пиксель. Местами, возможно, надо цвет поменять, где-то пиксель лишний убрать, а где-то — добавить.

Не стоит забывать, что в прежние времена иконки обычно имели обводку. Чтобы мои инструкции могли претендовать на полноту, давайте ручками дорисуем нашему инопланетному убийце обводку в 1px а-ля старая школа.

Мультик с рисованием обводки

Резюмируя все вышесказанное, хочу лишь пожелать, чтобы эта инструкция вам никогда не пригодилась. Большие и красивые иконки — в жизнь!

Условия использования

Данные материалы можно использовать в некоммерческих целях, с обязательным указанием автора.

Комментарии

Отличная статья, спасибо!

Ответить Smash, 15 марта 2007

А не легче ли было пройтись по иконке Pen tool и сделать выделение без сглаживания,а потом просто инвертировать и удалить?

Ответить zonny, 15 марта 2007

Слишком рано хоронить однобитную прозрачность.

При разработке корпоративного ПО приходится иметь ввиду что даже зарубежом еще не мало компаний работает под win2000, что уже говорить про Россию.

Еще есть такая замечательная штука как Terminal Services которая очень распространнена заграницей для удаленной работы. А Microsoft Terminal Services, так же как и Citrix отображают только однобитную прозрачность.

Так что большое спасибо за статью, теперь буду знать как обрезать проще и быстрее.

Ответить Олег, 16 марта 2007

Zonny, описанные мной действия помогают сделать все очень быстро с минимальным использованием мозгов.

Олег, я все понимаю, но мне как дизайнеру очень хочется чтобы все стало красивее, в том числе и Terminal Services.

Пользуйтесь на здоровье.

Ответить joukov, 16 марта 2007

всё хорошо обяснили и показали. вы систеатизировали вообщем то, до чего я и сам дошел недавно :) спасибо

Ответить Сергей Иоффе, 30 марта 2007

Всё отлично, но мне кажется для очень мальньких значков это не совсем подходит :(

Мне пришлось рисовать значе 20х20, с использованием в нем текстовых элементов, там ни как нельзя оставлять четкие ( не прозрачные) границы пикселей, т.к. зубцы просто УЖОС.

Ответить Godzila, 3 июля 2007

Напишите комментарий

Вы можете использовать ваш twitter или facebook. Для этого вам нужно будет авторизоваться на одном из этих сайтов, после чего вы сможете оставлять комментарии.

Connect with Facebook

Если у вас есть OpenID (например, myopenid.com), воспользуйтесь им для авторизации.

Авторизуйтесь при помощи аккаунта Турбомилк. Вы также можете зарегистрироваться на нашем сайте.

Закрыть