Как сохранить логотип для Интернета из Illustrator (после загрузки логотип выглядит пиксельным)

Ваша работа все еще в векторном формате? Ваш последний загруженный логотип выглядит довольно хорошо, но вы можете найти что-то полезное ниже.

Сохранение файла в формате JPEG или PNG

Сначала перейдите в файл - сохранить для Интернета. Я бы предложил сохранять на высоком уровне (только помните, что чем выше качество, тем дольше время загрузки веб-страницы). Если ваш рабочий файл является векторным, вы можете экспортировать его в любом размере. Я бы обязательно проверил Type Optimized . См. нижнюю часть изображения. Для PNG я бы использовал PNG-24 для достижения наилучших результатов. Просто убедитесь, что вы снова используете «Оптимизированный тип».

Вы всегда можете предварительно просмотреть изображение в браузере в диалоговом окне «Сохранить для Интернета». Внизу нажмите предварительный просмотр. Возможно, вам потребуется сначала выбрать браузер.

Приведенные ниже варианты требуют, чтобы у вас были знания в области кодирования.

Сохранение файлов в виде файла SVG

Вы можете сохранить свой логотип в формате SVG и масштабировать изображение до любого размера с помощью css.

В Css Tricks есть отличный учебник о том, как это сделать для Интернета.

Сохранение файлов для дисплеев Retina

Поскольку вы используете Mac с дисплеем Retina, вы можете сохранить 2 разных файла. Скажем, вы хотите, чтобы ваше изображение имело размер 50 пикселей. Вы бы сохранили 2 разных файла. 1 файл размером 50 пикселей и версию для сетчатки размером 100 пикселей.

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

Вот отличный учебник для этого: Правильный способ ретинафии ваших веб-сайтов.

Для этого также есть отличный js-файл: Графика Retina для вашего сайта .

Эта размытость — сглаживание Illustrator, когда фигуры не соответствуют пиксельной сетке. Включите View > Pixel Preview , чтобы увидеть, как ваше изображение будет выглядеть при экспорте. Затем вы можете выровнять фигуры по пиксельной сетке, чтобы минимизировать размытие. Вот официальное руководство Adobe о том, как это сделать:

http://helpx.adobe.com/illustrator/using/drawing-pixel-aligned-paths-web.html

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

ETA: Чтобы отредактировать текст, вы можете преобразовать его в контур и изменить его размер, чтобы он соответствовал пиксельной сетке, но я был бы осторожен — манипулирование типографикой без веской причины и опыта может принести больше вреда, чем пользы. Если вы не знакомы с этим, в этом случае - вперед.