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





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

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


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

Подсказка

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

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

Данный урок научит вас создавать профессиональный сайт дизайн-студии.



Веб-сайт для вашей студии


1. Создайте новый документ размером 800×600 px и разрешением 72 dpi. При помощи инструмента Прямоугольник (Rectangle Tool) создайте фон страницы сайта:



Веб-сайт для вашей студии


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



Веб-сайт для вашей студии


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



Веб-сайт для вашей студии


Веб-сайт для вашей студии


3. Используя предыдущий инструмент, создайте тонкую полосу белого цвета:



Веб-сайт для вашей студии


4. При помощи инструмента Перо (Pen Tool) нарисуйте луч, как показано ниже:



Веб-сайт для вашей студии


5. Тем же инструментом Перо (Pen Tool) создайте ещё несколько лучей:



Веб-сайт для вашей студии


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



Веб-сайт для вашей студии


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



Веб-сайт для вашей студии


Веб-сайт для вашей студии


7. Используя инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool) (радиус - 35 рх), создайте элемент белого цвета:



Веб-сайт для вашей студии


8. Теперь создайте панель, предназначенную для меню кнопок сайта. Для этого потребуется инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool) (радиус - 30 рх). Затем, удерживая Alt, инструментом Прямоугольник (Rectangle Tool) немного обрежьте основание панели.



Веб-сайт для вашей студии


9. Примените для панели стиль Внутренняя тень (Layer Style - Inner Shadow).



Веб-сайт для вашей студии


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



Веб-сайт для вашей студии


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



Веб-сайт для вашей студии


Веб-сайт для вашей студии


10. Используя ранее применяемый метод, также вставьте нижний элемент:



Веб-сайт для вашей студии


11. Установите Заливку (Fill) слоя - 0% и примените для элемента стиль Внутренняя тень
(Layer Style - Inner Shadow).



Веб-сайт для вашей студии


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



Веб-сайт для вашей студии


Веб-сайт для вашей студии


12. Выберите инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool) (радиус - 35 рх) и создайте боковую панель цветом #F6F6F6. Сначало создайте основу панели, затем, удерживая Alt, тем же инструментом вырежьте окна для новостей:



Веб-сайт для вашей студии


13. При помощи инструмента Прямоугольник (Rectangle Tool) нарисуйте белую полосу над кнопками меню. В режиме Свободного трансформирования (Free Transform) наклоните полосу.



Веб-сайт для вашей студии


Веб-сайт для вашей студии


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



Веб-сайт для вашей студии


15. Объедините в группу все слои, содержащие белые полосы. Выделите группу и объедините в единый слой (Ctrl+E). Установите для растеризованного слоя Заливку (Fill) - 20% и Режим наложения – Наложение (Blending Mode – Overlay):



Веб-сайт для вашей студии


16. Выберите инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool) (радиус - 20 рх) и нарисуйте кнопку белого цвета.



Веб-сайт для вашей студии


17. Примените для кнопки стиль Внутренняя тень (Layer Style - Inner Shadow).



Веб-сайт для вашей студии


Веб-сайт для вашей студии


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



Веб-сайт для вашей студии


19. Установите Заливку (Fill) слоя - 0% и примените для слоя стиль Внутренняя тень
(Layer Style - Inner Shadow).



Веб-сайт для вашей студии


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



Веб-сайт для вашей студии


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



Веб-сайт для вашей студии


Веб-сайт для вашей студии


20. Скопируйте последний слой и инструментом Свободное трансформирование (Free Transform) разместите копию немного ниже. Установите для копии Заливку (Fill) - 0% и примените стиль Внутренняя тень (Layer Style - Inner Shadow).



Веб-сайт для вашей студии


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



Веб-сайт для вашей студии


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



Веб-сайт для вашей студии


Веб-сайт для вашей студии


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



Веб-сайт для вашей студии


22. При помощи инструмента Прямоугольник (Rectangle Tool) нарисуйте наклонную линию на левой стороне верхней части страницы.



Веб-сайт для вашей студии


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



Веб-сайт для вашей студии


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



Веб-сайт для вашей студии


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



Веб-сайт для вашей студии


Веб-сайт для вашей студии


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



Веб-сайт для вашей студии


Веб-сайт для вашей студии


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



Веб-сайт для вашей студии


Веб-сайт для вашей студии


26. Теперь вставьте названия кнопок меню. Настройки для “home page”:



Веб-сайт для вашей студии


Настройки для названий остальных кнопок меню:



Веб-сайт для вашей студии


Веб-сайт для вашей студии


27. Названия кнопок должны быть написаны на одном слое и для этого слоя примените стиль Отбрасывание тени (Layer Style - Drop Shadow).



Веб-сайт для вашей студии


Веб-сайт для вашей студии


28. Вставьте названия разделов веб-страницы. Настройки указаны ниже:



Веб-сайт для вашей студии


Веб-сайт для вашей студии


29. Текст разделов следует немного наклонить. Настройки указаны ниже:



Веб-сайт для вашей студии


Веб-сайт для вашей студии


30. Вставьте дату на новости группы:



Веб-сайт для вашей студии


Веб-сайт для вашей студии


31. Теперь вставьте телефон “contact us” в наклонную линию с левой стороны. В режиме Свободного трансформирования (Free Transform) наклоните текст. Настройки для “contact us”:



Веб-сайт для вашей студии


Настройки для номера телефона:



Веб-сайт для вашей студии


Веб-сайт для вашей студии


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



Веб-сайт для вашей студии


Веб-сайт для вашей студии


33. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) (радиус - 5 рх) создайте 2 окна для размещения работ, которые мы делаем.



Веб-сайт для вашей студии


Веб-сайт для вашей студии


34. Теперь вставьте сами работы. Каждая из них должна быть расположена над слоем окна. Удерживая Alt, кликните между слоями рисунков и окон:



Веб-сайт для вашей студии


Веб-сайт для вашей студии


35. Последний этап включает вставку авторского права. Соблюдайте нижеуказанные требования:



Веб-сайт для вашей студии


Веб-сайт для вашей студии






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

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

Ваше Имя

Ваш E-mail

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

Введите код: