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





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

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


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

Подсказка

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

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

В этом уроке мы будем создавать такую простенькую страничку:


Простой дизайн хостингового сайта


1. Создайте новый документ размером 766×620 пикселей с разрешением 72 dpi. Залейте фон цветом #3D4959.


Простой дизайн хостингового сайта


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


Простой дизайн хостингового сайта


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


Простой дизайн хостингового сайта

Простой дизайн хостингового сайта

Простой дизайн хостингового сайта


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


Простой дизайн хостингового сайта


5. Для того, чтобы получить результат, показанный выше, вам нужно перейти в меню Стилей слоя (Layer Style - Blending Options) и применить следующие стили для копии:

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


Простой дизайн хостингового сайта


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


Простой дизайн хостингового сайта

Простой дизайн хостингового сайта


Обводка:


Простой дизайн хостингового сайта


6. Инструментом Перо (Pen Tool) нарисуйте фигуру, как показано ниже, цветом #3B6E05.


Простой дизайн хостингового сайта


7. Добавьте маску слоя, кликнув на иконку внизу палитры слоёв.


Простой дизайн хостингового сайта


8. Потом выберите инструмент Градиент (Gradient Tool) и настройте так:


Простой дизайн хостингового сайта


Сделайте заливку нижней половинки фигуры, чтобы сделать заливку не однотонной:


Простой дизайн хостингового сайта


9. Объедините все слои этой кнопки в группу. Сделайте копию группы три раза и поместите копии, как показано ниже. В последующих шагах мы займёмся изменением цвета других кнопок, чтобы получить такой результат:


Простой дизайн хостингового сайта


10. Будем работать над жёлтой кнопкой. Для нижнего слоя фигуры примените стиль Наложение градиента (Layer Style - Gradient Overlay) с такими настройками:


Простой дизайн хостингового сайта

Простой дизайн хостингового сайта


Для наружнего слоя используйте такие настройки стилей слоя:

Внутренняя тень (Layer Style - Inner Shadow):


Простой дизайн хостингового сайта


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


Простой дизайн хостингового сайта

Простой дизайн хостингового сайта


Обводка:


Простой дизайн хостингового сайта


Цвет, использованный для обрисовывания внешней нижней части - #C8760C.

11. Перейдём к красной кнопке. Настройки для нижнего слоя кнопки:

Наложение градиента (Layer Style - Gradient Overlay):


Простой дизайн хостингового сайта

Простой дизайн хостингового сайта


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

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


Простой дизайн хостингового сайта


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


Простой дизайн хостингового сайта


Обводка:


Простой дизайн хостингового сайта


Нижняя наружная часть была закрашена цветом #9F1000.


Простой дизайн хостингового сайта


12. Переходим к синей кнопке. Для нижнего слоя кнопки используйте такие настройки стиля Наложение градиента (Layer Style - Gradient Overlay):


Простой дизайн хостингового сайта

Простой дизайн хостингового сайта


Далее приведены настройки стилей слоя для внешней части:

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


Простой дизайн хостингового сайта


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


Простой дизайн хостингового сайта

Простой дизайн хостингового сайта


Обводка:


Простой дизайн хостингового сайта


Цвет нижней части - #08549F.

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


Простой дизайн хостингового сайта

Простой дизайн хостингового сайта


14. Для этой формы глобуса нужно применить следующие стили слоя, чтобы он был похож на тот, что показан выше:

Отбрасывание тени (Layer Style - Drop Shadow):


Простой дизайн хостингового сайта


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


Простой дизайн хостингового сайта

Простой дизайн хостингового сайта


15. Теперь напишем немного о компании web сайта. Для этого вам понадобится инструмент Горизонтальный текст (Horizontal Type Tool) и настройки текста, показанные ниже:

Слово ‘hosting’:


Простой дизайн хостингового сайта


’Company’:


Простой дизайн хостингового сайта


’the best hosting solutions’:


Простой дизайн хостингового сайта

Простой дизайн хостингового сайта


16. Нужно ещё применить стили слоя, чтобы текст был таким же, как на рисунке выше.

Для фразы ‘Hosting Company’s’ примените эти стили в меню Стилей слоя
(Layer Style - Blending Options):

Отбрасывание тени:


Простой дизайн хостингового сайта


Тиснение:


Простой дизайн хостингового сайта


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


Простой дизайн хостингового сайта

Простой дизайн хостингового сайта


Настройки стилей для фразы ‘the best hosting solutions’:

Тиснение:


Простой дизайн хостингового сайта


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


Простой дизайн хостингового сайта

Простой дизайн хостингового сайта


17. Инструментом Линия (Line Tool) нарисуйте линию, чтобы разделить строки текста:


Простой дизайн хостингового сайта


18. Для слоя с линией нужно применить стиль Наложение градиента
(Layer Style - Gradient Overlay):


Простой дизайн хостингового сайта

Простой дизайн хостингового сайта


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


Простой дизайн хостингового сайта


Потом перейдите в меню Стилей слоя (Layer Style - Blending Options) и примените эти стили:

Тиснение:


Простой дизайн хостингового сайта


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



Простой дизайн хостингового сайта

Простой дизайн хостингового сайта


Финальный результат:


Простой дизайн хостингового сайта




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

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

Ваше Имя

Ваш E-mail

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

Введите код: