да понятно что ссылка, но заменить “span” на “a” или на класс труда ведь не составит 
2 лайка
как вариант можно вручную добавить два варианта картинок в самом ФШ и выводить их спрайтами, тут больше сложностей с перерисовкой будет чем со спрайтами
хотя если помучится то все получится
))) Боюсь, что это выходит за рамки моих знаний ФШ на данном этапе. Какие 2 варианта картинок и как их куда добавлять - пока что китайская грамота )))
Еще один вариант подходит для ваших иконок( при этом можно оставить png). Можно поиграть с прозрачностью. Изначально выставить к примеру 0.6, а при наведении менять на 1.
1 лайк
смотрите - у Вас есть три варианта состоянии кнопки (они все даны на примере твиттера)
обычное состояние, состоянии при :hover (фон светлее) и состояние при нажатии (добавляется внутренняя тень, меняется ли фон не могу разобрать)
дорисовываем для оставшихся кнопок эти состояния (hover и active)
у меня с фотошопом примерно такие же отношения как и у Вас, но попробую объяснить.
Со сменой фона все просто, заливаем внутренности кружка нужным цветом и все(надеюсь этого хватит), а вот с добавлением тени я бы поступил так: выделяем кнопку внешней окружности, копируем ее в новый слой (назовем его слой 1), заполняем внутреннюю часть цветом тени, копируем внутреннюю часть исходной кнопки в новый слой (пусть будет слой 2), накладываем слой 2 на слой 1, смещаем на нужную высоту для получения нужной толщины тени, затем выделяем внутренний рисунок и поднимаем его по центру), в конце обрезаем то что у нас вышло за границы.
Ну как то так. Звучит страшно, но на самом деле не настолько сложно. Да способ топорный, но должно сработать.
А вообще рекомендовал бы поискать видео уроки по ФШ, ну или забить и пользоваться svg иконками и шрифтами по ссылке выше
Хотя если изображения на кнопках прозрачные, то тут немного посложнее будет, так что уроки по ФШ все равно придется смотреть, пускай и не все сразу, а по мере возникновения вопросов как сделать то или иное.
Хорошо, спасибо за пояснение )
кстати для верстки есть одна обалденная штука adobe assets называется.
во многом заменяет ФШ, и сильно облегчает жизнь, загружаем туда наш макет, выбираем Extract и там смотрим все шрифты, цвета, размеры, расстояния, марджины, паддинги и тд и тп, сразу можно копировать и код css нужного объекта, единственно что бывает с размерами шрифтов ошибается выдает например 14.77 px
1 лайк
А он платный, как и сам ФШ?
Да, обратите внимание на Adobe Creative Cloud (Assets). Отличный инструмент, как и Avocode.
Помню, в прошлом году вкладку Extract ликвидировали. Видимо, всё снова доступно.
Спасибо @AlexZaw за наводку
1 лайк
А ведь Вы правы!! И как это я не заметил, что в ФШ-макете на изначальных картинках стоит непрозрачность 80%! Самое лёгкое решение… Зря только такое огромное обсуждение затеял, ларчик ведь просто открывался!
нет, эта функция там бесплатна, будем надеется что так и останется
ps:прошу прощения за столь долгий ответ, просто вчера вылезло оповещение о лимите на создание сообщений.
Понятно, спасибо! Не страшно - это ж не экстренный вопрос был. Очень Вам тоже благодарен за помощь!
А не проще сохранить эти изображения с прозрачным фоном и изменять цвет фона с помощью CSS?
в принципе проще, только если центральное изображение на кнопке само не является прозрачным
Именно так они и сохранены. А как изменять цвет фона с помощью CSS? Рисунок в центре (птичка/буквы) прозрачны. Если изменить background-color этого изображения на белый, например, как требуется при наведении, центральный рисунок закроется тоже.
тогда только перерисовывать в фотошопе состояние для hover и в CSS при нажатии добавлять тень например вот так https://jsfiddle.net/AlexZaw/q4cuzykL/
Ага, благодарю.)
Мне кажется,что дизайнер не стал бы делать кнопки,которые нужно перерисовывать разработчику.Это очень глупо.
Думаю, этот форум для того, чтобы каждый мог по мере сил и возможностей помочь советом, а не давать оценки тому или иному мнению. Да, я не обратил внимание на то, что в макете был изменён параметр прозрачности. Поэтому участники - кто желал и мог - предложили мне разные варианты на выбор. За что я им очень благодарен и мой кругозор расширен - на будущее.
1 лайк