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





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

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


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

Подсказка

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

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

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


Тёмный дизайн сайта


1. Создайте новый документ размером 950х1065 пикселей:


Тёмный дизайн сайта


2. Залейте фон чёрным цветом и создайте ещё один документ размером 10х10 пикселей. Инструментом Карандаш (Pencil Tool) нарисуйте узор, показанный ниже.


Тёмный дизайн сайта


3. Перейдите в меню Редактирование»Определить узор (Edit > Define Pattern) и сохраните узор под любым именем. Вернитесь в основной документ и инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение на всю ширину холста в верхней части высотой 170 пикселей.


Тёмный дизайн сайта


4. Выберите инструмент Заливка (Paint Bucket Tool) и в настройках сверху выберите сохранённый узор.


Тёмный дизайн сайта


5. Залейте выделение узором. На чёрном фоне вы его не увидите, но после применения стиля Наложение градиента (Layer Style - Gradient Overlay) всё будет видно:

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


Тёмный дизайн сайта

Тёмный дизайн сайта


6. Добавьте маску слоя к узору (Layer Mask) и сделайте заливку зеркальным градиентом из середины к краю холста. Цвет заливки – белый, цвет фона – чёрный.


Тёмный дизайн сайта


7. Инструментом Горизонтальный текст (Horizontal Type Tool) напишите название сайта и слоган:


Тёмный дизайн сайта


Я использовал такие настройки шрифта:


Тёмный дизайн сайта


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


Тёмный дизайн сайта


9. Залейте выделение любым цветом и примените такие стили в меню Стилей слоя (Layer Style - Blending Options):

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


Тёмный дизайн сайта


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


Тёмный дизайн сайта


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


Тёмный дизайн сайта


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


Тёмный дизайн сайта


11. Залейте выделение любым цветом и примените стиль Обводка (Layer Style – Stroke):

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


Тёмный дизайн сайта


12. Рядом с этим прямоугольником создайте квадрат той же высоты. Примените к нему стиль Наложение градиента (Layer Style - Gradient Overlay):

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


Тёмный дизайн сайта


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


Тёмный дизайн сайта


13. В поле поиска напишите слово “search” и на квадрате напишите “Go”.


Тёмный дизайн сайта


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


Тёмный дизайн сайта


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

Отбрасывание тени (Режим – Нормальный):


Тёмный дизайн сайта


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


Тёмный дизайн сайта


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


Тёмный дизайн сайта


16. Теперь по краям обрежьте по 50 пикселей и получите такую панель:


Тёмный дизайн сайта


17. В новом слое залейте пустые области, где нет эффекта от отбрасывания тени:


Тёмный дизайн сайта


18. По краям, где вы вырезали части прямоугольника, создайте два других прямоугольника. Первый должен быть высотой с панель без нижней полоски отбрасывания тени, а второй той же высоты, что и нижняя полоска. Цвет первого прямоугольника - #333333 и цвет второго - #1b1b1b.


Тёмный дизайн сайта


19. Повторите то же самое для другой стороны:


Тёмный дизайн сайта


20. Между навигационными разделами создайте разделители – две 1-пиксельные линии разных цветов.


Тёмный дизайн сайта

Тёмный дизайн сайта


21. Создайте новый документ размером 4х4 пикселя. Инструментом Кисть (Brush Tool) размером 1 пиксель нарисуйте такой чёрный узор.


Тёмный дизайн сайта


22. Перейдите в меню Редактирование»Определить узор (Edit > Define Pattern) и сохраните узор. Сделайте выделение всей оставшейся области под навигационной панелью и залейте его узором в новом слое. Добавьте маску слоя (Layer Mask) и сделайте заливку радиальным градиентом, начиная с середины под навигационной панелью к краю холста. При этом цвет заливки должен быть белым, цвет фона – чёрным.


Тёмный дизайн сайта

Тёмный дизайн сайта


23. Инструментом Овальная область (Elliptical Marquee Tool) создайте круг, как показано ниже.


Тёмный дизайн сайта


24. Чтобы он выглядел как на картинке выше, нужно применить стиль Наложение градиента (Layer Style - Gradient Overlay):

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


Тёмный дизайн сайта


25. Внутри эллипса создайте стрелку, указывающую влево. После этого сделайте копию этой кнопки и примените Отражение по горизонтали (Transform – Flip Vertical). Поместите копию кнопки на другую сторону:


Тёмный дизайн сайта


26. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 15 пикселей создайте фигуру, как показано ниже. Инструментом Свободное трансформирование (Free Transform) наклоните фигуру. Примените к этой фигуре 3-пиксельную обводку и слабый эффект наложения градиента.


Тёмный дизайн сайта


27. Теперь сделайте копию слоя с этой фигурой и поверните её в другом направлении. Вставьте в эту копию какое-нибудь изображение. Справа напишите текст с заголовком.


Тёмный дизайн сайта


28. Ниже создайте ещё два закруглённых прямоугольника. Залейте их цветом #0a0a0a и примените 1-пиксельную обводку цветом #181818.


Тёмный дизайн сайта


29. В эти прямоугольники добавьте контент:


Тёмный дизайн сайта


30. Скопируйте навигационную панель и боковые элементы, и перетащите их вниз. Добавьте информацию футера.


Тёмный дизайн сайта


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


Тёмный дизайн сайта




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

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

Ваше Имя

Ваш E-mail

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

Введите код: