техдизайн Главная > Вебмастеру > Создание своего сайта > Блог Андрея Морковина > Кратко о техдизайне (создаём иконку)

Кратко о техдизайне (создаём иконку)

Дизайн рисует он:
Кряхтит, потеет, напряжён.
Работа идёт к завершению
И счастлив он до изнеможения.
Алексей Востров.
21 июля 2009 года

    Доброго времени суток, сейчас мы попытаемся понять, что же такое технический дизайн. Плодом усилий техдизайнера является красивая (ну, или не очень, смотря какая у кого творческая потенция) картинка, иллюстрация. В качестве вводного урока, мы нарисуем иконку типа «Click here».

 

 

Первый этап

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

Второй этап

    Второй этап: подбираем материалы и инструментарий. Нам понадобится фото мыши. Я фотографировал сам, но вы можете скачать подходящее фото из Интернета. Благо данный девайс не является раритетом. Также нам пригодится Photoshop: для вырезки изображения из фона и последующей его ретуши.

    Фото у меня получилось вот такое:

Изображение недоступно

    Вот результат вырезки и ретуши:

Изображение недоступно

    Вырезал с помощью быстрой «маски». Для тех, кто забыл, напомню: нажимаем в Photoshop «q» и «Кисточкой» закрашиваем ту область, которая останется не выделенной. При необходимости можно некоторые места потом «подстричь» «Ластиком». Ретушь делаем либо «Лечащей кистью», либо «Штампом», тут кому как нравится. Конечно, оптимальный метод — комбинирование этих двух инструментов. Ретушь технических предметов лучше производить на большом «зуме», чтоб не задевать неповреждённые участки. В настройках «Штампа» уровень прозрачности не должен быть выше 50%. Блики рисуются белой кистью на отдельном слое. Потом применяем к этому слою размытие по Гауссу и стираем ненужные участки «Ластиком». Иногда возникает необходимость придать какому-то участку яркость или же затемнить. Для этого используем соответствующие инструменты в разных режимах. Вызвать их можно горячей клавишей «O» (если зажать Shift и нажимать «O», то вы будете переключаться между инструментами «Осветлить», «Затемнить» и «Губка»).

    Прилагается psd-файл для скачивания и ознакомления. Если будут вопросы по технической стороне дела — спрашиваем в комментариях.

Третий этап

    Третий этап: делаем непосредственно иконку.

Изображение недоступно

    Тут, как бы, всё просто. Выбираем в стандартном наборе фигур прямоугольник с закруглёнными краями, рисуем его, а потом деформируем. Отверстие для кабеля мыши состоит из четырёх кружочков. Если идти снизу вверх, то нижний — чёрного цвета, размыт по Гауссу и сдвинут на два пикселя вниз, дальше — слой с кружочком, к которому применили самый обычный линейный градиент. Дальше следует слой с белым и чёрным кружком. На иллюстрации вы можете посмотреть, как они расположены.

    Опять же psd-файл для ознакомления.

    Последнее, что хочется сказать: техдизайн — очень просто в плане знаний. То есть не надо быть гением, чтоб отретушировать что-либо, нарисовать отражение или тень. Это стандартный набор приёмов и чем он у вас будет больше, тем более высокооплачиваемым дизайнером вы будете. Единственный минус техдизайна — время, потраченное на работу (делается это не быстро). С опытом, конечно, увеличивается и скорость работы, но всё же… Так что если у вас есть возможность задействовать для работы над проектом профессионального фотографа или 3D-модельера — воспользуйтесь ей.

    Автор: Андрей Морковин.

 

Ещё материалы по этой теме:

 

 

Комментарии:

CATAHИCT
Интересная статья, да и сам сайт я смотрю очень даже не плох. Попал сюда по поиску из Google, занес в букмарки :)

Never Lex
Да, у дизайнера должно быть немало терпения. Пока повырисовываешь всё, пока сделаешь кучу мелочей, уже от макета тошнить начинает. Всё больше задумываюсь над тем, чтобы нанимать фрилансера на фотошопную работу :)

K@tika
У дизайнера должно быть ОЧЕНЬ огромное терпение. )) В начале. Со временем одинаковые действия проводятся быстрее и качественнее. По себе знаю.

Антон
Почему это называется техдизайном? Можно просто дизайн?

K@tika
Просто дизайном может быть дизайн в полиграфии, интерьера, штор и т. п.. Технический дизайн — это ручная работа включающая в себя художественную ретушь изображения, цветокоррекцию, устранение технических и эстетических недостатков, совмещение нескольких иллюстраций, адаптацию изображения под определенные требования. Собственно вот так.

red_lion
Странно… :-(
Недоступны для просмотра картинки и PSD файлы для скачивания.

DenKesar
угу… недоступны

Амир
Андрей, здравствуйте! На трех браузерах проверял… Если у вас будет время, поставьте пожалуйста фотки, очень хочется на ваши примеры посмотреть, и ссылки на psd. Заранее спасибо

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

Роман
картинки пропали в посте

 

⇓ 

Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки! Так победим.

Поделиться ссылкой на эту страницу в:

 

Полезные ссылки:

Партнёрские программы интернет-магазинов Книги по психологии отношений, скачать бесплатно

 


основан в 2008 г. © Все права на материалы сайта Seoded.ru принадлежат Алексею Вострову.
Копирование (полное или частичное) любых материалов сайта возможно только с разрешения автора и при указании ссылки на источник.
Ослушавшихся находит и забирает Бабайка!