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





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

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


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

Подсказка

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

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

Этот урок покажет вам, как создать современный веб-сайт для ночного клуба.


Дизайн сайта для ночного клуба


1. Создайте новый документ размером 770×600 px и разрешением 72 dpi. Инструментом Заливка (Paint Bucket Tool) залейте фон чёрным цветом.



Дизайн сайта для ночного клуба


2. Создайте новый документ размером 20×20 px и разрешением 72 dpi. При помощи инструмента Карандаш (Pencil Tool) нарисуйте узор цветом #D28528.



Дизайн сайта для ночного клуба


Перейдите в меню Редактировать>Определить узор (Edit>Define Pattern) и сохраните узор:



Дизайн сайта для ночного клуба


3. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) создайте первичный слой для разделов сайта.



Дизайн сайта для ночного клуба


4. Примените для слоя стиль Наложение градиента (Layer Style - Gradient Overlay).



Дизайн сайта для ночного клуба


Настройки градиента:



Дизайн сайта для ночного клуба


Наложение узора:



Дизайн сайта для ночного клуба


Обводка:



Дизайн сайта для ночного клуба


Дизайн сайта для ночного клуба


5. Создайте новый слой (Create New Layer), затем выберите инструмент Кисть (Brush Tool) и цветом #57100E нарисуйте несколько пятен на правой стороне края предыдущего слоя. Расположите этот слой ниже, чем слой для разделов:



Дизайн сайта для ночного клуба


Дизайн сайта для ночного клуба


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



Дизайн сайта для ночного клуба


7. Примените для слоя стиль Наложение градиента (Layer Style - Gradient Overlay).



Дизайн сайта для ночного клуба


Настройки градиента:



Дизайн сайта для ночного клуба


Наложение узора:



Дизайн сайта для ночного клуба


Обводка:



Дизайн сайта для ночного клуба


Дизайн сайта для ночного клуба


8. Скопируйте последний слой и, удерживая Alt, вырежьте 5 эллипсов инструментом Эллипс (Ellipse Tool).



Дизайн сайта для ночного клуба


9. Установите Заливку (Fill) слоя - 0% и примените для слоя стиль Наложение градиента
(Layer Style - Gradient Overlay).



Дизайн сайта для ночного клуба


Настройки градиента:



Дизайн сайта для ночного клуба


Дизайн сайта для ночного клуба


10. При помощи инструмента Эллипс (Ellipse Tool) создайте блеск на левой стороне панели меню:



Дизайн сайта для ночного клуба


11. Установите Заливку (Fill) слоя - 0% и примените для блеска стиль Наложение градиента (Layer Style - Gradient Overlay).



Дизайн сайта для ночного клуба


Настройки градиента:



Дизайн сайта для ночного клуба


Дизайн сайта для ночного клуба


12. Скопируйте последний слой и в режиме Свободного трансформирования (Free Transform) расположите копию, как показано на рисунке:



Дизайн сайта для ночного клуба


13. Используя инструмент Эллипс (Ellipse Tool), создайте ещё один блеск на верхней части панели кнопок:



Дизайн сайта для ночного клуба


14. Установите Заливку (Fill) слоя - 0% и примените для блеска стиль Наложение градиента (Layer Style - Gradient Overlay).



Дизайн сайта для ночного клуба


Настройки градиента:



Дизайн сайта для ночного клуба


Дизайн сайта для ночного клуба


15. Сделайте 4 копии последнего слоя и инструментом Свободное трансформирование
(Free Transform) расположите копии, как показано ниже:



Дизайн сайта для ночного клуба


16. При помощи инструмента Прямоугольник (Rectangle Tool) нарисуйте полосу чёрного цвета:



Дизайн сайта для ночного клуба


Дизайн сайта для ночного клуба


17. Создайте новый слой (Create New Layer). Выберите инструмент Карандаш (Pencil Tool) и нарисуйте вертикальную разделительную полосу чёрного цвета и возле неё, с правой и левой сторон, ещё по одной полосе цветом #B9622A.



Дизайн сайта для ночного клуба


Дизайн сайта для ночного клуба


Дизайн сайта для ночного клуба


18. Установите Режим наложения – Свечение (Blending Mode – Luminosity).



Дизайн сайта для ночного клуба


19. Сделайте 3 копии последнего слоя и в режиме Свободного трансформирования
(Free Transform) расположите копии, как показано на рисунке:



Дизайн сайта для ночного клуба


20. При помощи инструмента Произвольная фигура (Custom Shape Tool) нарисуйте несколько маленьких звёзд на левой стороне панели кнопок меню, расположенной на заголовке сайта:



Дизайн сайта для ночного клуба


21. Сделайте звёзды разного размера, цветом - #DE9826. И инструментом Свободное трансформирование (Free Transform) поверните их.



Дизайн сайта для ночного клуба


22. Объедините в группу все звёзды с левой стороны. Скопируйте группу и в режиме Свободного трансформирования (Free Transform) поверните копию, как на рисунке ниже:



Дизайн сайта для ночного клуба


23. Теперь добавьте логотип сайта. Настройки для “Night”:



Дизайн сайта для ночного клуба


Настройки для “club”:



Дизайн сайта для ночного клуба


Дизайн сайта для ночного клуба


24. Примените для слоя с надписью “Night” стиль Внешнее свечение (Layer Style - Outer Glow).



Дизайн сайта для ночного клуба


Тиснение:



Дизайн сайта для ночного клуба


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



Дизайн сайта для ночного клуба


Настройки градиента:



Дизайн сайта для ночного клуба


25. Примените для слоя с надписью “club” стиль Наложение градиента
(Layer Style - Gradient Overlay).



Дизайн сайта для ночного клуба


Настройки градиента:



Дизайн сайта для ночного клуба


Дизайн сайта для ночного клуба


26. Также напишите названия кнопок меню, соблюдая настройки ниже:



Дизайн сайта для ночного клуба


Дизайн сайта для ночного клуба


27. Примените для надписей стиль Отбрасывание тени (Layer Style - Drop Shadow).



Дизайн сайта для ночного клуба


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



Дизайн сайта для ночного клуба


Дизайн сайта для ночного клуба


28. Вставьте названия разделов. Настройки для “welcome, news”:



Дизайн сайта для ночного клуба


Настройки для “to our club!”:



Дизайн сайта для ночного клуба


Дизайн сайта для ночного клуба


29. Примените для надписей стиль Отбрасывание тени (Layer Style - Drop Shadow).



Дизайн сайта для ночного клуба


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



Дизайн сайта для ночного клуба


Настройки градиента:



Дизайн сайта для ночного клуба


Дизайн сайта для ночного клуба


30. Теперь вставьте картинку:



Дизайн сайта для ночного клуба


31. Заполните разделы соответствующим текстом. Настройки для выделенного текста:



Дизайн сайта для ночного клуба


Настройки для основного текста:



Дизайн сайта для ночного клуба


Настройки для подчёркнутого текста:



Дизайн сайта для ночного клуба


Настройки для “20.05.2007”:



Дизайн сайта для ночного клуба


Дизайн сайта для ночного клуба


32. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) создайте кнопку цветом #F8AC27.



Дизайн сайта для ночного клуба


Дизайн сайта для ночного клуба


33. Создайте на правой стороне кнопки маленькую звезду цветом #BA3526. Для этого воспользуйтесь инструментом Произвольная фигура (Custom Shape Tool).



Дизайн сайта для ночного клуба


Дизайн сайта для ночного клуба


Дизайн сайта для ночного клуба


34. Вставьте название кнопки, соблюдая требования ниже:



Дизайн сайта для ночного клуба


Дизайн сайта для ночного клуба


35. Объедините в группу все слои, содержащие созданную кнопку. Сделайте 2 копии этой группы и в режиме Свободного трансформирования (Free Transform) расположите их, как в следующем рисунке:



Дизайн сайта для ночного клуба


36. Создайте новый документ размером 1×4 px и разрешением 72 dpi. При помощи инструмента Карандаш (Pencil Tool) нарисуйте узор цветом #8A3B00.



Дизайн сайта для ночного клуба


Дизайн сайта для ночного клуба


Перейдите в меню Редактировать>Определить узор (Edit>Define Pattern) и сохраните узор:



Дизайн сайта для ночного клуба


37. Выберите инструмент Линия (Line Tool) и нарисуйте вертикальную, разделительную полосу. Установите Заливку (Fill) слоя - 0% и примените для слоя стиль Наложение узора
(Layer Style - Pattern Overlay).



Дизайн сайта для ночного клуба


Дизайн сайта для ночного клуба







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

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

Ваше Имя

Ваш E-mail

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

Введите код: