Основы технического дизайна. Часть 1

Автор: Василий Пирогов

Информация об авторе:

Я являюсь творческим руководителем Бюро Пирогова.Область моей специализации
- разработка эффективного дизайна, оказывающего эмоциональное влияние на посетителей.

Преимущества предлагаемых мною решений - полное соответствие дизайна имиджу

компании, её образу для целевой аудитории, поддержка брэнда в интернете, а так

же - кардинальное отличие дизайна сайтов от, практически всех остальных, в подобных тематиках.



e-mail: me@pirogovv.ru

Пирогов Василий. Урок 7: Основы технического дизайна. Часть 1

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

В этом уроке я рассматриваю основы технического дизайна. На примере обработки кондиционера,
я покажу какими приёмами можно пользоваться для придания изображениям чёткости, чистоты и приятного вида.

ШАГ 1

Исходное изображение.
image

На увеличенном изображении видны множество «артефактов» кондиционера. Это и не ровная решётка, и размытые кнопки,
а так же копирайт в правом верхнем углу. Нужно это всё убрать и сделать изображение чётким и красивым.
image

ШАГ 2

Все дальнейшие шаги, будем рассматривать в масштабе 200% для того, что бы читатели не ломали глаза. Вначале поработаем

над решёткой кондиционера. Самая частая решётка получится если наложить горизонтальные линии «через одну». Сглаживание

в фотошопе следует отключить (в верху на панели Options, галочка Anti-alias).

image

ШАГ 3

Обрезаем края линий по контуру кондиционера.

image

ШАГ 4

Для того, что бы отделить панель управления кондиционером от решётки, нарисуем тёмную синюю линию по контуру панели. image

ШАГ 5

Пришло время закрасить копирайт.

image

ШАГ 6

Займёмся нижней панелью. Марку кондиционера я решил убрать совсем. Что бы избавиться от всей грязи внизу проще просто

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

конце добавляем градиент, который делает наш кондиционер более объёмным.

image

ШАГ 7

Теперь займемся верхней панелью. Её так же придётся полностью перерисовать. Вначале обводим и выделяем область

верхней панели. Заливаем светло-серым цветом. Потом проводим горизонтальными линиями грани, которые практически

не видны были на оригинале.

image

Примечание: Вообще, при технической обработке изображений полезно полностью перерисовывать какие – то поверхности или грани.

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

ШАГ 8

Обрабатываем панель управления кондиционером. Берём инструмент brush и выделяем красные и зелёные кнопки,

а также светлые и тёмные полоски. С помощью градиентов и инструмента brush «чистим» сам фон панели управления.

image

ШАГ 9

Цветокоррекция. Накладываем светлый синий фон. Ставим режим наложения слоя Soft light (выпадающий список всех

режимов наложения слоёв находится в панели “layers” в самом верху слева. По умолчанию там стоит режим «normal»).

Изображение становится приятного синеватого вида.

image

ШАГ 10

Сравниваем начальное изображение с полученным результатом.

image

18 0 850 27
26
2007-04-11
чего-то не интересно как-то -)
2007-04-11
в Корел Дрове лучше палучитса Неактуально Некачественно
2007-04-11
А помоему очень даже, ведь далеко не каждый умеет ретушировать
2007-04-11
Я, конечно, мож чего не понял, но банальная ретушь изображений никакого отношения к ТЕХНИЧЕСКОМУ ДИЗАЙНУ не имеет, и уж тем более не является его "основой". А заголовочек "Урок 7: Основы технического дизайна. Часть 1" вообще "вгоняет в пессимизм": ежели и остальные "уроки" такие же, "тады ой". Кстати, а нельзя было просто сфотографировать цифровичком тот же кондиционер? Или отсканировать из "фирменного" каталога? Тогда б и ретушировать не пришлось ;).
2007-04-12
ну не будем так топтать-то, конешно выше изложенное не прорыв в обработке кривого в ровное, но всеже.... луче - вот зацените чего я накопал http://www.halilov.ru/arique/tutorial.htm ыыы)))))))))))))))))))
2007-04-12
to Yuri Buyskikh Это Вы наверное попутали "техническиий дизайн" с "промышленным дизайном" :) Технический дизайн это и есть ретушь, коррекция, монтаж и т.д. Студия Пирогова известная контора, которая делает очень красивые сайты, хотя по мне слишком перегруженые графикой. Но как говорится на вкус и цвет... И насчет высказывания что лучше сфотать, для качественных работ подойдет только студийная съемка с дорогим световым оборудованием. А если отсканировать с каталога, то все равно придется ретушировать. Про то и урок. Хотя я бы отрисовал кондишн в векторе, быстрее получится.
2007-04-12
Зачем такие уроке ваще писать?! Дкля кого они?
2007-04-12
Ладно мужик пиши продолжение, может там что то будет.
2007-04-12
С днём касманафтики джу новых уроков!
2007-04-12
Адский пиарищще.
2007-04-12
самопиар чистой воды, ай-ай-ай... Печально, если уж рекламировать себя, то серьезными уроками, чтобы ссылались на них, цитировали. а) кто хоть немного знаком с фотошопом или схожей программой, тем не надо такое объяснять, следовательно урок для новичков, а для новичков менюшки нужны, чтобы они понимали о чем речь, куда что вводить. в данном случае ситуация следующая: Заказчик: - Хочу этот кондишн себе в каталог (на сайт, на листовку) ... Дизайнер: - а есть фото? Заказчик: - неа, есть что-то в инете похожее... Дизайнер: - но ведь это не подойдет для полиграфии 8-( Заказчик: - я плачу деньги, сделай же что-нибудь... и тогда начинается ...из серии как из пластилина сделать конфетку... обычно низкобюджетные решения, которые не подразумевают качественную фотосъемку или покупку из дорогих клипартов. ничего не буду ставить. это не урок, это реклама. некачественная. Успехов!
2007-04-13
Хм.. и где тут "Основы Дизайна" ?.. Автор тупо перерисовал фотку, а пафосу как будто дом построил. То же мне, творчесикй руководитель, даже не понимает что такое Дизайн и чем он от простого верстальщика отличается. В мусорку.
2007-04-13
Нда. Ни дизайна, ни урока... Всё это вполне логично само-собой получится, если знать как в Фотошопе работать. А то и лучше. Причём пример довольно простой - можно вообще заново отрисовать объект, используя картинку как референс только. Кстати, плагины есть бесплатные. А вот сам Фотошоп у большинсва как раз нелицензия :)
2007-04-14
))))
2007-04-20
что это было?
2007-04-25
Думаю, что все же не стоит так "стегать" автора. Конечно идея технического дизайна - это более серьезное и емкое понятие. И поступить можно намного проще - слайд или цифровик. Да и владеющий Photoshop, не первый день, может применить совсем другие операции (пару щелчков мышкой) и в другой последовательности. И все же - это урок, простой урок, для тех, кто только начинает постигать азы программы. Наверняка такие найдутся и будут благодарны за него автору. Я много читала Пирогова, у него есть действительно интересные уроки. Так что, более сведущим, наверное, стоит подождать продолжения. Наверное (учитывая, что это первая часть), он начал с простого урока, далее продвигаясь к более сложному. А тему сразу указал (как и положено) - общую.
2007-04-28
Урок может и простой, но он же и заявлен как основы. Мне урок понравился. Ещё хочу сказать спасибо автору, что не зацикливается на плугах, меня его выручали, когда ни один плуг не справлялся с поставленной мне начальством задачей.
2007-05-08
Каменты классные, урок из серии "а я могу левой рукой рисовать...смотрите", действительно если для новичкоф должны быть пути, меню...
2007-05-27
НУ эсли человек совсем танкист, в этой области. То начинать нада именно с этаго урока!
2007-06-04
Основы технического дизайна... тема хорошая, название многообещающее и на том все..., к сожалению
2007-06-20
К сожалению (а может и к радости), уровень развития дизайна достиг той планки, при которой "основами технического дизайна" считаются работы Андрея Тиханова, некогда работавшего в студии Лебедева. Плюс ко всему, автор урока не осознал уровень развития посетителей этого сайта в плане дизайна. Как результат - реклама собственной студии обернулась анти-рекламой. P.S. Попсовая подача "before/after" (почему-то не по-русски), ассоциирующаяся с Сами Знаете Кем, плюсов уроку не добавляет... Вид фронтальный, форма симметричная, можно было хотя бы слева сделать половинку старую, а справа - новую. Это так, навскидку. Подача работы - завершающая стадия и зачастую немаловажная, она тоже требует задумки.
2007-07-11
Да, данный урок явно не для этого сайта... -= StingeR =- нармально накопал! =)
2007-07-29
Действительно, в векторе намного быстрее получилось бы. И качественнее. Аффтару не зачод:(
2007-08-30
ой а как такие полоски рисовать ? что бы сразу многа
2008-02-27
Вопрос в одном, откланение от орегинала какой процент? обман визуального момента не допустим да и заказчик остался бы не оч доволен после такой ретуши. в таком случае мне кажется лучше попросить помощи у хорошего 3Dешника!
2008-11-22
Боже мой!!! Спасибо!!! Столько нового узнал, вот только не пойму, как лучше забацать решетку а потом её обрезать??? =)
RENDER.RU