Как создать favicon в illustrator
При сохранении или экспорте иллюстраций Illustrator записывает их данные в файл. Структура данных зависит от выбранного пользователем формата файла.
Существует пять базовых форматов файлов для сохранения иллюстрации: AI, PDF, EPS, FXG и SVG. Эти форматы именуются собственными форматами, поскольку в них могут быть сохранены все данные Illustrator, в том числе несколько монтажных областей (при использовании форматов PDF и SVG необходимо выбрать параметр «Сохранять возможность редактирования в программе Illustrator», чтобы сохранить все данные Illustrator). Форматы EPS и FXG позволяют сохранять отдельные монтажные области в виде автономных файлов. В формате SVG сохраняется только активная монтажная область, однако отображается содержимое всех монтажных областей.
Можно также экспортировать иллюстрацию в разных форматах для использования вне программы Illustrator. Такие форматы называются неисконными, поскольку Illustrator не сможет извлечь все данные, если файл будет заново открыт в Illustrator. По этой причине рекомендуется сохранять иллюстрацию в формате AI до тех пор, пока работа над ней не будет закончена, и лишь потом экспортировать иллюстрацию в нужный формат.
Видеоролик с инструкциями по сохранению файлов в веб-формате см. в разделе Сохранение иллюстраций для Интернета.
Если в документе содержится несколько монтажных областей и требуется их сохранение в предыдущей версии Illustrator, выберите функцию сохранения каждой монтажной области в отдельный файл или объединения содержимого всех монтажных областей в один файл.
Выберите команду «Файл» > «Сохранить как» или «Файл» > «Сохранить копию».
Введите имя файла и выберите папку для сохранения.
Выберите в качестве формата файла формат Illustrator (*.AI) и нажмите кнопку «Сохранить».
В диалоговом окне «Параметры Illustrator» задайте нужные параметры и нажмите кнопку «ОК».
Определяет версию Illustrator, совместимость с которой необходимо обеспечить при сохранении файла. Для получения более подробной информации см. раздел Сохранение иллюстрации в старой версии.
Сократить знаковый состав шрифтов, если используется символов меньше чем
Определяет, должен ли быть встроен весь шрифт (а не только символы, использованные в документе) на основе процентной доли символов шрифта, использованных в документе. Например, если шрифт содержит 1000 символов, но в документе используется только 10 из них, возможно, встраивание всего шрифта не требуется, чтобы не увеличивать размер файла.
Создать PDF-совместимый файл
Сохраняет представление документа в формате PDF в файле Illustrator. Выберите этот параметр, если необходимо создать файл Illustrator, совместимый с другими приложениями Adobe.
Включить связанные файлы
Встраивает файлы, связанные с иллюстрацией.
Создает документ, в котором используется управление цветом.
Выполняет сжатие данных PDF в файле Illustrator. При использовании сжатия время, необходимое для сохранения документа, увеличивается, поэтому отмените выбор этого параметра, если сохранение файлов осуществляется слишком медленно (от 8 до 15 минут).
Сохранить каждую монтажную область в отдельный файл
Сохранение каждой монтажной области в отдельном файле. При этом также создается отдельный главный файл, включающий все монтажные области. В этот файл также включено все содержимое, затрагивающее какую-либо монтажную область. Если требуется сместить иллюстрацию и подогнать ее под размер одной монтажной области, будет выдано соответствующее предупреждение. Если этот параметр не выбран, то монтажные области будут объединены в один документ и преобразованы в объекты «направляющие» и (в Illustrator CS3) области кадрирования. Размер монтажной области, используемой для сохраненного файла, берется из стартового профиля документа по умолчанию.
Определяет, что происходит с прозрачными объектами при выборе более ранней версии формата Illustrator, чем 9.0. Выберите параметр «Сохранять контуры», чтобы удалить эффекты прозрачности и установить для прозрачной иллюстраций непрозрачность 100 % и режим наложения «Нормальный». Выберите параметр «Сохранять оформление и наложение цветов», чтобы сохранить наложение цветов, не взаимодействующее с прозрачными объектами. Выполняется сведение наложений, взаимодействующих с прозрачными объектами.
Если иллюстрация содержит сложные перекрывающиеся области и необходимо обеспечить вывод при высоком разрешении, нажмите кнопку «Отмена» и задайте параметры растрирования, прежде чем продолжить.
Итак, как и обещал в прошлом посте о фавиконах, сегодня расскажу о некоторых несовершенствах автоматических конвертирований логотипа в фавикон через сервисы, и покажу на примере, как порой можно добиться лучшего результата.
Как самостоятельно создать фавикон для сайта
Основные приёмы создания фавикона на основе логотипа я описывал в прошлом посте. Однако такой подход требуется не всегда и не для всех размеров. В некоторых случаях для создания фавикона можно воспользоваться онлайн сервисами.
Например, с моим лого (монограмма LA в кружочке) машина справилась вполне сносно. Даже в размере 16х16 px он выглядит неплохо (а лучше уже не получится).
Как это делается? Я закинул векторный файл в формате svg в сервис Real Favicon Generator, и на его основе машина подготовила мне весь комплект иконок, что на картинке ниже. Правда, пришлось ещё самому добавить 2 не самых популярных размера (64х64 и 128х128 px) в файл ico и сделать дополнительные версии без кружка (они выделены на скриншоте). Последние нужны для плиточных систем в Windows.
Так вот, мне повезло. Если ваш логотип пришлось дорабатывать, чтобы получилась качественная иконка 16х16 px, это не значит, что вы не можете использовать полноценную версию в иконках большего размера.
Теперь чуть подробнее о той самой доработке и для чего она нужна.
В разработке дизайна иконок и других элементов интерфейса есть понятие пиксель-пёрфект (pixel perfect). Это значит, что каждая линия и точка должны быть выровнены по пикселям насколько это возможно, чтобы изображение не замыливалось и не мутнело. В дизайне вообще (как и во многих других сферах) есть негласное правило: если можно сделать лучше — значит, так и надо сделать.
Посмотрите, пожалуйста, на этот рисунок:
Перед вами несколько вариантов, как можно нарисовать синий квадратик в иконке размером 16 на 16 пикселей:
а) квадрат ровно 14х14 пикселей в ширину и в высоту, толщина его стенки ровно 1 пиксель, выровнен по центру иконки;
б) квадрат ровно 14х14 px, толщина его стенки равна 1,5 px, выровнен по центру иконки;
в) квадрат ровно 15х15 px, толщина его стенки — 1 пиксель, смещён вверх и влево от центра иконки;
г) квадрат ровно 15х15 px, толщина стенки равна 1 пикселю, выровнен по центру иконки.
Видите разницу? Если бы наша иконка была намного больше (100, 200 и больше пикселей) и квадратики тоже пропорционально бы выросли, разница между ними была бы минимальна, но в таком малом размере непопадание точно в пиксели может быть значительным и сказаться на чёткости фавикона.
Вернёмся к одному из прошлых примеров:
В этом случае выравнивание шарика по pixel-perfect было бы невозможно и даже ошибочно — он стал бы слишком угловатым и топорным.
Но вот в примере ниже для более чёткого изображение выравнивание по пикселям было необходимо:
Пример создания фавикона из логотипа
А теперь я покажу, чем может быть плохо машинное уменьшение логотипа для создания фавикона без его дополнительного редактирования.
На его основе нужно создать фавикон.
Загружаем его в сервис Real Favicon Generator, нажимаем кнопку, получаем кучу файлов в нужных форматах и размерах. Смотрим на фавиконы маленьких размеров (16, 32 и 48 пикселей) и немножко расстраиваемся:
В первом размере даже “ЕЛЗ” читается с трудом, не говоря уже о “FOREST”. В других ситуация получше, но всё равно всё размыто. Другие размеры получились нормально.
Работаем руками и головой в графическом редакторе с этими тремя размерами и получаем:
Лучше? (если смотрите с телефона, то, возможно, всё будет не так хорошо, как на самом деле, - картинки в посте сжались, но настоящие фавиконы так делать не станут и будут выглядеть чётко. ))
Всё дело в том, что изначальный логотип не попадал чётко в пиксельную сетку, поэтому пришлось его редактировать. Да, в двух самых малых размера фавикон лишился подписи “FOREST”, но зачем она, если всё равно её никто не сможет прочитать?
Вот, как бы выглядели все эти иконки, будь они одного размера (для наглядности добавлена пиксельная сетка):
Верхние иконки — просто уменьшенные версии логотипа. Как видно, мало какие линии проходят по границам пикселей, от чего в малом размере и появляется “замыленность”.
В общем, мой вам совет: для экономии времени и средств загрузите ваш лого (или какую-то его часть, хорошо вписывающуюся в квадрат) в сервис Real Favicon Generator и скачайте то, что он вам предложит. Если результат вас устроит, поздравляю — фавикон для сайта готов! При этом желательно, чтобы ваш лого был или в векторном формате svg или в png большого размера (хотя бы 512х512px). С последним результат хуже, но незначительно.
Если фавиконки маленьких размеров окажутся недостаточно качественными, мутными и размытыми, придётся доработать их в ручную. Вы можете сделать это сами в графических редакторах (Photoshop, Illustrator или их бесплатных аналогах Gimp и Inkscape), следуя советам из данной статьи, или обратиться к дизайнеру за доработкой фавикона.
Другие онлайн сервисы по подготовки фавиконов для сайта я не советую, так как вышеупомянутый всё равно самый лучший, и минусов у него практически нет. Но для создания чёткой иконки 16х16 px, можете воспользоваться сервисом favicon.cc — в этом плане он весьма хорош и полезен, но больше ни на что не годится.
Если остались какие-то вопросы по созданию фавиконов, пишите, буду рад помочь)
Квесты для тех, кто ищет приключения
Сбрендил для вас,
Антон Логотиппер
Кстати, тема для сегодняшнего выпуска была выбрана подписчиками этих сообществ)
Дойки высшего качества
Сбрендил для вас,
Антон Логотиппер
Не работайте "по дружбе" и без договора
Внимание, простыня текста.
Работаю в маленькой Сибирской веб-студии. Делаем сайты, приложения, внедрения CRM и много-много чего разного. А еще берем заказы на разработку фирменного стиля. И логотипов в том числе. О них, родимых, речь и пойдет.
Предыстория. Когда-то в 2017 году сделали мы сайт для одной местной компании, которая работала по франшизе другой Московской компании. Я тогда только устроилась в студию и с этим клиентом не пересекалась. Но поняла, что это какие-то дружественные лица для нашего руководителя, а еще очень интересные дамы.
Ну ок, работы сдали, деньги получили, актами закрыли. И все было вроде бы неплохо, они даже пришли к нам на рекламные услуги: таргет и контекст (отдельная история, каких капризов мы хапанули и как расставались с выбиванием задолженностей). Итого, с 2019 года они на связь особо не выходили. Так, периодически теряли доступы от сайтов, забывали проплачивать домен и просили у нас помощи. Все стандартно.
И вот, настоящее время. Компания покидает франшизу и москвичи требуют прекратить использовать их фирменный стиль. Все логично и справедливо. А значит. Нужен новый логотип! Ну и небольшие изменения на сайте. Конечно же, они пришли к нам. Напрямую к руководителю. Он на радостях и по старой дружбе продал им услугу разработки логотипа. Причем без договора с описанием всех условий, а просто по счету. Вроде как они вносят 50% предоплату и полетели. Да, так тоже можно, но условий и сроков нигде не оговорено. В этом и есть грабли.
Надо ли говорить, что ТЗ или даже брифа никакого не было? Все содержание задачи от моего руководителя: "Да там ничего выдумывать не надо, просто взять старый лого, заменить название и сделать практически то же, что и было". Окееей, покривилась немного, но отгружаю задачу дизайнеру. И начинается.
1 итерация. Получаю три варианта, отправляю заказчику. Получили? Получили. Ждем.
З (заказчик): Добрый день, mininirime. Что-то мне не нравится. Вот наше КП для клиентов.
Я: Спасибо, с КП ознакомились. Дизайнеру отправляю референс с пометкой, что есть направление, которое хочется отразить в логотипе. Предложим еще несколько вариантов.
И дальше пояснения о том, что лого делается не чтобы вам душу грело, а для бизнес-задач и т.д. Предлагаю заполнить бриф, но предложение игнорируется.
А что было в их КП? Совершенный растровый кошмар из двух совмещенных реалистичных картинок и названия компании курсивом (прикреплять не буду по понятным причинам).
2 итерация. Дизайнеру направление работы ясно, вдохновляемся полученной картинкой из 90-х, делаем новые варианты. Отправляю. Получили? Получили. Ждем неделю, ответа нет. Пишу снова, прошу обратную связь.
З (дословно): Здравствуйте, mininirime. Что-то нам не нравится. Давайте, что-то покреативней, сделайте пожалуйста несколько вариантов, что бы можно было выбирать.
Я слегка. удивляюсь и прошу утонить задачу. Референсы, пожелания, описание. Снова предлагаю заполнить бриф. И тишинаааа в ответ. Подождала день и возобновила дизайнеру задачу. С запросом на максимальный креатив, как только он может. Дизайнер послал меня на. принял задачу в работу.
3 итерация. Получаю еще 3 варианта. Отправляю. Получили? Получили. Жду неделю и пишу узнать, как там дела.
З: Получили, нам ничего не нравится. Такое ощущение что просто в ворде набрано.
Я: Длинное вежливое (правда) письмо о том, что дизайнеров-экстрасенсов у нас в штате нет, мы без понятия, что вам нравится и без ТЗ результат ХЗ. А в ворде мы не работаем. И вообще, какого хрена?
З: я обратилась к вам как к специалистам, если бы я была дизайнером я бы сама все сделала и не платила ХХ т.р. У меня нет примеров и пожеланий, просто нужно что бы дизайнер посидел подумал и покреативил, а не набирал в ворде разными шрифтами и цветами.
Я: Еще более длинное и вежливое письмо с попыткой убедить сотрудничать, поднапрячься и выдать свои хотя бы минимальные пожелания. И что в 4 заход без этого мы не пойдем.
Пока гробовое молчание. Подозреваю, что состоится звонок руководителю с жалобой на меня, конечно же. Да, моя ошибка в том, что я послушалась директора, не отбрифовала заказчика и все изначально сделала неправильно. Можно было сэкономить кучу времени. Еще косяк в том, что нет договора с нашими стандартными условиями (3 раза предлагаем варианты, а каждый следующий за оплату). Поэтому случилось вот это классическое "поиграйтесь цветами/шрифтами" и есть все шансы переделывать до бесконечности, пока ее величество не скажет "Да".
Моя задача разрулить этот конфликт и сделать так, чтобы все были счастливы. Но как это теперь сделать? Непонятно. Можно предположить, что в этой истории одна я умная в белом пальто стою красивая и вокруг дураки. А на деле я плохой специалист и не шарю. Скорее всего так и есть :)
Но вот о чем я думаю, сталкиваясь с такими ситуациями:
1. Не может быть никаких заказов "по давней дружбе" и на особых условиях. Съедят весь мозг, а объем работ будет в разы больше, чем с обычным клиентом. А еще можно не дождаться оплату.
2. У некоторых заказчиков абсолютно потребительское отношение. Почему-то считается, что если они заплатили, то получают в свое владение рабов, которые будут бесконечно выполнять их пожелания и игнорировать просьбы. Причем чем меньше оплата, тем больше королевских замашек и требований.
3. Если ты какой-то линейный специалист, то придется терпеть, глотать и бесконечно оправдываться перед клиентами (в т.ч. за чужие ошибки).
4. Работа с людьми должна стоить больше (если бы вы знали мою зарплату и перечень обязанностей, вы бы заплакали).
5. Грабли, будь они неладны. Одни и те же. Каждый раз получая проблемы с "дружескими" заказами без ТЗ, мы продолжаем продолжать. А я повлиять на это не могу.
6. Если говорят "Да там ерунда, делов на полчаса" - вранье. Полчаса нужно умножить на 100.
P. S. Сменить место работы пока нет возможности. К жалости и сочувствию не взываю. Просто одна из будничных историй. За ошибки простите. И огромное спасибо всем, кто дочитал мой первый пост <3
Что нужно для начала работы?
- Ваш логотип в размере не меньше 512х512 пикселей (обязательно квадратный);
- .PNG формат изображения;
- Графический редактор Adobe Photoshop или GIMP.
Создаем фавикон с помощью Adobe Photoshop
Фавикон на прозрачном фоне:
2) Удалите название компании из логотипа, чтобы использовать только иконку выбрав инструмент “Ластик” и изменив основной цвет на белый.
4) И измените размеры на 16х16 пикселей. Ваша фавиконка покажется вам совсем крошечной, но не переживайте, все так и должно быть.
Если ваш логотип выглядит отлично, то переходите к шагу 4.
Фавикон на фоне с корпоративным цветом:
1) Как и в первом варианте, откройте файл в формате PNG, но только уже не на прозрачном фоне, а на фоне с корпоративным цветом.
Готово! Теперь, вы можете использовать фавикон на сайте!
Преимущества использования .ICO перед .PNG или .GIF
Конвертируйте .PNG в .ICO с помощью онлайн-конвертеров
2) Выберите файлы для конвертации на компьютере, нажав кнопку “Выберите файлы”, или перетащив файлы в соответствующее поле, и нажмите кнопку “Начать конвертирование”.
3) Теперь, нажмите “Загрузить”, чтобы скачать ваш файл в формате .ico на компьютер. Также, есть возможность загрузить файл в облачное хранилище или скачать файл в виде ZIP.
Как установить фавикон на WordPress?
1) На WordPress откройте “Административную панель”.
2) Войдите в раздел “Appearance”
3) Нажмите на “Theme Editor”.
4) Нажмите на файл, который называется “Header” или “Header.php”, чтобы редактировать.
6) Сохраните изменения.
Обновлено 17 марта, 2020
Редактор блога компании Logaster, контент-маркетолог. Эксперт по веб-маркетингу и брендированию. Умеет писать просто о сложном. По ее статьям можно построить успешный бренд и начать успешное продвижение в интернете.
Создай свой сайт с нуля как профессионал
Создай свой сайт с нуля как профессионал
Создай свой сайт с нуля как профессионал
С Новым годом! Желаю, чтобы счастье и удача стали для Вас верными спутниками! Пусть здоровье будет крепким, и весь год Вас сопровождают только радостные события, позитивные эмоции и успех во всех начинаниях! Пусть близкие радуют, и сбываются самые заветные мечты!
И хочется всем пожелать, чтобы в наступающем году с нами произошло то самое чудо, о котором мы все так мечтаем. Хоть у каждого оно свое, но оно обязательно самое необходимое и самое важное. Желаю, чтобы все мы занимались тем, что приносит нам удовольствие. Желаю достигать новых вершин и самореализовываться. А еще пожелать хочу побольше радостных моментов, которые перейдут в приятные воспоминания, и встреч с преданными друзьями и любимыми домочадцами.
С международным женским днем
Всем желаю здоровья, и радости, Нежных слов ярким днём, под луной. Вы сильны своей женскою слабостью И чудесные все до одной! Счастья, любви и процветания во всех ваших начинаниях!
Фавикон это знак вашего сайта, который отображается в качестве картинки в адресной строке рядом с закладкой и который помогает посетителю вашего сайта выделить его среди своих фаворитов и запомнить. Сайты и блоги, кторые имеют фавикон имеют преимущества по результатам поиска и и бросаются в глаза первыми и запоминаются, становятся узнаваемыми и выделиться на фоне других. В качестве примера посмотрите этот скриншот.
Как создать ваш уникальный фавикон вы сможете узнать из видео, которое я записала для вас.
посмотреть видео
здесь описание различных вариантов
1). Лучший вариант это нарисовать самому. Можно создать в фотошопе или в иллюстраторе и сохранить в формате ico. Это будет выглядеть так (favicon.ico) Предпочтительна векторная графика в иллюстраторе, тогда ваше изображение будет максимально качественное несмотря на уменьшение формата изображения.
Как установить фавикон на вашем блоге посмотрите это видео
Если что то осталось не понятным, то пишите ваши коментарии и вопросы и я отвечу на них. Надеюсь, что это статья была полезна для вас и не забудьте поделиться с вашими друзьями
Выбор ниши и ваши возможности в ней
Если мы обратимся к википедии, то найдем такое описание, казалось бы не имеющего ни какого отношения к сайтостроению или бизнесу
Создание сайта это одно из условий продвижения вашей ниши Продолжить чтение →
Поисковая оптимизация сайта.
Всем нам известно, что такое поисковая оптимизация сайта. Но сегодня я хочу Вам рассказать о поисковой оптимизации сайта наоборот.
А если точнее – о распространенных ошибках некоторых создателей сайтов, приводящих к антипоисковой оптимизации сайта.
Гуляя по сети Интернет, не перестаю удивляться – какие нечеловеческие усилия прикладывают некоторые веб-дизайнеры для того, чтобы отпугнуть всех посетителей от своего сайта, а особо нервных довести до бешенства.
Еще в конце 20 века Интернет представлял собой всего лишь маленькую толику сайтов, но даже ими не все могли воспользоваться. Доподлинно известно, что первые веб-продукты создавались для ограниченного пользования. С их помощью передавали информацию, которая не должна была стать всеобщим достоянием. Их пользователями были только представители военных баз Соединенных Штатов. Продолжить чтение →
Создание качественного дизайна веб-сайта
Сегодня совершенно невозможно обойтись без информации, которая заполнила нашу жизнь и обрушивается со всевозможных медиа источников. Это стало возможным с внедрением информационных технологий и особенно с развитием Интернета.
Эта Всемирная паутинная сеть – просто забавная игрушка, если не наполнена эффективно работающими сайтами. На них создаются странички (у каждого пользователя своя, личная), зашифрованные кодами и тематически наполненные.
Сайтом принято называть информацию, которая связана общей темой, и имеющая собственный адрес. Он станет вашим новым именем в домене. Чтобы загрузить какой-либо информационный материал, бумажки оформлять нет надобности. Об Интернете человечество знает давно, поэтому многих может удивить то, что веб-дизайн является молодой Интернет-отраслью. Это на самом деле так. Если у вас есть возможность сравнить первые сайты с современным их оформлением, то можно увидеть разительную разницу. Это наука, которая имеет свойственные только ей закономерности. Продолжить чтение →
Графика для сайта
Итак, Вы решили – пора создавать свой сайт. Сейчас наступил самый важный, самый ответственный момент: содержание, то есть то, о чем и будет Ваш сайт. От этого зависит то, какое отношение у поисковых систем будет к Вашему сайту и то, как будут относиться посетители к вашему сайту. Очень важное значение кроме уникальных текстов имеет визуальное оформление и вся графика, которая будет заполнять ваш сайт, потому что она воздействует на поведенческий фактор посетителей, насколько это привлечет их внимание, как долго они проведут время на вашем сайте и какие действия они совершат, благодаря вашим правильно подобранным картинкам и баннерам .
Рассмотрим основные элементы графики для сайта.
Продолжить чтение →
Создание дизайна сайта – это, безусловно, наука.
Ещё совсем недавно опытному специалисту для создания дизайна сайта требовались многие и многие часы, дни. Теперь же какая-нибудь операция, на которую раньше требовалось определенное время, выполняется нажатием всего нескольких кнопок. Продолжить чтение →
Давно прошли те времена, когда дизайн сайта определялся по личным предпочтениям заказчика или дизайнера. Во втором десятилетии двадцать первого века дизайн и SEO-оптимизация идут рука об руку. От юзабилити, подбора цветовой гаммы, соответствия постоянно меняющимся требованиям поисковых систем сегодня зависит успешный выход сайта в Топ-10.
как создать сайт новичку
Читайте также: