Создаем в фотошопе пользовательский интерфейс с временной шкалой

14

7353
28-11-2011

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

Шаг 1.
Создаем в фотошопе новый документ, заливаем его белым цветом.Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 2.
Воспользуемся какой-нибудь красивой фотографией природы из моей коллекции бесплатных стоковых фотографий. Я выбрала эту. Вставляем ее в наш документ, масштабируем до приемлемых размеров.Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 3.
Создаем прямоугольник, заливаем его цветом #1d1d1d.Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 4.
Применим к созданной фигуре стиль слоя. Сначала «Тень» (Drop Shadow).Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 5.
Потом «Внутренняя тень» (Inner Shadow).Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 6.
Получился такой результат.Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 7.
Теперь воспользуемся клавишей нижнего подчеркивания (на клавиатуре она слева от кнопки со знаками + и =). Удерживая Shift, нажимаем на эту клавишу проводим прямую линию, потом переводим каретку и опять чертим прямую линию. Цвет #2d2d2d, настройки шрифта, как на рисунке ниже. Обратите внимание, межстрочное расстояние 34 пикселя.Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 8.
Далее пишем названия месяцев. Цвет #4a4a4a.Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 9.
Теперь пишем год 2011. Цвет #4a4a4a.Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 10.
Теперь создаем прямоугольник, заливаем его черным цветом.Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 11.
С одного края обрезаем прямоугольник так, чтобы получилась стрелка.Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 12.
Применяем к стрелке стиль слоя. Сначала «Наложение цвета» (Color Overlay), цвет #323232.Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 13.
Потом «Внутренняя тень» (Inner Shadow).Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 14.
Потом «Тень» (Drop Shadow).Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 15.
Получился результат, как на рисунке ниже. Теперь пишем слово СЕНТЯБРЬ, цвет #cecece, настройки шрифта, как на рисунке ниже.Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 16.
Далее создаем черный кружок, цвет #121212.Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 17.
В кружке тем же шрифтом, что и СЕНТЯБРЬ, пишем цифру 25, цвет #898888.Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 18.
Делаем еще один кружок с цифрой в погашенном состоянии. Для этого делаем дубликат кружка из Шага 16, перемещаем его ниже и снижаем прозрачность слоя до 45%. Делаем копию цифры 25, перемещаем ее и меняем цвет на #3e3e3e.Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 19.
Теперь делаем еще одну, более темную подложку. Создаем прямоугольник ниже всех слоев из блока с месяцами, но выше слоя с картинкой. Заливаем цветом #181818.Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 20.
Аналогичным способом, как в Шаге 7, создаем шкалу с делениями, цвет #3e3e3e.Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 21.
Тем же самым шрифтом создаем столбик с цифрами.Создаем в фотошопе пользовательский интерфейс с временной шкалой

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

Шаг 23.
Применим к этому элементу стиль слоя «Наложение цвет» (Color Overlay), цвет #1e1e1e.Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 24.
Теперь «Обводка» (Stroke), цвет #2c2c2c.Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 25.
Далее «Тень» (Drop Shadow).Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 26.
И наконец «Внутренняя тень» (Inner Shadow).Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 27.
Получился такой результат.Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 28.
Теперь делаем копию слоя основной картинки и делаем из нее маленький квадрат со скругленными краями.Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 29.
Применим к превьюшке стиль слоя «Обводка» (Stroke), цвет #181818.Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 30.
Далее стиль слоя «Внешнее свечение» (Outer Glow).Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 31.
Потом «Внутренняя тень» (Inner Shadow).Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 32.
Получился такой результат.Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 33.
Рядом с превьюшкой напишем текст, цвет #cecece.Создаем в фотошопе пользовательский интерфейс с временной шкалой

Шаг 34.
А ниже еще один текст цветом #626262.Создаем в фотошопе пользовательский интерфейс с временной шкалой

Финал
В итоге получился такой вот симпатичный интерфейс.Создаем в фотошопе пользовательский интерфейс с временной шкалой

 
 

PS. Постовой. А вы знаете, что с помощью интерфейса специального сервиса ePochta вам будет доступна смс рассылка через интернет , если вы хотите быстро и экономно связаться со своими друзьями или оповестить клиентов.

Оцените, пожалуйста, статью!
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(0 голосов, в среднем: 0 из 5)
  • Короткая ссылка на этот пост: http://www.designonstop.com/?p=4533
  • Получать обновления:

  • Поддержать DesingNonstop рублём!

Написать комментарий с помощью формы ВКонтакте

Написать комментарий с помощью формы Facebook

Комментариев 14 комментариев

Хороший урок, очень понравился.

ОтветитьОтветить

@Евгений:
Спасибо!
Мне самой понравилось делать этот урок. Практически все только на стилях слоя тень и внутренняя тень, а результат впечатляет ))

ОтветитьОтветить

Есть квадрат Малевича, а у тебя есть свой — в первом шаге:))
Спасибо за остальные шаги:))

ОтветитьОтветить

@Danidar:
Пожалуйста!
Ну с чего то надо же было начать ))

ОтветитьОтветить

Интресный такой урок получился

ОтветитьОтветить

@Александр С.:
Спасибо!
Приятно слышать от коллеги ))

ОтветитьОтветить

Интересный урок, мне понравилось =D

ОтветитьОтветить

@Юрий Небыков:
Спасибо! ))

ОтветитьОтветить

@Наташа Клевер:
Здорово, спасибо! Мне как новичку особенно это полезно.
А если я у вас попрошу файл с результатом этого урока, вы меня сразу пошлете или все-таки подумаете? ))
А то что-то не все получается пока.

ОтветитьОтветить

@Jimmy:
Подумала и уже послала на почту. Удачи в освоении ))

ОтветитьОтветить

Как у Вас всё просто… А как Вы цвета фонов и шрифтов определяете, чтобы было и красиво и гармонично?

ОтветитьОтветить

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

ОтветитьОтветить

Здравствуйте, я ещё совсем «зелёный» в этом деле, хотел спросить вот допустим мы сделали картинку на фотошопе а как её сделать в структуре сайта чтобы картинка ну как-бы работала?

ОтветитьОтветить

@Роман:
А это уже должен делать человек, который умеет верстать сайты. Сначала он на основании фотошопного файла воспроизведет данный элемент на сайте, а затем с помощью специальных команд заставит его работать ))

ОтветитьОтветить

Написать комментарий с помощью обычной формы блога

Не пишите пожалуйста всякую ерунду и критику, все-равно все удалю. Спасибо за комментарий!

57 queries in 0,467 seconds.