Дизайн карточки товара в photoshop

Сделаем простой дизайн карточки товара в программе photoshop.

Подобную карточку товара можно вставить на landing page.

Карточку делать лучше на большом формате, чтобы при переносе на верстку остался хорошее качество.

Для выравнивания блоков и текста можно использовать двенадцати колоночную сетку bootstrap.

Дизайн фона карточки товара.

Фон будет состоять из двух прямоугольников.

1. Используем инструмент прямоугольник и чертим вертикальный квадрат бежевого цвета.
2. Делаем вторым слоем сверху прямоугольник горизонтальный синего цвета.
3. Преобразуем прямоугольники в смарт-объект.
4. Наложим для красоты эффект шум. Нажимаем в меню фильтр, шум, добавить шум. Ставим значение около пяти. Получается как бархат.

Добавим изображения товара и логотипа.

• Вставляем надпись логотипа в бежевый прямоугольник и нажимаем ctrl+t свободной трансформирование, чтобы сделать поворот на 180 градусов.
• У логотипа делаем непрозрачность около 20 процентов и добавляем корректирующий слой цветовой тон с насыщенностью -100, чтобы сделать логотип черно белый и не сильно выделяющийся.
• Второе изображение сам товар, например видеокарта Palit GeForce  GTX 1080 GameRock.
• Добавим тень у изображения. Для этого копируем слой с видеокартой и накладываем на него черный цвет.
• Заходим в меню фильтр, размытие, размытие по гауссу и ставим около 20 пикселей.
• Чтобы увеличить тень,  делаем свободное трансформирование и растягиваем за пределы основной картинки. Дополнительная настройка тени свойство непрозрачности.

Кнопка, текст для карточки товара.

1. Сверху в правой части карточки товара пишем название товара заголовок h1 большим шрифтом.
2. Указываем цену тонким шрифтом.
3. Пишем основные характеристики с ключевыми запросами к товару.
4. Делаем красивую кнопку с эффектом внешнего свечения. Непрозрачность будет около 20 процентов и размах 25 пикселей. При наведении на кнопку свечение будет пропадать.
5. В фон карточки товара хорошо добавлять паттерны это уникальные повторяющиеся картинки. У паттерна делаем непрозрачность около 10 процентов и через зажатую кнопку alt привязываем к прямоугольнику карточки.

Чтобы карточку ровно обрезать по границам воспользуемся двумя горячими клавишами.

1. Заходим в меню редактирование, клавиатурные сокращения, слои, дублировать слой выставляем сочетания клавиш shift+ctrl+/.
2. Заходим в пункт меню клавиатурные сокращения, изображения, тримминг и назначаем ctrl+alt+/.

Теперь в photoshop наводим курсор на группу с слоями карточки товара и нажимаем дублировать слой, затем сразу делаем тримминг и карточка получается обрезана по краям.

Эта комбинация часто используется при вырезании из фотошопа изображений для верстки landing page.