Дизайн бизнес сайта

Конечный результат:


Дизайн бизнес сайта


1. Создайте новый документ размером 1000х960 пикселей с белым фоном. В верхней части холста создайте прямоугольник на всю ширину холста высотой 80 пикселей цветом #e9eacf. Потом создайте ещё один цветом #62c0e6 и высотой в три раза больше.


Дизайн бизнес сайта


2. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение, как показано ниже.


Дизайн бизнес сайта


3. Залейте выделение любым цветом и примените стиль Наложение градиента (Layer Style — Gradient Overlay):

Режим – Нормальный, Стиль — Линейный


Дизайн бизнес сайта


4. Создайте ещё одно выделение, как показано ниже:


Дизайн бизнес сайта


5. Залейте его любым цветом и примените стиль Наложение градиента с такими настройками:


Дизайн бизнес сайта

Дизайн бизнес сайта


6. Создайте ещё одно выделение той же ширины, но больше по высоте. Залейте его любым цветом в новом слое:


Дизайн бизнес сайта


Примените стиль Наложение градиента:


Дизайн бизнес сайта


7. Создайте новый слой (Create New Layer) под слоями с залитыми выделениями. Создайте выделение, как показано ниже (высотой с все предыдущие заливки):


Дизайн бизнес сайта


8. Залейте выделение чёрным цветом и примените фильтр Размытие по гауссу (Gaussian Blur Filter) со значением 2 пикселя. Установите Непрозрачность этого слоя –35%. Добавьте маску слоя (Layer Mask) и сделайте заливку линейным градиентом снизу, где кончается прямоугольник, вверх. Это создаст тень:


Дизайн бизнес сайта


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


Дизайн бизнес сайта


10. Залейте его белым цветом в новом слое и установите Непрозрачность — 5%.


Дизайн бизнес сайта


11. Сделайте копию этого слоя и поднимите немного. Часть этой белой фигуры залезет на область другого прямоугольника. Её нужно будет обрезать любым способом.


Дизайн бизнес сайта


12. Сделайте ещё 2 копии этой волнистой фигуры, поверните, отразите по горизонтали (Transform – Flip Vertical) и поместите, как показано ниже.


Дизайн бизнес сайта


13. Теперь добавьте заголовок, слоган, логотип и разделы меню, как показано ниже.


Дизайн бизнес сайта


14. Найдите изображение ноутбука и извлеките его в наш документ:


Дизайн бизнес сайта


15. Создадим отражение этого ноутбука. Сделайте копию слоя с ноутбуком, поместите её под оригинал и немного опустите вниз, чтобы основания были одинаковыми.
Потом добавьте маску слоя (Layer Mask) к копии и сделайте заливку линейным градиентом снизу вверх, чтобы слегка скрыть нижнюю часть отражения. Когда закончите, кликните правой кнопкой на маске и выберите Приметь слой-маску (Apply mask). Проделайте то же самое для боковой стороны отражения.


Дизайн бизнес сайта


16. Вставьте пару изображений бабочки:


Дизайн бизнес сайта


17. Слева от ноутбука напишите кое-что о вашем бизнесе.


Дизайн бизнес сайта


18. Используя текст и несколько картинок, добавьте информацию в область контента. Можете создать таблицу справа, а также не забудьте про футер.


Дизайн бизнес сайта


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


Дизайн бизнес сайта




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

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

18 декабря 2018

Дата анонса: 2008/01/08 Эффективное разрешение, МП: 12.1 Диагональ ЖК-дисплея, дюймы: 2.5

18 декабря 2018

18 декабря 2018

В наше время выбор цифровой видеокамеры становится весьма нелегким делом — покупателю все труднее ориентироваться в том разнообразии форматов и носителей, которое мы наблюдаем на рынке. А с прошлого года всерьез встал вопрос о переходе на видео высокой четкости — на рынок пришли многочисленные модели HD-видеокамер.