Дизайн сайта консалтинговой компании

В конце урока вы научитесь создавать такой простой и стильный бизнес сайт:


Дизайн сайта консалтинговой компании


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


Дизайн сайта консалтинговой компании


2. Инструментом Перо (Pen Tool) нарисуйте тонкую наклонённую линию цветом #313439. Используйте метод копированию слоя с линией для создания фона.


Дизайн сайта консалтинговой компании


3. Выберите инструмент Прямоугольник (Rectangle Tool) и создайте основание для заголовка цветом #9E3400.


Дизайн сайта консалтинговой компании


4. Этим же инструментом создайте основное окно нашего сайта белого цвета:


Дизайн сайта консалтинговой компании


5. Цветом #617FA1 создайте ещё один прямоугольник слева:


Дизайн сайта консалтинговой компании


6. Установите Заливку (Fill) этого слоя – 20%.Вставьте подходящую картинку в наше основное окно:


Дизайн сайта консалтинговой компании


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

Слово ‘learn’:


Дизайн сайта консалтинговой компании


‘our ways of running’:


Дизайн сайта консалтинговой компании


‘successful business’:


Дизайн сайта консалтинговой компании

Дизайн сайта консалтинговой компании


8. Теперь напишите заголовок сайта, используя следующие настройки для слов:

‘corporate’:


Дизайн сайта консалтинговой компании


‘consulting Co.’


Дизайн сайта консалтинговой компании

Дизайн сайта консалтинговой компании


9. Инструментом Прямоугольник (Rectangle Tool) создайте кнопку цветом #983405.


Дизайн сайта консалтинговой компании


10. Сделайте копию этой кнопки и выберите инструмент Эллипс (Ellipse Tool). Чтобы обрезать кнопку эллипсом, создайте овал, как показано ниже, удерживая Alt.


Дизайн сайта консалтинговой компании

Дизайн сайта консалтинговой компании


11. К этому слою примените стиль Наложение градиента (Layer Style — Gradient Overlay).


Дизайн сайта консалтинговой компании

Дизайн сайта консалтинговой компании


12. Для удобства объедините слои кнопки в группу. Сделайте копию группы 3 раза и измените немого цвета кнопок.
Первая копия:


Дизайн сайта консалтинговой компании


Цвет нижнего слоя — #CD4300. Для другого слоя примените стиль Наложение градиента
(Layer Style — Gradient Overlay):


Дизайн сайта консалтинговой компании

Дизайн сайта консалтинговой компании


13. Вторая копия:


Дизайн сайта консалтинговой компании


Цвет нижнего слоя — #FD5A06. Настройки стиля Наложение градиента для другого слоя:


Дизайн сайта консалтинговой компании

Дизайн сайта консалтинговой компании


14. Третья копия:


Дизайн сайта консалтинговой компании


Цвет нижнего слоя — #FE7935. Настройки стиля Наложение градиента для другого слоя:


Дизайн сайта консалтинговой компании

Дизайн сайта консалтинговой компании


15. Заключительный этап – нужно написать названия кнопок. Используйте эти настройки для текста:


Дизайн сайта консалтинговой компании


Потом к тексту примените стиль Отбрасывание тени (Layer Style — Drop Shadow):


Дизайн сайта консалтинговой компании


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


Дизайн сайта консалтинговой компании







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

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

21 августа 2018

21 августа 2018