Вопрос № 95212: Здравствуйте! Делаю для своего сайта различные картинки. Соответственно пишу там всякие заголовки. Сохраняю в нужном мне формате, там gif или jpg и выкладываю на сайт. Но меня не устраивает качество надписей. т.е. например линии порой не плавные, вид...
Вопрос № 95.212
Здравствуйте! Делаю для своего сайта различные картинки. Соответственно пишу там всякие заголовки. Сохраняю в нужном мне формате, там gif или jpg и выкладываю на сайт. Но меня не устраивает качество надписей. т.е. например линии порой не плавные, видны на круглых линиях неровности. Смотрю графику на других сайтах, там все окей. Может делать картинки с надписями в другой программе. Или сначала картинку, а потом надпись на ней?
На круглых линиях неровности становятся видны либо приуменьшении в графическом редакторе размеров изображения, либо при сохранениии его на диск. С уменьшением размеров изображения ни чего не сделаешь. Нужно либо увеличивать размер картинки, либо уменьшать резкость/контраст.
Переход на круглых линиях, изображается в графическом редакторе из счет коррекции цвета, или степени прозрачности части пикселей. При сохранении изображения в формате JPG происходит ухудшение качества изображения, появляются пиксели с измененными цветами, появляются артефакты, "грязь". Для улучшения изображения в формате JPG, при сохранении на диск нужно увеличивать качество файла, тем самым увеличивая его размер. При сохранении изображения в формате GIF или PNG нужно увеличивать количество цветов,
что бы избежать потери цвета и увеличения контрастными.
Если картинка с нарисованым текстом нужна Вам как элемент дизайна, попробуйте использовать формат GIF или PNG, они работают без "потери качества", но их использование может быть невозможно, из-за малой цветовой палитры этих форматов. GIF и PNG-8 поддерживают только 256 цветов, после этого начинается потеря цветов, попытка алгоритмом подобрать похожий "цвет" и.т.п.
При использовании этих форматов рекомендую испольовать небольшие по размеру в пикселях изображения. Это позволяет добиться хорошего качества "цвета". (так как в маленькой картинке - мало цветов :) ) Одним из преимуществ форматов GIF и PNG является "прозрачность". Если Вы сохранили изображение с опцией
"прозрачность (transparency)" - через отсутствующие (прозрачные) пиксели Вашего изображения будут видны другие элементы дизайна (например, в ячейке таблицы содержится прозрачное изображение, через которое просвечивает фон, заданый для всей таблицы)
В случае необходимости использовать большое изображение, которое содержит большую палитру цветов, например, когда нужно, чтобы через картинку был виден нижележащий фоновый слой, приходится резать изображение, и из фрагментов, при помощи таблицы, создавать "мозаику". При этом у соседних изображений цветовая палитра может значительно отличаться (на первом фрагменте изображения красного флага, цвет может визуально отличаться от цвета второго фрагмента "мозаики", флаг может стать оранжевым...)
Один из вариантов - комбинированое использование форматов JPG и GIF.
В этом случае создается таблица, фоном которой выбирается изображение в формате JPG. По возможности, нужно избегать контрастных рисунков, по цветовой палитре приближаться к изображению, которое будет лежать сверху. (например, под синими заголовками размещаем рисунок голубого неба).
В ячейке этой таблицы размещаем рисунок с надписью в формате GIF или PNG, с прозрачными краями. При создании этой картинки нужно выбирать оптимальное количество цветов, что бы не терять цвета плавного перехода. Переход на круглых линиях, изображается в графическом редакторе из счет коррекции цвета, или степени прозрачности части пикселей. При сохранении изображения в формате GIF или PNG цвета теряются и становятся контрастными, четко видными и некрасивыми.
С уважением.
Skymouse
--------- И если песню не суждено допеть, так хотя бы успеть сложить...
Ответ отправил: Сухов Макс (статус: 1-ый класс)
Ответ отправлен: 15.07.2007, 19:24 Оценка за ответ: 5
Отвечает: Хоббит Ну опять понаписывали блин, я вот напримерн ниасилил все что выше)
[Эксперт, выбирайте выражения, Вы не на udaff.com, а на портале, где изъясняются нормальным русским языком. И не тыкайте посетителю! Устное предупреждение.] [ Климова М. ]
Как уже упоминалось, делай картинки ровно под размер, чтобы броузер не изменял картинку.
Думаю говорить о качестве при сохранении смысла нет, вы и сами разобрались (если нет - ставте по максимуму, и качество будет супер)))
При работе с текстом без разговоров используйте эффекты разные (Blending Options), поиграйте там, чем больше тем лучше, почувствуйте что с чем лучше использовать.... тень, свечение, объем и другие примочки... это только улучшает вид текста)
Это зависит не от программы, а от умения) Побольше поработайте с текстом, поройте в интернете уроки по работе с текстом и все у вас получится) - [Могли бы и сами "порыться" и ссылки предоставить - Вы же эксперт.] --------- ПротNв те4ениR
Ответ отправил: Хоббит (статус: 1-ый класс)
Ответ отправлен: 15.07.2007, 19:42 Оценка за ответ: 5
Отвечает: PAN1N
Здравствуйте, мартовский кот!
При работе в ФШ изменяйте размер не через свойства изображения, а вручную транформацией при фиксированных пропорциях. Как ни странно, результат будет другим
Ответ отправил: PAN1N (статус: 3-ий класс)
Ответ отправлен: 16.07.2007, 11:45 Оценка за ответ: 5
Отвечает: Бельянинов Е.А.
Здравствуйте, Мартовский Кот!
Всё это, конечно, правильно... Но зачем, извините, бить себя молотком по голове и одновременно пить таблетки от головной боли?..
Уважаемый Мартовский Кот, для начала проанализируйте всю цепочку действий, которые Вы выполняете прежде, чем оптимизировать изображение для Web. По поводу GIF и PNG уже имели место быть вопросы в рассылке (просмотрите архив!!!).
Что такое оптимизация... Помимо пережатия и сохранения графики в формат, «понимаемый» Интернет-браузером, необходимо обратить внимание на то, как изменяется размерность (соотношение геометрических размеров и разрешения) картинки. Правильным подходом будет предварительная(!) интерполяция (изменение размерности; геометрические размеры и разрешение находятся в обратно-пропорциональной зависимости) графики основными(!) средствами редактора («Изображение» – «Размер изображения») и последующее 100-процентное(!!!)
соответствие нового размера оригинальному при сохранении для Web с помощью одноимённой команды.
Поэтому (к ответу уважаемого PAN1N), в конечном итоге Вам, так или иначе, но придётся всё-таки изменить именно размерность, и масштабирование с помощью средств трансформации не есть панацея...
Иными словами: Вы создаёте новую картинку, которую затем планируете оптимизировать для размещения на сайте. То есть этой картинке «уготована печальная участь» быть просматриваемой лишь на экране монитора, который имеет стандартные разрешения 72dpi (для Mac) или 96dpi (для Windows) Увы!. Это, к сожалению, «потолок»... Вот, собственно, та отправная точка, которой придерживается команда оптимизации графики для Web.
Проделайте опыт тому в подтверждение. Откройте любую картинку в редакторе и, не вдаваясь в подробности настроек, просто сохраните изображение с помощью команды «Сохранить для Web», а затем откройте полученный результат в PhotoShop и вызовите команду «Размер изображения» – Вы увидите, что в поле «Разрешение» установлено значение 72dpi.
Вообще говоря, экранные средства отображения графики, в том числе и Web-браузеры, напрочь игнорируют такой параметр, как разрешение. Но, на мой взгляд, следует всё же придерживаться правила: монитор отображает графику по принципу соответствия одного экранного пикселя одному пикселю на изображении, следовательно, и при оптимизации графики для Web следует указывать то минимальное разрешение картинки, которое «без потерь» сможет воспроизвести Ваш монитор!.. В подтверждение тому – найдите в «Проводнике» сохранённый
(как только что описывалось) файл, вызовите его контекстное меню правой мышью, кликните по строке «Свойства» и перейдите на вкладку «Сводка»: как это не покажется странным (на первый взгляд), но разрешение Вашей картинки будет соответствовать 96dpi в случае Gif и Png и исходному разрешению в случае Jpeg...
Следовательно, прежде чем оптимизировать графику, необходимо дать себе отчёт в следующем: каков характер Вашей картинки – кнопка, банер, логотип, рисунок или полноцветная фотография. И исходить из этого при выборе формата оптимизации.
Gif и Png8 оптимально подходят для оптимизации графики, содержащей ограниченное количество цветов (в том числе и текстов) без плавных (градиентных) нюансов. Jpeg и Png24 – наоборот – для полноцветного изображения, не(!) содержащего больших участков сплошного цвета с резкими и контрастными переходами. Для оптимизации графики, содержащей внедрённый текст, Jpeg крайне не желателен(!) ввиду образования видимых артефактов (искажения цвета и рваных контуров) на границах текста (и не только).
Поэтому, после того, как Ваша картинка будет полностью завершена (коррекция, ретушь, слои, в том числе и текстовые, растрированы и сведены во едино), обратите внимание на её размерность – вызовите команду «Размер изображения», и с её помощью интерполируйте Вашу графику в точном соответствии с теми размерами, которые будут иметь место на страничке Вашего сайта. А именно: «Изображение» – «Размер изображения» – снимаем галочку в опции «Интерполяция» и выставляем разрешение 72 точки на дюйм. Затем, не закрывая окно,
снова ставим галочку в поле «Интерполяция», выбираем из выпадающего списка тип «Бикубическая, чётче» (в случае уменьшения) и выставляем в соответствующих полях необходимые геометрические размеры, которые как раз и будет иметь Ваша картинка в окне браузера. При установленном (по умолчанию) флажке в опции «Сохранять пропорции» достаточно изменить значение только одного размера (высоту или ширину). Подтверждаете.
В случае сохранения в JPEG Вам, в принципе, даже не придется использовать команду «Сохранить для Web». Просто выберите команду «Файл» – «Сохранить как...» и из списка форматов активируйте нужный.
В остальных случаях целесообразно воспользоваться «Сохранением для WEB», но значения всех параметров оптимизации выставить в соответствии с максимальным качеством конечного результата (вопросы №94302 и №92577).
Для оптимизации полноцветного изображения с внедрённым текстом я рекомендую (и не без основания) использовать PNG24.
Вы можете проверить себя после того, как сохраните Вашу картинку. Найдите её (файл) в «Проводнике», вызовите контекстное меню, и с помощью опции «Открыть с помощью» укажите Ваш браузер – Ваша картинка откроется в его (браузера) окне...
Успехов.
Бельянинов Е.А.
--------- Умный учится на своих ошибках, мудрый – не повторяет чужие...
Ответ отправил: Бельянинов Е.А. (статус: 5-ый класс)
Ответ отправлен: 18.07.2007, 16:15
