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





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

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


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

Подсказка

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

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

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

Web-дизайн в стиле минимализма


Загрузите эти элементы:

Шрифт “Zrnic”
Иконки Android

Начинаем
Создайте новый документ размером 1100х1150 пикселей. Отведите направляющие на этих отметках:

Web-дизайн в стиле минимализма


Сделайте выделение верхней части (до первой направляющей) инструментом Прямоугольная область (Rectangular Marquee Tool):

Web-дизайн в стиле минимализма


Создайте новый слой (Create New Layer) и залейте его чёрным цветом. Потоп примените стиль Наложение градиента (Layer Style - Gradient Overlay):

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

Web-дизайн в стиле минимализма


Установите цвет заливки – белый и напишите текст, используя шрифт “Zrnic”. Размер – 60pt. Примените стиль Внутренняя тень: Режим – Умножение.

Web-дизайн в стиле минимализма


Венхнее меню
Отведите направляющие:

Web-дизайн в стиле минимализма


Инструментом Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) с радиусом 15 пикселей создайте белый прямоугольник шириной 455 пикселей.

Web-дизайн в стиле минимализма


Примените к нему эти стили:

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

Web-дизайн в стиле минимализма


Обводка: Положение – Снаружи, Режим – Мягкий свет, Тип обводки – Цвет.

Web-дизайн в стиле минимализма


Внешнее свечение: Режим – Мягкий свет.

Web-дизайн в стиле минимализма


Выберите текстовый инструмент, шрифт – “Verdana Bold”, цвет – чёрный, размер – 18 пикселей. Напишите названия разделов навигации. Расстояние от левого края прямоугольника – 20 пикселей (без обводки) и от верхнего края – 18 пикселей.

Web-дизайн в стиле минимализма

Web-дизайн в стиле минимализма


Напишите остальные разделы меню. Расстояние между ними – 37 пикселей. Последний элемент должен отступать от правого края на 20 пикселей.

Web-дизайн в стиле минимализма


Приблизьте навигационную панель до 985%. Выберите инструмент Линия (Line Tool) с толщиной 1 пиксель. Нарисуйте белую линию высотой 35 пикселей. Установите цвет заливки – чёрный и рядом нарисуйте ещё одну линию такой же высоты. Установите Режим наложения обеих линий – Мягкий свет (Blending Mode – Soft Light). Отодвиньте разделитель на 17 пикселей от первого раздела.

Web-дизайн в стиле минимализма

Web-дизайн в стиле минимализма

Web-дизайн в стиле минимализма


Создайте такой разделитель между остальными разделами.

Слайдер
Сделайте выделение второй области:

Web-дизайн в стиле минимализма


Залейте её чёрным цветом.

Web-дизайн в стиле минимализма


Примените тот же градиент для этой зоны, что и для меню навигации. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение размером 965х315 пикселей. Залейте его серым цветом на новом слое. Расстояние от верхней границы холста – 140 пикселей.

Web-дизайн в стиле минимализма


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

Web-дизайн в стиле минимализма


К слою с картинкой примените стиль Обводка (Layer Style - Stroke) размером 1 пиксель, цвет – чёрный.

Web-дизайн в стиле минимализма


Выберите инструмент Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 55 пикселей. Создайте фигуру размером 15х80 пикселей чёрного цвета. Расположите в левом верхнем углу картинки:

Web-дизайн в стиле минимализма


Этот прямоугольник должен отступать от левого и верхнего краёв на 10 пикселей (не включая обводку). Нужно растрировать слой с фигурой (Rasterize – Shape). Установите цвет заливки – белый. Инструментом Эллипс (Ellipse Tool) нарисуйте круг диаметром 10 пикселей. Расположите его внутри чёрного прямоугольника на расстоянии 9 пикселей от верхнего края. Выровняйте горизонтальный центр.

Web-дизайн в стиле минимализма


Добавьте больше кругов на расстоянии 5 пикселей друг от друга.

Web-дизайн в стиле минимализма


Измените цвет первого круга на #f0de79. Примените стиль Внутренняя тень: Режим – Умножение.

Web-дизайн в стиле минимализма


Область основного контента
Создайте новый слой над фоновым слоем слайдера и сделайте выделение третьей области. Залейте её белым цветом.

Web-дизайн в стиле минимализма


Примените стиль Наложение градиента:

Web-дизайн в стиле минимализма


Текстовым инструментом напишите текст приветствия любым шрифтом. Я использую “Verdana”.

Web-дизайн в стиле минимализма


Выберите инструмент Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 5 пикселей. Создайте чёрный прямоугольник размером 325х145 пикселей. Расположите его на расстоянии 45 пикселей от левой стороны холста и на 45 пикселей вниз от текста приветствия.

Web-дизайн в стиле минимализма


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

Внешнее свечение: Режим – Мягкий свет, Метод – Точный.

Web-дизайн в стиле минимализма


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

Web-дизайн в стиле минимализма


Наложение градиента:

Web-дизайн в стиле минимализма


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

Web-дизайн в стиле минимализма


Сделайте ещё две копии и расположите их на расстоянии 25 пикселей друг от друга.

Web-дизайн в стиле минимализма


Выберите инструмент Овальная область (Elliptical Marquee Tool) и создайте выделение, как показано ниже. Установите цвет заливки – чёрный и создайте новый слой под слоем с первым прямоугольником:

Web-дизайн в стиле минимализма


Залейте слой черным цветом и примените фильтр Размытие по гауссу (Gaussian Blur Filter) со значением 12,5 пикселей. Немного поднимите тень.

Web-дизайн в стиле минимализма


Сделайте три копии тени и расположите под каждым прямоугольником.
Выберите какие-нибудь иконки из загруженного набора и вставьте их в наш документ. Расположите на расстоянии 5 пикселей от левого и верхнего краёв прямоугольника.

Web-дизайн в стиле минимализма


Теперь в каждый прямоугольник нужно добавить контент. Я просто напишите текст с заголовком. Настройки шрифта такие:

Заголовок: размер – 20 пикселей, шрифт – “Verdana Bold”, цвет - #363636.
Основной текст: размер – 12 пикселей, шрифт – “Verdana Bold”, цвет - #363636.
Ссылка “Read More”: размер – 12 пикселей, шрифт – “Verdana Bold”, цвет - #363636, все буквы заглавные.

Web-дизайн в стиле минимализма


Создайте закруглённый прямоугольник с радиусом 5 пикселей размером 280х185 пикселей. Расположите его справа, как показано ниже. Цвет не важен. Отступ от правого края холста и от границы жёлтого фона - 25 пикселей.

Web-дизайн в стиле минимализма


Скопируйте стили с одного из четырёх предыдущих прямоугольников и вставьте его на новый.

Web-дизайн в стиле минимализма


Добавьте иконку на последний прямоугольник размером 48х48 пикселей. Отступ от верхнего и левого краёв – 10 пикселей.

Web-дизайн в стиле минимализма


Добавьте конент на прямоугольник. Имя автора я написал шрифтом “Verdana”, Italic.

Web-дизайн в стиле минимализма


Создайте ещё один прямоугольник с закруглёнными краями с радиусом 5 пикселей размером 280х270 пикселей. Отступ от верхнего прямоугольника – 30 пикселей.

Web-дизайн в стиле минимализма


Скопируйте на него те же стили, добавьте иконку и текст.

Web-дизайн в стиле минимализма


Футер
Сделайте выделение последней области.

Web-дизайн в стиле минимализма


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

Web-дизайн в стиле минимализма


Вставьте иконки:

Web-дизайн в стиле минимализма


Добавьте текст о правах. Можете добавить навигационные ссылки.

Web-дизайн в стиле минимализма


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

Web-дизайн в стиле минимализма




Обсудить данный урок на форуме





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