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

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


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


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-дизайн

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

16 августа 2018

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

16 августа 2018

Продолжая подводить итоги уходящего года, обратим свое внимание на источники аудио-видео сигнала, основу которых к началу 8 года нового тысячелетия все еще составляют DVD-проигрыватели. Впрочем, монополия DVD-диска в 2007 году была разрушена, и сегодня мы имеем два конкурирующих стандарта дисков высокой плотности записи и источники AV-сигнала на основе жестких дисков. Давайте же проанализируем изменения, произошедшие в мире устройств воспроизведения за истекший год.

16 августа 2018

Телефото зум-объектив с ED элементами профессионального класса, 4.0x зум, Ультразвуковой Волновой Привод автофокуса SWD, всепогодный корпус.