Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
MrDeSign УЧЕБНИК МЕГА.doc
Скачиваний:
2
Добавлен:
01.05.2025
Размер:
7 Мб
Скачать
☆

Использование картинки в качестве фона страницы.

Проблема может быть та же, что и при использовании просто цветного фона - излишне активный БГ, затрудняющий восприятие основных материалов страницы. И решение то же - максимально приглушить фон, спрятать излишние детали и применить достаточно контрастный шрифт (чтобы его можно было читать без выпучивания глаз до головной боли). Иногда удачной картинкой-БГ можно снять проблему излишнего контраста шрифта на белой странице. Перед началом работы неплохо бы провести вот такой тест для текста (не путать с текстом для теста :o)

Тест для текста Тест для текста Текст для текста Тест для текста

Тест для текста Тест для текста Тест для текста Тест для текста

Тест для текста Тест для текста Тест для текста Тест для текста

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

Смысловая суть картинки-фона.

Помимо визуальных качеств фона (цвета, тона, рисунка-схемы) существует еще и смысловой ряд бэкграунда. Чаще всего речь идет о простой уместности того или иного изображения или текстуры. Мятая бумага, текстура холста или дерева содержат в себе определенный смысловой (ассоциативный) ряд, и использовать столь конкретные текстуры "не по теме" не прибавит достоинств вашей страничке. Скорее всего, это просто будет уводить зрителя в сторону от главной темы. Лучше уж использовать абстрактную тектуру без излишнего сюжета.

Как выбрать цветовую гамму для дизайна странички или просто цвет фона

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

Можно воспользоваться подсказками в палитре какой-нибудь хорошо настроенной картинки - Gifa, вот например как этой. И даже если мне в ней ничего не понравилось - это же не последняя моя картинка...

Как сделать текстурный фон без швов при помощи Photoshop, где найти свободные для употребления БГ - информацию об этом это вы можете легко найти, используя поисковые системы, и на многих, подобных моему сайтах. Интересный вариант изготовления bg-tile предлагает PhotoPaint 8 (ну и 9, надо полагать...) Ну и специализированные программульки (о которых не могу сказать ничего, потому как никогда не пользовался).

Ремувер растров.

Лучше день потерять, зато потом за пять минут долететь... Все actions в этой статье - для Adobe Photoshop 7.

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

Буквально на днях мне пришлось решать эту проблему в своеобразном варианте. Два зубоврачебных светила подготовили доклад с презентацией через системный проектор, а в качестве исходного материала принесли массу красивых журналов по этой самой зуботехнологии. Размер картинок в журналах - 6х5см, а увеличить их предстояло через проектор на настенный экран (представляете, мало того, что на картинках чужие рты с зубами и без оных, так еще сканированный растр превращает это во все остальное).

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

Решение проблемы.

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

Сканирование производилось на 600dpi. Результат - фрагмент открытки размером 6х8см при оных dpi составил 1417х1890 пикс. Уменьшить на экран при 72dpi - нет проблем, как видите. Но если для проектора вам картинку нужно в лучшем случае не уменьшать? При уменьшении апроксимация и интерполяция (ой как умно) прячут растр безвозвратно. А вот как убрать его при исходных тысячах пикселов? (картинка слева: такое на стене через проектор - еще хуже, чем здесь).

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

Мы видим явную разницу в плотности и в угле наклона растра. Это первая причина перевода исходного изображения в CMYK. В RGB мы бы имели сложный растр на всех каналах, и соответственно, ниже качество исполнения). Разный угол наклона задается при цветоделении слайда во избежание все тех же муаров.

И теперь нам надо убрать этот растр с максимальным сохранением деталей изображения. Помочь нам реально могут несколько фильтров: все тот же blur, median, despeckle, но в большей или меньшей степени.

Путем тыка я определил такую комбинацию: 1. Gaussian Blur со значением 2,1 при 600dpi (при других разрешениях и эти параметры должны быть другими). 2. Median со значением 2 3. Ad Noise (Gaussian monochromatic со значением 2) - этот пункт возращает реальность размазаной и расплющенной каше пикселов, по возможности, разумеется.

И вот такое мы проделываем на каждом канале. Копирование операций в экшне помогает создать такую штуку в момент. Ну и копирование готового экшна с моего сайта еще больше это облегчает (экшн настроен на скан с 600dpi). И запускаем...

Что называется - почувствуйте разницу (напоминаю - картинка по прежнему в 600dpi, а это и размер сканированного изображения, и его печатные возможности без всяких муаров.

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

Вторая причина перевода изображения в CMYK - количество слоев. Чем их больше - тем информация сложнее и богаче (но все одно больше 4 нету). Неплохой вариант получился с конвертированием картинки в

Lab, и самый никудышный - в RGB.

А эта картинка визуально в три раза крупнее этого фрагмента на открытке. И никакого растра...

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

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

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

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

Несколько факторов, увеличивающих эффект реалистичности объема.

 

Последовательность светотеней

  1. Блик

  2. Свет

  3. Собственная тень

  4. Рефлекс

  5. Падающая тень

При этом желательно правильно передавать не только порядок тонов, но и их верные соотношения между собой.

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

Блик - самая яркая часть освещения, на блестящих предметах они маленькие и яркие, на матовых - побольше и менее заметные, часто очень близкие по тону к свету на предмете.

Свет. Самая светлая часть. Чем ближе к источнику освещения - тем ярче свет на предмете. Цвет состоит из цвета предмета и цвета освещения.

Собственная тень - затененная часть предмета. Наиболее плотная тень на границе света и тени, потом собственная тень высветляется рефлексом.

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

Рефлекс - влияние цвета поверхности, на которой лежит предмет, на тень предмета. Она делает эту часть тени светлее и с оттенком своего цвета.

Вы можете скачать "экшны" для построения шрифтовой надписи и шара, и вдоволь поэкспериментировать с оттенками цвета.