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

  • Автор темы Автор темы shadowbat
  • Дата начала Дата начала
Статус
Закрыто для дальнейших ответов.
Так вы ж, вроде, в сообщении #16 написали что получилось?
получилось сохранить png в raw, чтобы raw потом открылся фотошопом
без альфаканала

Что именно неясно по первым трем пунктам?
Как в фотошопе файл создать и сохранить????
частично да.
1) Создаем в фотошопе RGB файл 20x20 (я так понимаю, размер не критичен) с альфаканалом.
при создании файла нет слова "альфаканал" (да, я никогда не работал с альфаканалами в фотошопе)
f01.png
пока что в каналах создал новый канал - он получился Альфа 1 (вверх не перетаскивается)
f02.png
2) Конвертируем в мультиканал, альфаканал ставим на первое место (перед Red)
если нажать Изображение - Режим - Многоканальный - Выполнить сведение - Да
то Альфа канал можно таскать вверх вниз, но и Red пропал. вместо него голубой, пурпурный желтый
f03.png
 
Red пропал. вместо него голубой, пурпурный желтый
Ну так и фиг с ним, вам шашечки, или ехать? '))'
У вас четыре условных канала, альфа на первом месте, следующие - RGB
Сохраняете как RAW и далее по пунктам
 
  • Спасибо
Реакции: shadowbat
Сохраняете как RAW
поставил на всех слоях "глазики"
f04.png

3) Сохраняем как RAW Interlaced
при сохранении галочки обе нужны? "Альфа-каналы" и "Плашечные цвета"
f05.png
и далее "по пикселям"?
f06.png

слов "Interlaced" или "чересстрочно" нет при сохранении
 
Последнее редактирование:
  • Спасибо
Реакции: shadowbat
4) Чтобы не ставить лишнюю прогу лезем на онлайн конвертер и скармливаем ему наш RAW, конвертируя в режиме HEX
открываю raw в HEX редакторе, копирую
вставляю на сайт, он выдает результат только в цифрах, без буквенных значений
f07.png
 
открываю raw в HEX редакторе, копирую
вставляю на сайт, он выдает результат только в цифрах, без буквенных значений
Вставлять надо файл (там кнопочка загрузки есть), в верхнем окне у вас уже готовый результат. ;)
Причем, судя по коду, альфаканал у вас нулевой, а это неправильно, изображение пустое будет (прозрачное)
Альфаканал должен быть белый для непрозрачных мест, а для прозрачных черный
 
  • Спасибо
Реакции: shadowbat
Вставлять надо файл (там кнопочка загрузки есть), в верхнем окне у вас уже готовый результат.
а ну значит просто RAW файл в HEX виде нужен
Причем, судя по коду, альфаканал у вас нулевой, а это неправильно, изображение пустое будет (прозрачное)
да, действительно кнопка появилась полностью пустая-прозрачная
Альфаканал должен быть белый для непрозрачных мест, а для прозрачных черный
что было неправильно в алгоритме создания файла?
 
upload_2016-1-7_14-8-18.png
 
  • Спасибо
Реакции: shadowbat
у меня неправильно был создан альфа-канал
другой алгоритм:
открыть png - каналы - кликнуть на RGB - кликнуть на кружочек - кликнуть на прямоугольник
ff03.png
дальше по предыдущей схеме: мнококанальный - альфу вверх - сохраняем raw - получаем hex
только при таком созданном png кнопка получается значительно бледнее, чем из jpg
png
ff01.png
jpg
ff02.png


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


это уже технические детали. в любом случае способ рабочий для 20 x 20 png.
_MBK_ огромное спасибо за помощь и пошаговые объяснения!
 
Последнее редактирование:
кликнуть на кружочек
По человечески это называется "выделить изображение" '))'
кликнуть на прямоугольник
По человечески это называется "создать канал из выделения" '))'
Я думаю, суть происходящего вы уже ухватили - смысл альфаканала в том, что в черных местах фон просвечивает под изображением, а в белых - нет. И чем светлее канал, тем изображение непрозрачнее.
только при таком созданном png кнопка получается значительно бледнее, чем из jpg
Видимо, белый цвет на альфаканале "недостаточно белый" т е кнопка полупрозрачная.
В любом случае, если хотите полностью непрозрачную кнопку, делайте альфаканал чисто белым
 
  • Спасибо
Реакции: shadowbat
В любом случае, если хотите полностью непрозрачную кнопку, делайте альфаканал чисто белым
о, получился яркий png
ff05.png

Код:
FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF9F9FFFFF3F3FFFFE7E7FFFFE7E7FFFFE7E7FFFFE7E7FFFFF3F3FFFFF9F9FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF3F3FFFFDCDCFFFFD4D4FFFFCACAFFFFC0C0FFFFC0C0FFFFCACAFFFFD4D4FFFFDCDCFFFFF3F3FFFFF9F9FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF3F3FFFFDCDCFFFFCFCFFFFFB0B0FFFF9C9CFFFF8787FFFF7E7EFFFF8383FFFF9292FFFF9F9FFFFFBCBCFFFFD4D4FFFFE7E7FFFFF3F3FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF9F9FFFFDCDCFFFFC0C0FFFF9595FFFF6F6FFFFF5353FFFF4242FFFF3C3CFFFF3C3CFFFF4A4AFFFF6363FFFF8383FFFFA8A8FFFFCACAFFFFE7E7FFFFF9F9FFFFFFFFFFFFFFFFFFFFFFFFFFFFF9F9FFFFDCDCFFFFC0C0FFFF8E8EFFFF5959FFFF3838FFFF1F1FFFFF1616FFFF1111FFFF1212FFFF1919FFFF2929FFFF4747FFFF7575FFFFA4A4FFFFCACAFFFFEDEDFFFFFFFFFFFFFFFFFFFFFFFFFFFFE7E7FFFFCACAFFFF9898FFFF5C5CFFFF2D2DFFFF1515FFFF0909FFFF0707FFFF0606FFFF0606FFFF0707FFFF0D0DFFFF1E1EFFFF4141FFFF7878FFFFB0B0FFFFD4D4FFFFF3F3FFFFFFFFFFFFF9F9FFFFDCDCFFFFB0B0FFFF7272FFFF3838FFFF1414FFFF0808FFFF0606FFFF0505FFFF0505FFFF0505FFFF0606FFFF0606FFFF0C0CFFFF1F1FFFFF5050FFFF9292FFFFCACAFFFFEDEDFFFFFFFFFFFFF3F3FFFFD4D4FFFF9898FFFF5555FFFF1F1FFFFF0909FFFF0606FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0606FFFF1111FFFF3838FFFF7878FFFFB8B8FFFFE7E7FFFFF9F9FFFFE7E7FFFFCACAFFFF8A8AFFFF4545FFFF1616FFFF0707FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0606FFFF0B0BFFFF2626FFFF6363FFFFABABFFFFDCDCFFFFF3F3FFFFE7E7FFFFC0C0FFFF8181FFFF3B3BFFFF1111FFFF0606FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0606FFFF0909FFFF1F1FFFFF5C5CFFFFA3A3FFFFD4D4FFFFF3F3FFFFE7E7FFFFC0C0FFFF8383FFFF3D3DFFFF1212FFFF0606FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0606FFFF0909FFFF2222FFFF5D5DFFFFA4A4FFFFD4D4FFFFF3F3FFFFE7E7FFFFCACAFFFF9292FFFF4A4AFFFF1919FFFF0707FFFF0606FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0505FFFF0606FFFF0C0CFFFF2A2AFFFF6868FFFFA8A8FFFFD4D4FFFFF3F3FFFFF3F3FFFFD4D4FFFF9F9FFFFF6060FFFF2929FFFF0D0DFFFF0606FFFF0606FFFF0505FFFF0505FFFF0505FFFF0505FFFF0606FFFF0707FFFF1717FFFF3F3FFFFF7E7EFFFFC0C0FFFFE7E7FFFFF9F9FFFFFFFFFFFFE7E7FFFFBCBCFFFF8383FFFF4747FFFF1E1EFFFF0C0CFFFF0606FFFF0606FFFF0606FFFF0606FFFF0606FFFF0808FFFF1111FFFF2D2DFFFF6161FFFF9B9BFFFFD4D4FFFFF3F3FFFFFFFFFFFFFFFFFFFFF3F3FFFFD4D4FFFFACACFFFF7272FFFF3F3FFFFF1F1FFFFF1111FFFF0B0BFFFF0909FFFF0909FFFF0C0CFFFF1717FFFF2D2DFFFF5555FFFF8E8EFFFFBCBCFFFFE7E7FFFFF9F9FFFFFFFFFFFFFFFFFFFFFFFFFFFFEDEDFFFFCFCFFFFFA8A8FFFF7878FFFF4F4FFFFF3535FFFF2828FFFF1F1FFFFF2222FFFF2A2AFFFF3F3FFFFF5D5DFFFF8D8DFFFFB4B4FFFFDCDCFFFFF3F3FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF9F9FFFFE7E7FFFFCFCFFFFFB4B4FFFF9494FFFF7676FFFF6161FFFF5959FFFF5D5DFFFF6B6BFFFF8181FFFF9F9FFFFFC0C0FFFFD7D7FFFFEDEDFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFEDEDFFFFDCDCFFFFCACAFFFFB8B8FFFFA8A8FFFFA4A4FFFF9F9FFFFFABABFFFFC0C0FFFFCFCFFFFFE7E7FFFFF3F3FFFFF9F9FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF3F3FFFFF3F3FFFFE2E2FFFFD7D7FFFFD4D4FFFFD4D4FFFFDCDCFFFFE7E7FFFFEDEDFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF9F9FFFFF3F3FFFFF3F3FFFFF3F3FFFFF9F9FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF

нужно было просто выделить всё изображение целиком (вместо кружочка) и создать альфа канал на прямоугольник
ff06.png
в самый первый раз в сообщении #21 я не выделял ничего, поэтому весь альфа канал получился черным

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

_MBK_ спасибо!
d1a1d3762dab72cd0733fac6df5.gif
 
Последнее редактирование:
нужно было просто выделить всё изображение целиком (вместо кружочка) и создать альфа канал на прямоугольник
Ну я ж говорил, это можно было сделать еще проще - выделить альфаканал и залить его чистым белым цветом
Но, не забывайте, что в этом случае, иконка будет полностью непрозрачной, то есть, если вокруг нее цвет панели будет не белый (а, скажем, серый, как обычно делают) то белая окантовка кнопки на этом фоне будет выделяться чужеродным пятном
 
  • Спасибо
Реакции: shadowbat
Статус
Закрыто для дальнейших ответов.