Создаём в Фотошоп простой дизайн страницы «Скоро появится»

22.06.20 21:00

Перед запуском нового сайта стоит разместить на нём страницу «Скоро появится» («Coming soon»). Мы же не хотим, чтобы пользователи были недовольны глюками на сайте из-за редизайна, например.

Поэтому, для тех, кому интересно, как создать такую страницу, я сделал PSD-руководство. Надеюсь, вы готовы!

Установите скачанные шрифты на свой компьютер, и мы начнём. Поехали!

Примечание: В источнике урока отсутствуют некоторые изображения. В архиве вы найдёте альтернативный вариант материалов для выполнения урока.

Шаг 1

Открывайте ваш Фотошоп, и будем двигаться к цели.

Создавая документ, установите ширину (width) 980 пикселей, а высоту (height) 1000 пикселей.

Залейте холст цветом #D9D8D6 и добавьте Шум (Фильтр > Шум > Добавить шум) (Filter > Noise > Add Noise) 1%.

Шаг 2

Возьмите инструмент «Прямоугольная область» (Marquee Tool) (M), создайте новый слой (CTRL + SHIFT + N), нарисуйте шапку и подвал (header и footer). Залейте их цветом #3E3E3E.

Зайдите в Стиль слоя, дважды щёлкнув на пространство возле миниатюры слоя, в Параметрах наложения выберите Тень (Blending Options > Drop Shadow), установите цвет #b1b0b0. Смещение (Distance) − 3 пикселя, размер (size) − 7 пикселей.

Шаг 3

Дальше мы создадим логотип. Возьмите инструмент «Прямоугольник со скруглёнными краями» (Rounded Rectangle Tool) (U), установите радиус 5 пикселей. Используйте цвет заливки #E34601.

В Стиле слоя выберите Параметры наложения > Внутреннее свечение (Blending Options > Inner Glow), цвет #fb6b2b, стягивание (choke) 100%, размер (size) − 2 пикселя.

Фон для нашего логотипа готов.

Шаг 4

Выберите шрифт Distant Galaxy, 43 пункта, цвет #3e3e3e.

В Параметрах наложения ( Blending Options) для текста логотипа установите цвет #fc9856, а также смещение (Distance) и размер (size) − 1 пиксель.

Там же: Внутренняя тень (Inner Shadow): цвет #353434, а также смещение (Distance) и размер (size) − 1 пиксель.

Шаг 5

Логотип готов, теперь нужно добавить какой-нибудь текст. Я использовал тот же шрифт, что и для логотипа, 88 пунктов, цвет #3e3e3e.

Возьмите инструмент «Прямоугольник» (Rectangle Tool) (U), нарисуйте прямоугольник и залейте его белым цветом (#ffffff).

В Стиле слоя добавьте Обводку (Stroke), цвет #ababab, размер (size) 1 пиксель.

Шаг 6

Создайте новый слой (CTRL + SHIFT + N), возьмите инструмент «Овальная область» (Elliptical Marquee Tool) (М), нарисуйте удлинённую фигуру и расположите её так, как показано на рисунке выше.

Дальше нажмите Фильтр > Размытие > Размытие по Гауссу (Filter > Blur > Gaussian Blur), установите радиус 9.7 пикселей, Непрозрачность (Opacity) − 50%.

После этого продублируйте слой и расположите с другого края.

Мы добавили текст с датой и временем в слой, я использовал шрифт League Gothic, 88 пунктов, цвет #333333 для цифр, и Arial 12 пунктов, #333333 − для слов.

Шаг 7

Теперь возьмите кисть «Восходящее солнце» белого цвета, используйте её в центре документа. Внизу на панели слоёв нажмите «Добавить маску слоя» (Add layer Mask), затем возьмите инструмент «Градиент» (Gradient Tool) (G). Выберите направление стрелок.

Затем откройте файл PSD с поисковой строкой и файл с иконками социальный сетей, и добавьте их в документ.

Теперь дизайн страницы «Скоро появится» закончен.

Если вы запутались в шагах, сообщите мне в комментариях, я помогу вам. Надеюсь, вы узнали пару новых штук из этого урока.

Автор: Sanjay


Источник

Добавить комментарий