Доброго времени суток, сейчас мы попытаемся понять, что же такое технический дизайн. Плодом усилий техдизайнера является красивая (ну, или не очень, смотря какая у кого творческая потенция) картинка, иллюстрация. В качестве вводного урока, мы нарисуем иконку типа «Click here».
Первый этап
Первый этап — идея: мы попробуем изобразить обычную мышку, которая кликает в нужное нам место. Поставленная задача — довольно простая и тривиальная, поэтому на первом этапе «зависать» не будем.
Второй этап
Второй этап: подбираем материалы и инструментарий. Нам понадобится фото мыши. Я фотографировал сам, но вы можете скачать подходящее фото из Интернета. Благо данный девайс не является раритетом. Также нам пригодится Photoshop: для вырезки изображения из фона и последующей его ретуши.
Фото у меня получилось вот такое:
Изображение недоступно
Вот результат вырезки и ретуши:
Изображение недоступно
Вырезал с помощью быстрой «маски». Для тех, кто забыл, напомню: нажимаем в Photoshop «q» и «Кисточкой» закрашиваем ту область, которая останется не выделенной. При необходимости можно некоторые места потом «подстричь» «Ластиком». Ретушь делаем либо «Лечащей кистью», либо «Штампом», тут кому как нравится. Конечно, оптимальный метод — комбинирование этих двух инструментов. Ретушь технических предметов лучше производить на большом «зуме», чтоб не задевать неповреждённые участки. В настройках «Штампа» уровень прозрачности не должен быть выше 50%. Блики рисуются белой кистью на отдельном слое. Потом применяем к этому слою размытие по Гауссу и стираем ненужные участки «Ластиком». Иногда возникает необходимость придать какому-то участку яркость или же затемнить. Для этого используем соответствующие инструменты в разных режимах. Вызвать их можно горячей клавишей «O» (если зажать Shift и нажимать «O», то вы будете переключаться между инструментами «Осветлить», «Затемнить» и «Губка»).
Прилагается psd-файл для скачивания и ознакомления. Если будут вопросы по технической стороне дела — спрашиваем в комментариях.
Третий этап
Третий этап: делаем непосредственно иконку.
Изображение недоступно
Тут, как бы, всё просто. Выбираем в стандартном наборе фигур прямоугольник с закруглёнными краями, рисуем его, а потом деформируем. Отверстие для кабеля мыши состоит из четырёх кружочков. Если идти снизу вверх, то нижний — чёрного цвета, размыт по Гауссу и сдвинут на два пикселя вниз, дальше — слой с кружочком, к которому применили самый обычный линейный градиент. Дальше следует слой с белым и чёрным кружком. На иллюстрации вы можете посмотреть, как они расположены.
Опять же psd-файл для ознакомления.
Последнее, что хочется сказать: техдизайн — очень просто в плане знаний. То есть не надо быть гением, чтоб отретушировать что-либо, нарисовать отражение или тень. Это стандартный набор приёмов и чем он у вас будет больше, тем более высокооплачиваемым дизайнером вы будете. Единственный минус техдизайна — время, потраченное на работу (делается это не быстро). С опытом, конечно, увеличивается и скорость работы, но всё же… Так что если у вас есть возможность задействовать для работы над проектом профессионального фотографа или 3D-модельера — воспользуйтесь ей.
Автор: Андрей Морковин.
Ещё материалы по этой теме:
- Введение: Как делать сайты
- Как создать «фавикон» для сайта
- Вставка PHP-кода в HTML
- Как сделать свой сайт
- Как создать сайт бесплатно, самому
Комментарии:
CATAHИCT
Интересная статья, да и сам сайт я смотрю очень даже не плох. Попал сюда по поиску из Google, занес в букмарки :)
Never Lex
Да, у дизайнера должно быть немало терпения. Пока повырисовываешь всё, пока сделаешь кучу мелочей, уже от макета тошнить начинает. Всё больше задумываюсь над тем, чтобы нанимать фрилансера на фотошопную работу :)
K@tika
У дизайнера должно быть ОЧЕНЬ огромное терпение. )) В начале. Со временем одинаковые действия проводятся быстрее и качественнее. По себе знаю.
Антон
Почему это называется техдизайном? Можно просто дизайн?
K@tika
Просто дизайном может быть дизайн в полиграфии, интерьера, штор и т. п.. Технический дизайн — это ручная работа включающая в себя художественную ретушь изображения, цветокоррекцию, устранение технических и эстетических недостатков, совмещение нескольких иллюстраций, адаптацию изображения под определенные требования. Собственно вот так.
red_lion
Странно… :-(
Недоступны для просмотра картинки и PSD файлы для скачивания.
DenKesar
угу… недоступны
Амир
Андрей, здравствуйте! На трех браузерах проверял… Если у вас будет время, поставьте пожалуйста фотки, очень хочется на ваши примеры посмотреть, и ссылки на psd. Заранее спасибо
Артём
А почему картинки в этой статье не отображаются, как в других, нельзя ли восстановить?
Роман
картинки пропали в посте