Сделаем простой дизайн карточки товара в программе photoshop.
Подобную карточку товара можно вставить на landing page.
Карточку делать лучше на большом формате, чтобы при переносе на верстку остался хорошее качество.
Для выравнивания блоков и текста можно использовать двенадцати колоночную сетку bootstrap.
Дизайн фона карточки товара.
Фон будет состоять из двух прямоугольников.
- Используем инструмент прямоугольник и чертим вертикальный квадрат бежевого цвета.
- Делаем вторым слоем сверху прямоугольник горизонтальный синего цвета.
- Преобразуем прямоугольники в смарт-объект.
- Наложим для красоты эффект шум. Нажимаем в меню фильтр, шум, добавить шум. Ставим значение около пяти. Получается как бархат.
Добавим изображения товара и логотипа.
- Вставляем надпись логотипа в бежевый прямоугольник и нажимаем ctrl+t свободной трансформирование, чтобы сделать поворот на 180 градусов.
- У логотипа делаем непрозрачность около 20 процентов и добавляем корректирующий слой цветовой тон с насыщенностью -100, чтобы сделать логотип черно белый и не сильно выделяющийся.
- Второе изображение сам товар, например видеокарта Palit GeForce GTX 1080 GameRock.
- Добавим тень у изображения. Для этого копируем слой с видеокартой и накладываем на него черный цвет.
- Заходим в меню фильтр, размытие, размытие по гауссу и ставим около 20 пикселей.
- Чтобы увеличить тень, делаем свободное трансформирование и растягиваем за пределы основной картинки. Дополнительная настройка тени свойство непрозрачности.
Кнопка, текст для карточки товара.
- Сверху в правой части карточки товара пишем название товара заголовок h1 большим шрифтом.
- Указываем цену тонким шрифтом.
- Пишем основные характеристики с ключевыми запросами к товару.
- Делаем красивую кнопку с эффектом внешнего свечения. Непрозрачность будет около 20 процентов и размах 25 пикселей. При наведении на кнопку свечение будет пропадать.
- В фон карточки товара хорошо добавлять паттерны это уникальные повторяющиеся картинки. У паттерна делаем непрозрачность около 10 процентов и через зажатую кнопку alt привязываем к прямоугольнику карточки.
Чтобы карточку ровно обрезать по границам воспользуемся двумя горячими клавишами.
- Заходим в меню редактирование, клавиатурные сокращения, слои, дублировать слой выставляем сочетания клавиш shift+ctrl+/.
- Заходим в пункт меню клавиатурные сокращения, изображения, тримминг и назначаем ctrl+alt+/.
Теперь в photoshop наводим курсор на группу с слоями карточки товара и нажимаем дублировать слой, затем сразу делаем тримминг и карточка получается обрезана по краям.
Эта комбинация часто используется при вырезании из фотошопа изображений для верстки landing page.