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





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

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


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

Подсказка

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

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

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


Тёмный web-сайт


1. Создайте новый документ размером 950x1130 пикселей с чёрным фоном. Выберите инструмент Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) и установите значение радиуса – 15 пикселей.


Тёмный web-сайт


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


Тёмный web-сайт


3. Перейдите в меню Стилей слоя (Layer Style - Blending Options) и настройте так:

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


Тёмный web-сайт


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


Тёмный web-сайт

Тёмный web-сайт


4. В левой стороне прямоугольника вставьте заголовок и слоган, а на правой – навигационный текст.


Тёмный web-сайт


5. Слева от текста навигации добавьте 3-пиксельные линии белого цвета и примените к ним стиль Внешнее свечение (Layer Style - Outer Glow):

Режим – Осветление, Метод – Мягкий


Тёмный web-сайт

Тёмный web-сайт


6. Сделайте выделение заголовка сайта, как показано ниже.


Тёмный web-сайт


7. Залейте его белым цветом в новом слое и установите Непрозрачность – 2%. Под заголовком сайта создайте ещё один прямоугольник с закруглёнными краями.


Тёмный web-сайт


8. Примените такие стили слоя с этому прямоугольнику:

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


Тёмный web-сайт


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


Тёмный web-сайт


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


Тёмный web-сайт


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


Тёмный web-сайт

Тёмный web-сайт


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


Тёмный web-сайт


10. Залейте его белым цветом в новом слое и установите Непрозрачность – 5%. Добавьте навигационный текст и между разделами меню создайте разделители – две вертикальные линии, стоящие рядом друг с другом разных цветов (я использовал светлый и тёмный оттенки серого).


Тёмный web-сайт


11. Создайте белый круг, как показано ниже (он должен немного заступать на область навигационной панели).


Тёмный web-сайт


12. Примените к нему фильтр Размытие по гауссу (Gaussian Blur Filter) со значением 6-8 пикселей и установите Непрозрачность слоя – 23%. Потом сотрите нижнюю часть круга.


Тёмный web-сайт


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


Тёмный web-сайт


14. Выберите инструмент Градиент (Gradient Tool), установите цвет заливки - #2c2d2d, цвет фона – чёрный и сделайте радиальную заливку из нижнего левого угла. Потом примените стиль Обводка (Layer Style – Stroke):

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


Тёмный web-сайт

Тёмный web-сайт


15. Добавьте любое изображение и текст приветствия.


Тёмный web-сайт


Для серебряной кнопки были применены такие стили:

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


Тёмный web-сайт


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


Тёмный web-сайт


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


Тёмный web-сайт


16. Создайте несколько областей контента, таких же, как и заголовок.


Тёмный web-сайт


17. Потом добавьте светящиеся точки в нужные места:


Тёмный web-сайт


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

Наложение цвета:


Тёмный web-сайт


Обводка:


Тёмный web-сайт

Тёмный web-сайт


19. Вставьте изображение в созданный прямоугольник, установите Непрозрачность слоя – 40% и добавьте информацию об изображении.


Тёмный web-сайт


20. Правую область контента я отведу использовать для новостей.


Тёмный web-сайт


21. В третьей будет галерея Flickr. Создайте там прямоугольник:


Тёмный web-сайт


22. Добавьте изображения:


Тёмный web-сайт


23. Создайте два круга по краям:


Тёмный web-сайт


24. Внутри них добавьте стрелки:


Тёмный web-сайт


24. В конце создайте футер:


Тёмный web-сайт



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

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

Ваше Имя

Ваш E-mail

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

Введите код: