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

0

8761
18-04-2012

Создаем в фотошопе лаконичный интерфейс в стиле YouTubeМне очень нравится минималистическая эстетика оформления YouTube. Все очень понятно, спокойно и лаконично. Поэтому сегодня в этом уроке мы постараемся воссоздать интерфейс от YouTuba. Сначала создадим фон, добавим немого шума. Потом создадим базовую подложку интерфейса. Далее создадим верхнее меню темного цвета. Оформим блок с превьюшкой самого видеоролика и его описанием. Потом займемся боковым вертикальным меню и кнопкой «Загрузить». Все действия очень просты и основаны на создании фигур различных размеров и оттенков, а также тонких настроек стиля слоя.

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

Шаг 2.
Воспользуемся «Фильтр» (Filter) > «Шум» (Noise) > «Добавить шум…» (Add Noise…).Создаем в фотошопе лаконичный интерфейс в стиле YouTube

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

Шаг 4.
На новом слое посередине создаем прямоугольник размером 390х190 пикселей, заливаем его цветом #e5e5e5.Создаем в фотошопе лаконичный интерфейс в стиле YouTube

Шаг 5.
Применим к нему стиль слоя «Обводка» (Stroke), цвет #d8d8d8.Создаем в фотошопе лаконичный интерфейс в стиле YouTube

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

Шаг 7.
На новом слое создаем прямоугольник размером 390х46 пикселей, заливаем его цветом #343434.Создаем в фотошопе лаконичный интерфейс в стиле YouTube

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

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

Шаг 10.
На новом слое создаем прямоугольник размером 255х46 пикселей, заливаем его градиентом от #5e5e5e сверху к #3e3e3e снизу. Для более контрастного перехода между темными прямоугольниками можно сделать однопиксельную полоску высотой 46 пикселей, цвет #2a2a2a и поставить ее с левой стороны верхнего прямоугольника.Создаем в фотошопе лаконичный интерфейс в стиле YouTube

Шаг 11.
Теперь пишем текст «Менеджер видео».Создаем в фотошопе лаконичный интерфейс в стиле YouTube

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

Шаг 13.
Аналогичным образом пишем еще два пункта меню «Редактор» и «Подписки».Создаем в фотошопе лаконичный интерфейс в стиле YouTube

Шаг 14.
На новом слое создаем прямоугольник размером 254х143 пикселей, заливаем его белым цветом.Создаем в фотошопе лаконичный интерфейс в стиле YouTube

Шаг 15.
На новом слое создаем узкий прямоугольник размером 253х38 пикселей, заливаем его цветом #cfcfcf.Создаем в фотошопе лаконичный интерфейс в стиле YouTube

Шаг 16.
Применим стиль слоя «Наложение градиента» (Gradient Overlay). Цвет от #efefef слева к #ececec справа.Создаем в фотошопе лаконичный интерфейс в стиле YouTube

Шаг 17.
Применим стиль слоя «Тень» (Drop Shadow), цвет #cfcfcf.Создаем в фотошопе лаконичный интерфейс в стиле YouTube

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

Шаг 19.
Пишем текст «Мои видео». Цвет #131313.Создаем в фотошопе лаконичный интерфейс в стиле YouTube

Шаг 20.
С помощью инструмента «Прямоугольник со скругленными краями» (Rounded Rectangle Tool), радиус 3, создаем фигуру размером 21х21 пиксель, цвет #343434.Создаем в фотошопе лаконичный интерфейс в стиле YouTube

Шаг 21.
Пишем текст «32». Цвет #e7e7e7.Создаем в фотошопе лаконичный интерфейс в стиле YouTube

Шаг 22.
Вставляем любую картинку размером 104х67 пикселей.Создаем в фотошопе лаконичный интерфейс в стиле YouTube

Шаг 23.
Пишем текст «Художник Анри Латур», цвет #282828.Создаем в фотошопе лаконичный интерфейс в стиле YouTube

Шаг 24.
Пишем текст «Natasha Klever», цвет #7c7c7c.Создаем в фотошопе лаконичный интерфейс в стиле YouTube

Шаг 25.
Пишем текст «Просмотров: 3456», цвет #262626.Создаем в фотошопе лаконичный интерфейс в стиле YouTube

Шаг 26.
С помощью инструмента «Прямоугольник со скругленными краями» (Rounded Rectangle Tool), радиус 3, создаем фигуру размером 116х31 пиксель, цвет #212121.Создаем в фотошопе лаконичный интерфейс в стиле YouTube

Шаг 27.
Применим стиль слоя «Наложение градиента» (Gradient Overlay). Цвет от #e5e5e5 слева к #ffffff справа.Создаем в фотошопе лаконичный интерфейс в стиле YouTube

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

Шаг 29.
Получили такую кнопку.Создаем в фотошопе лаконичный интерфейс в стиле YouTube

Шаг 30.
Пишем текст «Загрузить», цвет #555555.Создаем в фотошопе лаконичный интерфейс в стиле YouTube

Шаг 31.
Создаем однопиксельную полоску высотой 31 пиксель, цвет #cccccc. Используем ее в качестве горизонтального разделителя на кнопке.Создаем в фотошопе лаконичный интерфейс в стиле YouTube

Шаг 32.
Воспользуемся инструментом «Карандаш» (Pencil Tool), размер 1 пиксель, цвет #555555. Рисуем фигуру из точек — первый ряд 7 точек, ниже 5 точек, ниже 3 точки и последний ряд 1 точка. Получили стрелочку, направленную вниз.Создаем в фотошопе лаконичный интерфейс в стиле YouTube

Шаг 33.
На новом слое создаем белый прямоугольник размером 134х37 пикселей.Создаем в фотошопе лаконичный интерфейс в стиле YouTube

Шаг 34.
Создаем однопиксельную линию шириной 143 пикселя, цвет #cfcfcf. Применим к ней однопиксельную белую тень, режим «Осветление», угол 90 градусов, прозрачность 75%. Устанавливаем линию по нижнему краю белого прямоугольника.Создаем в фотошопе лаконичный интерфейс в стиле YouTube

Шаг 35.
Делаем дубликат предыдущего слоя и устанавливаем линию по верхнему краю белого прямоугольника.Создаем в фотошопе лаконичный интерфейс в стиле YouTube

Шаг 36.
Пишем текст «Мои видео». Цвет #131313.Создаем в фотошопе лаконичный интерфейс в стиле YouTube

Шаг 37.
Пишем текст «Плейлисты». Цвет #3a3a3a.Создаем в фотошопе лаконичный интерфейс в стиле YouTube

Шаг 38.
Минималистический интерфейс от YouTube готов.Создаем в фотошопе лаконичный интерфейс в стиле YouTube

 
 

P.S. Постовой. Online generator — это сеть онлайн проектов для генерации бесплатного динамического контента для веб-разработчиков.

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

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

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

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

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

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

40 queries in 0,421 seconds.