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

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


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


1. Создайте новый документ с прозрачным фоном:


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


2. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте тонкую полоску шириной в холст и высотой 14-15 пикселей. Создайте новый слой (Create New Layer) и инструментом Заливка (Paint Bucket Tool) залейте выделение цветом #374e5e.


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


3. В новом слое инструментом Перо (Pen Tool) нарисуйте фигуру, как показано ниже, под созданным прямоугольником (я специально изменил цвет фона на чёрный, для лучшей видимости происходяшего):


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


4. По сторонам бугра, опущенного вниз должны быть прямоугольники. Чтобы достичь такого результата, удерживайте Shift при рисовании контура. Когда закончите, кликните правой кнопкой мыши на контуре и выберите Заливка контура (Stroke Path). Залейте контур любым цветом. Потом кликните правой кнопкой ещё раз и выберите Удалить контур (Delete Path).


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


5. К слою с нарисованной фигурой примените следующие стили в меню Стилей слоя (Layer Style — Blending Options):

Отбрасывание тени (Режим – Умножение):


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


Внутренняя тень (Режим – Нормальный):


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


Наложение градиента (Режим – Нормальный, Стиль – Линейный):


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


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):


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

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


6. Создайте новый слой (Create New Layer) под слоем с нарисованной фигурой и создайте прямоугольник высотой 50 пикселей на всю ширину холста. Это будет навигационной панелью.


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


7. Примените к нему следующие стили слоя:

Наложение градиента (Режим – Нормальный, Стиль – Линейный):


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


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):


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

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


8. Создайте новый слой (Create New Layer) над слоем с навигационной панелью, но под слоем с волнистым заголовком сайта. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение на половину высоту панели.


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


9. Залейте выделение белым цветом и установите Непрозрачность слоя – 8%.


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


10. Теперь создадим диагональный узор. Создайте новый документ размером 25х25 пикселей с прозрачным фоном. Выберите инструмент Карандаш (Pencil Tool) и 1-пиксельной кистью нарисуйте урок, как показано ниже.


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


11. Как закончите, перейдите в меню Редактирование»Определить узор (Edit > Define Pattern), назовите этот узор “lines”. Сделайте выделение слоя с навигационной панелью (Ctrl+Click), создайте новый слой над ним, выберите инструмент Заливка (Paint Bucket Tool) и в настройках сверху выберите созданный узор.


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


12. Залейте выделение узором и установите Непрозрачность слоя – 2%.


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


13. Напишите заголовок сайта в отведённой области, и также слоган.


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


14. Подпишите разделы меню навигации:


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


15. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 10-15 пикселей создайте фигуру на первом слове “HOME” и установите её Непрозрачность – 25%.


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


16. Под навигационной панелью сделайте выделение всей пустой части холста и залейте его белым цветом в новом слое. Потом примените стиль Наложение градиента (Layer Style — Gradient Overlay):

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


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


17. Прямо под навигационной панелью создайте полоску белого цвета толщиной в 1 пиксель на всю ширину холста.


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


18. Под заголовком сайта вставьте изображение iPhone на левой стороне.


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


19. Инструментом Овальная область (Elliptical Marquee Tool) создайте выделение под изображением iPhone.


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


20. Залейте его чёрным цветом и примените Размытие по гауссу (Gaussian Blur Filter) со значением 3 пикселя. Установите Непрозрачность этого слоя – 34%.


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


21. На правой стороне напишите текст.


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


22. К заголовку этого текста примените стиль Отбрасывание тени (Layer Style — Drop Shadow). Стрелки можно найти здесь.


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


23. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте кнопку “LEARN MORE”. Стили слоя для этой кнопки такие же, как и для панели навигации.


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


24. Создайте выделение остальное области холста:


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


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

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


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


26. Как и в прошлый раз создайте 1-пиксельную линию белого цвета под предыдущей областью с iPhone, но над ней должна быть ещё одна цветом #e0e0e0.

На правой стороне создайте чёрным прямоугольник, он должен покрывать предыдущую область. Обрежьте верхнюю часть.


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


27. Скопируйте стили слоя с навигационного слоя на этот прямоугольник. Потом добавьте ещё один стиль Отбрасывание тени:

Режим — Умножение


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


28. Создайте новый слой (Create New Layer) под слоем с прямоугольником и инструментом Многоугольное лассо (Polygonal Lasso Tool) создайте треугольник. Залейте его цветом #125971.


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


29. Сделайте выделение слоя с обрезанным прямоугольником и залейте его узором с диагональными линиями. Потом напишите текст.


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


30. Слева от прямоугольника напишите текст статьи.


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


31. Под текстом вставьте три картинки. Сделайте выделение каждой картинки и примените Расширение (Modify – Expand) со значением 10 пикселей. Залейте выделение белым цветом в новом слое, который нужно поместить под слой с картинкой в палитре слоёв. К каждому белому прямоугольнику под картиной добавьте 1-пиксельную обводку светло-серого цвета.


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


32. Для футера, можете сделать копию слоя с навигационной панелью и перетащить её вниз холста. Напишите нужную информацию о правах.


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


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


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





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

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

23 октября 2018

Olympus E-5 — топовая цифровая зеркальная камера E-серии. Стандарт 4/3. Сенсор Live MOS (12.3 МР), процессора TruePic V+, волновой УЗ-фильтр для защиты от пыли. Встроенная в камеру система подавления вибраций. Контроль баланса белого по 2 сенсорам, система автофокусировки по 11 крестообразным датчикам. Поворотный LCD-дисплей Hyper Crystal с функцией Live View. Съемка HD-видео. Влагозащитный магниевый корпус. Ресурс затвора 150 тыс. срабатываний.

23 октября 2018

Эволюция HDD/DVD-рекордеров как класса бытовой электроники приблизилась к своему логическому завершению совсем недавно. Сначала изюминкой была сама возможность записи данных на встроенный жесткий диск, позже от рекордеров стали требовать высокого качества картинки и поддержки различных аудио-видео форматов, а на завершающей стадии производители стали уделять немало внимания еще и дизайну этих устройств. Pioneer DVR-LX60 – один из тех рекордеров, который не только читает, записывает и воспроизводит различные диски, но и прекрасно при этом выглядит.

23 октября 2018

EOS 5D Mark III — полнокадровая зеркальная камера с 22,3 МП, 61-точечной автофокусировкой и режимом серийной съемки 6 кадров/сек. Снимайте видео в формате Full HD с ручным управлением всеми настройками — от частоты кадров до звуковой дорожки. В комплекте - объектив Canon EF 24-105 f/4 L IS USM