Создание градиента. Вопрос в личку.

[Verder]

Мне в ПМ пришел вопрос следующего содержания:

Привет.

Извини что в личку беспокою, но вот даже не у кого спросить по данному вопросу.

Никак в нете не могу найти инфу по градиентам... У меня, довольно часто в градиенте видны горизонтальные полосы, в общем, не качественно получается... Как правильно накладывать его?

Не буду называть ник человека без его разрешения.

Я предлагал администрации создать небольшой раздельчик, в котором освещались бы вопросы работы с графикой. Пока его нет (или если его вообще не будет) на подобные вопросы буду отвечать здесь, как в наиболее подходящем по тематике.

Итак, что касается вопроса с градиентом.

Первое - не надо изобретать велосипед, если он уже изобретен в виде инструмента (если мы касаемся растра) - Gradient Tool

1. Нажимаем Ctrl+N, чтобы все было наглядней возмем площадь побольше, например 1000х800 пикселей. Цвет оставляем белый.

2. К примеру нам надо сделать градиент, который намекал бы нам на небо, сверху темно синий, насыщенный, а затем плавный переход к более светлому, голубому. Это очень типичная задача.

Для этого создаем новый слой (Shift+Ctrl+N) и заливам его, например, цветом #0597db

3. Выбираем инструмент Gradient Tool.

4. На верхней панели видим:

Выбираем тип - Foregroung to Background

5. Щелкаем два раза по полю с градиентом:

и получаем вот такую картину:

Видим, что градиент начинается с цвета который мы задали (#0597db) и переходит в белый. Нас это не устранивает и эту байду надо изменить.

6. Щелкаем на:

Открывается селектор выбора цвета, выбираем, например, #94effc. Полоса градиента принимает удобоваримый вид. Жмем ОК.

Наверху видим:

То, что нам надо. Но вид самого слоя пока не изменился. Чтобы получить окончательный результат, нам надо сделать две простые вещи:

1. Зажать Shift и провести мышкой сверху вниз по выбранному слою:

Результат в принципе уже приемлимый, полос не видно, градиент плавный. Давайте отшлифуем.

Для этого добавим эффект Noise (Filter -> Noise -> Add Noise) (можно я не буду объяснять, зачем? ):

Amount выбираем мааааленький - 0,6 - 0,8% не больше. Жмем ОК.

2. Ну и напоследок выбираем стандартный фильтр Gaussian Blur (Filter -> Blur -> Gaussian Blur) и двигая ползунок (опция Preview должна стоять галочка) выбираем окончательный вид вашего градиента.

Ну и окончательный результат - никаких полосок перехода пикселей:

Можете кропить и ставить в бэкграунд.

Вариант 2 - Просто сделать градиент в векторе

С уважением, Verder

Edited March 11, 2010 by Verder

[rash]

Зачем-таки noise? Чтобы файл хуже оптимизировался?

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

[Clayton]

Отлично! Спасибо.

Только в моем случае хватило небольшого нойса, а после гауса едва-заметное наложение почему-то опять появлялось

p.s. Поддерживаю насчет раздела для дизайна, хотя б для элементарных вещей, что б на другие форумы не бегать.

[s0rr0w]

Зачем-таки noise? Чтобы файл хуже оптимизировался?

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

Нойз будет потом сглажен блёром.

Есть один ньюанс. jpeg может очень некрасиво сохранять сплошные заливки. Чтобы немного улучшить ситуацию, можно добавлять шум.

[Verder]

Зачем-таки noise? Чтобы файл хуже оптимизировался?

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

Noise используется для смешивания (сглаживания) перехода между близлежащими пикселами (алгоритм сглаживания растра). В обработке фотографий, при редактировании, используют Diffusion. Для фонов и градиентов - Noise.

Edited October 29, 2009 by Verder

[Clayton]

Зачем-таки noise? Чтобы файл хуже оптимизировался?

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

Дэк это, при сохранении уже второй вопрос, а когда они изначально в шопе полосатыми получаются?

[Great Rash]

Тупое предположение конечно, но может у вас с монитором что-то? Например цветопередача в настройках стоит 16 бит вместо 32?

[Verder]

Дэк это, при сохранении уже второй вопрос, а когда они изначально в шопе полосатыми получаются?

Потому что изначально применяется способ смешивания Gradient Overlay, который имеет векторные корни. А когда ты делаешь градиент вручную способом описанным выше, ты применяешь чисто растровый алгоритм сглаживания (смешивания).

Только в моем случае хватило небольшого нойса, а после гауса едва-заметное наложение почему-то опять появлялось

Попробуй вместо Gaussian использовать Surface Blur. Существует лимит цвета, который при некоторых условиях в растре не лечится.

Edited October 29, 2009 by Verder

[Clayton]

Тупое предположение конечно, но может у вас с монитором что-то? Например цветопередача в настройках стоит 16 бит вместо 32?

Если бы так было, невозможно было б различить, нормальные градиенты, от уродских, всё было б в полосах, особенно на windows7

Потому что изначально применяется способ смешивания Gradient Overlay, который имеет векторные корни. А когда ты делаешь градиент вручную способом описанным выше, ты применяешь чисто растровый алгоритм сглаживания (смешивания).

А можно про создание в векторе по подробнее? Имеется ввиду, создать его в Иллюстраторе?

Edited October 29, 2009 by Clayton

[rus]

Тема хорошая - полностью согласен и поддерживаю.

Но было бы лучше, если б ее разделили на ветки (направления), а не плодили кучу вопросов в одной теме на несколько сот страничек.

[rash]

Noise используется для смешивания (сглаживания) перехода между близлежащими пикселами (алгоритм сглаживания растра).

Гм, не думал о таком, наверное заметно только на градиентах между очень контрастными цветами. Обычно полосок никаких не наблюдаю до неудачного сохранения -)

[Verder]

А можно про создание в векторе по подробнее? Имеется ввиду, создать его в Иллюстраторе?

Я как раз хотел задать вопрос, нужен ли коротенький ликбез по созданию градиента в векторе

Ок, там все гораздо проще. И вообще советую работать при создании макета в векторе - избавитесь от множества проблем.

Итак:

Я использую Adobe Illustrator CS3 (13.0.0). Привык и обновляться на собираюсь, хотя лежит лицензия CS4.

1. Как и в фотошопе создаем новй документ (Ctrl+N) с произвольными размерами. Используем стандарт. Плюс вектора в том (большинство это конечно же знают, но это для новичков), что созданное в нем изображение можно масштабировать как угодно - от логотипа на зажигалке до борта самолета. Разницы в качестве не будет.

2. Выбираем инструмент Rectangle Tool (M), рисуем призвольного размера квадрат или прямоуголник. Заливаем его, к примеру, оранжевым цветом. Отключаем границу (см. скрин):

3. Я пойду самым простым путем используя стандартные функции иллюстратора. Выделив нарисованный квдрат выбираем стандартный радиальный градиент иллюстратора из панели цветов:

4. В закладке Window (вверху) выбираем Gradient.

5. Ставим значения как на картинке:

Linear - 90 или -90 если размытие снизу вверх.

6. Двигая слайдер меняем степень размытия:

7. Поменять цвета можем очень просто:

8. Собственно, остается только экспортировать полученный градиент:

File -> Export. Я обычно делаю экспрт в PNG формат, а потом уже обрабатываю в фотошопе как угодно.

Вот полученный масштабированный результат шириной 2000 пикселей и весом всего 20кб Никаких полосок. Его можно хоть на поезд натянуть ничего не изменится:

Удачи.

[Clayton]

С вектором всё ясно, а вот с шопом не совсем:

Потому что изначально применяется способ смешивания Gradient Overlay, который имеет векторные корни. А когда ты делаешь градиент вручную способом описанным выше, ты применяешь чисто растровый алгоритм сглаживания (смешивания).

Попробуй вместо Gaussian использовать Surface Blur. Существует лимит цвета, который при некоторых условиях в растре не лечится.

А обязательно применять размытие вообще, если без него, после небольшого Noise как бы, все нормально...?

[Verder]

С вектором всё ясно, а вот с шопом не совсем:

А обязательно применять размытие вообще, если без него, после небольшого Noise как бы, все нормально...?

Необязательно если результат устраивает. Просто бывают такие сочетания пикселей, что размытие бывает просто необходимо. Я ведь просто написал решение проблемы, когда появляются резкие переходы.

[Clayton]

Ясно. Огромное спасибо дружище.

[ardjuna]

Кто подскажет, почему рисунок сделанный в Adobe Illustrtor и потом Экспортированный в формат jpg IE6 не воспринимается впринципе?

[ardjuna]

Кто подскажет, почему рисунок сделанный в Adobe Illustrtor и потом Экспортированный в формат jpg IE6 не воспринимается впринципе?

Что так никто и не подскажет?

[psywalker]

Что так никто и не подскажет?

Странно, вроде всё должно быть нормал, это же не пнг.

[jeeper]

Блин, а у меня одного картинки в сообщениях Verder'а не видно, что-ли?

...

а, понял. ipicture глючит.

Edited January 27, 2010 by jeeper

[ardjuna]

Странно, вроде всё должно быть нормал, это же не пнг.

Создаю рис., делаю Экспорт, выбираю jpg формат, по базовой линии режу , качество max и в IE6 тю-тю, в других браузерах норм., делаю через Photoshop всё норм. Я и сам не пойму в чём разница. Может быть в установках качества для jpg. Photoshop не катит , т.к. не удобно , нет точности и инструментов привязки.

[Alastor]

Создаю рис., делаю Экспорт, выбираю jpg формат, по базовой линии режу , качество max и в IE6 тю-тю, в других браузерах норм., делаю через Photoshop всё норм. Я и сам не пойму в чём разница. Может быть в установках качества для jpg. Photoshop не катит , т.к. не удобно , нет точности и инструментов привязки.

Если меня в очередной раз не забанит добрый модератор, то подготовлю небольшой лист мастер-классов по фотошопу (этот поправлю тоже) с решением проблем с отображением изображений в браузерах.

[s0rr0w]

Если меня в очередной раз не забанит добрый модератор, то подготовлю небольшой лист мастер-классов по фотошопу (этот поправлю тоже) с решением проблем с отображением изображений в браузерах.

Чтобы модераторы не банили, нужно просто соблюдать правила форума.

[Chebas]

Не могу добиться хорошего градиента, в фотошопе всё ОК, а вот как сохраняю, то явно видны полосы

как же правильно сохранять?

[s0rr0w]

Не могу добиться хорошего градиента, в фотошопе всё ОК, а вот как сохраняю, то явно видны полосы

как же правильно сохранять?

А как вы сохраняли?

[Chebas]

и jpg и gif и png. И для web и просто так.

[s0rr0w]

и jpg и gif и png. И для web и просто так.

Как именно?