Веб-дизайн видео уроки. Технический дизайн

Веб-дизайн видео уроки. Технический дизайн

Урок №2. Веб-дизайн видео уроки. Технический дизайн.

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

Основные виды техдизайна в вебе:

- Цветокоррекция

- Техническая ретушь

- Обтравка объекта

- Коллажирование

- Двойная экспозиция

1) Цветокоррекция.

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

Цветовой круг. Круговая схема, отражающая взаимосвязь цветов видимого спектра и позволяющая определить, какие цвета гармонично сочетаются, а какие нет.

Самые популярные цветовые круги-Гёте и Иттена

Веб-дизайн видео уроки. Технический дизайн

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

Цветовой гармонии в веб-дизайне можно достигнуть, учитывая основные характеристики цвета:

-насыщенность;

-цветовой тон;

-яркость;

-размер занимаемых этими цветами на плоскости и их взаимное расположение в пространстве.

Виды цветовой гармонии:

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

2. Аналоговая гармония - комбинация трех соседних цветов спектра. В ней используются разные по яркости оттенки цвета.

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

4. Комбинирование контрастных цветов - один цвет комбинируется с двумя противоположными, близкими между собой.

Корректирующие слои. Дополнительные слои, накладываемые на фотографию и неразрушающие ее пиксели, с целью внести корректировки в некоторые характеристики фотографии (яркость, насыщенность, баланс цвета/тени и т.д.).

-кривые (curves)

-выборочный цвет (selective color)

-яркость/контрастность (brightness/contrast)

-цветовой баланс (color balance)

-оттенок и насыщенность (hue/saturation)

-резонанс (vibrance)

Выводы:

-цветокоррекция нужна в тех случаях, когда необходимо привести фотографии к определенной цветовой гамме;

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

-сочетания двух или трех цветов являются наиболее гармоничными для восприятия;

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

2) Техническая ретушь.

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

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

Инструменты технической ретуши:

- Штамп (Clone Stamp Tool)

- Заплатка (Patch Tool)

Выводы:

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

-тех. ретушь лучше всего выполнять инструментами “заплатка” и “штамп”.

3) Обтравка объекта.

Вырезание отдельного объекта с фотографии для его дальнейшего использования в проекте.

Инструменты для выделения:

-лассо (прямоугольное, овальное, магнитное)

-волшебная палочка

-перо

Выводы:

-вырезку объектов можно делать разными инструментами - каждый выбирает свой способ;

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

-качественно вырезанные объекты смотрятся в проектах очень эффектно и современно.

4) Коллажирование.

Прием по совмещению нескольких изображений в единое целое по стилю и композиции.

Основные правила коллажирования:

-соблюдение размеров и пропорций

-использование только качественно вырезанных объектов

-приведение объектов коллажирования к единому стилю

-сохранение объема (тени,блики)

Выводы:

-коллажирование должно быть реалистичным для глубины восприятия

-создание коллажа-трудоемкий процесс, в котором нужно учесть много аспектов (пропорции, падение света и т.д.)

5) Двойная экспозиция.

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

Выводы:

-двойная экспозиция - эффектный и запоминающийся прием, однако с ним не нужно перебарщивать

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

Веб-дизайн видео уроки. Технический дизайн

Видео-уроки:

1) Технический дизайн в веб-дизайне.

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

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

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

3) Двойная экспозиция, третий и завершающий видеоурок "технический дизайн в веб-дизайне"

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

Мы разобрали модуль №2. Веб-дизайн видео уроки. Технический дизайн!

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

Урок №1. Веб-дизайн обучение с нуля. Основные ошибки веб-дизайнера

Веб-дизайн видео уроки. Технический дизайн

Курс веб-дизайна для начинающих

Веб-дизайн видео уроки. Технический дизайн