Как можно получить css-код или данные о тени блока из Adobe Photoshop?

Question

[Иван Мехедов]

Я верстаю макет из адоба фотошопа - учусь и практикуюсь, и в некоторых блоках попадаются различные тени. В первом блоке я тень сделал на глаз, что уже не точно. Так и я не особо разобрался в свойстве box-shadow, полез на форумы, и долго мучаясь сделал. Со вторым будет сложнее, так как там действительно труднее да и не правильно надеяться на глазомер. Вот думаю, есть ли способы это сделать вернее и легче.
Я хабре нашёл похожий вопрос, но человек нашёл какое-то окошко, данные из которого можно преобразовать в css-код, а я даже не знаю как это окно вызвать. В адобе я тоже пока слаб и плох, с опытом придёт.

Answer 1

[archelon]

есть avocode и zeplin.
а можно так:
psd-to-css-shadows.com

Comments

[Иван Мехедов]

Эту ссылку я как раз нашёл на том форуме, но данные, которые конвертируются, он получил из окошка, который я уже нашёл.
Что за авокадо и зеплин?

Answer 2

[Максим Морев]

Правый клик по слою с тенью -> "Копировать CSS", в числе прочего там будет свойство "box-shadow".

Значения обычно выглядят не очень презентабельно, как-то так:
box-shadow: 7.5px 12.99px 95px 0px rgb( 0, 0, 0 );

Кроме того, фотошоп ничего не скажет, если используется режим наложения тени или непрозрачность.
На эти вещи придётся обратить внимание самостоятельно из этого окна (двойной клик на название эффекта под слоем):


После чего чуть-чуть почистим то, что у нас получается, и добавим прозрачность, если она отлична от 100%:
box-shadow: 8px 13px 95px 0px rgba(0, 0, 0, .5);

Выглядит заумно, но если знать, что делать и куда смотреть - секунд 10 уходит.
Или, как уже сказали, есть более специализированный софт, который с этим работает лучше.

Comments

[Иван Мехедов]

Спасибо за столь подробное объяснение, за что я очень благодарен.
Это окошко я нашёл как вызвать, но теперь я узнал чуть более лёгкий метод. Да, софт буду использовать, который говорили ранее, войдёт в моё постоянное использование.
Отмечаю ответ решением за подробности и время, потраченное для доходчивого разъяснения.

[Максим Морев]

Иван Мехедов, ну поделитесь методом, что ли? :) Или это про софт?

[Иван Мехедов]

Максим Морев, я имел ввиду это окошко вызвать можно двойным кликом, а я делал чуть иначе и дольше)
Сайт, который преобразовувает данные из этого окна, оказался довольно полезным и я буду его использовать.