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





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

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


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

Подсказка

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

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

В этом уроке мы с вами будем создавать web дизайн для корпоративного сайта


Web дизайн корпоративного сайта


1. Создайте новый документ размером 607×607 px и разрешением 72 dpi и залейте его чёрным цветом.



Web дизайн корпоративного сайта


2. При помощи инструмента Прямоугольник (Rectangle Tool) создайте нижний слой для сайта цветом #3B3B3B.



Web дизайн корпоративного сайта


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



Web дизайн корпоративного сайта


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



Web дизайн корпоративного сайта


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



Web дизайн корпоративного сайта


Настройки для “precise and impartial approach”:



Web дизайн корпоративного сайта


Web дизайн корпоративного сайта


5. После этого выберите инструмент Прямоугольник (Rectangle Tool) и создайте нижний слой для кнопки меню сайта.



Web дизайн корпоративного сайта


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



Web дизайн корпоративного сайта


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



Web дизайн корпоративного сайта


Обводка:



Web дизайн корпоративного сайта


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



Web дизайн корпоративного сайта


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



Web дизайн корпоративного сайта


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



Web дизайн корпоративного сайта


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



Web дизайн корпоративного сайта


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



Web дизайн корпоративного сайта


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



Web дизайн корпоративного сайта


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



Web дизайн корпоративного сайта


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



Web дизайн корпоративного сайта


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



Web дизайн корпоративного сайта


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



Web дизайн корпоративного сайта


13. При помощи инструмента Перо (Pen Tool) нарисуйте блеск на верхней части кнопки.



Web дизайн корпоративного сайта


Web дизайн корпоративного сайта


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



Web дизайн корпоративного сайта


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



Web дизайн корпоративного сайта


15. Сделайте 3 копии нового созданного слоя и разместите по одной копии на каждую кнопку, как показано ниже:



Web дизайн корпоративного сайта


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



Web дизайн корпоративного сайта


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



Web дизайн корпоративного сайта


Web дизайн корпоративного сайта







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

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

Ваше Имя

Ваш E-mail

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

Введите код: