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





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

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


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

Подсказка

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

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

С помощью этого урока, вы сможете создать стильный веб-сайт кинотеатра.



Web дизайн для кинотеатра


1. Создайте новый документ размером 766×600 px и разрешением 72 dpi с белым фоном. При помощи инструмента Прямоугольная область (Rectangular Marquee Tool) очертите территорию, залитую в чёрный цвет.



Web дизайн для кинотеатра


2. Создайте новый документ размером 4×4 px и разрешением 72 dpi и нарисуйте вертикальную линию. Используйте инструмент Карандаш (Pencil Tool) и цвет - #C2C2C2. Это будет основой для узора текста.



Web дизайн для кинотеатра


3. Теперь выберите инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool) и создайте элемент панели усилителя. Инструмент Преобразовать точку привязки
(Convert Point Tool) поможет подкорректировать углы элемента.



Web дизайн для кинотеатра


4. Примените для элемента стиль Внутреннее свечение (Layer Style - Inner Glow).



Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


Обводка:



Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


6. Примените для элемента стиль Внутреннее свечение (Layer Style - Inner Glow).



Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


Обводка:



Web дизайн для кинотеатра


7. Снова выберите инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool) и создайте основной слой усилителя.



Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


Внутренняя тень:



Web дизайн для кинотеатра


Внутреннее свечение:



Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


9. При помощи того же инструмента нарисуйте экран чёрного цвета, разработанный также для усилителя.



Web дизайн для кинотеатра


10. Теперь вставьте текст в окно экрана усилителя. Настройки для текста серого цвета:



Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


Web дизайн для кинотеатра


11. Теперь нам необходимо написать рекламный слоган. Настройки для “welcome”:



Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


Внешнее свечение:



Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


13. С помощью инструмента Карандаш (Pencil Tool) нарисуйте полосу, состоящую из нескольких точек, цветом #797979.



Web дизайн для кинотеатра


Web дизайн для кинотеатра


14. Скопируйте созданный слой и расположите копию, как показано в рисунке ниже:



Web дизайн для кинотеатра


15. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) создайте нижний слой рекламных картинок (в режиме Свободного трансформирования
(Free Transform) поверните слой под необходимым углом). Цвет слоя - #958014.



Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


Обводка:



Web дизайн для кинотеатра


17. Сделайте 2 копии нового созданного слоя и расположите их так, как показано ниже:



Web дизайн для кинотеатра


18. Теперь расположите картинки под недавно созданными слоями, предназначенными для рекламных картинок.



Web дизайн для кинотеатра


19. Примените для всех картинок стиль Обводка (Layer Style - Stroke).



Web дизайн для кинотеатра


20. Вставьте ещё некоторый рекламный текст. Настройки для “Coming”:



Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


Настройки для “OPENING DECEMBER 5”:



Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


Web дизайн для кинотеатра


21. Примените для выражения “Coming Soon” стиль Отбрасывание тени
(Layer Style - Drop Shadow).



Web дизайн для кинотеатра


22. Теперь напишите название кинотеатра. Настройки для “silverfilm”:



Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


Web дизайн для кинотеатра


23. Примените для слова “silverfilm” стиль Отбрасывание тени (Layer Style - Drop Shadow).



Web дизайн для кинотеатра


Внешнее свечение:



Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


24. При помощи инструмента Эллипс (Ellipse Tool) создайте отверстие для кнопки усилителя цветом #A3A3A3.



Web дизайн для кинотеатра


Установите для слоя Режим наложения – Замена светлым (Blending Mode – Lighten).



Web дизайн для кинотеатра


25. Примените для слоя стиль Обводка (Layer Style - Stroke).



Web дизайн для кинотеатра


26. Снова выберите инструмент Эллипс (Ellipse Tool) и создайте основу для кнопки.



Web дизайн для кинотеатра


Web дизайн для кинотеатра


27. Примените для слоя стиль Внутреннее свечение (Layer Style - Inner Glow).



Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


28. Скопируйте созданный слой и, удерживая Alt, сотрите ненужные элементы и установите для копии чёрный цвет.



Web дизайн для кинотеатра


Web дизайн для кинотеатра


29. Установите Непрозрачность (Opacity) слоя - 50% и Режим наложения – Мягкий свет
(Blending Mode – Soft Light).



Web дизайн для кинотеатра


30. Теперь объедините в группу все слои, содержащие кнопку. Затем скопируйте созданную группу 4 раза и в режиме Свободного трансформирования (Free Transform) измените настройки, указанные в следующем рисунке:



Web дизайн для кинотеатра


31. При помощи инструмента Перо (Pen Tool) нарисуйте символ кнопки “PLAY” чёрного цвета.



Web дизайн для кинотеатра


Web дизайн для кинотеатра


32. Теперь выберите 2 инструмента: Перо (Pen Tool) и Прямоугольник (Rectangle Tool) для создания символа кнопки “PLAY BACK” чёрного цвета.



Web дизайн для кинотеатра


Web дизайн для кинотеатра


33. Используя вышеуказанный метод, создайте другие символы на остальных кнопках, также чёрного цвета.



Web дизайн для кинотеатра


34. На последнюю кнопку необходимо вставить букву, соблюдая требования ниже:



Web дизайн для кинотеатра


Web дизайн для кинотеатра


35. Инструмент Эллипс (Ellipse Tool) поможет создать ещё один слой для другой кнопки.



Web дизайн для кинотеатра


Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


Внутреннее свечение:



Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


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



Web дизайн для кинотеатра


37. С помощью инструмента Карандаш (Pencil Tool) нарисуйте треугольник чёрного цвета, как на рисунке ниже:



Web дизайн для кинотеатра


Web дизайн для кинотеатра


38. Для нашего удобства, необходимо объединить в группу все слои, содержащие кнопку. Скопируйте созданную группу и в режиме Свободного трансформирования (Free Transform) переверните копию и расположите её так, как в следующем рисунке:



Web дизайн для кинотеатра







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

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

Ваше Имя

Ваш E-mail

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

Введите код: