Ноябрь 2017
Автор: Рубрика: Web дизайн Комментариев нет

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

Дизайн карточки товара в 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.

Комментариев нет

Комментарии:

Комментарии запрещены