Как ускорить вот такой процесс

[swandev]

 

 

Маркеров этих 80 штук, на каждый маркер будет ховер эффект, поэтому нужно отдельно вырезать все и абсолютом позиционировать.

Как ускорить этот процесс? Может есть какой-то плагин для фотошопа

[ows.nightwolf]

На сколько я понял, вам нужно быстро получить значения top / left  и width / height этих элементов чтобы вручную их самому не считать. Могу предложить такой вариант: сгруппируйте в фотошопе слои с маркерами, потом кликните правой кнопкой мыши на группе и выберите Copy CSS (не знаю как на русский перевели, видимо "копировать CSS", ваш кэп ).

Я думаю что делать дальше вы разберетесь, но на случай если кто ни будь из новичков наткнется на этот пост под спойлером описан порядок дальнейших действий.

Потом вставьте полученый CSS код в ваш редактор. CSS селекторы будут обзыватся по имени ваших слоев (судя по скриншоту - слой_1, слой_2 и т.п.), переименуете их во что вам угодно будет ( marker_1, например ):

.marker_1 {  background-image: url("images/слой 1.png");  position: absolute;  left: 208px;  top: 41px;  width: 172px;  height: 176px;  z-index: 1;}.marker_2 {  ...

Потом вам надо создать HTML разметку с блоками-маркерами. В SublimeText с помощью плагина Emmet сегенерируете 80 <div> элементов с классами marker и marker_х:

div.marker.marker_$*80

В CSS классу marker дадите общие для всех маркеров свойства, а у всех индивидуальных стилей (marker_1, marker_2 и т.п.) эти свойства удалите:

.marker {  position: absolute;  background-image: url(путь_к_картинке);  z-index: 1;}.marker_1 {   left: ___px;  top: ___px;  width: ___px;  height: ___px;}.marker_2 {  ...

Ну и, естественно, не забудьте родительскому блоку задать:

position: relative;

Edited August 10, 2014 by ows.nightwolf

[swandev]

Я так понял эта фишка есть только в Adobe Photoshop CC? Жаль(

 

Cделал с помощью adobe parfait, все же  быстрее чем с фотошопа вручную

Edited August 10, 2014 by ALEEX SWN

[ows.nightwolf]

Вау! спасибо, parfait очень удобная вещь на первый взгляд. очень удобно образмеривать все.