вход или регистрация

GIMP — The GNU Image Manipulation Program
Гимп — бесплатный графический редактор

   

Создание иконки .ico для программ

Главная Уроки Создание иконки .ico для программ

Сейчас я максимально подробно расскажу как сделать нормальный «.ico», что бы он корректно отображался в операционных системах Windows, на других системах тоже по идее должен, но это не проверенно. Этот урок создан для широкой аудитории, как для знающих, так и для совершенно не знакомых с «Gimp». Например, вы отличный программист, создаёте программы на заказ, интегрируете в них уже готовые «.ico», но вдруг вы решили создать что-то своё, но вы не владеете ни одним графическим редактором, этот урок поможет вам. В этом уроке я буду объяснять не только какие инструменты нужно использовать, а ещё и как их нужно использовать.

Для начала скажу не знающим людям, что такое «.ico» и для чего он нужен.

«.ico» — формат «картинок» присвоенных определённой программе, например:

Перед вами исполняемый файл «Gimp 2.8», а выделенное красной линией и есть «.ico» файл, уже интегрированный в приложение.

То есть, выражаясь простым языком, это картинка программы. Так же «.ico» файл может быть иконкой сайта, курсором, но сейчас нам это не нужно.

Ну вот и всё, приступим к уроку. В этом уроке я буду использовать эту картинку.

1. Уменьшение изображения

Первое, что нужно сделать это уменьшить изображение которое вы хотите сделать «иконкой» до размера «256×256». Это можно сделать двумя способами, первый из них по-проще, но второй тоже не трудный.

Способ 1:

В редакторе «Gimp», в верхнем баре нажать на «Изображение», затем выбрать «Размер изображения».

В открывшемся окне установить значения высоты и ширины 256.

Получилось не красиво, но для ленивых сойдёт.

Лучше делать вторым способом, т. к. я так и делал.

Способ 2:

Создать новое изображение, в баре нажать «Файл» выбираем «Создать».

Ширину и высоту указать «256×256», остальные параметры не трогаем.

У нас получается это.

Далее нам нужно добавить «Альфа-канал». Это делается в правом окошке редактора «Слои — Кисти».

Щёлкаем правой клавишей мыши на слой «Фон» и выбираем «Добавить альфа-канал».

Теперь открываем ваше изображение в редакторе «Gimp». !Созданное изображение не закрываем!

В верхнем баре нажимаем кнопочку «Правка» и выбираем «Копировать».

Возвращаемся к созданному, пустому изображению «256×256».

И в верхнем баре нажимаем кнопочку «Правка» и выбираем «Вставить».

Далее в правом окошке «Слои-Кисти» щёлкаем правой клавишей мыши на слое «Плавающее выделение» и нажимаем «В новый слой».

У вас получится что-то похожее:

Далее мы будем подгонять картинку под «256×256», что бы не изменились пропорции. Это можно сделать инструментом «Масштаб» на панели инструментов которая по умолчанию слева.

После нажатия на инструмент «Масштаб» (ничего не меняем там), щёлкаете по этой картинке которую хотите уменьшить и открывается окошко с настройкой масштаба. У меня значения «Ширина» и «Высота» будут отличаться от ваших, это зависит от размера самой картинки.

В окошке нажимаем на разорванную цепь, что бы она стала целой и устанавливаем любое из двух значений 256, это зависит опять же от картинки. Т. к. у меня картинка прямоугольная и я могу пожертвовать шириной, я установил значение «Высота» ширина тоже должна измениться, но уже автоматически.

Нажимаем «Изменить».

Область выделенная пунктиром и есть ваше изображение, но оно за «холстом», это не беда, его нужно переместить на холст.

Сделаем это инструментом «Перемещение» на панели инструментов. Нажимаем на инструмент.

Затем наводите мышь на область выделенную у вас пунктиром и зажимая левую клавишу мыши переносите слой на холст.

Постарайтесь, что бы изображение не выходило за края, если не выйдет, то можно дополнительно уменьшить слой инструментом «Масштаб». У меня вышло так:

Когда мы подогнали изображение под холст не изменив его пропорций (такая задача заключалась в этом втором способе), можно удалить слой «Фон». На панели «Слои-Кисти» щёлкните по слою «Фон» правой кнопкой мыши и выберете «Удалить слой».

Остался последний шаг уменьшения изображения. На той же панели, нажмите правой кнопкой мыши по слою с вашим изображением и из всплывающего меню выберите «Слой к размеру изображения».

Если жёлтый пунктир находится по краям холста как тут:

То я вас поздравляю, вы закончили уменьшение изображения.

Теперь приступим к самому созданию качественной иконки формата «.ico».

2. 15 копий слоя

После создания картинки нужного нам размера, нужно откопировать слой 15 раз, то есть что бы было 15 одинаковых слоёв в панели «Слои-Кисти». Да, это не опечатка, именно 15, потому что мы будем создавать качественный «.ico» файл.

Для начала я объясню, что мы будем потом делать с этими пятнадцатью слоями. В файле «.ico» структура слоёв будет состоять из трёх разных по качеству «отделений» (в каждом из них будет по 5 разных размеров иконки), что бы файл было видно везде.

Объясню на примере бумажной продукции, если вам нужно сделать поделку из бумаги, вы не факт, что сможете сделать её из картона и т. д. Надеюсь пример понятен. Приступаем к работе.

2.1 Копируем

Создаём 15 копий. При помощи панели «Слои-Кисти», кликаем на слой правой кнопкой мыши и выбираем «Создать копию слоя».

И делаем так пока не будет 15 слоёв в списке.

Я растянул панель, что бы вы увидели, что слоёв именно 15. Это делать не обязательно, но это удобно. Так же, для простоты понимания, я переименовал слои с учётом их «отделений», опять же не обязательно, но удобно.

2.2 Масштабируем

С помощью инструмента «Масштаб» изменяем слой который назван у меня «2», не нарушаем структуру строения. Устанавливаем значение высоты и ширины 48, то есть слой должен получиться 48×48. Слой «3» должен быть размером 32×32. Слой «4» — 24×24 и наконец слой «5» должен быть 16×16. У вас получится что-то похожее.

Так же делаем с остальными «отделениями».

И последний рывок.

В итоге у нас получается:

3. Экспорт (сохранение) иконки в нужном формате

Это всё, но осталось правильно сохранить. В «Gimp 2.8» нужно экспортировать, это можно сделать нажав на верхнем баре кнопку «Файл» и выбрав «Экспортировать».

Открывается окно с сохранением работы. Обратите внимание, название файла не имеет значения, оно может быть любым, а формат должен быть только «.ico», как на скриншоте.

Нажимаем «Экспортировать», появляется окошко с детальной настройкой импорта. Необходимо настроить всё именно так, как показано на скриншоте иначе корректной работы не гарантирую.

То есть, первое «отделение» с пятью картинками должно быть «8 bpp», второе — «24 bpp», а третье — не изменяйте. Всё, поздравляю вас, теперь вы умеете делать качественные «.ico». Вот пример использования этой иконки интегрированной в программу.

Я приму вашу критику, помогу разобраться если вы что-то не поняли. Спасибо за внимание.

8

В избранном у 8 человек:

Метки: , , , , , .

Уроки: предыдущий следующий

9 комментариев

1

Пользователь #1384TechnoVirus1 февраля 2013 в 17:15Личное сообщение

А чем первый способ хуже второго?
Хотя, лично я, полноценного урока я так и не увидел :)
Да, я рожаю кучу идей для программ (друг их пишет), мне приходится самому "рисовать" иконки (потуги), но я так и не понял как мне сложный рисунок (на лёгие фантазии не хавает) уменьшить так чтоб, что на 256, что на 16 выглядел красиво и узнаваемо :)

1

Пользователь #4Андрей Сидоров1 февраля 2013 в 23:11Личное сообщение

TechnoVirus. Все просто. Из большого рисунка в 256 пикселей удаляйте мелкие детали и уменьшайте до 16 пикселей. Останется узнаваемая иконка.

0

Пользователь #10320Александр Иванов1 февраля 2013 в 23:31Личное сообщение

Немного не понял,а зачем столько файлов? винда и так подгоняет под стандарт, например картинку 256+256 при сахранении она отразит как 18+18

0

Пользователь #1384TechnoVirus4 февраля 2013 в 15:17Личное сообщение

Андрей Сидоров если я начну убирать детали, то тогда иконка меняет смысл :)
С одной стороны хочется чтоб иконка сразу говорила о том что ты будешь запускать, а с другой стороны, чем проще - тем луче :)

1

Пользователь #4Андрей Сидоров5 февраля 2013 в 11:44Личное сообщение

Александр Иванов, формат ico - не только для новых версий виндовс, но и для старых, а они плохо с масштабированием работали. И не только в виндовс дело, есть еще мак и линукс. Еще есть айфоны, андроиды и блэкбери (в них тоже ICO используется). Есть еще разные браузеры, иконки используются и в них.

Это же касается и цветности.

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

0

Пользователь #8598Evgeny Melnikov7 февраля 2013 в 05:13Личное сообщение

Уж лучше я воспользуюсь специализированной программой. Быстрее выйдет и качественнее.

0

Пользователь #4Андрей Сидоров7 февраля 2013 в 15:28Личное сообщение

Evgeny Melnikov, это что это за программы такие специализированные для создания иконок?

0

Пользователь #1812Макс Шевченко8 февраля 2013 в 09:41Личное сообщение

Андрей, а ведь они и правда есть, гуглопоиск подтверждает.

0

Пользователь #11054Kasper Najoff19 марта 2013 в 17:33Личное сообщение

Вообще не понятен спор, как правило что хорошо смотрится на маленьких пустовато смотрится на больших, а с больших в маленькие через чур забитыми выглядят, не знаю конечно у кого какие но у меня везде огромные значки по максимуму 24b с сжатием, правда 7стоит позволяет, для себя выбор остановил на 260х260 и нормально, а касаемо программ даже не марочился посмотрел сохраняет + есть выбор, спрашивается ну и нафига дополнительную программу ставить?

Чтобы участвовать в обсуждении вы должны войти или зарегистрироваться.

Информация по уроку

Кисти

GIMP Brush Cursor Handwriting Outlined PokerFace GIMP Brush Abstract1 Smoke1 Smoke2 Smoke3 abstract2 s_splat2 to_many_splatters(by ResONE) GIMP Brush GIMP Brush GIMP Brush GIMP Brush монстер Кельтбраслет
Воспользуйтесь нашим сортировщиком кистей для подбора нужной кисти.

Оценка урока

«Создание иконки .ico для программ» получил оценку 5.00 на основе 4 голосов.

13875+0
Комментариев

вверх