Как сделать фавикон (favicon)

Уроки CorelDraw

Думаю уже никому не нужно объяснять, что фавикон — это иконка сайта, отображаемая в закладках браузера посетителя вашего сайта. Это, вероятно, одна из первых вещей, которую хочется поставить на свой новый сайт. Без неё закладки выглядят не презентабельно. Даже самому не хочется на них нажимать.

Для создания иконки сайта есть два основных пути — воспользоваться онлайн-сервисами или сделать самостоятельно в Photoshop или CorelDraw. Не вижу смысла делать обзор сервисов т.к. вам проще самостоятельно найти их в поиске и попробовать что-то сделать. Но я, как человек, создавший более 10 сайтов, утверждаю — нужно уметь создавать графику самостоятельно. Тогда и сайты ваши будут симпатичными и многие задачи можно решить намного быстрее создавая графику, а не перелопачивая поиск по картинкам. Конечно, с первого раза может не получаться, но поверьте, результат ваших трудов себя окупит.

Итак, в чем же проще сделать фавикон для сайта, в Фотошопе или КорелДро? Я считаю, что в КорелДро т.к. работаю в нем уже очень давно и векторная графика имеет больше преимуществ, чем растровая. Да, есть различия между векторной и растровой графикой. При этом найти и скачать Корел не сложнее, чем фотошоп.  За основу возьмем 2 простых задачи — сделать иконку для сайта в виде буквы и в виде иконки.

Делаем фавикон в Corel Draw.

Выбираем функцию текста и вводим наш символ.  Для иконки сайта может подойти и пара символов.

Как сделать фавикон (favicon)Как сделать фавикон (favicon)

Затем в меню шрифтов выбираем понравившийся шрифт.

Как сделать фавикон (favicon)

Кликаем правой кнопкой на шрифт и преобразуем в кривую. Теперь наш символ стал векторным.

Как сделать фавикон (favicon)

Изменяем цвет. 

Как сделать фавикон (favicon)

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

Как сделать фавикон (favicon)

Левой кнопкой выбираем прозрачный цвет для обводки. Правой — для самого квадрата, теперь у нас есть квадратный фон, который не видно. Если оставить белый цвет это будет заметно. Конечно, можно сделать фон цветным.

Как сделать фавикон (favicon)

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

И вкратце о создании иконки. С помощью все тех же инструментов делаем простейший фавикон для сайта. Создаем 2 прямоугольника, выравниваем. Создаем у каждого внутренний контур и отделяем его. Выделяя прямоугольник и его контур, объединяем через правую кнопку, затем объединяем оба контура в один. Добавляем прямоугольник для фона, скругляем углы и добавляем наш символ.  Это не шедевр, я понимаю, но для описания простоты создания фавикона вполне сойдет.

Фавикон с иконкой.

Как сделать фавикон (favicon)

Есть еще вариант для тех, кто хочет идеальное решение и для иконки сайта и, возможно, для логотипа. Можно набрать в поисковике «скачать векторные иконки» и на основе них сделать себе  вполне приличные графические элементы. Благо векторная графика легко разбирается на детали, меняет цвет и не теряет от этого в качестве. Примеры таких иконок можно увидеть вверху статьи.

Оцените статью
Skill Life
Добавить комментарий