Итак, я попросил дизайнера 99Designs создать для меня логотип, это Vector, и он сгенерировал размер логотипа, который вы можете увидеть на моем сайте здесь: sandiegosoftware.net
Я понимаю, что мой браузер, ОС и разрешение моего монитора могут повлиять на внешний вид, но мне он не кажется очень четким. Он кажется хорошим дизайнером, есть ли какие-то области, такие как сглаживание, которые он мог бы улучшить?
Это динамическое изображение, размер которого изменяется в зависимости от размера окна браузера. Некоторые размеры будут выглядеть плохо. Установка определенного размера для изображения (затем настройка медиа-запросов CSS сайта для вызова других размеров для других экранов) улучшит его сервер.
Большинство логотипов веб-сайтов не масштабируются при изменении размера окна браузера. Хотя эта теория прекрасно работает для большинства изображений, логотип имеет большее значение, и с ним следует обращаться особо.
Во-первых, как уже упоминалось, изображение логотипа отображается в размере, отличном от его фактического размера. При этом браузеру остается выполнить суб/суперсэмплинг, необходимый для изменения размера изображения, и браузеры не очень хороши в этом.
Наряду с этим, похоже, что файл логотипа, который вы используете, на самом деле немного нечеткий. PNG является хорошим форматом, но дизайнер может получить более четкую версию, экспортировав ее с другими настройками сглаживания. Например, в Illustrator в диалоговом окне параметров экспорта PNG выберите «Оптимизированный тип (подсказка)», а не «Оптимизированный рисунок (суперсэмплинг)».
Пока он дает вам более четкую версию, попросите его экспортировать ее именно в тех размерах, в которых вы собираетесь ее использовать. Похоже, браузер пытается отобразить изображение шириной 385 пикселей как 333,719 пикселей. если бы он дал вам изображение шириной 333 пикселя, оно было бы более четким, однако эти неполные пиксели по-прежнему будут вызывать проблемы из-за того, что браузеру снова доверяют выполнение хинтинга). Ваш веб-дизайнер/разработчик может помочь исправить это (и получить все размеры адаптивных логотипов).
Мне он кажется довольно четким, но на самом деле выглядит слегка сплющенным. Возможно, размеры исходного изображения, созданного дизайнером, не похожи (например, 1000 x 1000 --> 2000 x 2000) на то, как вы показываете его на своем сайте?
В качестве альтернативы вы можете использовать SVG с разрешением 385x105 вместо PNG или JPG. SVG не зависит от разрешения, а это означает, что не о чем беспокоиться из-за того, что «мой логотип будет хорошо смотреться на всех экранах». И часто SVG будет легче, чем JPG или PNG. И SVG очень хорошо работает с медиа-запросами.
Брайан Огден