На Вашем компьютере обнаружен устаревший браузер!
(Доступ на сайт будет ограничен)
Советуем Вам скачать новую версию браузера:
Главная » Photoshop » Макет мобильного интернет – магазина

Макет мобильного интернет – магазина

Макет мобильного интернет – магазина - уроки фотошоп

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

Сложность: низкая
Время: до 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) создадим другой прямоугольник и поместим его, как на картинке ниже.

Макет мобильного интернет – магазина - уроки фотошоп

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

Макет мобильного интернет – магазина - уроки фотошоп

Нажмите 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) удалите некоторые части этого слоя.

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

Макет мобильного интернет – магазина - уроки фотошоп

Ну на этом мы и закончим. Всего вам доброго и творческих успехов!

Макет мобильного интернет – магазина - уроки фотошоп

Ссылка на источник: http://www.talk-mania.com/web-layouts/35079-mobile-phone-shopping-cart-layout.html
Переводчик: Артеменко Любовь

(+3 баллов, 3 оценок)
Loading ... Loading ...
Комментариев (1)
heroshum 01.08.2020 (14:13)

Понравились работы с тенью!

Написать комментарий

Подписаться, не комментируя

.