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





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

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


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

Подсказка

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

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

В этом уроке вы научитесь создавать профессиональный веб-сайт для дизайнерской веб-студии.


Креативная идея дизайнерской студии


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



Креативная идея дизайнерской студии


2. Примените для слоя фильтр Добавить шум (Add Noise Filter).



Креативная идея дизайнерской студии


3. Затем Обесцветьте слой (Desaturation).



Креативная идея дизайнерской студии


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



Креативная идея дизайнерской студии


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



Креативная идея дизайнерской студии


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



Креативная идея дизайнерской студии


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



Креативная идея дизайнерской студии


Обводка:



Креативная идея дизайнерской студии


Креативная идея дизайнерской студии


6. Инструмент Эллипс (Ellipse Tool) поможет создать свечение, которое мы можем увидеть в следующем рисунке:



Креативная идея дизайнерской студии


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



Креативная идея дизайнерской студии


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



Креативная идея дизайнерской студии


Креативная идея дизайнерской студии


8. Удерживая Alt, кликните между слоем свечения и слоем логотипа, чтобы свечение разместилось в пределах предыдущего слоя.



Креативная идея дизайнерской студии


Креативная идея дизайнерской студии


9. При помощи инструмента Произвольная фигура (Custom Shape Tool) создайте логотип на заголовке сайта. Выберите символ, обведённый красный цветом.



Креативная идея дизайнерской студии


Цвет элемента - белый.



Креативная идея дизайнерской студии


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



Креативная идея дизайнерской студии


Креативная идея дизайнерской студии


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



Креативная идея дизайнерской студии


Креативная идея дизайнерской студии


Креативная идея дизайнерской студии


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



Креативная идея дизайнерской студии


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



Креативная идея дизайнерской студии


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



Креативная идея дизайнерской студии


Креативная идея дизайнерской студии


13. Далее нарисуйте остальные кнопки меню (используйте тот же инструмент Произвольная фигура (Custom Shape Tool)). Сначало выделите слой, содержащий недавно созданную кнопку, затем, кликнув правой кнопкой мыши Скопируйте стиль слоя (Copy Layer Style). После того, как кнопки будут нарисованы, Вклейте стиль слоя (Paste Layer Style).



Креативная идея дизайнерской студии


14. Удерживая Alt, вырежьте основание этой кнопки. Используйте для этой операции инструмент Прямоугольник (Rectangle Tool).



Креативная идея дизайнерской студии


Креативная идея дизайнерской студии


Креативная идея дизайнерской студии


Креативная идея дизайнерской студии


Креативная идея дизайнерской студии


Креативная идея дизайнерской студии


Креативная идея дизайнерской студии


Креативная идея дизайнерской студии


15. При помощи инструмента Эллипс (Ellipse Tool) создайте на кнопке тень. Расположите тень над слоем кнопки.



Креативная идея дизайнерской студии


Креативная идея дизайнерской студии


16. Удерживая Alt, кликните между слоем тени и слоем кнопки, чтобы тень находилась в пределах кнопки.



Креативная идея дизайнерской студии


Креативная идея дизайнерской студии


17. Сделайте 4 копии слоя тени и расположите их над каждым слоем кнопок. Удерживая Alt, кликните между слоями, чтобы тени были в пределах кнопок.



Креативная идея дизайнерской студии


18. Создайте новый слой (Create New Layer) и нарисуйте разделительную вертикальную линию, расположенную между кнопками, цветом #8E8E8E.



Креативная идея дизайнерской студии


Креативная идея дизайнерской студии


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



Креативная идея дизайнерской студии


20. Напишите название сайта. Настройки для “design”:



Креативная идея дизайнерской студии


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



Креативная идея дизайнерской студии


Настройки для “the best creative idea”:



Креативная идея дизайнерской студии


Креативная идея дизайнерской студии


21. Теперь вставьте названия кнопок меню, расположенных на заголовке сайта, соблюдая нижеуказанные требования:



Креативная идея дизайнерской студии


Креативная идея дизайнерской студии







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

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

Ваше Имя

Ваш E-mail

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

Введите код: