Компьютерный интернет магазин

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


Компьютерный интернет магазин


1. Создайте новый документ размером 800х950 пикселей и залейте фон цветом #21252e. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение в верхней части холста и залейте его цветом #111419 в новом слое. Потом примените стиль Обводка (Layer Style – Stroke):

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


Компьютерный интернет магазин

Компьютерный интернет магазин


2. В этой области текстовым инструментом напишите заголовок сайта и слоган. К заголовку примените следующие стили в меню Стилей слоя (Layer Style — Blending Options):

Внутреннее свечение (Режим – Осветление, Метод – Мягкий):


Компьютерный интернет магазин


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


Компьютерный интернет магазин


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


Компьютерный интернет магазин


3. Сделайте копию слоя с заголовком и примените Отражение по вертикали (Transform – Flip Vertical). Опустите копию вниз, чтобы она выглядела как отражение. Добавьте маску слоя (Layer Mask) к копии и сделайте заливку градиентом, чтобы скрыть нижнюю часть отражения.


Компьютерный интернет магазин


4. Рядом с заголовком создайте логотип и вставьте изображение товара, который будет продаваться (в данном случае это компьютер). Для компьютера тоже нужно создать отражение.


Компьютерный интернет магазин


5. Перейдём к созданию навигации. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте небольшую фигуру:


Компьютерный интернет магазин


6. Примените к ней следующие стили:

Внутреннее свечение (Режим – Осветление, Метод – Точный):


Компьютерный интернет магазин


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


Компьютерный интернет магазин


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


Компьютерный интернет магазин

Компьютерный интернет магазин


7. Сделайте несколько копий этого прямоугольника:


Компьютерный интернет магазин


8. Текстовым инструментом напишите названия.


Компьютерный интернет магазин


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


Компьютерный интернет магазин


10. Залейте его белым цветом в новом слое:


Компьютерный интернет магазин


11. Объедините все слои с кнопками, сделайте выделение полученного слоя (Ctrl+Click), Инвертируйте его (Select – Inverse) и в белом слое нажмите Delete.


Компьютерный интернет магазин


12. Установите Непрозрачность белой полоски – 40%.
Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте ещё три большие фигуры:


Компьютерный интернет магазин


13. Ко всем этим прямоугольникам примените следующие стили слоя:

Внутреннее свечение (Режим – Осветление, Метод – Мягкий):


Компьютерный интернет магазин


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


Компьютерный интернет магазин


14. Слева напишите названия продуктов:


Компьютерный интернет магазин


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


Компьютерный интернет магазин


16. Текстовым инструментом создайте линию из точек. Используйте её в качестве разделителя:


Компьютерный интернет магазин


17. В основании холста расположите информацию футера:


Компьютерный интернет магазин


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


Компьютерный интернет магазин


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

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

24 сентября 2018

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

24 сентября 2018

Дата анонса: 2010/01/07 Эффективное разрешение, МП: 12.2 Диагональ ЖК-дисплея, дюймы: 6.7 Вес с батареей и картой памяти, г: 137

24 сентября 2018

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