Коротко: «копировать CSS» в Photoshop — это функция «Copy CSS» для слоя, которая генерирует CSS-код с параметрами: цвет, размер шрифта, тень, радиус, градиент. Это подсказка для вёрстки, а не готовая вёрстка. В новых версиях Photoshop функцию убрали — параметры смотрят в панели свойств и переносят вручную.
Что можно «скопировать»
| Параметр | Где смотреть |
|---|---|
| Цвет заливки | панель свойств слоя |
| Размер и шрифт текста | панель символа |
| Тень и обводка | эффекты слоя |
| Радиус углов | свойства фигуры |
| Прозрачность | панель слоя |
Вкладки: как переносить значения
В старых версиях: правый клик по слою → «Copy CSS». В буфер попадал CSS вида:
/* пример вывода */
color: #003f8f;
font-size: 24px;
text-shadow: 0 2px 4px rgba(0,0,0,.25);
border-radius: 8px;Код был неточным: имена шрифтов, единицы и структура требовали правки. Использовать как «сырой» старт.
- Выделите слой и откройте панель свойств.
- Скопируйте цвет (клик по образцу → значение).
- Считайте размер шрифта, интерлиньяж, трекинг.
- Скопируйте параметры тени (смещение, размытие, цвет).
- Запишите радиус и отступы.
- Перенесите в CSS как переменные, а не «россыпью».
Photoshop «мыслит» пикселями, а в вёрстке удобнее rem и проценты. Пересчёт: 16px = 1rem, 24px = 1.5rem.
Крупные размеры можно переносить через clamp(), чтобы заголовки были адаптивными, а не фиксированными.
- цвет в Photoshop и в браузере может отличаться из-за профилей;
- имена шрифтов в коде требуют альтернатив (
font-familyс запасными); - тени и градиенты лучше переписывать под CSS;
- позиции из макета не переносите абсолютными координатами — вёрстка должна быть адаптивной;
- проверьте контраст полученных цветов.
Практика: перенести макет
- Соберите дизайн-токены: цвета, размеры шрифтов, радиусы, тени.
- Заведите их CSS-переменными в
:root. - Свёрстайте структуру сеткой, а не позициями.
- Примените токены к компонентам.
- Сравните результат с макетом в браузере.
- Согласуйте с дизайнером расхождения.
Частые ошибки: причина → решение
| Ошибка | Последствие | Решение |
|---|---|---|
| Копируют позиции как absolute | нет адаптива | использовать сетку |
| Цвет «не тот» | профиль цвета | сверить в браузере |
| Шрифт не найден | подставлен системный | подключить шрифт и задать запасные |
| Размеры в px везде | плохо масштабируется | перевести в rem |
Проверьте себя
Вопросы и ответы
Функцию убрали; значения смотрят в панели свойств или используют плагины/инструменты разработчика. В Figma для этого есть Dev Mode.
Проверьте цветовой профиль документа в Photoshop и цвет в браузере. Финальное значение выбирайте по браузеру — там сайт смотрят пользователи.
В панели символа видны размер, интерлиньяж и межбуквенное расстояние. Перенесите их в CSS-переменные, переведя пиксели в rem.
Значения возьмите, но перепишите их под box-shadow и text-shadow: формат отличается, а «1:1» всё равно не получится.
Итоги
- «Copy CSS» — подсказка по слою, а не готовый код.
- Переносите цвета, размеры, тени как токены.
- Раскладку стройте сеткой, а не абсолютными координатами.
- Проверяйте цвета и шрифты в браузере.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.