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

5

11892
11-09-2012

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

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

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

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

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

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

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

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

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

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

Шаг 10.
Создаем прямоугольник размером 500х66 пикселей, заливаем цветом #3e3d3b.Создаем в фотошопе пользовательский мобильный интерфейс

Шаг 11.
Применим стиль слоя «Наложение градиента» (Gradient Overlay). Настройки градиента смотрим в следующем шаге.Создаем в фотошопе пользовательский мобильный интерфейс

Шаг 12.
Слева на верхнем маркере у черного цвета ставим прозрачность 0% и сдвигаем нижний черный маркер к центру. Потом сдвигаем правый нижний маркер у белого цвета также к центру.Создаем в фотошопе пользовательский мобильный интерфейс

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

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

Шаг 15.
Копируем слой с серым прямоугольником и сдвигаем его вниз с зазором 2 пикселя от верхнего прямоугольника.Создаем в фотошопе пользовательский мобильный интерфейс

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

Шаг 17.
Меняем режим наложения слоя на «Умножение» (Multiply).Создаем в фотошопе пользовательский мобильный интерфейс

Шаг 18.
Воспользуемся «Фильтр» (Filter) > «Размытие» (Blur) > «Размытие по Гауссу» (Gaussian Blur) со значением 7. Снизим прозрачность слоя до 75%.Создаем в фотошопе пользовательский мобильный интерфейс

Шаг 19.
Теперь в левом нижнем углу создадим узкую черную полоску, размер 12х133 пикселейСоздаем в фотошопе пользовательский мобильный интерфейс

Шаг 20.
Снижаем прозрачность слоя до 30%.Создаем в фотошопе пользовательский мобильный интерфейс

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

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

Шаг 23.
Применим стиль слоя. Сначала идем в закладку «Параметры наложения» (Blending Options) и устанавливаем параметр «Непрозрачность заливки» (Fill Opacity) на 15%.Создаем в фотошопе пользовательский мобильный интерфейс

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

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

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

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

Шаг 28.
Теперь пишем текст «Назад».Создаем в фотошопе пользовательский мобильный интерфейс

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

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

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

Шаг 32.
Теперь создадим полоски уровня сигнала. Воспользуемся английской буквой l, цвет #bebebe. Напишем пять раз подряд букву l. Получились одинаковые полоски. Для того, чтобы они были разной высоты, выделим первую букву и зададим значение «Масштаб по вертикали» (обведено красным на рисунке ниже) 20%. Потом выделим вторую букву и зададим значение 40%. У третьей буквы — 60% и у четвертой — 80%.Создаем в фотошопе пользовательский мобильный интерфейс

Шаг 33.
Этим же шрифтом пишем AT&T 3G и в правом углу время 18:05.Создаем в фотошопе пользовательский мобильный интерфейс

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

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

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

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

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

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

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

Шаг 41.
Пишем текст «Lan».Создаем в фотошопе пользовательский мобильный интерфейс

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

Шаг 43.
Применим стиль слоя «Наложение градиента» (Gradient Overlay). Цвет от #73221e слева к #d55043 справа.Создаем в фотошопе пользовательский мобильный интерфейс

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

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

Шаг 46.
Теперь пишем текст «Lana Del Rey».Создаем в фотошопе пользовательский мобильный интерфейс

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

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

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

Что тут говорить, я по впечатлением. Очень круто получилось. Кстати, некоторые элементы можно и в веб дизайне использовать, и не только в мобильном интерфейсе. 🙂

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

Полезный урок, тем более сейчас тема мобильных версий очень востребована. Спасибо.

Кстати, Наташа, можно тут задать вопрос? У вас давно поставлена форма комментирования от Вконтакте. А как вы получаете уведомления о новых комментариях к статьям через неё?

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

@Саня:
Спасибо! Конечно можно и в веб-дизайне. Уж кнопочки то точно 🙂

@Юлия Риа:
Спасибо, Юля!
Про комментарии Вконтакте я уведомления не получаю. Просто смотрю закладку «Администрирование» прямо на форме комментариев, где собраны все новые комментарии и там же отвечаю. А вот настроек про уведомления не встречала.

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

Извиняюсь за примитивный вопрос- но всё-таки) как в 3 шаге срезать нижнюю часть прмоугольника ?)

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

Замечательный урок! Спасибо ;0))

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

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

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

56 queries in 0,227 seconds.