Web дизайн для онлайн инвестеров

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



Web дизайн для онлайн инвестеров


1. Создайте новый документ размером 760×550 px и разрешением 72 dpi и залейте его цветом #181818.



Web дизайн для онлайн инвестеров


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



Web дизайн для онлайн инвестеров


Web дизайн для онлайн инвестеров


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



Web дизайн для онлайн инвестеров


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



Web дизайн для онлайн инвестеров


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



Web дизайн для онлайн инвестеров


Web дизайн для онлайн инвестеров


5. Примените для слоя стиль Внутреннее свечение (Layer Style — Inner Glow).



Web дизайн для онлайн инвестеров


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



Web дизайн для онлайн инвестеров


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



Web дизайн для онлайн инвестеров


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



Web дизайн для онлайн инвестеров


7. Примените для оранжевой фигуры стиль Внутреннее свечение (Layer Style — Inner Glow).



Web дизайн для онлайн инвестеров


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



Web дизайн для онлайн инвестеров


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



Web дизайн для онлайн инвестеров


8. Примените для красной фигуры стиль Внутреннее свечение (Layer Style — Inner Glow).



Web дизайн для онлайн инвестеров


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



Web дизайн для онлайн инвестеров


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



Web дизайн для онлайн инвестеров


9. Примените для зелёной фигуры стиль Внутреннее свечение (Layer Style — Inner Glow).



Web дизайн для онлайн инвестеров


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



Web дизайн для онлайн инвестеров


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



Web дизайн для онлайн инвестеров


10. Теперь выберите инструмент Карандаш (Pencil Tool) и нарисуйте 4 элемента размером 4×4 px, имеющих нижеуказанные цвета. Цвет оранжевого элемента — #E97714:



Web дизайн для онлайн инвестеров


Цвет красного элемента — #BB1E27:



Web дизайн для онлайн инвестеров


Цвет зелёного элемента — #47B81E:



Web дизайн для онлайн инвестеров


Цвет синего элемента — #3074C5:



Web дизайн для онлайн инвестеров


Затем перейдите в меню Редактировать>Определить узор (Edit>Define Pattern) и сохраните каждый узор:



Web дизайн для онлайн инвестеров


11. Теперь выберите инструмент Прямоугольник с закругленными краями
(Rounded Rectangle Tool) и создайте слой, предназначенный для указателя кнопки цветом #0A9DE3.



Web дизайн для онлайн инвестеров


12. Примените для слоя стиль Внешнее свечение (Layer Style — Outer Glow):



Web дизайн для онлайн инвестеров


Внутреннее свечение:



Web дизайн для онлайн инвестеров


Наложение узора:



Web дизайн для онлайн инвестеров


13. Сделайте 3 копии созданного слоя и измените настройки копий:



Web дизайн для онлайн инвестеров


14. Примените для оранжевой кнопки стиль Внешнее свечение (Layer Style — Outer Glow):



Web дизайн для онлайн инвестеров


Внутреннее свечение:



Web дизайн для онлайн инвестеров


Наложение узора:



Web дизайн для онлайн инвестеров


15. Примените для красной кнопки стиль Внешнее свечение (Layer Style — Outer Glow):



Web дизайн для онлайн инвестеров


Внутреннее свечение:



Web дизайн для онлайн инвестеров


Наложение узора:



Web дизайн для онлайн инвестеров


16. Примените для зелёной кнопки стиль Внешнее свечение (Layer Style — Outer Glow):



Web дизайн для онлайн инвестеров


Внутреннее свечение:



Web дизайн для онлайн инвестеров


Наложение узора:



Web дизайн для онлайн инвестеров


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



Web дизайн для онлайн инвестеров


Web дизайн для онлайн инвестеров


Web дизайн для онлайн инвестеров


Web дизайн для онлайн инвестеров




18. Затем разместите символы на каждой кнопке и установите соответствующие цвета: синий — #63B0E6, оранжевый — #EDC361, красный — #E4525C, зелёный — #8FDE5A. На слоях каждого символа установите Режим наложения – Мягкий свет (Blending Mode – Soft Light):



Web дизайн для онлайн инвестеров


Web дизайн для онлайн инвестеров


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



Web дизайн для онлайн инвестеров


20. Скопируйте ранее созданный первый слой кнопки и инструментом Удалить точку привязки (Delete Anchor Point Tool) сотрите ненужные точки на основании. С помощью инструмента Преобразовать точку привязки (Convert Point Tool) внесите необходимые коррекции в форму элемента.



Web дизайн для онлайн инвестеров


21. Сделайте 3 копии недавно созданного слоя.



Web дизайн для онлайн инвестеров


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



Web дизайн для онлайн инвестеров


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



Web дизайн для онлайн инвестеров


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



Web дизайн для онлайн инвестеров


Web дизайн для онлайн инвестеров


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



Web дизайн для онлайн инвестеров


25. Последний этап включает создание логотипа сайта, но сначало нам необходимо написать его название. Настройки для “online investing ”:



Web дизайн для онлайн инвестеров


Настройки для “we revard your experience”:



Web дизайн для онлайн инвестеров


Web дизайн для онлайн инвестеров


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



Web дизайн для онлайн инвестеров


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



Web дизайн для онлайн инвестеров


Web дизайн для онлайн инвестеров







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

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

21 октября 2018

Противоборство двух форматов высокой четкости дало неожиданный и весьма приятный результат для покупателей – в продаже появилось достаточное количество недорогих HD проигрывателей. С новым представителем семейства Blu-Ray мы познакомились совсем недавно, а сегодня пришло время обратить свой взор в стан HD-DVD. Проигрыватель Toshiba HD-EP35 – это очередная новинка, демонстрирующая незаурядный уровень качества при весьма доступной цене.

21 октября 2018

Изящная камера с точной автоматикой и превосходными функциями для быстрой, удобной и качественной фотосъемки. Матрица 12 Мпикс., 4-кратный широкоугольный зум (27 – 108 мм в 35-мм экв.), электронный стабилизатор, 2,7-дюймовый ЖК-дисплей, автовыбор сюжетной программы, система интеллектуального портрета, широкая функциональность, элегантный дизайн.

21 октября 2018

Дата анонса: 2009/02/24 Эффективное разрешение, МП: 12 Диагональ ЖК-дисплея, дюймы: 2 Вес с батареей и картой памяти, г: 515