Иконки Π² 1Π‘:ΠŸΡ€Π΅Π΄ΠΏΡ€ΠΈΡΡ‚ΠΈΠ΅ β€” это Π½Π΅ просто ΡƒΠΊΡ€Π°ΡˆΠ΅Π½ΠΈΠ΅ интСрфСйса, Π° Π²Π°ΠΆΠ½Ρ‹ΠΉ элСмСнт удобства Ρ€Π°Π±ΠΎΡ‚Ρ‹. Они ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ быстрСС ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² систСмС, ΡΠΎΠΊΡ€Π°Ρ‰Π°ΡŽΡ‚ врСмя поиска Π½ΡƒΠΆΠ½Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΈ Π΄Π΅Π»Π°ΡŽΡ‚ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ. Однако ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΈ администраторы ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°ΡŽΡ‚ΡΡ с трудностями ΠΏΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ: Π³Π΄Π΅ ΠΈΡ… Π²Π·ΡΡ‚ΡŒ, Π² ΠΊΠ°ΠΊΠΎΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΏΡ€ΠΈΠ²ΡΠ·Π°Ρ‚ΡŒ ΠΊ элСмСнтам управлСния?

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ Ρ€Π°Π·Π±Π΅Ρ€Ρ‘ΠΌ всС этапы β€” ΠΎΡ‚ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΊΠΈ графичСского Ρ„Π°ΠΉΠ»Π° Π΄ΠΎ тСстирования отобраТСния Π² Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π΅ΠΆΠΈΠΌΠ°Ρ… 1Π‘. Π’Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ, ΠΊΠ°ΠΊ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ распространённых ошибок ΠΈ Π³Π΄Π΅ Π½Π°ΠΉΡ‚ΠΈ бСсплатныС ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ для ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹. ОсобоС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡƒΠ΄Π΅Π»ΠΈΠΌ нюансам Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΠšΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ‚ΠΎΡ€ΠΎΠΌ ΠΈ УправляСмым ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ процСсс ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π°Ρ‚ΡŒΡΡ Π² зависимости ΠΎΡ‚ вСрсии ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹.

Если Π²Ρ‹ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ с Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ Π² 1Π‘, Π½Π΅ ΠΏΠ΅Ρ€Π΅ΠΆΠΈΠ²Π°ΠΉΡ‚Π΅ β€” инструкция Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Π½Π° для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ². ΠžΠΏΡ‹Ρ‚Π½Ρ‹Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Π½Π°ΠΉΠ΄ΡƒΡ‚ здСсь ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Π΅ Π»Π°ΠΉΡ„Ρ…Π°ΠΊΠΈ ΠΏΠΎ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ для высоких Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ экрана ΠΈ совСты ΠΏΠΎ ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ с внСшними Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°ΠΌΠΈ.

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ, ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Ρƒ вас Π΅ΡΡ‚ΡŒ ΠΏΡ€Π°Π²Π° Π½Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ. Если Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ Π² ΠΊΠ»ΠΈΠ΅Π½Ρ‚-сСрвСрном Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π΅, ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚ΡŒΡΡ согласованиС с администратором Π±Π°Π·Ρ‹ Π΄Π°Π½Π½Ρ‹Ρ….

1. КакиС Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ 1Π‘?

ΠŸΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ° 1Π‘:ΠŸΡ€Π΅Π΄ΠΏΡ€ΠΈΡΡ‚ΠΈΠ΅ 8 Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΌ Π½Π°Π±ΠΎΡ€ΠΎΠΌ графичСских Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ². Основной ΠΈ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΡ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ β€” PNG с ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒΡŽ (alpha-channel). Он обСспСчиваСт Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π΅ качСство ΠΏΡ€ΠΈ минимальном вСсС Ρ„Π°ΠΉΠ»Π° ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΏΠΎΠ»ΡƒΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΊΡ€ΠΈΡ‚ΠΈΡ‡Π½ΠΎ для Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ интСрфСйса.

Π’Π°ΠΊΠΆΠ΅ Π΄ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ:

  • πŸ–ΌοΈ BMP β€” Π±Π΅Π· сТатия, ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для простых ΠΈΠΊΠΎΠ½ΠΎΠΊ Π±Π΅Π· прозрачности (Π½Π΅ рСкомСндуСтся для соврСмСнных ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΉ).
  • 🎨 JPEG β€” Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΈΠΊΠΎΠ½ΠΎΠΊ Π±Π΅Π· ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠ³ΠΎ Ρ„ΠΎΠ½Π° (ΠΌΠΎΠΆΠ΅Ρ‚ Π΄Π°Π²Π°Ρ‚ΡŒ Π°Ρ€Ρ‚Π΅Ρ„Π°ΠΊΡ‚Ρ‹ ΠΏΡ€ΠΈ сТатии).
  • πŸ–₯️ ICO β€” ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚, поддСрТиваСтся для совмСстимости со старыми вСрсиями.

Π Π°Π·ΠΌΠ΅Ρ€ ΠΈΠΊΠΎΠ½ΠΎΠΊ зависит ΠΎΡ‚ области примСнСния:

  • πŸ“± 16Γ—16 px β€” для ΠΏΠ°Π½Π΅Π»Π΅ΠΉ инструмСнтов ΠΈ мСню.
  • πŸ–₯️ 32Γ—32 px β€” для ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ элСмСнтов Ρ„ΠΎΡ€ΠΌΡ‹.
  • πŸ“Ί 64Γ—64 px ΠΈ Π²Ρ‹ΡˆΠ΅ β€” для Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠ² ΠΈ Π±Π°Π½Π½Π΅Ρ€ΠΎΠ² (Π² УправляСмых Ρ„ΠΎΡ€ΠΌΠ°Ρ…).

Π’Π°ΠΆΠ½ΠΎ: начиная с ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹ 8.3.14, рСкомСндуСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² Π²Π΅ΠΊΡ‚ΠΎΡ€Π΅ (SVG) Ρ‡Π΅Ρ€Π΅Π· внСшниС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ, Π½ΠΎ Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ SVG Π² 1Π‘ ΠΏΠΎΠΊΠ° Π½Π΅Ρ‚. Для Π²Π΅ΠΊΡ‚ΠΎΡ€ΠΈΠ·Π°Ρ†ΠΈΠΈ придётся ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ SVG Π² PNG Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ.

πŸ“Š Какой Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π²Ρ‹ Ρ‡Π°Ρ‰Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Π² 1Π‘?
PNG
BMP
JPEG
ICO
Π”Ρ€ΡƒΠ³ΠΎΠΉ

2. Π“Π΄Π΅ Π²Π·ΡΡ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ для 1Π‘: бСсплатныС ΠΈ ΠΏΠ»Π°Ρ‚Π½Ρ‹Π΅ источники

Π‘ΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ с нуля β€” Π΄ΠΎΠ»Π³ΠΈΠΉ процСсс, поэтому Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ Π½Π°Π±ΠΎΡ€Ρ‹. Π’ΠΎΡ‚ ΠΏΡ€ΠΎΠ²Π΅Ρ€Π΅Π½Π½Ρ‹Π΅ источники:

БСсплатныС ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ:

  • 🌐 Material Design Icons β€” Π±ΠΎΠ»Π΅Π΅ 6000 ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΎΡ‚ Google, ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… для интСрфСйсов. МоТно ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π² PNG ΠΈΠ»ΠΈ SVG.
  • 🎨 Font Awesome β€” популярная Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎΠΉ Π»ΠΈΡ†Π΅Π½Π·ΠΈΠ΅ΠΉ (ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ условия использования для коммСрчСских ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ²!).
  • πŸ–ΌοΈ Flaticon β€” бСсплатныС ΠΈΠΊΠΎΠ½ΠΊΠΈ с ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ссылкой Π½Π° Π°Π²Ρ‚ΠΎΡ€Π° (Π΅ΡΡ‚ΡŒ платная вСрсия Π±Π΅Π· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ†ΠΈΠΈ).

ΠŸΠ»Π°Ρ‚Π½Ρ‹Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ:

  • πŸ’Ž Icons8 β€” Π±ΠΎΠ»Π΅Π΅ 150 000 ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² Π΅Π΄ΠΈΠ½ΠΎΠΌ стилС, Π΅ΡΡ‚ΡŒ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π°Π·Π΄Π΅Π» для бизнСс-ПО.
  • πŸ›’ Streamline Icons β€” Π½Π°Π±ΠΎΡ€Ρ‹ для ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… систСм, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ ΠΈΠΊΠΎΠ½ΠΊΠΈ для Π±ΡƒΡ…Π³Π°Π»Ρ‚Π΅Ρ€ΠΈΠΈ ΠΈ логистики.

Для 1Π‘ особСнно Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² стилС Metro UI ΠΈΠ»ΠΈ Flat Design β€” ΠΎΠ½ΠΈ Π»ΡƒΡ‡ΡˆΠ΅ Π²ΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ΡΡ Π² стандартный интСрфСйс ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹. Π˜Π·Π±Π΅Π³Π°ΠΉΡ‚Π΅ ΠΎΠ±ΡŠΡ‘ΠΌΠ½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ с тСнями ΠΈΠ»ΠΈ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°ΠΌΠΈ: ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‡ΡƒΠΆΠ΅Ρ€ΠΎΠ΄Π½ΠΎ.

⚠️ Π’Π½ΠΈΠΌΠ°Π½ΠΈΠ΅: ΠŸΡ€ΠΈ использовании бСсплатных ΠΈΠΊΠΎΠ½ΠΎΠΊ всСгда провСряйтС Π»ΠΈΡ†Π΅Π½Π·ΠΈΡŽ! НСкоторыС Π½Π°Π±ΠΎΡ€Ρ‹ Π·Π°ΠΏΡ€Π΅Ρ‰Π°ΡŽΡ‚ использованиС Π² коммСрчСских ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°Ρ… Π±Π΅Π· упоминания Π°Π²Ρ‚ΠΎΡ€Π°. Для ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΉ Π»ΡƒΡ‡ΡˆΠ΅ приобрСсти Π»ΠΈΡ†Π΅Π½Π·ΠΈΡŽ ΠΈΠ»ΠΈ Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½.
πŸ’‘

Если Π²Ρ‹ Π±Π΅Ρ€Ρ‘Ρ‚Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΠ· Ρ€Π°Π·Π½Ρ‹Ρ… Π½Π°Π±ΠΎΡ€ΠΎΠ², ΠΏΡ€ΠΈΠ²Π΅Π΄ΠΈΡ‚Π΅ ΠΈΡ… ΠΊ Π΅Π΄ΠΈΠ½ΠΎΠΌΡƒ ΡΡ‚ΠΈΠ»ΡŽ Π² графичСском Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² GIMP ΠΈΠ»ΠΈ Photoshop). Π Π°Π·Π½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€, Ρ†Π²Π΅Ρ‚ ΠΈΠ»ΠΈ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Π° Π»ΠΈΠ½ΠΈΠΉ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠΎΡ€Ρ‚ΠΈΡ‚ΡŒ внСшний Π²ΠΈΠ΄ интСрфСйса.

3. ΠŸΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΊΠ° ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΊ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ Π² 1Π‘

ΠŸΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΡƒ Π² ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΡŽ, Π΅Ρ‘ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΈΡ‚ΡŒ. Π’ΠΎΡ‚ ΠΏΠΎΡˆΠ°Π³ΠΎΠ²Ρ‹ΠΉ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ:

1. Π’Ρ‹Π±ΠΎΡ€ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΈ ΠΎΠ±Ρ€Π΅Π·ΠΊΠ°

Иконка Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½ΠΎΠΉ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, 32Γ—32 px). Если исходноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΎΠ΅, ΠΎΠ±Ρ€Π΅ΠΆΡŒΡ‚Π΅ Π΅Π³ΠΎ Π² графичСском Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, сохранив Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½Ρ‹ΠΉ элСмСнт. Для этого:

  • ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Paint.NET, GIMP ΠΈΠ»ΠΈ Photoshop.
  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ инструмСнт Crop (ΠšΠ°Π΄Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅) ΠΈ Π·Π°Π΄Π°ΠΉΡ‚Π΅ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹Π΅ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ.
  • Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ основной ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ ΠΈΠΊΠΎΠ½ΠΊΠΈ находится ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.

2. Настройка прозрачности

Для PNG-Ρ„Π°ΠΉΠ»ΠΎΠ²:

  • Π£Π΄Π°Π»ΠΈΡ‚Π΅ Ρ„ΠΎΠ½ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта Magic Wand (Π’ΠΎΠ»ΡˆΠ΅Π±Π½Π°Ρ ΠΏΠ°Π»ΠΎΡ‡ΠΊΠ°) ΠΈΠ»ΠΈ Background Eraser (Ластик Ρ„ΠΎΠ½Π°).
  • Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» с Π²ΠΊΠ»ΡŽΡ‡Ρ‘Π½Π½ΠΎΠΉ ΠΎΠΏΡ†ΠΈΠ΅ΠΉ Transparency (ΠŸΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ).

3. ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ Ρ†Π²Π΅Ρ‚Π°

Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½Ρ‹ΠΉ интСрфСйс 1Π‘ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΡƒΡŽ ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρƒ. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠΊΠΎΠ½ΠΊΠ° Π½Π΅ Π²Ρ‹Π±ΠΈΠ²Π°Π»Π°ΡΡŒ:

  • ΠŸΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°ΠΉΡ‚Π΅ΡΡŒ синих, Π·Π΅Π»Ρ‘Π½Ρ‹Ρ… ΠΈΠ»ΠΈ сСрых ΠΎΡ‚Ρ‚Π΅Π½ΠΊΠΎΠ² (ΠΊΠ°ΠΊ Π² стандартных ΠΈΠΊΠΎΠ½ΠΊΠ°Ρ… ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹).
  • Π˜Π·Π±Π΅Π³Π°ΠΉΡ‚Π΅ ярко-красного ΠΈΠ»ΠΈ ΠΆΡ‘Π»Ρ‚ΠΎΠ³ΠΎ β€” ΠΎΠ½ΠΈ Π°ΡΡΠΎΡ†ΠΈΠΈΡ€ΡƒΡŽΡ‚ΡΡ с ошибками ΠΈ прСдупрСТдСниями.

⚠️ Π’Π½ΠΈΠΌΠ°Π½ΠΈΠ΅: Если ΠΈΠΊΠΎΠ½ΠΊΠ° Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² Π’ΠΎΠ½ΠΊΠΎΠΌ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π΅ ΠΈΠ»ΠΈ Π’Π΅Π±-ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π΅, ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ Π΅Ρ‘ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Ρ‚Ρ‘ΠΌΠ½Ρ‹Ρ… Ρ‚Π΅ΠΌΠ°Ρ… оформлСния. НСкоторыС PNG с ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒΡŽ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ с Π±Π΅Π»Ρ‹ΠΌ ΠΎΡ€Π΅ΠΎΠ»ΠΎΠΌ!

ΠžΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ Π΄ΠΎ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° (16Γ—16, 32Γ—32 ΠΈ Ρ‚.Π΄.)|

Π£Π΄Π°Π»ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ (ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌ)|

Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ PNG с ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒΡŽ|

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Ρ€Π°ΡΡ‚Π½ΠΎΡΡ‚ΡŒ Π½Π° свСтлом ΠΈ Ρ‚Ρ‘ΠΌΠ½ΠΎΠΌ Ρ„ΠΎΠ½Π΅-->

4. Как Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΡƒ Π² ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ‚ΠΎΡ€ 1Π‘

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Ρ‘ΠΌ ΠΊ практичСской части. Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ΠΈΠΊΠΎΠ½ΠΊΠΈ происходит Ρ‡Π΅Ρ€Π΅Π· ΠšΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ‚ΠΎΡ€ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ рСдактирования. Π’ΠΎΡ‚ пошаговая инструкция:

Π¨Π°Π³ 1. ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΡŽ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ рСдактирования

ЗапуститС 1Π‘:ΠŸΡ€Π΅Π΄ΠΏΡ€ΠΈΡΡ‚ΠΈΠ΅ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ ΠšΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ‚ΠΎΡ€. Для этого:

  1. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π½ΡƒΠΆΠ½ΡƒΡŽ Π±Π°Π·Ρƒ Π² спискС.
  2. НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠšΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ‚ΠΎΡ€ (ΠΈΠ»ΠΈ ΡƒΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°ΠΉΡ‚Π΅ Shift ΠΏΡ€ΠΈ запускС).
  3. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ ΠΏΠ°Ρ€ΠΎΠ»ΡŒ, Ссли трСбуСтся.

Π¨Π°Π³ 2. ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π² Ρ…Ρ€Π°Π½ΠΈΠ»ΠΈΡ‰Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ

Иконки Π² 1Π‘ хранятся Π² ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΌ Ρ€Π°Π·Π΄Π΅Π»Π΅:

  1. Π’ Π΄Π΅Ρ€Π΅Π²Π΅ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ Π½Π°ΠΉΠ΄ΠΈΡ‚Π΅ Π²Π΅Ρ‚ΠΊΡƒ ΠžΠ±Ρ‰ΠΈΠ΅ β†’ ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.
  2. Π©Ρ‘Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ.

Π¨Π°Π³ 3. Π˜ΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ» ΠΈΠΊΠΎΠ½ΠΊΠΈ

Π’ ΠΎΡ‚ΠΊΡ€Ρ‹Π²ΡˆΠ΅ΠΌΡΡ ΠΎΠΊΠ½Π΅:

  1. НаТмитС Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΈΠ· Ρ„Π°ΠΉΠ»Π°.
  2. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½Π½Ρ‹ΠΉ PNG-Ρ„Π°ΠΉΠ».
  3. Π—Π°Π΄Π°ΠΉΡ‚Π΅ имя ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π° Π»Π°Ρ‚ΠΈΠ½ΠΈΡ†Π΅ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Icon_Save).
  4. НаТмитС ОК для сохранСния.

Π¨Π°Π³ 4. ΠŸΡ€ΠΈΠ²ΡΠ·Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΡƒ ΠΊ элСмСнту интСрфСйса

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΈΠΊΠΎΠ½ΠΊΡƒ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²:

  • πŸ“Œ ΠšΠΎΠΌΠ°Π½Π΄Π°Ρ… (мСню, ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов).
  • πŸ–±οΈ ΠšΠ½ΠΎΠΏΠΊΠ°Ρ… Π½Π° Ρ„ΠΎΡ€ΠΌΠ°Ρ….
  • πŸ“‹ Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°Ρ… Π³Ρ€ΡƒΠΏΠΏ Π² управляСмых Ρ„ΠΎΡ€ΠΌΠ°Ρ….

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ привязки ΠΊ ΠΊΠΎΠΌΠ°Π½Π΄Π΅:

  1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Π½ΡƒΠΆΠ½ΡƒΡŽ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ Π² Π΄Π΅Ρ€Π΅Π²Π΅ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠžΠ±Ρ‰ΠΈΠ΅ β†’ ΠšΠΎΠΌΠ°Π½Π΄Ρ‹ β†’ Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒΠ”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚).
  2. Π’ свойствах ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ Π½Π°ΠΉΠ΄ΠΈΡ‚Π΅ ΠΏΠΎΠ»Π΅ ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°.
  3. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π½ΡƒΡŽ ΠΈΠΊΠΎΠ½ΠΊΡƒ ΠΈΠ· списка.

⚠️ Π’Π½ΠΈΠΌΠ°Π½ΠΈΠ΅: Если ΠΈΠΊΠΎΠ½ΠΊΠ° Π½Π΅ отобраТаСтся Π² 1Π‘:ΠŸΡ€Π΅Π΄ΠΏΡ€ΠΈΡΡ‚ΠΈΠΈ, ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅:
  • ΠŸΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π»ΠΈ ΡƒΠΊΠ°Π·Π°Π½ ΠΏΡƒΡ‚ΡŒ ΠΊ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ Π² свойствах элСмСнта.
  • НС сбились Π»ΠΈ настройки кэша (ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΏΠ΅Ρ€Π΅Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ с очисткой кэша).
Π§Ρ‚ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ, Ссли ΠΈΠΊΠΎΠ½ΠΊΠ° отобраТаСтся Ρ€Π°Π·ΠΌΡ‹Ρ‚ΠΎ?

Π Π°Π·ΠΌΡ‹Ρ‚ΠΎΡΡ‚ΡŒ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ связана с нСсоотвСтствиСм Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈ области отобраТСния. НапримСр, Ссли Π²Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΠ»ΠΈ ΠΈΠΊΠΎΠ½ΠΊΡƒ 16Γ—16 px, Π° систСма пытаСтся Ρ€Π°ΡΡ‚ΡΠ½ΡƒΡ‚ΡŒ Π΅Ρ‘ Π΄ΠΎ 32Γ—32 px. РСшСния:

  1. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ ΠΈΠΊΠΎΠ½ΠΊΡƒ Π² Π½ΡƒΠΆΠ½ΠΎΠΌ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, 32Γ—32 px для ΠΊΠ½ΠΎΠΏΠΎΠΊ).
  2. Π’ свойствах элСмСнта интСрфСйса ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ ΠœΠ°ΡΡˆΡ‚Π°Π± (Ссли доступСн).
  3. Для Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ внСшниС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Font Awesome Ρ‡Π΅Ρ€Π΅Π· HTML-Π²ΠΈΠ΄ΠΆΠ΅Ρ‚).

5. ИспользованиС ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² управляСмых Ρ„ΠΎΡ€ΠΌΠ°Ρ…

Π’ управляСмых Ρ„ΠΎΡ€ΠΌΠ°Ρ… (начиная с ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹ 8.2) процСсс добавлСния ΠΈΠΊΠΎΠ½ΠΎΠΊ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ отличаСтся. Π—Π΄Π΅ΡΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠ²ΡΠ·Ρ‹Π²Π°Ρ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ ΠΊΠΎΠΌΠ°Π½Π΄Π°ΠΌ, Π½ΠΎ ΠΈ ΠΊ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌ элСмСнтам β€” ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ, полям Π²Π²ΠΎΠ΄Π°, Π·Π°ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅

  1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Π½ΡƒΠΆΠ½ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ Π² ΠšΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ‚ΠΎΡ€Π΅ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚.Π—Π°ΠΊΠ°Π·ΠŸΠΎΠΊΡƒΠΏΠ°Ρ‚Π΅Π»Ρ.Π€ΠΎΡ€ΠΌΠ°ΠžΠ±ΡŠΠ΅ΠΊΡ‚Π°).
  2. Π’Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΡƒ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠŸΡ€ΠΎΠ²Π΅ΡΡ‚ΠΈ).
  3. Π’ ΠΏΠ°Π»ΠΈΡ‚Ρ€Π΅ свойств Π½Π°ΠΉΠ΄ΠΈΡ‚Π΅ ΠΏΠΎΠ»Π΅ ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΈΠ»ΠΈ Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.
  4. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π½ΡƒΡŽ Ρ€Π°Π½Π΅Π΅ ΠΈΠΊΠΎΠ½ΠΊΡƒ ΠΈΠ· списка.
  5. ΠŸΡ€ΠΈ нСобходимости настройтС Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ тСкста (Π‘Π»Π΅Π²Π°, Π‘ΠΏΡ€Π°Π²Π°, Π‘Π²Π΅Ρ€Ρ…Ρƒ).

ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΠΈ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Π·Π°ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌΠΈ

Для Π·Π°ΠΊΠ»Π°Π΄ΠΎΠΊ (Π“Ρ€ΡƒΠΏΠΏΠ°Π—Π°ΠΊΠ»Π°Π΄ΠΎΠΊ) ΠΈΠΊΠΎΠ½ΠΊΠΈ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π·Π°ΠΊΠ»Π°Π΄ΠΊΠΈ:

  1. Π’Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅ элСмСнт Π—Π°ΠΊΠ»Π°Π΄ΠΊΠ° Π² Π΄Π΅Ρ€Π΅Π²Π΅ Ρ„ΠΎΡ€ΠΌΡ‹.
  2. Π’ свойствах Π½Π°ΠΉΠ΄ΠΈΡ‚Π΅ ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΈΠ»ΠΈ Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅Π—Π°ΠΊΠ»Π°Π΄ΠΊΠΈ.
  3. ΠŸΡ€ΠΈΡΠ²ΠΎΠΉΡ‚Π΅ ΠΈΠΊΠΎΠ½ΠΊΡƒ (Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΡ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ β€” 16Γ—16 px).

Π’ управляСмых Ρ„ΠΎΡ€ΠΌΠ°Ρ… Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ динамичСскиС ΠΈΠΊΠΎΠ½ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Π² зависимости ΠΎΡ‚ состояния элСмСнта. НапримСр, Π·Π΅Π»Ρ‘Π½Ρ‹ΠΉ Ρ„Π»Π°ΠΆΠΎΠΊ для ΠΏΡ€ΠΎΠ²Π΅Π΄Ρ‘Π½Π½ΠΎΠ³ΠΎ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈ красный крСстик для Π½Π΅ΠΏΡ€ΠΎΠ²ΠΆΠ΄Ρ‘Π½Π½ΠΎΠ³ΠΎ. Для этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ свойство Π£ΡΠ»ΠΎΠ²Π½ΠΎΠ΅ΠžΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ с привязкой ΠΊ Π΄Π°Π½Π½Ρ‹ΠΌ.

⚠️ Π’Π½ΠΈΠΌΠ°Π½ΠΈΠ΅: Π’ Π’Π΅Π±-ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ с Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π²ΠΎΠΌ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠΈ Ρ„ΠΎΡ€ΠΌΡ‹. Π­Ρ‚ΠΎ связано с ΠΊΡΡˆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ, ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ PNG-Ρ„Π°ΠΉΠ»Π° (ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½ΠΎ β€” Π½Π΅ Π±ΠΎΠ»Π΅Π΅ 5 ΠšΠ‘).
πŸ’‘

Π’ управляСмых Ρ„ΠΎΡ€ΠΌΠ°Ρ… ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠ²ΡΠ·Ρ‹Π²Π°Ρ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ ΠΊΠΎΠΌΠ°Π½Π΄Π°ΠΌ, Π½ΠΎ ΠΈ ΠΊ Π»ΡŽΠ±Ρ‹ΠΌ элСмСнтам интСрфСйса β€” ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ, Π·Π°ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌ, полям. Π­Ρ‚ΠΎ позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΈ наглядныС Ρ„ΠΎΡ€ΠΌΡ‹.

6. ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ для высоких Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ (4K, Retina)

Π‘ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Ρ‹ с высоким Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ (4K, Retina) Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½Π½ΠΎΠ³ΠΎ качСства. Если ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ стандартныС 16Γ—16 px, ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ€Π°Π·ΠΌΡ‹Ρ‚ΠΎ. Π’ΠΎΡ‚ ΠΊΠ°ΠΊ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ:

1. ИспользованиС ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² 2Γ— Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² Π΄Π²ΠΎΠΉΠ½ΠΎΠΌ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, 32Γ—32 px вмСсто 16Γ—16 px) ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ ΠΈΡ… Π² 1Π‘. ΠŸΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ° автоматичСски ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΈΡ… ΠΏΠΎΠ΄ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ экрана. Для этого:

  • ΠŸΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΡŒΡ‚Π΅ ΠΈΠΊΠΎΠ½ΠΊΡƒ Π² Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅ 32Γ—32 px (для стандартного 16Γ—16 px).
  • Π’ свойствах элСмСнта интСрфСйса ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ ΠœΠ°ΡΡˆΡ‚Π°Π± = 200% (Ссли доступСн).

2. Π’Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Ρ‡Π΅Ρ€Π΅Π· HTML

Для ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Retina ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ Ρ‡Π΅Ρ€Π΅Π· HTML-Π²ΠΈΠ΄ΠΆΠ΅Ρ‚:

  1. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ элСмСнт ПолСHTMLΠ”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° Π½Π° Ρ„ΠΎΡ€ΠΌΠ΅.
  2. Π’ΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΠΊΠΎΠ΄ SVG ΠΈΠ»ΠΈ ссылку Π½Π° ΡˆΡ€ΠΈΡ„Ρ‚ ΠΈΠΊΠΎΠ½ΠΎΠΊ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Font Awesome):
<i></i>

3. АдаптивныС ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² стилС Material Design

Google Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ 24Γ—24 px для интСрфСйсов. Они Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΈ выглядят Ρ‡Ρ‘Ρ‚ΠΊΠΎ Π½Π° Π»ΡŽΠ±Ρ‹Ρ… экранах. Для 1Π‘ ΠΌΠΎΠΆΠ½ΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ этот стандарт:

  • Π‘ΠΊΠ°Ρ‡Π°ΠΉΡ‚Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΠ· Material Design Icons Π² Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅ 24Γ—24 px.
  • Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ ΠΈΡ… Π² 1Π‘ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ с ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΎΠΌ 150% для 16Γ—16 px областСй.

Π Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ экрана Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΡ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π€ΠΎΡ€ΠΌΠ°Ρ‚ ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅
Standard (Full HD) 16Γ—16 px PNG Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ для Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΉ.
Retina / 4K 32Γ—32 px (с ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΎΠΌ 200%) PNG ΠžΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°Π΅Ρ‚ Ρ‡Ρ‘Ρ‚ΠΊΠΎΡΡ‚ΡŒ Π½Π° высоких Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΡ….
Π’Π΅Π±-ΠΊΠ»ΠΈΠ΅Π½Ρ‚ 24Γ—24 px PNG ΠΈΠ»ΠΈ SVG (Ρ‡Π΅Ρ€Π΅Π· HTML) SVG ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚ΠΈΡ‚Π΅Π»ΡŒΠ½Π΅Π΅ для ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ.
МобильноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ 48Γ—48 px PNG Π£Ρ‡ΠΈΡ‚Ρ‹Π²Π°ΠΉΡ‚Π΅ touch-интСрфСйс (ΠΈΠΊΠΎΠ½ΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΊΡ€ΡƒΠΏΠ½Π΅Π΅).

7. Π’ΠΈΠΏΠΈΡ‡Π½Ρ‹Π΅ ошибки ΠΈ ΠΊΠ°ΠΊ ΠΈΡ… ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ

Π”Π°ΠΆΠ΅ ΠΎΠΏΡ‹Ρ‚Π½Ρ‹Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΈΠ½ΠΎΠ³Π΄Π° ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°ΡŽΡ‚ΡΡ с ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ Π² 1Π‘. Π’ΠΎΡ‚ самыС распространённыС ошибки ΠΈ способы ΠΈΡ… Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ:

1. Иконка Π½Π΅ отобраТаСтся

ΠŸΡ€ΠΈΡ‡ΠΈΠ½Ρ‹ ΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ:

  • πŸ” ΠΠ΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ ΠΏΡƒΡ‚ΡŒ β€” ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π² свойствах элСмСнта ΡƒΠΊΠ°Π·Π°Π½ΠΎ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎΠ΅ имя ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.
  • πŸ–ΌοΈ НСподдСрТиваСмый Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ β€” ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ Π² PNG.
  • πŸ”„ Кэш ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π° β€” очиститС кэш (Π€Π°ΠΉΠ» β†’ ΠžΡ‡ΠΈΡΡ‚ΠΈΡ‚ΡŒ кэш Π² ΠšΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ‚ΠΎΡ€Π΅).

2. Иконка выглядит Ρ€Π°Π·ΠΌΡ‹Ρ‚ΠΎΠΉ

Как ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ:

  • πŸ“ НСсоотвСтствиС Ρ€Π°Π·ΠΌΠ΅Ρ€Π° β€” создайтС ΠΈΠΊΠΎΠ½ΠΊΡƒ Π² Π½ΡƒΠΆΠ½ΠΎΠΌ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈ (см. Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ Π²Ρ‹ΡˆΠ΅).
  • 🎨 Π‘ΠΆΠ°Ρ‚ΠΈΠ΅ PNG β€” сохранитС Π±Π΅Π· ΠΏΠΎΡ‚Π΅Ρ€ΡŒ (Π² Photoshop Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Save for Web β†’ PNG-24).

3. Иконка отобраТаСтся с Π±Π΅Π»Ρ‹ΠΌ Ρ„ΠΎΠ½ΠΎΠΌ

РСшСния:

  • πŸ–ŒοΈ ΠŸΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ Π½Π΅ сохранСна β€” экспортируйтС PNG с Π²ΠΊΠ»ΡŽΡ‡Ρ‘Π½Π½ΠΎΠΉ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒΡŽ.
  • πŸŒ“ Вёмная Ρ‚Π΅ΠΌΠ° β€” ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Ρ€Π°Π·Π½Ρ‹Ρ… Ρ‚Π΅ΠΌΠ°Ρ… оформлСния 1Π‘.

4. Иконка Π½Π΅ обновляСтся послС ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ

Π§Ρ‚ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ:

  • πŸ”„ ΠŸΠ΅Ρ€Π΅Π·Π°ΠΏΡƒΡΠΊ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π° β€” ΠΈΠ½ΠΎΠ³Π΄Π° трСбуСтся ΠΏΠΎΠ»Π½Ρ‹ΠΉ пСрСзапуск 1Π‘:ΠŸΡ€Π΅Π΄ΠΏΡ€ΠΈΡΡ‚ΠΈΡ.
  • πŸ—‘οΈ ΠžΡ‡ΠΈΡΡ‚ΠΊΠ° кэша β€” ΡƒΠ΄Π°Π»ΠΈΡ‚Π΅ Π²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹ Π² ΠΏΠ°ΠΏΠΊΠ΅ %APPDATA%\1C\1Cv8.
  • πŸ“ ИзмСнСниС ΠΈΠΌΠ΅Π½ΠΈ β€” Ссли ΠΈΠΊΠΎΠ½ΠΊΠ° "Π·Π°Π»ΠΈΠΏΠ»Π°", ΠΏΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΡƒΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ Π·Π°Π½ΠΎΠ²ΠΎ.

⚠️ Π’Π½ΠΈΠΌΠ°Π½ΠΈΠ΅: Π’ Волстом ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΊΡΡˆΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ агрСссивнСС, Ρ‡Π΅ΠΌ Π² Π’ΠΎΠ½ΠΊΠΎΠΌ. Если измСнСния Π½Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ, ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ 1Π‘ с ΠΊΠ»ΡŽΡ‡ΠΎΠΌ /ClearCache.
Как Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ 1Π‘ с очисткой кэша?

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ‡ΠΈΡΡ‚ΠΈΡ‚ΡŒ кэш ΠΏΡ€ΠΈ запускС, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ способ:

  1. Π—Π°ΠΊΡ€ΠΎΠΉΡ‚Π΅ всС сСансы 1Π‘:ΠŸΡ€Π΅Π΄ΠΏΡ€ΠΈΡΡ‚ΠΈΡ.
  2. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ ярлык для запуска 1cv8.exe.
  3. Π’ свойствах ярлыка Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π² ΠΊΠΎΠ½Ρ†Π΅ ΠΏΡƒΡ‚ΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ /ClearCache (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, "C:\Program Files\1cv8\8.3.20.1500\bin\1cv8.exe" /ClearCache).
  4. ЗапуститС 1Π‘ Ρ‡Π΅Ρ€Π΅Π· этот ярлык.

8. Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ возмоТности: анимация ΠΈ динамичСскиС ΠΈΠΊΠΎΠ½ΠΊΠΈ

Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² 1Π‘ статичныС, Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… хитростСй ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΄ΠΈΠ½Π°ΠΌΠΈΠΊΡƒ. Π­Ρ‚ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ для Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ процСссов (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΠ»ΠΈ выполнСния Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΉ).

1. АнимированныС GIF

1Π‘ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ GIF Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ, Π½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΌΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ:

  • 🎬 Π§Π΅Ρ€Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ β€” Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ нСсколько ΠΊΠ°Π΄Ρ€ΠΎΠ² (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Loading1.png, Loading2.png) ΠΈ мСняйтС ΠΈΡ… Ρ‡Π΅Ρ€Π΅Π· Ρ‚Π°ΠΉΠΌΠ΅Ρ€.
  • ⏱️ ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π° для Ρ„ΠΎΡ€ΠΌΡ‹:
ΠŸΡ€ΠΎΡ†Π΅Π΄ΡƒΡ€Π° ΠΠ½ΠΈΠΌΠ°Ρ†ΠΈΡΠ˜ΠΊΠΎΠ½ΠΊΠΈ()

Π’Π΅ΠΊΡƒΡ‰ΠΈΠΉΠšΠ°Π΄Ρ€ = (Π’Π΅ΠΊΡƒΡ‰ΠΈΠΉΠšΠ°Π΄Ρ€ + 1) % 4; // Π§Π΅Ρ€Π΅Π΄ΡƒΠ΅ΠΌ 4 ΠΊΠ°Π΄Ρ€Π°

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹Π€ΠΎΡ€ΠΌΡ‹.ΠšΠ½ΠΎΠΏΠΊΠ°Π’Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ.ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° = ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ[Π’Π΅ΠΊΡƒΡ‰ΠΈΠΉΠšΠ°Π΄Ρ€];

ΠšΠΎΠ½Π΅Ρ†ΠŸΡ€ΠΎΡ†Π΅Π΄ΡƒΡ€Ρ‹

2. ИзмСнСниС Ρ†Π²Π΅Ρ‚Π° ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎ

МоТно динамичСски ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² зависимости ΠΎΡ‚ статуса. НапримСр, зСлёная ΠΈΠΊΠΎΠ½ΠΊΠ° для ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎΠ³ΠΎ выполнСния ΠΈ красная для ошибки:

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹Π€ΠΎΡ€ΠΌΡ‹.ΠšΠ½ΠΎΠΏΠΊΠ°Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ.Π¦Π²Π΅Ρ‚ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ = Если УспСшно Π’ΠΎΠ³Π΄Π° RGB(0, 200, 0) Π˜Π½Π°Ρ‡Π΅ RGB(200, 0, 0) ΠšΠΎΠ½Π΅Ρ†Π•ΡΠ»ΠΈ;

3. Π’Π½Π΅ΡˆΠ½ΠΈΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ (SVG, Font Awesome)

Для ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹Ρ… Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅:

  • 🌐 Font Awesome β€” Ρ‡Π΅Ρ€Π΅Π· ПолСHTMLΠ”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<i></i>

  • πŸ“Š SVG β€” вставляйтС прямо Π² HTML ΠΈΠ»ΠΈ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ Π² PNG.

⚠️ Π’Π½ΠΈΠΌΠ°Π½ΠΈΠ΅: ДинамичСскиС ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π·Π°ΠΌΠ΅Π΄Π»ΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ Ρ„ΠΎΡ€ΠΌΡ‹, особСнно Π² Π’Π΅Π±-ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π΅. ВСстируйтС ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π½Π° слабых ΠΌΠ°ΡˆΠΈΠ½Π°Ρ…!
πŸ’‘

Анимация ΠΈ динамичСскиС ΠΈΠΊΠΎΠ½ΠΊΠΈ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… рСсурсов. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΈΡ… Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для критичСски Π²Π°ΠΆΠ½Ρ‹Ρ… элСмСнтов интСрфСйса (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠ² Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ).

FAQ: ЧастыС вопросы ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ Π² 1Π‘

МоТно Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΠ· ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π° Π±Π΅Π· ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ?

НСт, Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Ρƒ ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈΠ· ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π° трСбуСтся ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΊΠ°:

  • ΠžΠ±Ρ€Π΅Π·ΠΊΠ° Π΄ΠΎ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°.
  • Π£Π΄Π°Π»Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π° (для PNG).
  • ΠšΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²ΠΊΠ° Ρ†Π²Π΅Ρ‚Π° ΠΏΠΎΠ΄ ΡΡ‚ΠΈΠ»ΡŒ 1Π‘.

Π˜ΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ β€” ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ Π½Π°Π±ΠΎΡ€Ρ‹ для бизнСс-ПО (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΎΡ‚ Icons8).

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΡƒ для мобильного прилоТСния Π½Π° 1Π‘?

Для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ² (1Π‘:Мобильная ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°) рСкомСндуСтся:

  • Π Π°Π·ΠΌΠ΅Ρ€ ΠΈΠΊΠΎΠ½ΠΎΠΊ β€” 48Γ—48 px (для удобства наТатия).
  • Π€ΠΎΡ€ΠΌΠ°Ρ‚ β€” PNG с ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒΡŽ.
  • Π¦Π²Π΅Ρ‚Π° β€” контрастныС, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ экраны ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΏΡ€ΠΈ ярком освСщСнии.

ВСстируйтС ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹Ρ… устройствах, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ эмулятор ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΠ½Π°Ρ‡Π΅.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ послС обновлСния ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹ 1Π‘ ΠΈΠΊΠΎΠ½ΠΊΠΈ стали Ρ€Π°Π·ΠΌΡ‹Ρ‚Ρ‹ΠΌΠΈ?

Π­Ρ‚ΠΎ связано с ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌΠ° Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ Π² Π½ΠΎΠ²Ρ‹Ρ… вСрсиях. РСшСния:

  • ΠžΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π΄ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° 32Γ—32 px (для стандартных 16Γ—16 px).
  • ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ настройки ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ Π² свойствах Ρ„ΠΎΡ€ΠΌΡ‹.
  • ΠžΡ‡ΠΈΡΡ‚ΠΈΡ‚Π΅ кэш ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π° (/ClearCache).

Если ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° сохраняСтся, ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ΡΡŒ Π² ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ 1Π‘ с ΡƒΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ вСрсии ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹.

МоТно Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ emoji вмСсто ΠΈΠΊΠΎΠ½ΠΎΠΊ?

ВСхничСски Π΄Π°, Π½ΠΎ это Π½Π΅ рСкомСндуСтся:

  • 😊 Emoji ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ Π² Ρ€Π°Π·Π½Ρ‹Ρ… ОБ (Windows, macOS, Linux).
  • НС всС emoji ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ Π² Π’ΠΎΠ½ΠΊΠΎΠΌ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π΅.
  • Они ΠΏΠ»ΠΎΡ…ΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΈ выглядят Π½Π΅ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ Π² бизнСс-ПО.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ emoji Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для прототипирования ΠΈΠ»ΠΈ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΡ… тСстовых ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΉ.

Как ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ Π² Π΄Ρ€ΡƒΠ³ΡƒΡŽ?

Для пСрСноса ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΌΠ΅ΠΆΠ΄Ρƒ Π±Π°Π·Π°ΠΌΠΈ:

  1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ ΠΈΡΡ…ΠΎΠ΄Π½ΡƒΡŽ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΡŽ Π² ΠšΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ‚ΠΎΡ€Π΅.
  2. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² ΠžΠ±Ρ‰ΠΈΠ΅ β†’ ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.
  3. Π’Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅ Π½ΡƒΠΆΠ½Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π² Ρ„Π°ΠΉΠ» (ΠΈΠ»ΠΈ скопируйтС Ρ„Π°ΠΉΠ»Ρ‹ ΠΈΠ· ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π° Π±Π°Π·Ρ‹).
  4. Π’ Ρ†Π΅Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ»Ρ‹ Ρ‡Π΅Ρ€Π΅Π· Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΈΠ· Ρ„Π°ΠΉΠ»Π°.

Если ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ…, ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ привязки послС пСрСноса!