Я новичок в фотошопе и иллюстраторе и пытаюсь создать простой текстовый логотип для использования на своем веб-сайте, например: http://codepen.io/d3wannabe/pen/BWrbZa .
Вы получаете совершенно разные версии этого в зависимости от того, какой браузер вы используете для рендеринга текста (именно поэтому я, очевидно, должен сам создавать изображение), но, например, в Chrome вы уже можете видеть размытие по краям шрифта.
Проблема, с которой я сталкиваюсь в Illustrator, заключается в том, что когда я пишу определенным шрифтом (например, «Arial Rounded MT Bold» в размере 24 pt), шрифт выглядит красиво и четко на моем фоне при увеличении 200%, но я начинаю видеть размытие на 100% - тогда я не уверен, что речь идет о процессе «сохранить в Интернете», но изображение теряет четкость к тому времени, когда оно оказывается на моем веб-сайте (как «оптимизированный тип» png).
Я где-то читал, что фотошоп лучше подходит для сохранения изображений текста для Интернета, но я вижу аналогичную размытость даже перед экспортом (и, конечно, 200%-ное увеличение в фотошопе просто делает изображение пиксельным).
Так что мне действительно не хватает пошагового руководства для чайников о том, как получить четкие изображения текста на веб-сайте. На данный момент я не уверен, возможно, я просто выбрал плохой цветовой контраст или шрифты, которые плохо масштабируются, хотя мне также интересно, есть ли что-то существенное в том факте, что шрифт выглядит красиво в Illustrator при 200 % или больше - возможно, это означает, что я должен экспортировать шрифт из Illustrator большего размера, чем требуется, а затем выполнять дополнительное уменьшение (каким-то образом!) После этого - хотя, конечно, опять же, я не могу доверять веб-браузерам делать это для меня.
РЕДАКТИРОВАТЬ: я также должен был отметить, что эффект на моем мониторе намного хуже, чем на моем ноутбуке (заманчиво сказать, что у меня плохой монитор, но есть много веб-сайтов, где версия монитора тоже выглядит хорошо!)
Photoshop и Illustrator не должны иметь здесь такой большой разницы. Что вы можете попробовать:
Экспортируйте свой логотип в формате SVG по трем причинам:
Как веб-разработчик, работающий в агентстве приличного размера, мы экспортируем все логотипы наших клиентов в формате SVG. Я бы даже не возился с PNG, они намного больше по размеру и обычно не будут такими четкими или гладкими, как SVG.
Вот что вы должны сделать:
Это довольно просто, и у вас будет чрезвычайно четкий логотип, который загружается быстрее, чем любой PNG.
Редактировать: используйте Illustrator вместо Photoshop, вам нужен четкий векторный логотип, размер которого может быть увеличен до любых размеров по желанию, а не то, что ограничено размером, на который вы его проектируете. В Photoshop есть возможности экспорта в SVG, но они довольно дерганые по сравнению с Illustrator. Я бы на 100% использовал Illustrator для этого случая, не важно, какой вы используете.
Это совершенно гипотетически, но есть большая вероятность, что это связано с масштабированием пользовательского интерфейса ОС. В настоящее время у многих мониторов так много пикселей, что многие люди считают их неудобно маленькими, если все отображается на 100%. В результате, когда вы покупаете монитор Full HD, например, окна по умолчанию немного увеличиваются. Если есть информация, выходящая за пределы текущего размера, она будет использовать эту информацию для заполнения этой добавленной детализации, поэтому 100% могут выглядеть немного нерезкими, и вам нужно сохранить версии с более высоким DPI и серверные версии, чтобы они выглядели четкими на этих мониторах. Так что да, в этом случае вы позволяете браузеру выполнять все сокращения (вы даже можете выбрать алгоритм в CSS , но вы не должны этого хотеть). Вот очень старый ответ , описывающий, как это сделать.
Что ж, чтобы оно было четким при таких низких разрешениях, на самом деле есть только один маршрут. Векторная графика. Одним из таких предлагаемых типов файлов является SVG (масштабируемая векторная графика), но недостаточно просто загрузить растровое изображение, а затем экспортировать его как SVG, потому что тогда вы пытаетесь просто принудительно преобразовать растеризованный файл в векторный, он не может выглядеть лучше, чем оригинал по этому маршруту.
Однако вы упоминаете шрифты, так что я думаю, вы печатаете в Illustrator, и это выглядит ясно. Шрифты изначально имеют векторный формат, поэтому при экспорте в формате svg он должен оставаться красивым и четким. Однако не обязательно так много, шрифты часто требуют небольшого дополнительного обмана для дополнительной хрустящей хрустящей корочки с контролем уровня субпикселей, в зависимости от вашей ОС.
В зависимости от вашего исходного файла вам может потребоваться проследить и воссоздать векторы для вашего файла, а затем экспортировать как SVG.
Также «Сохранить в/для Интернета» — это код для «разрезать мой файл с большим сжатием, чтобы сделать его маленьким и быстро загружаться».
Я обещаю на 100%, что SVG — это то, что нужно. У вас уже есть Adobe Illustrator, но для тех, у кого его нет, Inkscape — еще один бесплатный редактор векторной графики с открытым исходным кодом, который можно легко использовать для получения четких логотипов любого размера.
PDF-файлы также используют векторную графику (в основном, хотя вы также можете вставлять растровые изображения), но они не поддерживаются для логотипов в Интернете (тот, что показан на вкладках и т. Д.).
Есть много руководств по их созданию, например, в Inkscape (так что каждый может попробовать) https://www.youtube.com/watch?v=mX7Nbj1xFco Просто в конце сохраните вместо SVG.
А также в виде веб-страницы: http://lebende-bilder.blogspot.qa/2014/03/tutorial-how-to-create-logo-in-inkscape.html
Если вы предпочитаете все еще использовать PNG (растровый формат), то, вероятно, лучше всего начать с довольно большого файла и создать множество уменьшенных версий для использования в разных частях вашего сайта. Алгоритм масштабирования также может иметь значение, я бы посоветовал использовать что-то хотя бы на уровне SincLanczos (он доступен в бесплатном GIMP с открытым исходным кодом и наверняка в Photoshop, хотя название может немного отличаться). Учебное пособие, которое подходит для логотипа PNG в Inkscape, находится здесь: http://audioplastic.org/blog/2011/07/03/inkscape-logo/ Я думаю, что некоторые из эффектов, которые они использовали, растеризованы, и это послужило мотивом для им использовать PNG.
Вот отличный учебник по теме с использованием Illustrator: https://design.tutsplus.com/tutorials/svg-files-from-illustrator-to-the-web--vector-20899
Как он указывает, некоторые вещи, которые он делает, не нужны для текста, но если вы начинаете с растрового изображения, то вам каким-то образом нужно перейти от него к векторам. В Inkscape есть инструмент, который делает это автоматически, но на самом деле он хорошо справляется только с простым вводом. Я недостаточно знаком с Illustrator, чтобы сказать, лучше ли их инструмент (если он у них есть). Вот почему я ранее предположил, что вам может понадобиться проследить векторы по растровому изображению, чтобы воссоздать логотип, а затем отказаться от растрового изображения и экспортировать.
SVG предотвратит сильно отличающиеся версии, как отмечалось в начале OP, потому что логотип будет представлен в виде математических уравнений один раз в SVG (он не встраивает шрифты, они преобразуются в уравнения для показанных фигур). В PDF вы на самом деле можете получить совершенно другое отображение шрифта, особенно если встроенный шрифт не поддерживается вашей ОС, и в этом случае для отображения текста будет использоваться другой шрифт по умолчанию.
Я повторю еще раз, НЕ ИСПОЛЬЗУЙТЕ веб-форматы для всего, что вы хотите показать в высоком качестве. Целью этого экспорта является экономия пропускной способности и сокращение времени загрузки за счет использования большого количества сжатия с потерями (при этом мы надеемся, что изображение остается едва приемлемым), потому что сайты не хотят тратить эту пропускную способность впустую. Тем не менее, у него есть свое применение, не все хотят отображать все в абсолютно максимальном качестве. Тем не менее, SVG также снижает размеры, но многие вещи, которые мы хотим показать, не работают как SVG, например, фотографии, которые мы делаем с помощью наших камер, растрируются в тот момент, когда мы их делаем, и нет особого смысла втискивать их в SVG. В зависимости от того, является ли это основной целью вашего сайта или нет, вы можете или не хотите сжимать их для Интернета (например, вы, вероятно, не хотите сжимать пользовательские изображения Flicker,
Я бы не стал беспокоиться о размытости изображения при зуммировании. Если кому-то нужно увеличить масштаб на 200%, чтобы удобно читать страницу, значит, текст слишком мелкий или его зрение недостаточно хорошее, чтобы он мог заметить, что изображение размыто при таких экстремальных уровнях масштабирования.
Ник