Макет мобильного интернет – магазина | Stadion-Kuban – все о дизайне

Хотите создать свой собственный дизайн интернет - магазина, не похожий на другие? Тогда запаситесь терпением и фантазией - они вам пригодятся.

Сложность: низкая
Время: до 1 часа

Навыки для «прокачки»:
- работа со стилями слоя
- работа с векторными объектами
- выделение и трансформация объектов

Уроки web дизайна дают вам только немного знаний, как сделать некоторые элементы, а остальное дело рук вашей фантазии. Ну что начнем?

Это наш конечный результат:

Шаг 1. Начнем с нового документа 760x770 пикс., цвет фона: белый. Выберите инструмент Прямоугольник (Rectangle Tool), и создайте 2 формы, как на картинке ниже.

Для верхнего прямоугольника Добавим следующие стили слоя (Add a layer style)

А для нижнего добавьте эти:

Вот что должно получиться.

Шаг 2. Теперь создайте еще одну форму, как на картинке ниже.

Затем перейдите Редактирование - Трансформирование – Деформация (Edit - Transform Path – Warp) и используйте следующие настройки:

Примечание: если у вас нет Деформация (Warp Tool), вы можете создать форму, инструментом Перо (Pen tool)
Вот наш результат.

Теперь перетащите этот слой прямо под фоновый слой.

Затем перейдите Фильтр – Размытие – Размытие по Гауссу (Filter – Blur - Gaussian Blur) и используйте следующие настройки:
(Вам будет предложено растрировать слой: нажмите ДА)

Далее изменим Непрозрачность (Opacity) этого слоя до 50%

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

Шаг 3. Теперь, инструментом Прямоугольник (Rectangle Tool) создадим другой прямоугольник и поместим его, как на картинке ниже.

Нажмите Enter на клавиатуре, а затем перейдите еще раз, чтобы Редактирование - Трансформирование – Деформация (Edit - Transform Path – Warp), но на этот раз, перетащите вручную левый угол этого прямоугольника.

После того, как вы будете довольны результатом, нажмите Enter.

Шаг 4. Теперь скопируйте эту форму (CTRL + J), затем перейдите в меню Редактирование - Трансформирование - Отразить по горизонтали (Edit - Transform Path - Flip Horizontal)

Добавим следующие стили слоя (Add a layer style)

Вот что должно получиться.

Перетащите этот слой под фоновый слой в палитре слоев.

Затем инструмент Перемещение (Move tool), попробуйте разместить, слой, как на картинке ниже.

Шаг 5. Тем же методом создайте такой же эффект для нижнего прямоугольника. Затем поместите его, как на картинке ниже, и измените пропорции инструментом Трансформирование (Transform Tool) (CTRL + T)

Выберите серый слой с Деформацией (Warp Tool) попытайтесь изменить форму, как на картинке ниже.

Не забудьте нажать Enter на клавиатуре. Теперь добавим немного тени.

Шаг 6. Выберите инструмент Перо (Pen Tool) и создайте простую форму.

Затем перетащите эту форму под серый прямоугольник.

Теперь нам необходимо зайти в Фильтр – Размытие – Размытие по Гауссу (Filter – Blur - Gaussian Blur) и установить значение от 4-8.

Далее уменьшим Непрозрачность (Opacity) этого слоя до 50%

Шаг 7. Сделайте то же самое для верхней части макета.

Шаг 8. Теперь создаем новый слой, поверх всех слоев и с инструментом Прямоугольное выделение (Marquee tool) создадим выделение как показано на следующей картинке.

Активируем инструмент Кисть (Brush Tool), и выбираем мягкую кисть 300 пикселей.

И с этой кистью создадим единственную точку внутри выделения.

Уменьшим Непрозрачность (Opacity) этого слоя до 40%
Затем инструментом Область (вертикальная строка) (Column Marquee), делаем выделение в центре круга.

Убедитесь, что у вас выбран последний слой, и нажмите кнопку Delete на клавиатуре.
Нажмите CTRL + D, чтобы увидеть результат.

Затем с помощью инструмента Область (горизонтальная строка) (Row Marquee) создайте горизонтальное выделение (это выделение должно быть в центре вашей точки, созданной кистью)

После снова нажмем Delete и CTRL + D Вот наш результат.

Шаг 9. Теперь пришло время добавить несколько изображений и текст и, возможно, некоторые иконки. Это очень простая задача и я думаю, что все, кто изучает уроки web дизайна, могут завершить эту задачу самостоятельно.

Шаг 10. Теперь мы создадим еще 2 формы, инструментом Прямоугольник со скругленными углами (Rounded rectangle tool) (установив радиус до 2 пикселей)

Затем выделите оба слоя в палитре слоев и нажмите Ctrl + E (это будет слияние двух слоев в один). В то же время слой будет растрирован.
Выберите инструмент Овальная область (Elliptical Marquee Tool) и сделайте выделение, как на картинке ниже.

Теперь нажмите на клавишу Delete, и затем Ctrl + D чтобы снять выделение.

Затем добавьте следующие стили слоя (Add a layer style).

Вот что должно получиться.

Шаг 11. Теперь создайте новый слой и Кистью (Brush Tool), (мягкой 200 пикс.) создайте несколько пятен, как на изображении ниже.

Изменим значение Непрозрачности (Opacity) для этого слоя до 30 или 40%. Инструментами Область (горизонтальная строка) (Single Row Marquee Tool) и Область (вертикальная строка) (Single Column Marquee Tool) удалите некоторые части этого слоя.

Вот наш результат.