Разрабатываем оформление небольшого магазина

Человек проходит мимо витрины и за несколько секунд должен понять: что здесь продают, как называется магазин и когда он открыт. Разместим три надписи на фасаде магазина растений «ЛИСТ» и получим цельную концепцию оформления.

Где делаем

Основной путь — Canva: загрузим фасад без надписей и добавим редактируемый текст. Альтернатива — Photopea, отдельные шаги есть ниже. Выберите один редактор.

ChatGPT или Алиса AI помогут обсудить иерархию и проверить текст. Само размещение букв делаем в редакторе: так вы сможете исправить время работы без повторной генерации всего фасада.

Почему светлый фасад выглядит ярче белого

Здесь работает соседство светлого и тёмного: холодная светлая панель кажется ещё чище рядом с глубокой зеленью, рамами и тенями. Дневной свет даёт объём, а фактура камня остаётся видимой. Не нужно выбеливать всё до исчезновения деталей. Для собственного изображения попросите ИИ сохранить светлый холодный фон, естественные тени и насыщенную зелень без жёлтого оттенка.

1. Сохраняем исходник и бриф · 2 минуты

Оформляем вымышленный магазин комнатных растений. В брифе только три надписи:

Скачать бриф с ориентирами · TXT

Скачать фасад без надписей · WEBP

Файл WEBP — обычное изображение. Его можно загрузить в Canva или открыть в Photopea. Сохраните исходник отдельно: надписи будем добавлять поверх в новом проекте.

О чём не нужно догадываться

Цены, скидки, адрес, сайт, телефон и доставка в задании не указаны. Не добавляйте их. Нам не требуется переделывать интерьер или рисовать новый магазин — работаем с тремя сообщениями на готовом фасаде.

Разделяем три уровня

• Название «ЛИСТ» — крупно на светлой верхней панели. Оно помогает узнать магазин.
• «Растения для вашего дома» — на левой витрине. Это ответ на вопрос «Что здесь продают?».
• Часы работы — на стекле двери. Они нужны человеку, который уже подошёл ко входу.

Общий цвет текста — #183b2c. Один шрифт с кириллицей и спокойные пропорции связывают три надписи. У вас получится своя типографическая версия; копировать буквы примера в точности не требуется.

2. Размещаем оформление в Canva · 8–10 минут

1. Создайте пустой дизайн 1000 × 625 px. Назовите его «ЛИСТ · концепция витрины».
2. Откройте Загрузки → Загрузить файлы и выберите lesson142_storefront.webp. Разместите изображение на всю страницу. Через меню изображения задайте его фоном или растяните пропорционально до краёв. При возможности заблокируйте фон, чтобы случайно не сдвинуть.
3. Добавьте текст «ЛИСТ». Выберите доступный шрифт с кириллицей: например Georgia, если он есть, или другой спокойный шрифт с засечками. Поставьте цвет #183b2c, размер примерно 90–105. Разместите название по центру светлой панели, оставив воздух сверху и снизу.
4. Отдельным текстовым блоком напишите «Растения», затем с новой строки «для вашего дома». Размер около 36–42, ширина области около 310 px. Поставьте блок в верхней левой части витрины: ориентир — 190 px от левого края, 215 px от верхнего.
5. Добавьте третий блок: «Ежедневно» и с новой строки «10:00–19:00». Размер примерно 13–15. Ориентир — 775 px слева, 325 px сверху, ширина около 90 px. Надпись должна оставаться в пределах стекла двери и не попадать на ручку.
6. Отрегулируйте расположение по изображению: координаты — отправная точка, а не жёсткое правило. Если часы теряются среди листьев и отражений, добавьте под ними небольшую светлую плашку в пределах двери. Это будет ваша версия оформления, её нужно оценить как часть концепции.
7. Проверьте единый шрифт, цвет, интервалы и переносы. Оставьте крупные листья, дверную ручку и рамы свободными. Не заполняйте надписями каждое свободное место.

Как проверить себя взглядом прохожего

Уменьшите макет примерно до ширины телефона. Название и сообщение магазина должны оставаться различимыми. Затем откройте масштаб 100% и проверьте часы работы: мелкие сведения на двери читают вблизи, поэтому им не нужно соревноваться по размеру с вывеской.

Если хотите попросить ИИ о проверке

Прикрепите свой экспорт или скриншот, если выбранный помощник принимает изображения. Если он не видит файл, опишите расположение и размеры; не просите оценить картинку, которую не передали.

3. Выгружаем и проверяем · 3 минуты

1. В Canva выберите Поделиться → Скачать → PNG. Скачайте одну страницу и назовите файл storefront_list.png.
2. Откройте PNG отдельно от Canva. Проверьте размер 1000 × 625 px, отсутствие обрезанных букв и точное время 10:00–19:00.
3. Убедитесь, что название стоит на панели, сообщение — на витрине, а часы — на стекле двери. Текст не должен пересекать рамы или дверную ручку.
4. Посмотрите, остались ли живые тени, листья и фактура светлой панели. Не применяйте фильтр, превращающий всё светлое в сплошное белое пятно.
5. Сохраните редактируемый проект у себя. В портфолио подпишите результат «Учебная концепция оформления витрины».

Альтернатива — Photopea

Откройте Photopea и выберите File → Open: загрузите WEBP из урока. Он уже имеет размер 1000 × 625 px. Инструментом T создайте три отдельных текстовых слоя с теми же надписями и цветом. Для перемещения используйте инструмент перемещения. Если нужна плашка, нарисуйте прямоугольник на отдельном слое под часами.

Сохраните редактируемую версию через File → Save as PSD, а готовую картинку — через File → Export As → PNG. Размер при экспорте оставьте исходным. Для задания нужен только финальный PNG.

Что показываем заказчику

Такой макет помогает согласовать расположение и характер надписей. Для изготовления вывески или наклеек позже потребуются реальные замеры поверхностей и требования изготовителя. Этот учебный PNG демонстрирует идею оформления.

Практическое задание

Отправьте куратору Алексу один storefront_list.png. В сообщении укажите: «Учебная концепция. Фасад предоставлен курсом и создан ИИ; мой вклад — размещение надписей, типографика, проверка читаемости и экспорт». Если использовали свой разрешённый исходник, укажите это.

Дальше подготовим три карточки товаров по единому заданию. Допуск к следующему уроку подтверждает куратор.