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





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

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


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

Подсказка

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

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

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


Дизайнерский сайт


1. Создайте новый документ:


Дизайнерский сайт


2. Установите цвет заливки - #151515 и залейте фон, используя инструмент Заливка (Paint Bucket Tool). Нам понадобятся две направляющие, чтобы область контента была шириной 900 пикселей.

Перейдите в меню Просмотр»Новая направляющая (View > New Guide) и создайте там две направляющие.


Дизайнерский сайт


3. Для заголовка мы воспользуемся деревянной текстурой, которую вы можете найти здесь. Откройте её и вставьте в наш документ, уменьшите её до 30%. Для этого нужно перейти в режим свободного трансформирования (Ctrl+T). Используйте настройки, показанные ниже.


Дизайнерский сайт


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


Дизайнерский сайт


5. Объедините все слои с текстурой и перейдите в меню Тон/Насыщенность (Hue/Saturation), установите значение Тонировать (Colorize) и настройте, как показано ниже.


Дизайнерский сайт


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


Дизайнерский сайт


7. Вырежьте (Ctrl+X) и вставьте выделение (Ctrl+V) в новом слое. Соедините части текстуры, чтобы она снова стала цельной. Скройте слой с маленькой полоской текстуры и примените стиль Отбрасывание тени (Layer Style - Drop Shadow) к верхнему слою:

Режим – Умножение


Дизайнерский сайт


8. Сделайте слой с полоской видимым и добавьте к нему маску слоя (Layer Mask). Сделайте заливку линейным градиентом снизу до половины полоски. Мы получим иллюзию отражения верхней части.


Дизайнерский сайт


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


Дизайнерский сайт


10. Залейте выделение красным цветом, создайте ещё одно выделение и залейте его другим цветом. Повторяйте процесс, пока не получите результат, показанный ниже. Каждую заливку нужно делать в отдельном слое.


Дизайнерский сайт


11. Установите Режим наложения – Мягкий свет (Blending Mode – Soft Light):


Дизайнерский сайт


12. Сделайте копию слоёв с цветами и сдвиньте их впаво:


Дизайнерский сайт


13. В новом слое инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение и залейте его чёрным цветом. Напишите в нём первое слово названия сайта. Мой сайт называется “THE DESIGN LAB”. Поэтому первым словом будет “THE”.


Дизайнерский сайт


14. Инструментом Свободное трансформирование (Free Transform) наклоните чёрный прямоугольник.


Дизайнерский сайт


15. Потом наклоните текст, но в противоположную сторону. Установите его Режим наложения – Мягкий свет (Blending Mode – Soft Light). Потом установите Режим наложения слоя с чёрным прямоугольником – Жёсткий свет (Blending Mode – Hard Light) и Непрозрачность – 40%.


Дизайнерский сайт


16. Таким образом создайте остальные слова названия сайта. Используйте разные углы наклона.


Дизайнерский сайт


17. В правом верхнем углу добавьте иконки социальных сетей или любые другие. Я использовал этот набор.


Дизайнерский сайт


18. Выберите инструмент Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) и настройте, как показано ниже:


Дизайнерский сайт


19. Создайте фигуру под областью заголовка сайта. Убедитесь, что его ширина не превышает отведённые пределы.


Дизайнерский сайт


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


Дизайнерский сайт


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


Дизайнерский сайт


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


Дизайнерский сайт


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


Дизайнерский сайт


21. Инструментом Прямоугольник (Rectangle Tool) или Прямоугольная область (Rectangular Marquee Tool) создайте чёрный прямоугольник и немного наклоните его в режиме Свободного трансформирования (Free Transform).


Дизайнерский сайт


22. Сделайте выделение этого слоя с прямоугольником (Ctrl+Click) и примените Сжатие (Modify – Contract) со значением 10 пикселей. Вставьте в это выделение какое-нибудь изображение.


Дизайнерский сайт


23. Создайте на вставленном изображении свечение, используя инструмент Перо (Pen Tool).
Теперь можно переходить к созданию стрелок. Выберите инструмент Произвольная фигура (Custom Shape Tool) и выберите стрелку, показанную ниже.


Дизайнерский сайт


24. Создайте фигуру белого цвета где-нибудь на холсте и создайте выделение, как показано ниже:


Дизайнерский сайт


25. Перейдите в режим Деформации (Transform – Warp) и потяните левые точки вверх.


Дизайнерский сайт


26. Установите Непрозрачность слоя – 60% и примените стиль Отбрасывание тени (Layer Style - Drop Shadow) со стандартными настройками. Сделайте копию стрелки и поместите её на другую сторону. Справа напишите какой-нибудь текст.


Дизайнерский сайт


27. Перейдём к созданию навигационного меню. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 10 пикселей создайте фигуру под предыдущей большой областью под заголовком.


Дизайнерский сайт


28. Сделайте копию слоя несколько раз:


Дизайнерский сайт


29. Напишите текст на каждой фигуре:


Дизайнерский сайт


30. Установите Непрозрачность слоёв с кнопками – 70% и измените угол наклона каждой из них. Сделайте выделение слоя с большой областью, на которой мы расположили картинку, стрелки и текст. Потом по очереди выбирайте слои с чёрными прямоугольниками и нажимайте Delete. Это удалит видимую область кнопок позади большого прямоугольника.


Дизайнерский сайт


31. Создайте большой прямоугольник с закруглёнными краями с радиусом 10 пикселей под предыдущей областью с картинкой. Скопируйте на него все стили слоя с этой области.


Дизайнерский сайт


32. Заполните большой прямоугольник контентом. Я создал три колонки с заголовками и картинкой.


Дизайнерский сайт


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


Дизайнерский сайт


34. Сделайте выделение цветного заголовка той же ширины, что и создаваемый стейлер (нижняя часть сайта). Высота выделеия – 20-40 пикселей. Потом перейдите в меню Редактировать»Скопировать совмещенные данные (Edit > Copy Merged). Потом вставьте выделение в нижний прямоугольник.


Дизайнерский сайт


35. Напишите нужную информацию в стейлере и на этом можно закончить:


Дизайнерский сайт


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


Дизайнерский сайт



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

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

Ваше Имя

Ваш E-mail

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

Введите код: