Как сделать иконку в gimp
Как сделать фавиконку для сайта с помощью GIMP
Дата публикации: 2015-11-04
От автора: раньше фавиконам не уделялось такое внимание, и только в последнее время появилось множество способов их создания, сам подход к созданию фавикона сильно усложнился. А это значит, что для создания продвинутых и современных превью изображений можно использовать такие инструменты, как Real Favicon Generator. Данный генератор все сделает за вас; а в данной статье речь пойдет о создании более простых фавиконов. В том числе мы узнаем как сделать фавиконку для сайта.
Как я ранее говорил, фавиконы из простых изображений 16х16 пикселей превратились в многомасштабные и многоцелевые. В этом уроке вы научитесь создавать современные, многослойные фавиконы… но прежде чем начать, давайте оговорим детали:
Вы можете столкнуться с тем, что многомасштабные фавиконы не работают в старых браузерах, в том числе в Firefox 5 и ниже. Если большая доля ваших пользователей использует устарелые браузеры, то вам лучше остановиться на обычных фавиконах.
Насколько мне известно, единственным кроссплатформенным инструментом для создания многомасштабных иконок для сайта является GIMP. Инструкция по установке на Mac OS X прилагается ниже; если же вы на Windows, то придется поискать самим.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Шаг 1: Создание основного изображения с высоким разрешением
Для создания основного изображения с наибольшим разрешением можете использовать любой инструмент, какой пожелаете нужным: я предлагаю использовать изображение примерно 256х256 пикселей. Помните о том, что созданное вами изображение будет уменьшено до 16х16 пикселей в самой маленькой версии, так что изображение должно быть простым, понятным и четким.
Перед созданием изображение убедитесь, что правильно установили редактор, в котором будете работать: в этой статье будут использоваться наилучшие настройки для Photoshop’а из этой статьи.
Шаг 2: Сохраните слои фавикона в PNG
Уменьшите размер изображения до необходимого и сохраните его; я предлагаю сделать так:
Начните с наибольшего разрешения и идите вниз, сохраняя каждое из них в отдельный файл. Иконки apple-touch-icon-precomposed.png и facebook.png далее задействованы не будут: это резервные иконки для мобильных устройств и социальных сетей, подробнее об этом в следующих статьях.
Можете попробовать оптимизировать полученные PNG файлы любым известным способом: как вариант – альфа прозрачность.
Шаг 3: Установите GIMP
GIMP (GNU Image Manipulation Program) – бесплатный графический редактор с открытым исходным кодом, альтернатива Photoshop’у. Разработан для X Windows System, так что необходимо позаботиться о поддержке. К счастью, если вы пользуетесь OS X 10.5 (Леопард) или выше, то данная система уже установлена по умолчанию; тем же, кто использует более ранние версии, придется установить X11 на OS X самостоятельно.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Скачайте подходящую версию GIMP для OS X, установите и запустите ее. (для первого запуска потребуется несколько минут, так как потребуется сначала запустить X11).
Шаг 4: Откройте иконку с самым большим разрешением и импортируйте в нее все PNG файлы с помощью «Open As Layers»
Интерфейс в GIMP разительно отличается от стандартного в Mac OS X или Windows: к примеру, строка основного меню находится в верхней части окна GIMP, а не в верхней части экрана. Откройте иконку размером 64х64. Если будет предложено установить текущий цветовой профиль, выберите RGB.
Затем кликните правой кнопкой мыши в окне программы по картинке и выберите File / Open as Layers… и так выбирайте остальные фавиконы от большого к наименьшему.
Шаг 5: Сохраните фавикон
Для этого нажмите File / Save As… пропишите имя файла (favicon.ico). Можете выбрать опцию по сжатию PNG.
Шаг 6: Вставьте иконку в веб-страницу
Добавьте код ниже в хедер каждой страницы, на которой вы хотите в качестве иконки сайта использовать наше изображение:
Рисуем иконку Facebook в GIMP
Рад снова вас приветствовать на очередном уроке по графическому редактору GIMP. И сегодня вас ждет небольшой урок по созданию иконки facebook, знаменитой социальной сети Марка Цукерберга.
GIMP обладает большими возможностями по созданию разнообразных графических элементов для дизайна сайтов. Используя средства редактора можно нарисовать практически любой шаблон для сайта, а также различные иконки, логотипы, фоны и многое другое.
И вот сегодня мы с вами научимся рисовать иконку социальной сети facebook.
Шаг 1. Для начала запускаем редактор и создаем новое изображение через меню «Файл — Создать» с размерами рабочего пространства 500 на 500 пикселей.
Шаг 2. На следующем шаге создадим основу иконки facebook с закругленными углами. Для этого сначала полностью выделим рабочее пространство через «Выделение – Всё» и уменьшим выделение на 10px через «Выделение – Уменьшить».
Далее скруглим углы на 30 у иконки через «Выделение – Закруглить прямоугольник»
И применяем градиент от центра основы иконки facebook, к краям выделения.
Шаг 4. Так как выделение еще активно, то создадим новый прозрачный слой через «Слой – Создать слой» и выберем на панели инструментов «Эллиптическое выделение» (Режим инструмента: создать выделение из пересечения с текущим). И создаем выделение как показано на скриншоте
Закрашиваем выделение белым цветом #000000,
и уменьшаем непрозрачность слоя до 20%
Снимаем выделение через «Выделение — Снять»
Шаг 5. Далее создадим две горизонтальные направляющие (350,440) и две вертикальные направляющие (27,473) через «Изображение –Направляющие –Новая направляющая»
Шаг 6. С помощью прямоугольного выделения создаем выделение прямоугольника заключенного между направляющим. Закруглим немного углы у выделения на 20px и закрасим выделение белым цветом #000000 (аналогично предыдущим шагам), и уменьшаем непрозрачность слоя до 30%
Снимаем выделение через «Выделение — Снять»
Шаг 7. Далее выбираем инструмент «Текст» (шрифт: Arial Bold, размер шрифта: 550px) и создаем заглавную букву иконки facebook.
Далее с помощью инструмента «Перемещение» расположим ее как на скриншоте.
Теперь осталось только отключить видимость направляющих через «Вид — Показывать направляющие» и сохранить иконку через меню «Файл — Сохранить как…».
Как видите создание иконки facebook в графическом редакторе gimp не вызвало особых затруднений.
Аналогичным способом можно нарисовать в гимпе и другие социальные кнопки, такие как rss, твиттер, вконтакте и многие другие.
Но об этом читайте в новых уроках на проекте GimpArt.Org, подписывайтесь на обновления блога и будьте в курсе новых статей о бесплатном фоторедакторе gimp 2.
Если вам понравился урок или статья, то пожалуйста поддержите меня нажав на социальные кнопочки ниже. Тем самым вы поделитесь информацией о блоге GimpArt.Org со своими друзьями в социальных сетях. Спасибо!
За 10 лет обучил работе в фоторедакторе Gimp более 12000 пользователей, мои видео-уроки и мастер-классы на одноименном YouTube канале посмотрели более 1 400 000 раз.
Быстрый старт
ProGIMP — сайт про Гимп
GIMP — The GNU Image Manipulation Program
Гимп — бесплатный графический редактор
Сейчас я максимально подробно расскажу как сделать нормальный «.ico», что бы он корректно отображался в операционных системах Windows, на других системах тоже по идее должен, но это не проверенно. Этот урок создан для широкой аудитории, как для знающих, так и для совершенно не знакомых с «Gimp». Например, вы отличный программист, создаёте программы на заказ, интегрируете в них уже готовые «.ico», но вдруг вы решили создать своё, но вы не владеете ни одним графическим редактором, этот урок поможет вам. В этом уроке я буду объяснять не только какие инструменты нужно использовать, а ещё и как их нужно использовать.
Для начала скажу не знающим людям, что такое «.ico» и для чего он нужен.
«.ico» — формат «картинок» присвоенных определённой программе, например:
Перед вами исполняемый файл «Gimp 2.8», а выделенное красной линией и есть «.ico» файл, уже интегрированный в приложение.
То есть, выражаясь простым языком, это картинка программы. Так же «.ico» файл может быть иконкой сайта, курсором, но сейчас нам это не нужно.
Ну вот и всё, приступим к уроку. В этом уроке я буду использовать эту картинку.
1. Уменьшение изображения
Способ 1:
В редакторе «Gimp», в верхнем баре нажать на «Изображение», затем выбрать «Размер изображения».
В открывшемся окне установить значения высоты и ширины 256.
Получилось не красиво, но для ленивых сойдёт.
Лучше делать вторым способом, я так и делал.
Способ 2:
Создать новое изображение, в баре нажать «Файл» выбираем «Создать».
Ширину и высоту указать «256×256», остальные параметры не трогаем.
У нас получается это.
Щёлкаем правой клавишей мыши на слой «Фон» и выбираем «Добавить ».
В верхнем баре нажимаем кнопочку «Правка» и выбираем «Копировать».
Возвращаемся к созданному, пустому изображению «256×256».
И в верхнем баре нажимаем кнопочку «Правка» и выбираем «Вставить».
Далее в правом окошке щёлкаем правой клавишей мыши на слое «Плавающее выделение» и нажимаем «В новый слой».
У вас получится похожее:
Далее мы будем подгонять картинку под «256×256», что бы не изменились пропорции. Это можно сделать инструментом «Масштаб» на панели инструментов которая по умолчанию слева.
После нажатия на инструмент «Масштаб» (ничего не меняем там), щёлкаете по этой картинке которую хотите уменьшить и открывается окошко с настройкой масштаба. У меня значения «Ширина» и «Высота» будут отличаться от ваших, это зависит от размера самой картинки.
В окошке нажимаем на разорванную цепь, что бы она стала целой и устанавливаем любое из двух значений 256, это зависит опять же от картинки. у меня картинка прямоугольная и я могу пожертвовать шириной, я установил значение «Высота» ширина тоже должна измениться, но уже автоматически.
Область выделенная пунктиром и есть ваше изображение, но оно за «холстом», это не беда, его нужно переместить на холст.
Сделаем это инструментом «Перемещение» на панели инструментов. Нажимаем на инструмент.
Затем наводите мышь на область выделенную у вас пунктиром и зажимая левую клавишу мыши переносите слой на холст.
Постарайтесь, что бы изображение не выходило за края, если не выйдет, то можно дополнительно уменьшить слой инструментом «Масштаб». У меня вышло так:
Когда мы подогнали изображение под холст не изменив его пропорций (такая задача заключалась в этом втором способе), можно удалить слой «Фон». На панели щёлкните по слою «Фон» правой кнопкой мыши и выберете «Удалить слой».
Остался последний шаг уменьшения изображения. На той же панели, нажмите правой кнопкой мыши по слою с вашим изображением и из всплывающего меню выберите «Слой к размеру изображения».
Если жёлтый пунктир находится по краям холста как тут:
То я вас поздравляю, вы закончили уменьшение изображения.
Теперь приступим к самому созданию качественной иконки формата «.ico».
2. 15 копий слоя
Для начала я объясню, что мы будем потом делать с этими пятнадцатью слоями. В файле «.ico» структура слоёв будет состоять из трёх разных по качеству «отделений» (в каждом из них будет по 5 разных размеров иконки), что бы файл было видно везде.
Объясню на примере бумажной продукции, если вам нужно сделать поделку из бумаги, вы не факт, что сможете сделать её из картона Надеюсь пример понятен. Приступаем к работе.
2.1 Копируем
И делаем так пока не будет 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». Вот пример использования этой иконки интегрированной в программу.
Я приму вашу критику, помогу разобраться если вы не поняли. Спасибо за внимание.