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





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

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


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

Подсказка

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

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

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

Дизайн сайта в стиле Apple


1. Создайте новый документ размером 1050х900 пикселей. Кликните дважды на фоновом слое, чтобы разблокировать его. Затем кликните дважды ещё раз, чтобы открыть окно стилей и выберите Наложение градиента (Gradient Overlay).

Дизайн сайта в стиле Apple


2. Создайте новый слой (Create New Layer) и залейте его белым цветом. Примените фильтр Волокна (Fibers Filter). Затем примените фильтр Размытие в движении (Motion Blur Filter). Настройки для фильтров показаны ниже.

Дизайн сайта в стиле Apple


3. Примените к слою с фильтрами стиль Наложение градиента (Layer Style – Gradient Overlay).

Дизайн сайта в стиле Apple


4. Добавьте маску слоя (Layer Mask), выберите инструмент Кисть (Brush Tool) с мягкими краями и обрисуйте нижнюю часть маски.

Дизайн сайта в стиле Apple


5. Загрузите эти кисти и обрисуйте холст на новом слое.

Дизайн сайта в стиле Apple


6. Инструментом Прямоугольник (Rectangle Tool) создайте фигуру в верхней части холста. Кликните дважды на слое, чтобы открыть окно стилей и примените стили, показанные ниже.

Дизайн сайта в стиле Apple


7. Создайте ещё два прямоугольника (цвета показаны ниже). Активируйте Линейки (Ctrl + R) и отведите две вертикальные направляющие. Инструментом Свободное трансформирование (Free Transform), удерживая Ctrl, перетащите верхние углы к направляющим. Чтобы переместить направляющие, используйте инструмент Перемещение (Move Tool).

Дизайн сайта в стиле Apple


8. Сделайте выделение слоя с нижней поверхностью (Ctrl+Click), выберите инструмент Прямоугольная область (Rectangular Marquee Tool) и, удерживая Alt, создайте выделение в нижней части холста. После этого должна быть выделена только верхняя часть. Создайте новый слой (Create New Layer) и залейте выделение белым цветом. Установите Непрозрачность (Opacity) слоя до 4%.

Дизайн сайта в стиле Apple


9. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте фигуру, показанную ниже. Затем примените стили, показанные ниже.

Дизайн сайта в стиле Apple


10. Инструментом Линия (Line Tool) нарисуйте две 1-пиксельные линии. Удерживайте клавишу Shift, чтобы линии были горизонтальными.

Дизайн сайта в стиле Apple


11. Инструментом Эллипс (Ellipse Tool) создайте два круга (удерживайте клавишу Shift, чтобы получить круг): один большой и один маленький. Маленький круг должен быть белого цвета. К большому кругу примените стиль Внешнее свечение (Layer Style – Outer Glow) и красный градиент. Сделайте копию кругов и измените цвет каждого.

Дизайн сайта в стиле Apple


12. Инструментом Прямоугольник (Rectangle Tool) создайте фигуру. Примените к ней стиль Обводка (Layer Style – Stroke): #3c3b3b.

Дизайн сайта в стиле Apple


13. Загрузите набор иконок и вставьте их в наш документ. Поместите все иконки в группу (Ctrl + G) и сделайте копию группы. Примените Отражение по вертикали (Transform – Flip Vertical). Кликните правой кнопкой на группе и выберите Преобразовать в смарт-объект (Convert to Smart Object). Затем кликните правой кнопкой на слое ещё раз и выберите Растрировать слой (Rasterize Layer). Инструментом Прямоугольная область (Rectangular Marquee Tool) сделайте выделение нижней части и нажмите Delete. Установите Непрозрачность (Opacity) – 23%. У Вас должно получиться отражение.

Дизайн сайта в стиле Apple


14. Инструментом Прямоугольник (Rectangle Tool) создайте фигуру на правой стороне белой области. Инструментом Линия (Line Tool) создайте линию на правой стороне прямоугольника.

Дизайн сайта в стиле Apple


15. Выберите инструмент Горизонтальный текст (Horizontal Type Tool) и напишите “Categories”. Инструментом Произвольная фигура (Custom Shape Tool) создайте треугольник, направленный вниз.

Дизайн сайта в стиле Apple


16. Вставьте иконку папки и текстовым инструментом подпишите её.

Дизайн сайта в стиле Apple


17. Выберите три слоя (с иконкой и два текстовых). Перетащите их на иконку создания нового слоя. Таким образом сделайте много копий и расположите их, как показано ниже.

Дизайн сайта в стиле Apple


18. Вставьте ещё одну иконку папки и инструментом Свободное трансформирование (Free Transform) поверните её. Удерживая клавишу Shift, уменьшите иконку.

Дизайн сайта в стиле Apple


19. Теперь напишите время и день. Для создания иконки заряда батареи используйте инструмент Прямоугольник (Rectangle Tool). Создайте белый прямоугольник и установите его Режим наложения – Умножение (Blending Mode – Multiply). После этого примените стиль Обводка (Layer Style – Stroke). Инструментом Произвольная фигура (Custom Shape Tool) создайте молнию. Потом создайте иконку лупы.

Дизайн сайта в стиле Apple


20. Теперь создайте раздел “Connect With Me”.

Дизайн сайта в стиле Apple


21. На панели сверху напишите разделы меню.

Дизайн сайта в стиле Apple


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

Дизайн сайта в стиле Apple




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





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