Пошаговая и подробная инструкция по верстке простого макета psd.

  1. Подготовка рабочей среды (установка программ photoshop, vscode и создание структуры папок)
  2. Вырезание изображений из макета.
  3. Создание структуры блоков и стилизация.

  1. Подготовка рабочей среды.

Установка фотошопа. Я убуду использовать Adobe Photoshop CS3.

Установка редактора кода. Я использую VSCode.

Создать структуру папок для работы с проектом. Вот пример структуры папок:

  • рекомендуемая структура папок

Для работы скачаем бесплатный psd-шаблон.

2. Вырезаем изображения из psd-макета.

Открываем psd-макет в фотошоп.

Выбираем инструмент «Перемещение», «Автовыбор», «Группы слоев».

  • нарезка psd-макета

Выбираем изображение, которое необходимо вырезать.

  • нарезка psd-макета

Кликаем правой кнопкой миши на нужное изображение в панели слоев (справа) и выбираем «Создать дубликат слоя».

  • нарезка psd-макета

«Документ: Новый».

  • нарезка psd-макета

«Изображение: Тримминг»

  • нарезка psd-макета

«Файл: Сохранить для Web-устройств». Выбираем нужный формат и жмем «Сохранить»

  • нарезка psd-макета

Сохраняем изображение в папку с изображениями в нашем проекте.

Тоже самое проделываем для иконок, только сохраняем их в формате «PNG-24».

  • нарезка psd-макета

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *