Expertet.ru

Как дать объем элементам сайта

Всем привет, с вами Евгений, и сегодня я покажу вам, как можно сделать ваш сайт более привлекательным при помощи теней к различным элементам.

Раньше изображения на сайтах были идеально плоские и не очень интересными, но не так давно дизайнеры решили разнообразить их внешний вид и дать им немного объема. Самый простой способ - это добавить тень. Допустим, у вас есть кнопка, накладываем простейшую тень.

элемент сайта Объемная Кнопка

Смотрите, появился псевдообъем, но это еще не все! Если внимательно посмотреть, то вы поймете, что во-втором случае кнопка отжата, а в первом - нажата. Т.е. можно не просто создавать видимой объем, но и не сложную анимацию: просто добавив тень к кнопке. В не активном состоянии выбираем картинку с тенью, а в нажатом - без. Главное подобрать нужные размеры и тогда будет реалистичный эффект.

Как же добавить тень в фотошопе? Все просто! Справа, внизу, в слоях (Layers) есть кнопка F. Нажимаем на нее и создаем стиль данного слоя. В данном случае нас интересует тень(Drop Shadow). Выбираете этот пункт: можете зайти в него и подкорректировать настройки или оставить все по умалчиванию, как у меня на рисунке. Очень простой и эффектный прием, только не забывайте сохранять настройки стиля.

стиль слоя

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

Теперь усложним ситуацию. Предположим, у вас есть картинки и вы хотите их выделить фигурной тенью, как на рисунке снизу. (Кстати, тени бывают совершенно разными: любой формы, цвета, размеров и четкости.)

блоки сайта с тенью

Что у нас имеется? Простые тени (размытые или с четкими краями), тени "отгибающие" края картинки или ее сердцевину.

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

Последний шаг, выбираем фильтр: Blur(Размытие) - Gaussian Blur(Размытие по Гауссу) и ставим ползунок в положение 6,2. Жмем "окей". Все, наша тень готова!

фильтр Размытие по Гауссу Настройки фильтра Гаусса

Тени любой другой формы можно нарисовать кистью и придать размытие. Перед фильтром рызмытия, можно вашу тень немного деформировать инструментом трансформации. Жмите на клавиатуре (в английской раскладке) ctrl + T, правой кнопкой мышки выбираете нужную трансформацию и готово. Чтобы закончить трансформацию нажмите ctrl + Enter.

Настройки фильтра Гаусса

Если вы проделали все правильно, то у вас получится хороший результат. Теперь вам необходимо потренироваться, ведь отличные тени получаются не сразу.

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

Пример с более объемным изображением

Теперь вы знаете, как сделать ваши элемента сайта объемнее. Успехов вам и удачи!

Автор: Евгений Суворов 2016-06-28 Просмотров: 211