Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

Конечный результат:


Сайт мобильных приложений


Загрузите эти наборы иконок:

Иконки от MediaLoot
iPhone

Начнём!
Создайте новый документ размером 1200x950, установите цвет заливки - #252625 и цвет фона - #101010. Выберите инструмент Градиент (Gradient Tool), стиль радиальный.


Сайт мобильных приложений


Сделайте заливку из центра холста к краям:


Сайт мобильных приложений


Создание шапки и навигации
Инструментом Прямоугольная область (Rectangular Marquee Tool) в новом слое создайте выделение высотой 140 пикселей на всю ширину холста.


Сайт мобильных приложений


Залейте выделение линейным градиентом: цвета - #202123 и #070707.


Сайт мобильных приложений


К этому прямоугольнику примените стиль Обводка (Layer Style – Stroke):

Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет


Сайт мобильных приложений


Текстовым инструментом напишите заголовок и слоган. Справа напишите разделы навигации.


Сайт мобильных приложений

Сайт мобильных приложений


К слою с заголовком примените эти стили в меню Стилей слоя (Layer Style - Blending Options):

Отбрасывание тени (Режим – Умножение):


Сайт мобильных приложений


Внутренняя тень (Режим – Нормальный):


Сайт мобильных приложений


Наложение градиента (Режим – Нормальный, Стиль – Линейный):


Сайт мобильных приложений

Сайт мобильных приложений


Рекламная область
Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение высотой 340 пикселей на всю ширину холста прямо под шапкой сайта.


Сайт мобильных приложений


Залейте выделение любым цветом на новом слое и примените эти стили:

Внутренняя тень (Режим – Умножение):


Сайт мобильных приложений


Наложение градиента (Режим – Нормальный, Стиль – Зеркальный):


Сайт мобильных приложений


Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте две 1-пиксельные линии друг на друге. Верхняя линия должна быть чёрной, а нижняя белой. Установите режим наложения – Перекрытие (Blending Mode – Overlay):


Сайт мобильных приложений


Инструментом Перо (Pen Tool) нарисуйте контур, показанный ниже.


Сайт мобильных приложений


Залейте контур белым цветом и примените стиль Наложение градиента (Layer Style - Gradient Overlay):

Режим – Нормальный, Стиль – Линейный


Сайт мобильных приложений


Теперь нужно удалить лишние части фигуры, находящиеся за пределами рекламной области. Сделайте выделение прямоугольника рекламной области (Ctrl+Click), инвертируйте выделение (Select – Inverse) и нажмите Delete.


Сайт мобильных приложений


Сделайте копию волнистой фигуры и инструментом Свободное трансформирование (Free Transform) поверните немного копию против часовой стрелки.


Сайт мобильных приложений


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


Сайт мобильных приложений


Контент в рекламной области
Вставьте изображение iPhone в рекламную область и обрежьте нижнюю часть любым способом.


Сайт мобильных приложений


На экран iPhone добавьте изображение, которое опишет какое-либо приложение.


Сайт мобильных приложений


Прямо под iPhone создайте две 1-пиксельные линии (верхняя – чёрная, нижняя – белая). Установите Режим наложения этих линий – Мягкий свет (Blending Mode – Soft Light):


Сайт мобильных приложений


Добавьте маску слоя к линиям (Layer Mask) и сделайте заливку зеркальным градиентом с середины линий к краям.


Сайт мобильных приложений


Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение прямо под двумя линиями.


Сайт мобильных приложений


Выберите инструмент Градиент (Gradient Tool), стиль – радиальный, цвет – от белого к прозрачному. Сделайте заливку с верхней части выделения вниз.
Добавьте маску слоя (Layer Mask) и сделайте заливку зеркальным градиентом из центра наружу, так же, как и с линиями. Установите Режим наложения – Перекрытие (Blending Mode – Overlay):


Сайт мобильных приложений


Добавьте контент и на этом рекламная область закончена.


Сайт мобильных приложений


Левый сайдбар
Создайте две вертикальные 1-пиксельные линии рядом друг с другом (одна белая, другая чёрная), высота линий – примерно 360 пикселей. Режим наложения слоя с этими линиями – Перекрытие (Blending Mode – Overlay):


Сайт мобильных приложений


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


Сайт мобильных приложений


Выберите инструмент Градиент (Gradient Tool), стиль – линейный, цвет заливки - #0a0a0a, цвет фона - #101010. Сделайте заливку градиентом от правого верхнего угла к левому нижнему.


Сайт мобильных приложений


Вставьте иконки и подпишите их. Ниже показаны цвета текста:


Сайт мобильных приложений


Создание области контента
Справа от сайдбара просто добавьте текст с заголовком.


Сайт мобильных приложений


Под текстом создайте 4 квадрата.


Сайт мобильных приложений


Примените к квадратам эти стили слоя:

Внутренняя тень (Режим – Нормальный):


Сайт мобильных приложений


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):


Сайт мобильных приложений

Сайт мобильных приложений


Сделайте выделение одного из квадратов (Ctrl+Click) и примените Сжатие (Modify – Contract) со значением 10 пикселей. Вставьте изображение в выделение через меню Редактирование»Вклеить в (Edit > Paste Into).


Сайт мобильных приложений


Создание футера
Сделайте выделение остальной нижней части холста и залейте его цветом #0a0a0a. Выделение должно быть прямо под разделительной линией сайдбара.


Сайт мобильных приложений


Примените следующие стили к прямоугольнику футеру:

Внутренняя тень (Режим – Нормальный):


Сайт мобильных приложений


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):


Сайт мобильных приложений


Финальный результат:


Сайт мобильных приложений




Ссылка на источник урока

Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: