+7 (495) 229-0436   shopadmin@itshop.ru 119334, г. Москва, ул. Бардина, д. 4, корп. 3
 
 
Вход
 
 
Каталог
 
 
Подписка на новости
Новости ITShop
Windows 7 и Office: Новости и советы
Обучение и сертификация Microsoft
Вопросы и ответы по MSSQLServer
Delphi - проблемы и решения
Adobe Photoshop: алхимия дизайна
 
Ваш отзыв
Оцените качество магазина ITShop.ru на Яндекс.Маркете. Если вам нравится наш магазин - скажите об этом Google!
 
 
Способы оплаты
 
Курс расчета
 
 1 у.е. = 93.25 руб.
 
 Цены показывать:
 
 
 
 
  
Новости, статьи, акции
 

Эффект глубины в веб-дизайне при помощи изображений

31.12.2013 12:41
CARRIE COUSINS

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

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

Многослойность

rangerover

mikedascola

adlucent

gardner

matteo

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

Все мы видели примеры макетов с использованием лежащих друг на друге фотографий. Это известный "фокус". Стопка фотографий выглядит трехмерной, а вы чувствуете себя так, словно бы наяву листали фотокарточки. Это и есть пример многослойности. Иногда применение техники заметно (как в примере с фото), а иногда совсем не бросается в глаза.

Часто для достижения эффекта глубины несколько изображений объединяют в одно, чтобы визуально в одной картинке скомбинировать два плана - передний и фон. Если работа проделана хорошо, то эффект практически незаметен. Посмотрите на сайт Range Rover (в примере выше). И машина и город выглядят впечатляюще, а их комбинирование вызывает ощущение что если бы вы стояли за машиной, то смотрели бы с высоты на город.

Другой эффективный способ достижения многослойности - размещение изображений на фоне, который выглядит плоским. Особенно интересно смотрятся фотографии с необычных ракурсов, размещенные под углом, а также градиентные фоны. (Смотрите сайт Аdlucent в примерах).

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

Фотография

ermenegildo

ownedition

worth

charmer

hytter

draught

Один из самых полезных инструментов при создании "глубокого" веб-дизайна являются фотографии. Грамотные кадрирование и композиция могут сделать процесс создания глубины минутным делом.

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

Создайте заметный интерес на переднем плане. Убедитесь что у фотографии есть тема и фон. Думайте о теме фотографии на переднем плане и о фоне как о двух разных вещах. В таком случае вам проще будет выстроить кадр.

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

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

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

Манипуляции с изображением

Используя графические редакторы, такие как Adobe Photoshop, дизайнеры могут собственноручно добавить глубины картинке, с которой работают. Даже если в момент съемки фотограф не позаботился об этом моменте. Для этого используется один простой прием.

Оставьте на переднем плане четкое изображение главного объекта и размойте весь задний фон. (В Photoshop, можно воспользоваться фильтром Gaussian blur с радиусом в 5.0)

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

Тени

guestd

upstate

toykomilk

oyyo

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

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

Округлые тени располагающиеся ниже объектов, которые их отбрасывают, помогут создать 3D-эффект парения в воздухе. Это простая техника, часто использующаяся при создании кнопок, реже - других более мелких ui-элементов. Тени расположенные прямо перед плоским объектом сделают так, что объект будет казаться стоячим, как в примере выше - сайт Guest"d. (Заметили ли вы тени до того как специально обратили на них внимание?) Неправильные тени - те, которые не повторяют очертания объекта - тоже имеют право на существование. Они могут придать иное значение объекту, который отбрасывает несвойственную ему тень, или же могут выделить объект с заднего плана.

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

Иллюстрации и другие изображения

emotions

flourish

dascola

octi

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

Выводы

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

Эффекты можно применять как к фотографиям и рисункам, так и к кнопкам и прочим элементам ui. Так что удачи вам в создании "глубокого" веб-дизайна!

Ссылки по теме

  
Помощь
Задать вопрос
 программы
 обучение
 экзамены
 компьютеры
Бесплатный звонок
ICQ-консультанты
Skype-консультанты

Общая справка
Как оформить заказ
Тарифы доставки
Способы оплаты
Прайс-лист
Карта сайта
 
Бестселлеры
Курсы обучения "Atlassian JIRA - система управления проектами и задачами на предприятии"
Microsoft Windows 10 Профессиональная 32-bit/64-bit. Все языки. Электронный ключ
Microsoft Office для Дома и Учебы 2019. Все языки. Электронный ключ
Курс "Oracle. Программирование на SQL и PL/SQL"
Курс "Основы TOGAF® 9"
Microsoft Office 365 Персональный 32-bit/x64. 1 ПК/MAC + 1 Планшет + 1 Телефон. Все языки. Подписка на 1 год. Электронный ключ
Курс "Нотация BPMN 2.0. Ее использование для моделирования бизнес-процессов и их регламентации"
 

О нас
Интернет-магазин ITShop.ru предлагает широкий спектр услуг информационных технологий и ПО.

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

Хорошие отзывы постоянных клиентов и высокий уровень специалистов позволяет получить наивысший результат при совместной работе.

В нашем магазине вы можете приобрести лицензионное ПО выбрав необходимое из широкого спектра и ассортимента по самым доступным ценам. Наши менеджеры любезно помогут определиться с выбором ПО, которое необходимо именно вам. Также мы проводим учебные курсы. Мы приглашаем к сотрудничеству учебные центры, организаторов семинаров и бизнес-тренингов, преподавателей. Сфера сотрудничества - продвижение бизнес-тренингов и курсов обучения по информационным технологиям.



 

О нас

 
Главная
Каталог
Новинки
Акции
Вакансии
 

Помощь

 
Общая справка
Как оформить заказ
Тарифы доставки
Способы оплаты
Прайс-лист
Карта сайта
 

Способы оплаты

 

Проекты Interface Ltd.

 
Interface.ru   ITShop.ru   Interface.ru/training   Olap.ru   ITnews.ru  
 

119334, г. Москва, ул. Бардина, д. 4, корп. 3
+7 (495) 229-0436   shopadmin@itshop.ru
Проверить аттестат
© ООО "Interface Ltd."
Продаем программное обеспечение с 1990 года