пользовательская js кнопка с иконкой

[shadowbat]

Так вы ж, вроде, в сообщении #16 написали что получилось?

получилось сохранить png в raw, чтобы raw потом открылся фотошопом
без альфаканала

Что именно неясно по первым трем пунктам?
Как в фотошопе файл создать и сохранить????

частично да.

1) Создаем в фотошопе RGB файл 20x20 (я так понимаю, размер не критичен) с альфаканалом.

при создании файла нет слова "альфаканал" (да, я никогда не работал с альфаканалами в фотошопе)

пока что в каналах создал новый канал - он получился Альфа 1 (вверх не перетаскивается)

2) Конвертируем в мультиканал, альфаканал ставим на первое место (перед Red)

если нажать Изображение - Режим - Многоканальный - Выполнить сведение - Да
то Альфа канал можно таскать вверх вниз, но и Red пропал. вместо него голубой, пурпурный желтый

 

[_MBK_]

Red пропал. вместо него голубой, пурпурный желтый

Ну так и фиг с ним, вам шашечки, или ехать?
У вас четыре условных канала, альфа на первом месте, следующие - RGB
Сохраняете как RAW и далее по пунктам

 

[shadowbat]

Сохраняете как RAW

поставил на всех слоях "глазики"

3) Сохраняем как RAW Interlaced

при сохранении галочки обе нужны? "Альфа-каналы" и "Плашечные цвета"

и далее "по пикселям"?


слов "Interlaced" или "чересстрочно" нет при сохранении

 

[_MBK_]

при сохранении галочки обе нужны? "Альфа-каналы" и "Плашечные цвета"

и далее "по пикселям"?

В вашей локализации по обоим пунктам ДА

 

[shadowbat]

4) Чтобы не ставить лишнюю прогу лезем на онлайн конвертер и скармливаем ему наш RAW, конвертируя в режиме HEX

открываю raw в HEX редакторе, копирую
вставляю на сайт, он выдает результат только в цифрах, без буквенных значений

 

[_MBK_]

открываю raw в HEX редакторе, копирую
вставляю на сайт, он выдает результат только в цифрах, без буквенных значений

Вставлять надо файл (там кнопочка загрузки есть), в верхнем окне у вас уже готовый результат.
Причем, судя по коду, альфаканал у вас нулевой, а это неправильно, изображение пустое будет (прозрачное)
Альфаканал должен быть белый для непрозрачных мест, а для прозрачных черный

 

[shadowbat]

Вставлять надо файл (там кнопочка загрузки есть), в верхнем окне у вас уже готовый результат.

а ну значит просто RAW файл в HEX виде нужен

Причем, судя по коду, альфаканал у вас нулевой, а это неправильно, изображение пустое будет (прозрачное)

да, действительно кнопка появилась полностью пустая-прозрачная

Альфаканал должен быть белый для непрозрачных мест, а для прозрачных черный

что было неправильно в алгоритме создания файла?

 

[_MBK_]

 

[shadowbat]

у меня неправильно был создан альфа-канал
другой алгоритм:
открыть png - каналы - кликнуть на RGB - кликнуть на кружочек - кликнуть на прямоугольник

дальше по предыдущей схеме: мнококанальный - альфу вверх - сохраняем raw - получаем hex
только при таком созданном png кнопка получается значительно бледнее, чем из jpg
png

jpg

другой алгоритм:
открыть png - каналы - кликнуть на RGB - кликнуть на кружочек - кликнуть правой кнопкой по изображению - Инверсия выделенной области - кликнуть на прямоугольник
инвертированный png получается чуть ярче, но не такой как jpg
png

png инв

jpg

это уже технические детали. в любом случае способ рабочий для 20 x 20 png.
_MBK_ огромное спасибо за помощь и пошаговые объяснения!

 

[_MBK_]

кликнуть на кружочек

По человечески это называется "выделить изображение"

кликнуть на прямоугольник

По человечески это называется "создать канал из выделения"
Я думаю, суть происходящего вы уже ухватили - смысл альфаканала в том, что в черных местах фон просвечивает под изображением, а в белых - нет. И чем светлее канал, тем изображение непрозрачнее.

только при таком созданном png кнопка получается значительно бледнее, чем из jpg

Видимо, белый цвет на альфаканале "недостаточно белый" т е кнопка полупрозрачная.
В любом случае, если хотите полностью непрозрачную кнопку, делайте альфаканал чисто белым

 

[shadowbat]

В любом случае, если хотите полностью непрозрачную кнопку, делайте альфаканал чисто белым

о, получился яркий png

FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF9F9FFFFF3F3FFFFE7E7FFFFE7E7FFFFE7E7FFFFE7E7FFFFF3F3FFFFF9F9FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF3F3FFFFDCDCFFFFD4D4FFFFCACAFFFFC0C0FFFFC0C0FFFFCACAFFFFD4D4FFFFDCDCFFFFF3F3FFFFF9F9FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF3F3FFFFDCDCFFFFCFCFFFFFB0B0FFFF9C9CFFFF8787FFFF7E7EFFFF8383FFFF9292FFFF9F9FFFFFBCBCFFFFD4D4FFFFE7E7FFFFF3F3FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF9F9FFFFDCDCFFFFC0C0FFFF9595FFFF6F6FFFFF5353FFFF4242FFFF3C3CFFFF3C3CFFFF4A4AFFFF6363FFFF8383FFFFA8A8FFFFCACAFFFFE7E7FFFFF9F9FFFFFFFFFFFFFFFFFFFFFFFFFFFFF9F9FFFFDCDCFFFFC0C0FFFF8E8EFFFF5959FFFF3838FFFF1F1FFFFF1616FFFF1111FFFF1212FFFF1919FFFF2929FFFF4747FFFF7575FFFFA4A4FFFFCACAFFFFEDEDFFFFFFFFFFFFFFFFFFFFFFFFFFFFE7E7FFFFCACAFFFF9898FFFF5C5CFFFF2D2DFFFF1515FFFF0909FFFF0707FFFF0606FFFF0606FFFF0707FFFF0D0DFFFF1E1EFFFF4141FFFF7878FFFFB0B0FFFFD4D4FFFFF3F3FFFFFFFFFFFFF9F9FFFFDCDCFFFFB0B0FFFF7272FFFF3838FFFF1414FFFF0808FFFF0606FFFF0505FFFF0505FFFF0505FFFF0606FFFF0606FFFF0C0CFFFF1F1FFFFF5050FFFF9292FFFFCACAFFFFEDEDFFFFFFFFFFFFF3F3FFFFD4D4FFFF9898FFFF5555FFFF1F1FFFFF0909FFFF0606FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0606FFFF1111FFFF3838FFFF7878FFFFB8B8FFFFE7E7FFFFF9F9FFFFE7E7FFFFCACAFFFF8A8AFFFF4545FFFF1616FFFF0707FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0606FFFF0B0BFFFF2626FFFF6363FFFFABABFFFFDCDCFFFFF3F3FFFFE7E7FFFFC0C0FFFF8181FFFF3B3BFFFF1111FFFF0606FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0606FFFF0909FFFF1F1FFFFF5C5CFFFFA3A3FFFFD4D4FFFFF3F3FFFFE7E7FFFFC0C0FFFF8383FFFF3D3DFFFF1212FFFF0606FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0606FFFF0909FFFF2222FFFF5D5DFFFFA4A4FFFFD4D4FFFFF3F3FFFFE7E7FFFFCACAFFFF9292FFFF4A4AFFFF1919FFFF0707FFFF0606FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0606FFFF0C0CFFFF2A2AFFFF6868FFFFA8A8FFFFD4D4FFFFF3F3FFFFF3F3FFFFD4D4FFFF9F9FFFFF6060FFFF2929FFFF0D0DFFFF0606FFFF0606FFFF0505FFFF0505FFFF0505FFFF0505FFFF0606FFFF0707FFFF1717FFFF3F3FFFFF7E7EFFFFC0C0FFFFE7E7FFFFF9F9FFFFFFFFFFFFE7E7FFFFBCBCFFFF8383FFFF4747FFFF1E1EFFFF0C0CFFFF0606FFFF0606FFFF0606FFFF0606FFFF0606FFFF0808FFFF1111FFFF2D2DFFFF6161FFFF9B9BFFFFD4D4FFFFF3F3FFFFFFFFFFFFFFFFFFFFF3F3FFFFD4D4FFFFACACFFFF7272FFFF3F3FFFFF1F1FFFFF1111FFFF0B0BFFFF0909FFFF0909FFFF0C0CFFFF1717FFFF2D2DFFFF5555FFFF8E8EFFFFBCBCFFFFE7E7FFFFF9F9FFFFFFFFFFFFFFFFFFFFFFFFFFFFEDEDFFFFCFCFFFFFA8A8FFFF7878FFFF4F4FFFFF3535FFFF2828FFFF1F1FFFFF2222FFFF2A2AFFFF3F3FFFFF5D5DFFFF8D8DFFFFB4B4FFFFDCDCFFFFF3F3FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF9F9FFFFE7E7FFFFCFCFFFFFB4B4FFFF9494FFFF7676FFFF6161FFFF5959FFFF5D5DFFFF6B6BFFFF8181FFFF9F9FFFFFC0C0FFFFD7D7FFFFEDEDFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFEDEDFFFFDCDCFFFFCACAFFFFB8B8FFFFA8A8FFFFA4A4FFFF9F9FFFFFABABFFFFC0C0FFFFCFCFFFFFE7E7FFFFF3F3FFFFF9F9FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF3F3FFFFF3F3FFFFE2E2FFFFD7D7FFFFD4D4FFFFD4D4FFFFDCDCFFFFE7E7FFFFEDEDFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF9F9FFFFF3F3FFFFF3F3FFFFF3F3FFFFF9F9FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF

нужно было просто выделить всё изображение целиком (вместо кружочка) и создать альфа канал на прямоугольник

в самый первый раз в сообщении #21 я не выделял ничего, поэтому весь альфа канал получился черным

по-хорошему нужно выделять всё значимое изображение без прозрачного фона и после выделения создать альфа-канал.
или магической палочкой выделить только фон, инвертировать и создать альфа канал
яркий 20х20 png прозрачный:

00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF1FFFF9F9FFFFF3F3FFFFE7E7FFFFE7E7FFFFE7E7FFFFE7E7FFFFF3F328FFF9F900FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF3DFFF3F3B8FFDCDCFFFFD4D4FFFFCACAFFFFC0C0FFFFC0C0FFFFCACAFFFFD4D4F2FFDCDC51FFF3F328FFF9F900FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF3DFFF3F3B8FFDCDCF5FFCFCFFFFFB0B0FFFF9C9CFFFF8787FFFF7E7EFFFF8383FFFF9292FFFF9F9FFFFFBCBCFFFFD4D4A1FFE7E751FFF3F300FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF1FFFF9F9B8FFDCDCFFFFC0C0FFFF9595FFFF6F6FFFFF5353FFFF4242FFFF3C3CFFFF3C3CFFFF4A4AFFFF6363FFFF8383FFFFA8A8FFFFCACAA1FFE7E728FFF9F900FFFFFF00FFFFFF00FFFFFF1FFFF9F9B8FFDCDCFFFFC0C0FFFF8E8EFFFF5959FFFF3838FFFF1F1FFFFF1616FFFF1111FFFF1212FFFF1919FFFF2929FFFF4747FFFF7575FFFFA4A4FFFFCACA79FFEDED00FFFFFF00FFFFFF00FFFFFF7AFFE7E7FFFFCACAFFFF9898FFFF5C5CFFFF2D2DFFFF1515FFFF0909FFFF0707FFFF0606FFFF0606FFFF0707FFFF0D0DFFFF1E1EFFFF4141FFFF7878FFFFB0B0FFFFD4D451FFF3F300FFFFFF1FFFF9F9B8FFDCDCFFFFB0B0FFFF7272FFFF3838FFFF1414FFFF0808FFFF0606FFFF0505FFFF0505FFFF0505FFFF0606FFFF0606FFFF0C0CFFFF1F1FFFFF5050FFFF9292FFFFCACA79FFEDED00FFFFFFFFFFF3F3FFFFD4D4FFFF9898FFFF5555FFFF1F1FFFFF0909FFFF0606FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0606FFFF1111FFFF3838FFFF7878FFFFB8B8A1FFE7E728FFF9F9FFFFE7E7FFFFCACAFFFF8A8AFFFF4545FFFF1616FFFF0707FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0606FFFF0B0BFFFF2626FFFF6363FFFFABABFFFFDCDCFFFFF3F3FFFFE7E7FFFFC0C0FFFF8181FFFF3B3BFFFF1111FFFF0606FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0606FFFF0909FFFF1F1FFFFF5C5CFFFFA3A3FFFFD4D4FFFFF3F3FFFFE7E7FFFFC0C0FFFF8383FFFF3D3DFFFF1212FFFF0606FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0606FFFF0909FFFF2222FFFF5D5DFFFFA4A4FFFFD4D4FFFFF3F3FFFFE7E7FFFFCACAFFFF9292FFFF4A4AFFFF1919FFFF0707FFFF0606FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0606FFFF0C0CFFFF2A2AFFFF6868FFFFA8A8FFFFD4D4FFFFF3F33DFFF3F3E0FFD4D4FFFF9F9FFFFF6060FFFF2929FFFF0D0DFFFF0606FFFF0606FFFF0505FFFF0505FFFF0505FFFF0505FFFF0606FFFF0707FFFF1717FFFF3F3FFFFF7E7EFFFFC0C092FFE7E724FFF9F900FFFFFF7AFFE7E7FFFFBCBCFFFF8383FFFF4747FFFF1E1EFFFF0C0CFFFF0606FFFF0606FFFF0606FFFF0606FFFF0606FFFF0808FFFF1111FFFF2D2DFFFF6161FFFF9B9BFFFFD4D449FFF3F300FFFFFF00FFFFFF3DFFF3F3E0FFD4D4FFFFACACFFFF7272FFFF3F3FFFFF1F1FFFFF1111FFFF0B0BFFFF0909FFFF0909FFFF0C0CFFFF1717FFFF2D2DFFFF5555FFFF8E8EFFFFBCBC92FFE7E724FFF9F900FFFFFF00FFFFFF00FFFFFF5CFFEDEDFFFFCFCFFFFFA8A8FFFF7878FFFF4F4FFFFF3535FFFF2828FFFF1F1FFFFF2222FFFF2A2AFFFF3F3FFFFF5D5DFFFF8D8DFFFFB4B4DBFFDCDC49FFF3F300FFFFFF00FFFFFF00FFFFFF00FFFFFF1FFFF9F97AFFE7E7F5FFCFCFFFFFB4B4FFFF9494FFFF7676FFFF6161FFFF5959FFFF5D5DFFFF6B6BFFFF8181FFFF9F9FFFFFC0C0FFFFD7D76DFFEDED00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF5CFFEDEDB8FFDCDCFFFFCACAFFFFB8B8FFFFA8A8FFFFA4A4FFFF9F9FFFFFABABFFFFC0C0FFFFCFCF92FFE7E749FFF3F324FFF9F900FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF3DFFF3F33DFFF3F399FFE2E2FFFFD7D7FFFFD4D4FFFFD4D4DBFFDCDC92FFE7E76DFFEDED00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF1FFFF9F9FFFFF3F3FFFFF3F3FFFFF3F324FFF9F900FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF

_MBK_ спасибо!

 

[_MBK_]

нужно было просто выделить всё изображение целиком (вместо кружочка) и создать альфа канал на прямоугольник

Ну я ж говорил, это можно было сделать еще проще - выделить альфаканал и залить его чистым белым цветом
Но, не забывайте, что в этом случае, иконка будет полностью непрозрачной, то есть, если вокруг нее цвет панели будет не белый (а, скажем, серый, как обычно делают) то белая окантовка кнопки на этом фоне будет выделяться чужеродным пятном