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

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



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


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. Последний этап включает вставку авторского права. Соблюдайте нижеуказанные требования:



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


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







Делаем Web-дизайн

Вас может также заинтересовать:

13 ноября 2018

Дата анонса: 2006/09/14 Эффективное разрешение, МП: 10 Диагональ ЖК-дисплея, дюймы: 2.5

13 ноября 2018

Дата анонса: 2009/09/01 Эффективное разрешение, МП: 18 Диагональ ЖК-дисплея, дюймы: 3 Вес с батареей и картой памяти, г: 860

13 ноября 2018