АЛЬХААФ — Школа Дизайна

Главная / ШКОЛА НАДПРОФ / АЛЬХААФ — Школа Дизайна / Глава 2.

Глава 2.

Оптимизация картинок. Обрисовка фотографий и иллюстрация

Оптимизация картинок: GIF, JPG, PNG

Клейн:
Вот моя работа «портрет коммерческого директора» для мультимедиа презентации «РС». Арт-директор этого проекта Слава Комаров (Vore). Сделано в «Иллюстраторе», 2 недели назад.

Хааф:
Привет, Клейн! Я на твоем примере покажу, как оптимизировать картинки. Это поможет нам, в том числе, облегчить нагрузку на наши почтовые ящики.
Твой файл занимает 95 Кб.

В приложении он же, сохраненный мной в двух вариантах:

201_jpg.jpg — 26 Кб

201_gif.gif — 19 Кб

Экономия на лицо. Особенно, если картинку планируется ставить на сайт, так как сайты должны загружаться быстро.

Чтобы эффективно сжимать картинки пользуйтесь функцией Фотошопа Save for Web. Она находится в меню File. Также ее можно вызвать комбинцией «горячих клавиш», нажав на клавиатуре одновременно кнопки Ctrl-Alt-Shift-S.
Рекомендую запоминать комбинации горячих кнопок для часто используемых функций, так как они здорово ускоряют работу.

При вызове этой функции перед вами откроется окно. Первое что надо сделать — это выбрать формат, в котором сохранять:

GIF

Лучше всего для сжатия рисованных картинок, с большими областями однородного цвета. Сжимает за счет сокращения количества цветов + дополнительное сжатие без потерь. Максимально возможное количество цветов в GIF-файлах — 256. Если сжимать им фотографии можно получить картинку «в точечку», или раскрашенную в «плоские» цвета. В любом случае, фотографии этот формат сжимает гораздо хуже. Позволяет создавать картинки с прозрачными областями. Но прозрачность эта без сглаживания, по краям будут видны зубцы, если не предпринять специальных мер (см. ниже).

JPEG

Лучше всего подходит для фотографий или размытых картинок с плавными цветовыми переходами. Сжимает хитрым способом, в детали которого мы вдаваться не будем. Вносит в изображение «шум», на фотографиях не заметный. Шум этот сильно заметен на резких цветовых переходах (вы увидите его вокруг господина коммерческого директора, если посмотрите файл 201_jpg.jpg под увеличением). Прозрачность не поддерживает.

Аналог GIF. Большого практического смысла не имеет.

Использует сжатие без потерь, аналогичное GIF и PNG-8, но не сокращает количество цветов. Плюс к этому позволяет сохранять в файле прозрачные и полупрозрачные области любой сложности. Этот формат удобно использовать для вставки объектов c прозрачностью из Photoshop во Flash.

Выбрав формат нужно настроить параметры сжатия, так чтобы получить минимально возможный объем, сохранив приемлемое качество. В окне Save for Web слева вверху есть закладки, которые позволяют просматривать исходное изображение, сжатое или оба одновременно и сравнивать их в процессе подбора параметров.

Параметры GIF

Основной параметр — Colors. Чем он меньше, тем меньше цветов будет использоваться, и тем меньше будет весить файл. Второй важный — Lossy. За счет внесения дополнительных потерь (абсолютно незаметных при небольшом значении) может сильно уменьшить файл.

Сразу под выбором формата — алгоритм сокращения количества цветов. Пусть он всегда будет Adaptive, как по умолчанию. Следующий вниз параметр — алгоритм имитации бОльшего количества цветов, чем есть на самом деле (dithering). Его включение увеличивает объем файла, но позволяет сгладить резкие цветовые переходы. Если можно обойтись без него — лучше обойтись. Конкретное значение подбирайте по вкусу. Справа от него — Dither — это степень применения этого алгоритма в процентах. Позволяет немного уменьшить файл обратно при использовании дизеринга (прости, Господи!).

Transparency включает сохранение прозрачности. Если он включен, приобретает смысл параметр Matte — цвет фона. Как я уже говорил, прозрачность в GIF без сглаживания. Полупрозрачных пикселей быть не может. Задав цвет фона можно автоматически расширить непрозрачную область и смешать все полупрозрачные пиксели с этим цветом, получив иллюзию плавной границы. При этом важно, чтобы цвет фона, на котором вы будете использовать такой файл, точно совпадал со значением параметра Matte.

Interlaced лучше не включать. Это режим постепенного проявления картинки. Web Snap — тоже можно не использовать.

Параметры JPEG

Главный параметр — Quality, он определяет степень сжатия и, соответственно, потери качества. Настройте его так, чтобы он был минимальным при котором картинка хорошо выглядит. Значения меньше 50 использовать нецелесообразно. Галочку Optimized лучше включать, она немного сокращает размер файла. Progressive наоборот лучше держать выключенной. Она тоже может немного уменьшить файл, но он будет загружаться в несколько заходов, постепенно уточняясь, что выглядит не очень красиво. Blur — скорее относится к спецэффектам, рекомендую его не использовать здесь, пусть всегда будет 0. Matte — ни на что не влияет.

Параметры PNG-24

Единственное, что может пригодиться — это галочка Transparency, включающая сохранение прозрачности. Interlaced лучше не включать, а Matte в этом режиме ни на что не влияет.
Уфф!

Обрисовка фотографий и иллюстрация

Ольга Шотландия:
Привет! Для официального сайта Ирины Богушевской я обрисовала ее портрет. Прошу прокомментировать.

Хааф:
Привет, Оля! А ты это руками обрисовывала? Или использовала какой-то автоматический конвертер? Игу, Слава, прошу вас прокомментировать работу Оли, если есть чем. И поделиться с Олей картинками и опытом, полученными в проекте «РС».

Клейн:
Спасибо, Хааф, я научился сжимать картинки в «Фотошопе». Высылаю результат — это несколько иной «портрет коммерческого директора».

Оля, считаю, что обрисовка портрета для официального сайта Ирины Богушевской должна быть по качеству прорисовки не хуже, чем высылаемый мною портрет. В противном случае лучше ставить фото, а не картинку.

Слава Комаров, прошу выслать в Школу портреты персонажей для «РС».

Игуана:
Привет, Хааф, привет, Оля.
Я вышлю вам для «поглядеть» не абстрактных чуваков из «РС», а всем известного Илью Зоффа, обрисованного мною накануне, потому что от отношения к портретируемому многое зависит.

Правда, я рисовала в «Иллюстраторе» векторами, а Оля, как я понимаю, в «Фотошопе» обрисовывала, но и тут и там инструменты разные, а принцип действия один.

Олина обрисовка вызывает у меня желание полезть в «Фотошоп» и поискать тот фильтр, которым это было сделано. Я не знаю, как ты, Оля, это сделала — возможно, руками — но возникает ощущение, что это какой-то фильтр.

Скажу сразу — уже безотносительно рисунка Оли — фильтры, может, и прикольная вещь, но их видно за километр! И потому не надейтесь, что ваши «хитрости» и экономия времени или неумение отрисовать от руки останутся незаметными для зрителя. Я фильтрами не пользуюсь.

Если что-то непонятно на картинке — можно ее обобщить с помощью фильтра и поглядеть, где там темное пятно заканчивается, где посветлей начинается. Фильтр в данном случае — подсказка, но никак не инструмент рисования. Второй вопрос — почему именно эти цвета использованы? Я про них пока не буду ничего говорить — может быть, это цвета сайта, и картинка именно этими цветами должна была быть обрисована.

В портрете важно прорисовать лицо. Остальное — ну как-то — обобщить. Потому что всякие шурушки мелкие мешают восприятию, картинка дробится. К примеру, не нужен серый мазок под губами Богушевской — он что изображает? — неясно. Нос у нее кривой получился с теневой стороны. Я вот Зоффу недавно объясняла, процитирую: «Не увлекайся деталями — за ними ты теряешь главное. Тщательно их прорисовывая, к концу ты обнаружишь, что они отдельно каждая сама по себе, а вместе они не смотрятся, и картинка разваливается на кусочки. Даже если будет куча тщательно прорисованных мелочей, картинка не будет цельная. И еще вот — не стоит гнаться за точным воспроизведением: ты рисуй то, что ты видишь, а не то, на что ты смотришь». Смотреть — это не значит видеть. Это коан почти.

Хорошо, что Оле удалось портретное сходство, и настроение передалось от Богушевской — железная леди с мягкой наружностью. Теперь этой «железной леди» надо немного почистить перышки и все будет в порядке.

Да, я не выбрала себе задание №1. Я бы хотела каким-то техническим фишкам научиться. флешу.

А в ответ я могу научить желающих рисовать руками, рассказать о теории цвета, композиции, истории искусств, неплохо знаю «Иллюстратор», «Фотошоп» и «Кварк» (его, впрочем, чуть хуже). В «Пейнтере» если кто что рисует — тоже могу подсказать. О том, как портреты рисовать и вообще людей, и всякими своими прорубами по рисованию поделиться.

Рисовать умеют все, просто не все рисуют.

Слава Комаров:

Слава Комаров, прошу выслать в Школу портреты персонажей для «РС».

Ольга Шотландия:
Об обрисовке Богушевской. Уточню цель.
У меня нет цели сделать анимашку. Мне была нужна абстрактная рисованная картинка, имеющая: а) портретное сходство, б) передающая нужное мне ощущение. Типа как рисовали Ленина в советские времена или Петров рисовал логотип Бога.

Метод:
Исходник обрабатывался кривыми в Фотошопе, потом сохранялся в «гифе». Потом обрисовывался в Иллюстраторе с ориентацией (но не повторением) гифа и изменением цвета. Потом наложен в Фотошопе фильтр (с ним я явно переборщила).

Второй вопрос — почему именно эти цвета использованы?
Да, я хотела делать сайт в этих тонах. Мне не нужны были «естественные тона». С деталями и прочим — понятно.
Спасибо, Игу!

Илья Зофф:
Всем привет. Хочу поделиться начальными знаниями по обрисовке фотографий.
Десять дней назад я не представлял вообще, как это делается. Теперь представляю, примерно. Проследить путь от первой картики до нарисованной сегодня можно тут:http://www.livejournal.com/users/_satisfy_.
Все знания ниже получены от Игуанны, Смайлы, Эни, Ольги Шотландии и сообщества ru_vector.

Возьмите фотографию. Мне нравиться брать фото знакомых людей. Так интересней, больше энтузиазма. Обрисовывать лучше всего в Corel Draw или Adobe Illustrator, Фотошоп — не лучшая программа для этого. Для начала лучше всего поизучать немного анатомию людей — в метро, например, всматриваться в лица людей, запоминать контуры головы, лица, расположение глаз, носа, рта. Можно попробовать порисовать на бумаге руками. Я этого не делал, а зря.

Начинайте обводить одежду, шею, лицо, волосы. Получилась заготовка.
Приступая к деталям лица, нужно помнить, что «каждая линия, каждая точка, каждая плоскость — должны доказывать свое право на существование, должны быть такими, которые выявляют форму, характер и cуть предмета». Поэтому нужно детально изучать лицо и находить все «мелкие, но важные» и «крупные, но не важные» детали. А вот совет про детали от Игуанны: «Не увлекайся деталями — за ними ты теряешь главное. Тщательно их прорисовывая, к концу ты обнаружишь, что они отдельно каждая сама по себе, а вместе они не смотрятся, и картинка разваливается на кусочки. Даже если будет куча тщательно прорисованных мелочей, картинка не будет цельная. И еще вот — не стоит гнаться за точным воспроизведением: ты рисуй то, что ты видишь, а не то, на что ты смотришь».

Цвет кожи подбирать лучше всего на глаз. Если делать это пипеткой, то цвет в большинстве случаев получается отвратительным. Может получиться синеватым или зеленоватым. Приблизительный цвет кожи: С=0, M=25–40, Y=30–40, K=0. Это примерный, какой нравится мне.

Также с фотографии не стоит брать цвет губ, иначе получается высокая контрастность между губами и лицом. В основном, это относится к мужчинам, у которых лучше брать цвет губ, как можно ближе к цвету кожи. «У шеи почти никогда не может быть такого же оттенка что и у лица — свет, все-таки, падает по-разному, т.к. шея дальше».

Еще я узнал, что на носу есть светлый блик, а под волосами — тень.

Для того, чтобы лучше определять тени и свет, можно пользоваться двумя штуками:

1. «в Фотошопе фильтр Smart Blur» (с) Any. Применив, можно примерно посмотреть, что должно получится.
2. Совет Ольги Шотландии: «Светотени хорошо видны, если делать в Фотошопе контрастность через кривые, потом сохранят в 4-х или 8-м цветном гифе».

Клейн:

Для начала лучше всего поизучать немного анатомию людей — в метро, например, всматриваться в лица людей, запоминать контуры головы, лица, расположение глаз, носа, рта. Можно попробовать порисовать на бумаге руками. Я этого не делал, а зря.

Полезно найти в интернет материалы по теме «Рисунок, живопись» и почитать (и помотреть) там про анатомию черепа (на примере учебных гипсовых голов) — разобраться в структуре плоскостей, ограничивающих объем черепа, и как падает свет на эти плоскости.

АЛЬХААФ — Школа Дизайна
главная страница НадПроф

Сутра помоста Шестого Патриарха
Практикум Шухова
Школа Делового Петрова

Главы Школы Дизайна

Глава 1.
Вступление и открытие.
ЗАДАНИЕ #1: Выбор навыков и проектов.
Командная работа: Дизайнер и Менеджер.

Глава 3.
Логотип для рекламного агентства «Brand stayer».

Глава 4.
Композиция.
Теория цвета.
Уровни абстракции.
Кубик Рубика и тупики.
Об образах и ассоциациях.
Смотрите много красивых работ.

Глава 5.
Баннер «Практикум Дизайна»

Глава 6.
Человечество уже располагает опытом по вашей теме.
Конец семестра.
Полезные ссылки.
Преподаватели.
Естетическое преступление.

Глава 7.
Преобразование фотографий из цветных в черно-белые.
Замыливание взгляда.
Генерация идей.
Корпоративная открытка, пример работы: идея… иде я нахожусь?
Можно ли использовать несколько почти похожих вариантов?

Глава 8.
Логотип «ЛТ Терминал».
Дизайн сайта «Промкраска».
Банер проекта «Семинары Ш2Л».
Анимировать банер

Глава 9.
Типографика и полезные ссылки.
Любителям каллиграфии.
Про логотипы.
Красивые ссылки.
Смешные трёхмерные мульты про карму.
Как рисовать людей.
Типографика и полезные ссылки

Глава 10.
Еженедельные дизайнерские игрища

Первый тур
Второй тур
Третий тур
Четвертый тур

Глава 11.
Дизайн сайта от и до. ЛИТРЕДАКТОР.РУ

Начало
Цели сайта
Техническое задание дизайнеру
Мониторы с разными возможностями. Цветность и разрешение
«Рыба» - рабочий текст для дизайна
Первый вариант
Второй вариант
Как закачивать файлы на сервер и давать на них ссылку
Третий вариант
Четвертая, Пятая, Шестая... версии - дорабока деталей
Как разрабатывать фаормы, общий подход
Как создать скриншот
Дизайн раздела «Сделать заказ»
Важные «мелочи»
Финал

Глава 12.
Серия Психотропных Тренингов по креативу (Чертова дюжина Хаафа)

Свободное ассоциативное мышление. Попросту говоря — Гон
Выбор и переключение состояний. Гон гону рознь
Модальности ассоциации: повествование, визуализация, звук, эмоции и т.д.
Восприятие информации «ощущениями». Загрузка данных и точная настройка на цель
Создание сложных объектов («реальностей») из пустоты. Образное мышление
Целостность (consistence) и диапазон (scope) проекта
Основы системного мышления (уровни абстракции, связи, процесс/система). Разрешение конфликтов
Общие структуры в сценариях, режиссуре, дизайне. Способы думать об этом как о системах
Создание структур, моделей мышления. Креатив. Think different
Почему ограничения это хорошо, как они помогают креативу, и почему без них креатива нет
Работа в команде. Ограничения и сильные стороны членов команды. Мозговые штурмы
Функциональные требования. Тренды. Симуляция процессов и систем в голове
Собираем всё вместе
Отзывы участников
История Одного Креативщика