Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Π² Adobe Photoshop

ВсСм ΠΏΡ€ΠΈΠ²Π΅Ρ‚! БСгодня я Ρ…ΠΎΡ‡Ρƒ Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ Π²Π°ΠΌ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ инструмСнтами для создания Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ² Π² Π€ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ΅.

Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹ ΠΈ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π² соврСмСнном графичСском Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ – этот Ρ‚Ρ€Π΅Π½Π΄ ворвался Π² Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ срСду Π΅Ρ‰Π΅ Π² 2018Β ΠΈ всС Π΅Ρ‰Π΅ Π½Π΅ тСряСт своСй Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹ для оформлСния Ρ„ΠΎΠ½ΠΎΠ², ΠΈΠΊΠΎΠ½ΠΎΠΊ, Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠΈ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ³ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ, Π° Π΅Ρ‰Π΅ с Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠΌΠΈΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ 3D!

Π§Ρ‚ΠΎ самоС Π³Π»Π°Π²Π½ΠΎΠ΅ для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ² Π² Photoshop – ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ просто. Π”Π°Π²Π°ΠΉΡ‚Π΅ Ρ€Π°Π·Π±Π΅Ρ€Π΅ΠΌ процСсс Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ….

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свой Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Π² Π€ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ΅
  1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ инструмСнт Β«Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Β». Он находится Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов Π² Π»Π΅Π²ΠΎΠΉ части экрана Adobe Photoshop. Если ΠΎΠ½ Π½Π΅ отобраТаСтся сразу – просто ΠΊΠ»ΠΈΠΊΠ½ΠΈΡ‚Π΅ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ ΠΏΠΎ Β«Π—Π°Π»ΠΈΠ²ΠΊΠ΅Β» ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π΅Π³ΠΎ Π² Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅ΠΌ мСню.Β 
  2. Π’ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части экрана появится ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°. ΠšΠ»ΠΈΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ Π½Π΅ΠΌΡƒ.Β 
  3. ΠžΡ‚ΠΊΡ€Ρ‹Π»ΠΎΡΡŒ ΠΎΠΊΠ½ΠΎ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ². Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒΠ½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠ΅, Π° Π·Π°Ρ‚Π΅ΠΌ Π½Π° окошко Β«Π¦Π²Π΅Ρ‚Β».Β 
  4. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π·Π°Π΄Π°ΠΉΡ‚Π΅ Ρ†Π²Π΅Ρ‚. Π― Ρ…ΠΎΡ‡Ρƒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΎΡ‚ сирСнСвого ΠΊ Ρ‚Π΅ΠΌΠ½ΠΎ-Ρ„ΠΈΠΎΠ»Π΅Ρ‚ΠΎΠ²ΠΎΠΌΡƒ. Π’Ρ‹Π±ΠΈΡ€Π°ΡŽ для этой Ρ‚ΠΎΡ‡ΠΊΠΈ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ свСтлый ΠΎΡ‚Ρ‚Π΅Π½ΠΎΠΊ ΠΈ наТимаю ОК.Β 
  5. Π’Π°ΠΊΠΈΠΌ ΠΆΠ΅ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ настройтС Π²Ρ‚ΠΎΡ€ΠΎΠΉ Ρ†Π²Π΅Ρ‚. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ большС ΠΎΡ‚Ρ‚Π΅Π½ΠΊΠΎΠ² Π² Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚, создайтС Π½ΠΎΠ²ΡƒΡŽ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒΠ½ΡƒΡŽ Ρ‚ΠΎΡ‡ΠΊΡƒ. Π§Ρ‚ΠΎΠ±Ρ‹ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π½Π° ΠΎΠ±Π»Π°ΡΡ‚ΡŒ прямо ΠΏΠΎΠ΄ Π»ΠΈΠ½ΠΈΠ΅ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°.Β 
  6. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ свой Π½ΠΎΠ²Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚, Π½Π°ΠΆΠ°Π² Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ «Новый». Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΎΠ½ всСгда Π±ΡƒΠ΄Π΅Ρ‚ Π»Π΅ΠΆΠ°Ρ‚ΡŒ Π² спискС Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ² Π² этом ΠΎΠΊΠ½Π΅.Β 

ΠšΠΎΠΌΡŒΡŽΠ½ΠΈΡ‚ΠΈ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π² Π’Π΅Π»Π΅Π³Ρ€Π°ΠΌ

ΠŸΠΎΠ΄ΠΏΠΈΡˆΠΈΡ‚Π΅ΡΡŒ ΠΈ Π±ΡƒΠ΄ΡŒΡ‚Π΅ Π² курсС послСдних IT-новостСй

ΠŸΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ
  1. Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π»ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ инструмСнт Β«Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Β».Β 
  2. Π—Π°Ρ‚Π΅ΠΌ ΠΊΠ»ΠΈΠΊΠ½ΠΈΡ‚Π΅ ΠΌΡ‹ΡˆΡŒΡŽ Π² Ρ‚ΠΎΠΉ части экрана, ΠΎΡ‚ΠΊΡƒΠ΄Π° Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒΡΡ Π·Π°Π»ΠΈΠ²ΠΊΠ°.Β 
  3. ΠŸΡ€ΠΎΠ²Π΅Π΄ΠΈΡ‚Π΅ ΠΌΡ‹ΡˆΡŒΡŽ ΠΏΠΎ экрану.

НапримСр, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ Ρ†Π²Π΅Ρ‚Π°, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅, Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΈ ΠΏΡ€ΠΎΠ²Π΅Π΄ΠΈΡ‚Π΅ ΠΌΡ‹ΡˆΡŒΡŽ свСрху Π²Π½ΠΈΠ·.

А Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄, я ΠΊΠ»ΠΈΠΊΠ½ΡƒΠ»Π° ΠΈ ΠΏΡ€ΠΎΠ²Π΅Π»Π° ΠΌΡ‹ΡˆΠΊΠΎΠΉ ΠΏΠΎ Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΠΈ справа Π½Π°Π»Π΅Π²ΠΎ. ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅! Π­Ρ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π²ΠΎ всС стороны.

Как Π·Π°Π»ΠΈΡ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ

Если Π΄Π΅Π»Π°Ρ‚ΡŒ Π·Π°Π»ΠΈΠ²ΠΊΡƒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ Π² Π€ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ΅, ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ классного эффСкта 3D, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π² этом Π³ΠΎΠ΄Ρƒ самый Ρ‚Ρ€Π΅Π½Π΄ΠΎΠ²Ρ‹ΠΉ. Π― Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²ΠΎΡ‚ Ρ‚Π°ΠΊΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ:

Какой получаСтся объСм! На этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²Ρ‹ ΠΏΠΎΠΉΠΌΠ΅Ρ‚Π΅ всС основныС ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ использования Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° Π½Π° ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°Ρ… Π² Photoshop. Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ ΠΏΠΎΡˆΠ°Π³ΠΎΠ²ΡƒΡŽ ΠΈΠ½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡŽ:

  1. Π― создаю Π½ΠΎΠ²Ρ‹ΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ ΠΈ заливаю Ρ„ΠΎΠ½ сохранСнным Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ я ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π»Π° Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΏΡƒΠ½ΠΊΡ‚Π΅.Β 
  2. Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒΒ ΡˆΠ°Ρ€Ρ‹, я Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡΡŒΒ ΠΈΠ½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌ «Эллипс». Находится ΠΎΠ½ Π²ΠΎΡ‚ здСсь.Β 
  3. Π‘ Π·Π°ΠΆΠ°Ρ‚ΠΎΠΉ клавишСй Shift создаю эллипс. Он автоматичСски появляСтся Π½Π° Π½ΠΎΠ²ΠΎΠΌ слоС. Π’ мСню Β«Π—Π°Π»ΠΈΠ²ΠΊΠ°Β» ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚.Β 
  4. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π²Π°ΠΆΠ΄Ρ‹ кликаю ΠΏΠΎ слою с эллипсом, ΠΈ появляСтся ΠΎΠΊΠ½ΠΎ стилСй.Β 
  5. Π’ΡƒΡ‚ Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΠΆΠ°Ρ‚ΡŒ «НалоТСниС Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°Β» (слСва), Π° ΠΏΠΎΡ‚ΠΎΠΌ ΠΊΠ»ΠΈΠΊΠ½ΡƒΡ‚ΡŒ ΠΏΠΎ ΠΎΠΊΠΎΡˆΠΊΡƒ с Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚. Β 
  6. Π― Ρ…ΠΎΡ‡Ρƒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°Ρ€ΠΈΠΊ Π² ΠΌΠ°Π»ΠΈΠ½ΠΎΠ²Ρ‹Ρ… Ρ‚ΠΎΠ½Π°Ρ…. Π’Ρ‹Π±ΠΈΡ€Π°ΡŽ, ΠΊΠ°ΠΊΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π° Π±ΡƒΠ΄Π΅Ρ‚ свСтлая ΠΈ тСнСвая сторона ΡˆΠ°Ρ€Π°.Β 
  7. ΠΠ°ΡΡ‚Ρ€Π°ΠΈΠ²Π°ΡŽ ΡƒΠ³ΠΎΠ», Ρ‡Ρ‚ΠΎΠ±Ρ‹ «освСщСниС» ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° совпадало с Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ Ρ„ΠΎΠ½Π°.Β 

ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ этап ΠΏΡ€ΠΎΠΉΠ΄Π΅Π½. Π­Ρ‚ΠΎ Π³Π»Π°Π²Π½ΠΎΠ΅, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ ΠΎ Π·Π°Π»ΠΈΠ²ΠΊΠ΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ. Но Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ мою ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ, смотритС дальшС.

Β Π”Π°Π²Π°ΠΉΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Β«Π½Π°Ρ‚ΡƒΡ€Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈΒ», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡˆΠ°Ρ€ΠΈΠΊ выглядСл объСмнСС.

  1. Π”ΠΎΠ±Π°Π²Π»ΡΡŽ ΠΏΡƒΠ½ΠΊΡ‚ «ВнутрСнняя Ρ‚Π΅Π½ΡŒΒ»Β ΠΈ Ρ‰Π΅Π»ΠΊΠ°ΡŽ ΠΏΠΎ Ρ†Π²Π΅Ρ‚Ρƒ.
  2. Π’Ρ‹Π±ΠΈΡ€Π°ΡŽ Ρ†Π²Π΅Ρ‚ Ρ‚Π΅Π½ΠΈ. ΠŸΡƒΡΡ‚ΡŒ ΡƒΡ…ΠΎΠ΄ΠΈΡ‚ Π² Ρ„ΠΈΠΎΠ»Π΅Ρ‚ΠΎΠ²Ρ‹ΠΉ.Β 
  3. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π°ΡΡ‚Ρ€ΠΎΡŽ ΡƒΠ³ΠΎΠ», Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ, смСщСниС ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ этой Ρ‚Π΅Π½ΠΈ. ΠŸΠΎΠΈΠ³Ρ€Π°ΠΉΡ‚Π΅ с ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ°ΠΌΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π½Π°Ρ‚ΡƒΡ€Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈ мягкий эффСкт. ПослС этого Π·Π°ΠΊΡ€ΠΎΠΉΡ‚Π΅ ΠΎΠΊΠ½ΠΎ стилСй.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ я Ρ…ΠΎΡ‡Ρƒ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°. Для копирования Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρƒ с инструмСнтом Β«ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅Β» (V Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π΅)Β ΠΈ с Π·Π°ΠΆΠ°Ρ‚ΠΎΠΉ клавишСй Ctrl ΡΠ΄Π²ΠΈΠ½ΡŒΡ‚Π΅ Π΅Π³ΠΎ Π² сторону. ΠžΠ±ΡŠΠ΅ΠΊΡ‚ оказался Π½Π° Π½ΠΎΠ²ΠΎΠΌ слоС.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π»ΡΡ с эффСктами, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ ΠΏΠΎ слою, Π° Π·Π°Ρ‚Π΅ΠΌ Π½Π° Β«ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ Π² смарт-ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Β».

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ я нСсколько Ρ€Π°Π· ΠΊΠΎΠΏΠΈΡ€ΡƒΡŽ ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°ΡŽ ΡˆΠ°Ρ€ΠΈΠΊ Π² Ρ€Π°Π·Π½Ρ‹Ρ… мСстах. Π”Π°Π»Π΅Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта Β«ΠŸΠ΅Ρ€ΠΎ ΠΊΡ€ΠΈΠ²ΠΈΠ·Π½Ρ‹Β» (P) я Π½Π°Ρ€ΠΈΡΡƒΡŽ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚.

НуТно ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π·Π°Π»ΠΈΠ²ΠΊΡƒ этого ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° с Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΆΠ΅ настройками, ΠΊΠ°ΠΊ Ρƒ ΡˆΠ°Ρ€ΠΎΠ². Для этого я наТимаю ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ ΠΏΠΎ слою с ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ ΡˆΠ°Ρ€ΠΎΠΌ (ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ смарт-ΠΎΠ±ΡŠΠ΅ΠΊΡ‚)Β ΠΈ ΠΊΠΎΠΏΠΈΡ€ΡƒΡŽ ΡΡ‚ΠΈΠ»ΡŒ слоя. Π­Ρ‚Π° функция позволяСт ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ всС настройки, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ Π΄Π΅Π»Π°Π΅ΠΌ Π² ΠΎΠΊΠ½Π΅ стилСй слоя.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½ΡƒΠΆΠ½ΠΎ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ ΠΏΠΎ слою с Π½ΠΎΠ²ΠΎΠΉ Ρ„ΠΈΠ³ΡƒΡ€ΠΎΠΉ ΠΈ Π²ΠΊΠ»Π΅ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ слоя.

Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚, нарисованный ΠΏΠ΅Ρ€ΠΎΠΌ, выглядит Ρ‚Π°ΠΊ ΠΆΠ΅. Π­Ρ‚Π° функция Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ для всСх Π½ΠΎΠ²Ρ‹Ρ… ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ создадитС.

Π’ΠΎ ΠΆΠ΅ самоС я дСлаю для Π΅Ρ‰Π΅ ΠΎΠ΄Π½ΠΎΠΉ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹. Но здСсь я ΠΏΠΎΠ΄ΡƒΠΌΠ°Π»Π°, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΏΠ»ΠΎΡ…ΠΎ Π±Ρ‹Π»ΠΎ Π±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π΅ свСчСниС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ создавалась иллюзия, ΠΊΠ°ΠΊ свСт Β«ΠΎΠ±Π²ΠΎΠ»Π°ΠΊΠΈΠ²Π°Π΅Ρ‚Β» Π΅Π΅. Π”Π²Π°ΠΆΠ΄Ρ‹ кликаю ΠΏΠΎ слою с Π½ΠΎΠ²ΠΎΠΉ Ρ„ΠΈΠ³ΡƒΡ€ΠΎΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ ΠΎΠΊΠ½ΠΎ стилСй, ΠΈ добавляю свСчСниС.

ΠœΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Ρ‰Π΅ нСсколько ΡˆΠ°Ρ€ΠΎΠ² ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ Β«Π Π°Π·ΠΌΡ‹Ρ‚ΠΈΠ΅ ΠΏΠΎ Гауссу», Ρ‡Ρ‚ΠΎΠ±Ρ‹ казалось, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΏΠ»Π°Π²Π°ΡŽΡ‚ Π³Π΄Π΅-Ρ‚ΠΎ Π²Π΄Π°Π»Π΅ΠΊΠ΅. Π’ΠΎ ΠΆΠ΅ самоС ΠΈ для ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° Π½Π° ΠΏΠ΅Ρ€Π΅Π΄Π½Π΅ΠΌ ΠΏΠ»Π°Π½Π΅ – Ρ‚Π°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΏΡ€Π°Π²Π΄ΠΈΠ²Π΅Π΅. Π’ΠΎΡ‚ Π²Π°ΠΌ ΠΈ имитация 3D Π² Π€ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ΅.

Как Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Π½Π° тСкст

ΠΠ°Π»ΠΎΠΆΠΈΡ‚ΡŒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Π½Π° тСкст ΠΎΡ‡Π΅Π½ΡŒ просто: ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Ρ‚Π΅ΠΌ ΠΆΠ΅ ΠΎΠΊΠ½ΠΎΠΌ стилСй слоя. Π”Π°Π²Π°ΠΉΡ‚Π΅ напишСм ΠΊΠ°ΠΊΠΎΠΉ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ тСкст. Π― просто Π²ΠΎΠ·ΡŒΠΌΡƒ слово Β«GradientΒ», написанноС ΠΆΠΈΡ€Π½Ρ‹ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ Ρ‡Π΅Ρ€Π½ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π°. Π˜Ρ‚Π°ΠΊ:

  1. Π”Π²Π°ΠΆΠ΄Ρ‹ ΠΊΠ»ΠΈΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ слою с тСкстом ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ «НалоТСниС Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°Β» Π² Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅.Β 
  2. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ ΠΈΠ· Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… Π½Π°Π±ΠΎΡ€ΠΎΠ²Β Π»ΠΈΠ±ΠΎ создайтС свой. О Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ собствСнный Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚, я писала Π²Ρ‹ΡˆΠ΅ Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅.Β 
  3. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΡƒΠ³ΠΎΠ» ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π± налоТСния Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ³ΠΎ эффСкта.Β 
  4. Если Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ Ρ‚ΠΎΡ‡ΠΊΡƒ Ρ†Π²Π΅Ρ‚Π°, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ ΠΈΠ· Ρ‚Ρ€Π΅Ρ… ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΎΡ‚Ρ‚Π΅Π½ΠΊΠΎΠ². ЭкспСримСнтируйтС!Β 

Как Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Π½Π° Ρ„ΠΎΡ‚ΠΎ Π² Adobe Photoshop

Если Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Π½Π° Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΡŽ, ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰Π΅Π³ΠΎ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ эффСкта. Π’ этом Π³ΠΎΠ΄Ρƒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Ρ‚Ρ€Π΅Π½Π΄ΠΎΠ² Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ – ΠΌΠΎΠ½ΠΎΡ…Ρ€ΠΎΠΌ ΠΈ Π΄Π²ΡƒΡ…Ρ†Π²Π΅Ρ‚Π½ΠΎΡΡ‚ΡŒ.Β ΠΠ°ΡƒΡ‡ΠΈΡ‚Π΅ΡΡŒ Π² нСсколько ΠΊΠ»ΠΈΠΊΠΎΠ² ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒΠ½Ρ‹Π΅ изобраТСния!

  1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΡŽ Π² Π½ΠΎΠ²ΠΎΠΌ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ слой с Ρ„ΠΎΡ‚ΠΎ.Β 
  2. ΠŸΡ€ΠΎΠΉΠ΄ΠΈΡ‚Π΅ ΠΏΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌ Β«Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅Β» – Β«ΠšΠΎΡ€Ρ€Π΅ΠΊΡ†ΠΈΡΒ» – Β«ΠšΠ°Ρ€Ρ‚Π° Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°Β».Β 
  3. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ Π»ΠΈΠ½ΠΈΠΈ с Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚Π° ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒΠ½Ρ‹Ρ… Ρ‚ΠΎΡ‡Π΅ΠΊ.

Π“Π΄Π΅ Π²Π·ΡΡ‚ΡŒ ΠΈΠ΄Π΅ΠΈ для Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ²: Π»ΡƒΡ‡ΡˆΠΈΠ΅ сСрвисы

Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ красивый Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎΒ Π½Π΅ всСгда Π»Π΅Π³ΠΊΠΎ. А Π±Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ просто Π½Π΅Ρ‚ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ для Ρ€Π°Π·Π΄ΡƒΠΌΠΈΠΉ. Для этого ΠΈ ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Π»ΠΈ сСрвисы, Π³Π΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΈΠ΄Π΅ΠΈ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ². Π― ΠΏΠΎΠ΄ΠΎΠ±Ρ€Π°Π»Π° для вас 3 Π»ΡƒΡ‡ΡˆΠΈΡ….

Coolors

На этом сайтС ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ Π½Π°Π±ΠΎΡ€Ρ‹ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ², Ρ‚Π°ΠΊ ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒΒ ΡΠΎΠ±ΡΡ‚Π²Π΅Π½Π½Ρ‹Π΅. Π£ Ρ†Π²Π΅Ρ‚ΠΎΠ² ΠΈΠΌΠ΅ΡŽΡ‚ΡΡ Π½ΠΎΠΌΠ΅Ρ€Π°, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΈΡ… с Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒΡŽ ΠΌΠΎΠΆΠ½ΠΎ пСрСнСсти Π² любой Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€.

ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π½Π° рСсурс ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎ ссылкС.

Uigradients

Π—Π΄Π΅ΡΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ самыС нСвСроятныС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ сочСтаний. Π₯ΠΎΡ€ΠΎΡˆ сСрвис Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π² полноэкранном Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅. И Π΅Ρ‰Π΅ Π΅ΡΡ‚ΡŒ малСнькая Ρ„ΠΈΡˆΠΊΠ°: ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ ΠΈΠΌΠ΅Π΅Ρ‚ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅, поэтому выглядит это ΠΎΡ‡Π΅Π½ΡŒ атмосфСрно. Как Π²Π°ΠΌ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ ΠΏΠΎΠ΄ ΠΈΠΌΠ΅Π½Π΅ΠΌ Moonlit Asteroid?

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ здСсь.

CoolHue

НСбольшая, Π½ΠΎ ΠΎΡ‡Π΅Π½ΡŒ милая коллСкция Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ². Π›ΡŽΠ±ΠΎΠΉ ΠΈΠ· Π½ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π² Π²ΠΈΠ΄Π΅ PNG-изобраТСния.

Бсылка Π½Π° ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ сайт сСрвиса

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Π² Π€ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ΅ Π½Π΅ Ρ‚Π°ΠΊΠΎΠ΅ ΡƒΠΆ Ρ‚Ρ€ΡƒΠ΄Π½ΠΎΠ΅ Π΄Π΅Π»ΠΎ, ΠΏΡ€Π°Π²Π΄Π°? ΠžΡΡ‚Π°Π²Π°ΡΡΡŒ Π² Ρ‚Ρ€Π΅Π½Π΄Π΅, Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹ Π½Π°ΠΌΠ΅Ρ€Ρ‚Π²ΠΎ Π·Π°ΠΊΡ€Π΅ΠΏΠΈΠ»ΠΈΡΡŒ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π½Π° блиТайшиС Π³ΠΎΠ΄Ρ‹, поэтому Π·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰Π΅Π³ΠΎ спСциалиста.

НадСюсь, Ρ‡Ρ‚ΠΎΒ Π²Ρ‹ Π½Π°ΡƒΡ‡ΠΈΠ»ΠΈΡΡŒ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ градиСнты для Π²Π°ΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ²,Β ΠΈΠ·ΡƒΡ‡ΠΈΠ² этот ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π».Β Π£Π΄Π°Ρ‡ΠΈ!

Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Ρ€Π°Π΄ΡƒΠΆΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Π² Adobe Illustrator

ARTISTHUNT BLOG

Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Ρ€Π°Π΄ΡƒΠΆΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Π² Adobe Illustrator

БСгодня Π±ΡƒΠ΄Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ яркий Ρ€Π°Π΄ΡƒΠΆΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Π² Adobe Illustrator.

1. ДобавляСм Ρ†Π²Π΅Ρ‚Π° Π½Π° панСль Swatches

НапримСр, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π°, ΠΊΠ°ΠΊ красный, ΠΎΡ€Π°Π½ΠΆΠ΅Π²Ρ‹ΠΉ, ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ, Π·Π΅Π»Π΅Π½Ρ‹ΠΉ, Π³ΠΎΠ»ΡƒΠ±ΠΎΠΉ, Ρ„ΠΈΠΎΠ»Π΅Ρ‚ΠΎΠ²Ρ‹ΠΉ.

Π¨Π°Π³ 1
Π‘Π½Π°Ρ‡Π°Π»Π° Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΡˆΠ΅ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ΠΎΠ² Π½Π° панСль Swatches, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ, Π² ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ счСтС, ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹Ρ‚ΡŒ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ‹ Π² Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚. Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Π½ΠΎΠ²Ρ‹ΠΉ стандартный Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ CMYK, Ρ‚ΠΎ коллСкция ΠΈΠ· ΡˆΠ΅ΡΡ‚ΠΈ Ρ†Π²Π΅Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ, ΡƒΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Π² ΠΏΠ°ΠΏΠΊΠ΅ «Brights». Как Π²Π°Ρ€ΠΈΠ°Π½Ρ‚, эту ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρƒ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ, зайдя Π² Π½ΠΈΡΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Π² ΠΏΠ°Π½Π΅Π»ΠΈ Swatches, ΠΈ Π΄Π°Π»Π΅Π΅ Π² Open Swatch Library > Default Swatches > Print. ΠžΡ‚Ρ‚ΡƒΠ΄Π° Π²Ρ‹ смоТСтС ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ ΠΊ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌ Ρ€Π°Π΄ΡƒΠΆΠ½Ρ‹ΠΌ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°ΠΌ Π² Π˜Π»Π»ΡŽΡΡ‚Ρ€Π°Ρ‚ΠΎΡ€Π΅, зайдя Π² Ρ‚ΠΎ ΠΆΠ΅ мСню, Open Swatch Library > Gradients > Spectrums.

Π¨Π°Π³ 2
Π©Π΅Π»ΠΊΠ½Π΅ΠΌ ΠΏΠΎ ΡΠΏΠ΅ΠΊΡ‚Ρ€Π°Π»ΡŒΠ½Ρ‹ΠΌ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈΡ… Π² панСль Swatches. Π—Π°Ρ‚Π΅ΠΌ Π² Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ΅ ΠΎΠ±Ρ€Π°Π·Ρ†ΠΎΠ² Π²ΠΊΠ»Π°Π΄ΠΊΠΈ Print, ΠΊΠ»ΠΈΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ Π·Π½Π°Ρ‡ΠΊΡƒ ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹ «Brights», Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ всС ΡˆΠ΅ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ΠΎΠ² Π² панСль Swatches.

2. ИзмСняСм ΡΠΏΠ΅ΠΊΡ‚Ρ€Π°Π»ΡŒΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚

Π¨Π°Π³ 1
НарисуйтС ΠŸΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ (M) ΠΈ ΠΊΠ»ΠΈΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ ΡΠΏΠ΅ΠΊΡ‚Ρ€Π°Π»ΡŒΠ½ΠΎΠΌΡƒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρƒ. Π­Ρ‚ΠΎ автоматичСски Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ Ρ„ΠΎΡ€ΠΌΡƒ Ρ€Π°Π΄ΡƒΠ³ΠΎΠΉ. Но ΠΌΡ‹, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅, ΠΌΠΎΠΆΠ΅ΠΌ Π΅Π³ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ Π½ΡƒΠΆΠ½Ρ‹Π΅ Π½Π°ΠΌ Ρ†Π²Π΅Ρ‚Π° для Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°. Π—Π°ΠΉΠ΄ΠΈΡ‚Π΅ Π² панСль Gradient ΠΈ Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ состоит ΠΈΠ· ΡˆΠ΅ΡΡ‚ΠΈ Ρ†Π²Π΅Ρ‚ΠΎΠ² — ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ.

Π¨Π°Π³ 2
Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚Π°, ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ ΠΈΠ· ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹ «Brights» Π½Π° ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΈ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°.

БСсплатный курс
РисованиС для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ²

ΠŸΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹ΠΉ 8-часовой курс для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ….
Бостоит ΠΈΠ· 7 Π²ΠΈΠ΄Π΅ΠΎ-ΡƒΡ€ΠΎΠΊΠΎΠ²

ΠΠ°Ρ‡Π°Ρ‚ΡŒ бСсплатно

Π¨Π°Π³ 3
Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ саму Ρ€Π°Π΄ΡƒΠΆΠ½ΡƒΡŽ Π·Π°Π»ΠΈΠ²ΠΊΡƒ Π² панСль Swatches. Для этого Π½ΡƒΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ с ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Π½ΠΎΠΉ ΠΊ Π½Π΅ΠΌΡƒ Ρ€Π°Π΄ΡƒΠΆΠ½ΠΎΠΉ Π·Π°Π»ΠΈΠ²ΠΊΠΎΠΉ прямо Π½Π° панСль Swatches.

МоТно Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Ρ‚ΡŒ Π²Π°ΡˆΡƒ Π·Π°Π»ΠΈΠ²ΠΊΡƒ Π΄Π²ΠΎΠΉΠ½Ρ‹ΠΌ ΠΊΠ»ΠΈΠΊΠΎΠΌ ΠΌΡ‹ΡˆΠΈ ΠΏΠΎ ΠΎΠ±Ρ€Π°Π·Ρ†Ρƒ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π½ΠΎΠ²ΠΎΠ΅ имя Π²ΠΎ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌ окошкС.

3. ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ

Π¨Π°Π³ 1
Π’Π΅ΠΏΠ΅Ρ€ΡŒ Ρƒ нас Π΅ΡΡ‚ΡŒ Ρ€Π°Π΄ΡƒΠΆΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ ΠΈ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π½Π° любоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅! НаправлСниС Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΏΠΎ ТСланию с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта Gradient Tool (G).

Π¨Π°Π³ 2
Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ наш Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚. ΠŸΠ΅Ρ€Π²Ρ‹ΠΌ Π΄Π΅Π»ΠΎΠΌ ΠΌΡ‹ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ ΠΊ ΠΏΠΎΡ€Ρ‚Ρ€Π΅Ρ‚Ρƒ Π΄Π΅Π²ΡƒΡˆΠΊΠΈ.

ΠŸΠΎΠΌΠ΅ΡΡ‚ΠΈΠΌ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ с Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½ΠΎΠΉ Π·Π°Π»ΠΈΠ²ΠΊΠΎΠΉ Π² самом Π½ΠΈΠ·Ρƒ, ΠΏΠΎΠ΄ волосами, Π° Π·Π°Ρ‚Π΅ΠΌ создадим Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ Π½Π°Π΄ ΠΏΠΎΡ€Ρ‚Ρ€Π΅Ρ‚ΠΎΠΌ. Π—Π°ΠΏΠΎΠ»Π½ΠΈΠ² Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ нашим Ρ€Π°Π΄ΡƒΠΆΠ½Ρ‹ΠΌ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ, Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡΡ Gradient Tool (G), Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΡŒΠ½ΡƒΡŽ Π·Π°Π»ΠΈΠ²ΠΊΡƒ ΠΏΠΎΠ²Π΅Ρ€Ρ… Ρ‚Π΅Π»Π° Π΄Π΅Π²ΡƒΡˆΠΊΠΈ. Π—Π°Ρ‚Π΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ Ρ€Π΅ΠΆΠΈΠΌ налоТСния (Blending Mode) нашСго Ρ€Π°Π΄ΡƒΠΆΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° Π½Π° Color Π² ΠΏΠ°Π½Π΅Π»ΠΈ Transparency.

Π¨Π°Π³ 3
Π’ этом шагС ΠΌΡ‹ рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ€Π°Π΄ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ для этого Π΄Ρ€ΡƒΠ³ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.
ΠŸΠΎΠ»ΡŒΠ·ΡƒΡΡΡŒ Π²Ρ‹ΡˆΠ΅ΠΈΠ·Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠΌ, располоТим ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ с Ρ€Π°Π΄ΡƒΠΆΠ½ΠΎΠΉ Π·Π°Π»ΠΈΠ²ΠΊΠΎΠΉ ΠΏΠΎΠ²Π΅Ρ€Ρ… ΠΏΠΎΡ€Ρ‚Ρ€Π΅Ρ‚Π°. Π’ этот Ρ€Π°Π· ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ Ρ‚ΠΈΠΏ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° (Type) Π½Π° Ρ€Π°Π΄ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ (Radial). Π Π΅ΠΆΠΈΠΌ налоТСния (Blending Mode) ΠΌΡ‹ оставим Ρ‚ΠΎΡ‚ ΠΆΠ΅, Ρ‡Ρ‚ΠΎ ΠΈ Π² ΠΏΡ€ΠΎΡˆΠ»ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ — Color. МоТно ΠΏΠΎΠ΄Π²ΠΈΠ³Π°Ρ‚ΡŒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚, мСняя Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Gradient Tool (G).

Π£Ρ€Π°! Π’Π΅ΠΏΠ΅Ρ€ΡŒ, воспользовавшись Π΄Π°Π½Π½ΠΎΠΉ Ρ‚Π΅Ρ…Π½ΠΈΠΊΠΎΠΉ, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Ρ€Π°Π·ΡƒΠΊΡ€Π°ΡΠΈΡ‚ΡŒ наши изобраТСния Π² Ρ†Π²Π΅Ρ‚Π° Ρ€Π°Π΄ΡƒΠ³ΠΈ.

ΠžΡ€ΠΈΠ³ΠΈΠ½Π°Π»: Create a Pride Rainbow Gradient Overlay in Adobe Illustrator

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ слоТных Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ€Π΅Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠ³ΠΎ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ

ΠžΡ‚Π²Π΅Ρ‚ΠΈΡ‚ΡŒ

  • 0

Kitavi Joseph ΠŸΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° Ρ€ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°

6 ΠΌΠΈΠ½ΡƒΡ‚ чтСния 1819 Π³.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° : послСднСС ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ этой ΡΡ‚Π°Ρ‚ΡŒΠΈ ΡΠΎΡΡ‚ΠΎΡΠ»ΠΎΡΡŒ 27 апрСля 2022 Π³., Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚Ρ€Π°Π·ΠΈΡ‚ΡŒ измСнСния Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ… Π½Π° основС классов, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… Π² руководствС.

Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ β€” это ΠΌΠ΅Ρ‚ΠΎΠ΄ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΏΡ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ нСсколько Ρ†Π²Π΅Ρ‚ΠΎΠ² ΡΠΌΠ΅ΡˆΠΈΠ²Π°ΡŽΡ‚ΡΡ вмСстС с ΠΏΠ»Π°Π²Π½Ρ‹ΠΌ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠΌ. НапримСр, ΠΏΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅ ΠΎ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ΅ Instagram. Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΈΠ³ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎΡ†Π²Π΅Ρ‚Π½Ρ‹ΠΉ Ρ„ΠΎΠ½ ΠΈΠ»ΠΈ настраиваСмыС ΠΊΠ½ΠΎΠΏΠΊΠΈ, добавляя Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ интСрСс ΠΊ Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΌΡƒ интСрфСйсу ΠΈ направляя Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ рассмотрим Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅, Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΈ Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹Π΅ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹ ΠΈ ΡƒΠ·Π½Π°Π΅ΠΌ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈΡ… Π² наши прилоТСния React Native. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ, Π²Π°ΠΌ потрСбуСтся Π±Π°Π·ΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ React Native. Π’Π°ΠΌ Ρ‚Π°ΠΊΠΆΠ΅ потрСбуСтся Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ React Native Π½Π° вашСм ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ. Π”Π°Π²Π°ΠΉΡ‚Π΅ Π½Π°Ρ‡Π½Π΅ΠΌ!

  • Начало Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Ρ€Π΅Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΌ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ
  • Π›ΠΈΠ½Π΅ΠΉΠ½Ρ‹Π΅ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹
    • Ρ†Π²Π΅Ρ‚Π°
    • Π½Π°Ρ‡Π°Π»ΠΎ
    • ΠΊΠΎΠ½Π΅Ρ†
    • мСстополоТСния
  • Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹
  • Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹
  • мСстополоТСния
  • Бонус

Начало Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Ρ€Π΅Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΌ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ

Π’ этом ΡƒΡ€ΠΎΠΊΠ΅ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ react-native-linear-gradient β€” Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ для добавлСния Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ² Π² нашС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, Π΄Π°Π²Π°ΠΉΡ‚Π΅ настроим Π½ΠΎΠ²Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ React Native:

 npx рСактивная инициализация LinearGradientExample
cd LinearGradientExample
Π½Π°Ρ‡Π°Π»ΠΎ пряТи
 

Π—Π°Ρ‚Π΅ΠΌ ΠΌΡ‹ запустим нашС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ экран привСтствия React Native Π½Π° устройствС ΠΈΠ»ΠΈ симуляторС. Запустив нашС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ React Native, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ react-native-linear-gradient. Настройка для react-native-linear-gradient зависит ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ React Native Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅. Π’ этом ΡƒΡ€ΠΎΠΊΠ΅ я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ v0.6+. Если Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ со старой вСрсиСй React Native, ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ установку:

.
 пряТа Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ€Π΅Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚
 

Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π²Π΅Ρ€ΡˆΠΈΡ‚ΡŒ настройку ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ для iOS, установитС ΠΌΠΎΠ΄ΡƒΠ»ΠΈ:

 установка модуля npx
 

Π›ΠΈΠ½Π΅ΠΉΠ½Ρ‹Π΅ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹

НачнСм с ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° LinearGradient ΠΈΠ· Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ:

 ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ LinearGradient ΠΈΠ· Β«Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° собствСнный Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Β»
 

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ LinearGradient ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ нСсколько Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Ρ†Π²Π΅Ρ‚Π°, Π³Π΄Π΅ ΠΎΠ½ начинаСтся ΠΈ Π³Π΄Π΅ заканчиваСтся.

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΌΡ‹ смоТСм Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойства для создания слоТных Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ², ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒ ΠΈ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ….

Ρ†Π²Π΅Ρ‚Π°

Ρ†Π²Π΅Ρ‚Π° , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ трСбуСтся, это Ρ‚ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ‹ ΠΏΠ΅Ρ€Π΅Π΄Π°Π΅ΠΌ Ρ†Π²Π΅Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ. Π¦Π²Π΅Ρ‚Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ Π² Ρ€Π°Π·Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ…, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ имя, rgba, ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Ρ‹ΠΉ ΠΈ Ρ‚. Π΄. Π¦Π²Π΅Ρ‚Π° слСдуСт ΡƒΠΏΠΎΡ€ΡΠ΄ΠΎΡ‡ΠΈΠ²Π°Ρ‚ΡŒ Π² Ρ‚ΠΎΠΌ порядкС, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡ… ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ. НапримСр, ΠΏΡ€ΠΈ colors={["purple","white"]} Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ Ρ„ΠΈΠΎΠ»Π΅Ρ‚ΠΎΠ²ΠΎΠ³ΠΎ ΠΊ Π±Π΅Π»ΠΎΠΌΡƒ.

Π½Π°Ρ‡Π°Π»ΠΎ

start ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Π³Π΄Π΅ начнСтся Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚, ΠΏΡƒΡ‚Π΅ΠΌ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ ΠΏΠΎ осям x ΠΈ y. ΠšΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ΠΏΠ΅Ρ€Π΅Π΄Π°ΡŽΡ‚ΡΡ ΠΊΠ°ΠΊ Ρ‡Π°ΡΡ‚ΡŒ всСго Π²ΠΈΠ΄Π° со значСниями Π² Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅ ΠΎΡ‚ 0 – 1 . По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ { x: 0,5, y: 0 } , начиная с Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Ρ†Π΅Π½Ρ‚Ρ€Π°.

ΠΊΠΎΠ½Π΅Ρ†

end Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π΅Π½ start , Π½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Π³Π΄Π΅ заканчиваСтся Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚. Он ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Ρ‚Π°ΠΊΠΈΠ΅ ΠΆΠ΅ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹, ΠΊΠ°ΠΊ start , Ρ‡Ρ‚ΠΎ, ΠΊΠ°ΠΊ ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΎΡΡŒ Ρ€Π°Π½Π΅Π΅, являСтся Ρ‡Π°ΡΡ‚ΡŒΡŽ всСго Π²ΠΈΠ΄Π°. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ β€” { x: 0,5, y: 1 } , Π·Π°ΠΊΠ°Π½Ρ‡ΠΈΠ²Π°ΡŽΡ‰Π΅Π΅ΡΡ Π²Π½ΠΈΠ·Ρƒ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.

мСстополоТСния

мСст β€” это массив чисСл, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚, Π³Π΄Π΅ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ останавливаСтся Π² Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π΅. Π­Ρ‚ΠΈ значСния Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠ΅Ρ€Π΅Π΄Π°ΡŽΡ‚ΡΡ ΠΊΠ°ΠΊ Ρ‡Π°ΡΡ‚ΡŒ всСго Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° ΠΎΡ‚ 0 Π΄ΠΎ 1 ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠΏΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π°, ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Π΅ΠΌΡ‹Π΅ ΠΏΠΎ Π΄Π»ΠΈΠ½Π΅ ΠΈ полоТСнию.

НапримСр, Ρƒ нас Π΅ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚Π° = {["красный","ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ","Π·Π΅Π»Π΅Π½Ρ‹ΠΉ"}] . Π—Π°Ρ‚Π΅ΠΌ Ρƒ нас Π±ΡƒΠ΄ΡƒΡ‚ мСстополоТСния = {[0, 0.5, 0.6]} с ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ красный , ΠΏΠΎΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ 0 – 0.5 , Π²Ρ‚ΠΎΡ€ΠΎΠΉ Ρ†Π²Π΅Ρ‚ ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ ΠΈΠ΄Π΅Ρ‚ ΠΎΡ‚ 0,5 – 0,6 ΠΈ, Π½Π°ΠΊΠΎΠ½Π΅Ρ†, Π·Π΅Π»Π΅Π½Ρ‹ΠΉ ΠΎΡ‚ 0,6 – 1 .

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ поняли основы, Π΄Π°Π²Π°ΠΉΡ‚Π΅ создадим нСсколько Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ‚ΠΈΠΏΠΎΠ² Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ².

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹

Как ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΎΡΡŒ Ρ€Π°Π½Π΅Π΅, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹ с Ρ€Π°Π·Π»ΠΈΡ‡Π½ΠΎΠΉ ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠ΅ΠΉ. Π”Π°Π²Π°ΠΉΡ‚Π΅ сначала ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для react-native-linear-gradient. Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ начинаСтся ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Ρ†Π΅Π½Ρ‚Ρ€Π° ΠΈ ΠΈΠ΄Π΅Ρ‚ Π²Π½ΠΈΠ· ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΌΡƒ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ. Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ!

Π‘Π½Π°Ρ‡Π°Π»Π° очиститС всС Π² App.js , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π½Π°Ρ‡Π°Ρ‚ΡŒ с нуля. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄:

 ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ React ΠΈΠ· Β«Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΒ»
ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ {StyleSheet, View, Text} ΠΈΠ· 'React-Native'
ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ LinearGradient ΠΈΠ· Β«Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° Ρ€ΠΎΠ΄Π½ΠΎΠΉ Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Β». // ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠ΅ΠΌ Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚
ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ () {
    Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ (
      <Π’ΠΈΠ΄ стиля={styles.container}>
        <Π›ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚
          colors={['красный', 'ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ', 'Π·Π΅Π»Π΅Π½Ρ‹ΠΉ' ]}
          ΡΡ‚ΠΈΠ»ΡŒ = {стили.linearGradient}
        >
          Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚
        
      
    )
}
константныС стили = StyleSheet.create({
  ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€: {
    Π³ΠΈΠ±ΠΊΠΈΠΉ: 1,
    alignItems: 'Ρ†Π΅Π½Ρ‚Ρ€',
    justifyContent: 'Ρ†Π΅Π½Ρ‚Ρ€',
  },
  Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚: {
    alignItems: 'Ρ†Π΅Π½Ρ‚Ρ€',
    justifyContent: 'Ρ†Π΅Π½Ρ‚Ρ€',
    границаРадиус: 5,
    высота: 200,
    ΡˆΠΈΡ€ΠΈΠ½Π°: 350,
  },
})
ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ
 

Начиная с ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° Π²Π²Π΅Ρ€Ρ…Ρƒ, ΠΌΡ‹ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠ΅ΠΌ React ΠΈΠ· React, нСсколько ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈΠ· React Native, Π·Π°Ρ‚Π΅ΠΌ добавляСм ΠΈΠΌΠΏΠΎΡ€Ρ‚ для LinearGradient .

Π—Π°Ρ‚Π΅ΠΌ ΠΌΡ‹ добавляСм View со стилСм, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ всС Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅, Π³Π΄Π΅ ΠΌΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ наш Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚. Π’ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ LinearGradient ΠΌΡ‹ ΠΏΠ΅Ρ€Π΅Π΄Π°Π΅ΠΌ Ρ†Π²Π΅Ρ‚Π° , Ρ‡Ρ‚ΠΎ являСтся Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΌ свойством, ΠΊΠ°ΠΊ ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΎΡΡŒ Ρ€Π°Π½Π΅Π΅. ΠœΡ‹ добавляСм Ρ‚Ρ€ΠΈ Ρ†Π²Π΅Ρ‚Π°; наш Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ красного Π΄ΠΎ ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ ΠΈ, Π½Π°ΠΊΠΎΠ½Π΅Ρ†, Π·Π΅Π»Π΅Π½Ρ‹ΠΉ . По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Ρ†Π΅Π½Ρ‚Ρ€Π° ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΌΡƒ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.

ΠŸΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΈ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚:

React Π ΠΎΠ΄Π½ΠΎΠΉ Ρ„ΠΎΠ½ с Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ

Π₯ΠΎΡ€ΠΎΡˆΠΎ, наш Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ отобраТаСтся, ΠΊΠ°ΠΊ ΠΈ оТидалось. Π§Ρ‚ΠΎΠ±Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ пропсы, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ Ρ€Π°Π½Π΅Π΅, Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠΈΠ³Ρ€Π°Π΅ΠΌ с Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρƒ нас Π΅ΡΡ‚ΡŒ.

Как ΡƒΠΆΠ΅ ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΎΡΡŒ, свойства ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для start : start={{ x: 0.5, y: 0 }} , Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒΡΡ с Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Ρ†Π΅Π½Ρ‚Ρ€Π°. Но Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΌΡ‹ ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅ΠΌ ΠΏΠΎΠ΄ Π²Π΅Ρ€Ρ…Π½ΠΈΠΌ Ρ†Π΅Π½Ρ‚Ρ€ΠΎΠΌ?

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅ сСбС всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ось x ΠΎΡ‚ΠΊΠ°Π»ΠΈΠ±Ρ€ΠΎΠ²Π°Π½Π° ΠΎΡ‚ 0 Π΄ΠΎ 1 . Π¦Π΅Π½Ρ‚Ρ€ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ 0,5 , ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅. ИзмСнСниС этого значСния Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π²Π΅Ρ€Ρ…Π½ΡŽΡŽ Ρ‚ΠΎΡ‡ΠΊΡƒ, с ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ начинаСтся наш Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚, создавая Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚. Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΎΠ±Π½ΠΎΠ²ΠΈΠΌ наш Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΉ LinearGradient , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ значСния для start , ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅:

 ...
      <Π›ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚
        colors={['красный', 'ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ', 'Π·Π΅Π»Π΅Π½Ρ‹ΠΉ' ]}
        ΡΡ‚ΠΈΠ»ΡŒ = {стили.linearGradient}
        Π½Π°Ρ‡Π°Π»ΠΎ = {{ Ρ…: 0,7, Ρƒ: 0}}
      >
        Π”ΠΈΠ°Π³ΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚
      
...
 
Π”ΠΈΠ°Π³ΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚

Как Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Π½Π° ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Π΅ Π²Ρ‹ΡˆΠ΅, Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ становится Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌ, начиная Π³Π΄Π΅-Ρ‚ΠΎ ΠΌΠ΅ΠΆΠ΄Ρƒ 0,5 ΠΈ 1 , двигаясь Π²Π½ΠΈΠ·. Если Ρƒ вас Π΅ΡΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ 0 ΠΈΠ»ΠΈ 1 , Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ начнСтся Π² ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… ΡƒΠ³Π»Π°Ρ…, справа ΠΈΠ»ΠΈ слСва.


Π‘ΠΎΠ»Π΅Π΅ 200Β 000 Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ LogRocket для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠ³ΠΎ взаимодСйствия

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ β†’


Π Π΅Π³ΡƒΠ»ΠΈΡ€ΠΎΠ²ΠΊΠ° значСния ΠΏΠΎ оси Y ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚, Π³Π΄Π΅ начнСтся Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚. ΠŸΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡ‚Π²ΠΎ ΠΏΠ΅Ρ€Π΅Π΄ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠΊΡ€Ρ‹Ρ‚ΠΎ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ. ОбновлСниС Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚Π° Π΄ΠΎ start={{ x: 0.5, y: 0.5}} заставит Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒΡΡ Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅ нашСго прСдставлСния с Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½ΠΎΠΉ, ΠΏΠΎΠΊΡ€Ρ‹Ρ‚ΠΎΠΉ красным:

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ с большим количСством красного

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ поняли, ΠΊΠ°ΠΊ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΡƒΡŽ Ρ‚ΠΎΡ‡ΠΊΡƒ ΠΏΠΎ осям x ΠΈ y, Π΄Π°Π²Π°ΠΉΡ‚Π΅ объСдиним это со свойством end для создания Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Ρ… Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ².

Как ΠΎΠ±ΡΡƒΠΆΠ΄Π°Π»ΠΎΡΡŒ Ρ€Π°Π½Π΅Π΅, end опрСдСляСт, Π³Π΄Π΅ закончится наш Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚. Для Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° Π² ΠΈΠ΄Π΅Π°Π»Π΅ ΠΌΡ‹ Ρ…ΠΎΡ‚Π΅Π»ΠΈ Π±Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ начинался Π² Π»Π΅Π²ΠΎΠΌ Ρ†Π΅Π½Ρ‚Ρ€Π΅ ΠΈ заканчивался Π² ΠΏΡ€Π°Π²ΠΎΠΌ Ρ†Π΅Π½Ρ‚Ρ€Π΅. Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ это:

 ...
      <Π›ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚
        colors={['красный', 'ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ', 'Π·Π΅Π»Π΅Π½Ρ‹ΠΉ' ]}
        ΡΡ‚ΠΈΠ»ΡŒ = {стили.linearGradient}
        Π½Π°Ρ‡Π°Π»ΠΎ = {{ Ρ…: 0, Ρƒ: 0,5}}
        ΠΊΠΎΠ½Π΅Ρ† = {{ Ρ…: 1, Ρƒ: 0,5}}
      >
        Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚
      
. ..
 

Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, ось Y сохраняСтся ΠΎΡ‚ Π½Π°Ρ‡Π°Π»Π° Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π°, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ ось X пСрСмСщаСтся ΠΎΡ‚ 0 Π΄ΠΎ 1 , создавая ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚:

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚

ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ это, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚, Π±Π»ΠΈΠ·ΠΊΠΈΠΉ ΠΊ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΌΡƒ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΡŽ. ОбновлСниС start={{ x: 0, y: 0 }} ΠΈ end={{ x: 1, y: 1 }} Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚:

Π”ΠΈΠ°Π³ΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚

мСстополоТСния

ΠŸΡ€ΠΈ использовании Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚ΠΎΠ² Ρƒ нас Π΅ΡΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π»ΠΎΠΊΠ°Ρ†ΠΈΠΈ, Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚ΠΎΠ² Π² ΠΎΠΆΠΈΠ΄Π°Π½ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ Π΅Ρ‰Π΅ Π½Π΅ использовали. Π’ΠΊΡ€Π°Ρ‚Ρ†Π΅, мСстополоТСния ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚, Π³Π΄Π΅ Ρ†Π²Π΅Ρ‚ остановится Π² Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π΅ ΠΈ сопоставится с ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниями Ρ†Π²Π΅Ρ‚Π° .

Locations ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² основном, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ нСсколько Ρ†Π²Π΅Ρ‚ΠΎΠ² Π·Π°Π½ΠΈΠΌΠ°Π»ΠΈ большС мСста Π² прСдставлСнии Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ. Π¦Π²Π΅Ρ‚ с большим Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ΠΎΠΌ ΠΎΡ…Π²Π°Ρ‚ΠΈΡ‚ большС мСста:

 . ..
      <Π›ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚
        colors={['красный', 'ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ', 'Π·Π΅Π»Π΅Π½Ρ‹ΠΉ' ]}
        ΡΡ‚ΠΈΠ»ΡŒ = {стили.linearGradient}
        Π½Π°Ρ‡Π°Π»ΠΎ = {{ Ρ…: 0, Ρƒ: 0,5}}
        ΠΊΠΎΠ½Π΅Ρ† = {{ Ρ…: 1, Ρƒ: 0,5}}
        мСстополоТСния = {[0, 0,7, 0,9]}
      >
        <ВСкст>Π₯. Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ мСстополоТСния
      
      <Π›ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚
        colors={['красный', 'ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ', 'Π·Π΅Π»Π΅Π½Ρ‹ΠΉ' ]}
        ΡΡ‚ΠΈΠ»ΡŒ = {стили.linearGradient}
        мСстополоТСния = {[0, 0,3, 0,9]}
      >
        <ВСкст>Π’. Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ мСстополоТСния
      
...
 

Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, Ρ‡Ρ‚ΠΎ Π² дСйствии:

H. Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ мСстополоТСнияV. Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ мСстополоТСния

НС ΡΡ‚Π΅ΡΠ½ΡΠΉΡ‚Π΅ΡΡŒ ΠΈΠ³Ρ€Π°Ρ‚ΡŒ с Ρ†Π²Π΅Ρ‚Π°ΠΌΠΈ, мСняйтС ΠΈΡ…, добавляйтС большС ΠΈ настраивайтС значСния для start , end ΠΈ мСстополоТСния ΠΈ посмотритС ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ сСбя Π²Π΅Π΄ΡƒΡ‚.

Бонус

Π’ этом Ρ€Π°Π·Π΄Π΅Π»Π΅ ΠΌΡ‹ рассмотрим нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² использования LinearGradients , описанных Π²Ρ‹ΡˆΠ΅:

  • ΠŸΠΎΠ»Π½ΠΎΡΠΊΡ€Π°Π½Π½Ρ‹ΠΉ ΠΌΠ½ΠΎΠ³ΠΎΡ†Π²Π΅Ρ‚Π½Ρ‹ΠΉ Ρ„ΠΎΠ½
  • Кнопка с Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹ΠΌ Ρ„ΠΎΠ½ΠΎΠΌ
  • Кнопка с Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½ΠΎΠΉ Ρ€Π°ΠΌΠΊΠΎΠΉ

Для этих ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π½Π°Ρ‡Π½Π΅ΠΌ Π·Π°Π½ΠΎΠ²ΠΎ! Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π½ΠΎΠ²Ρ‹ΠΉ Ρ„Π°ΠΉΠ» с ΠΈΠΌΠ΅Π½Π΅ΠΌ Home. js ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ index.js , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π½Π° Π½Π΅Π³ΠΎ ΠΊΠ°ΠΊ Π½Π° ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠΉ Ρ„Π°ΠΉΠ»:

 // index.js
...
// ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ· './App' // Π·Π°ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ это
ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ· './Home' // Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ это
... 

Π’Π΅ΠΏΠ΅Ρ€ΡŒ нашС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π³Π»Π°Π²Π½Ρ‹ΠΉ экран, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π²Π½ΠΎΡΠΈΡ‚ΡŒ Ρ‚ΡƒΠ΄Π° обновлСния. Π—Π°Ρ‚Π΅ΠΌ Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ Π½ΠΎΠ²ΠΎΠΌΡƒ Ρ„Π°ΠΉΠ»Ρƒ Home.js ΠΈ создадим нСсколько Π²Π΅Ρ‰Π΅ΠΉ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, полноэкранный ΠΌΠ½ΠΎΠ³ΠΎΡ†Π²Π΅Ρ‚Π½Ρ‹ΠΉ Ρ„ΠΎΠ½:

 // Home.js
ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ React ΠΈΠ· Β«Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΒ»
ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ {StyleSheet, Text} ΠΈΠ· 'React-Native'
ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ LinearGradient ΠΈΠ· Β«Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° Ρ€ΠΎΠ΄Π½ΠΎΠΉ Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Β»
функция Π”ΠΎΠΌ () {
    Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ (
      <Π›ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚
        Ρ†Π²Π΅Ρ‚Π°={['Ρ„ΠΈΠΎΠ»Π΅Ρ‚ΠΎΠ²Ρ‹ΠΉ', 'Π±Π΅Π»Ρ‹ΠΉ']}
        ΡΡ‚ΠΈΠ»ΡŒ = {стили.ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€}
        Π½Π°Ρ‡Π°Π»ΠΎ = {{ Ρ…: 0, Ρƒ: 0}}
        ΠΊΠΎΠ½Π΅Ρ† = {{ Ρ…: 1, Ρƒ: 1 }}
      >
        Π“Π»Π°Π²Π½Ρ‹ΠΉ экран
      
    )
}
константныС стили = StyleSheet.create({
  ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€: {
    Π³ΠΈΠ±ΠΊΠΈΠΉ: 1,
    alignItems: 'Ρ†Π΅Π½Ρ‚Ρ€',
    justifyContent: 'Ρ†Π΅Π½Ρ‚Ρ€',
  },
})
экспорт ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Главная
 

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π»ΠΈ Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚Ρ‹ start ΠΈ end для создания Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ диагонального Ρ„ΠΎΠ½Π°:

Π€ΠΈΠΎΠ»Π΅Ρ‚ΠΎΠ²Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹ΠΉ Ρ„ΠΎΠ½ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ экрана

Β 

Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ экрана

НаконСц, для Π½Π°ΡˆΠΈΡ… Π΄Π²ΡƒΡ… ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄Π°Π²Π°ΠΉΡ‚Π΅ вСрнСмся ΠΊ Home. js Ρ‡ΡƒΡ‚ΡŒ Π½ΠΈΠΆΠ΅ тСкста домашнСго экрана ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π΄Π²Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π― использовал Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΠΎΠ½Ρ‹ для ΠΎΠ±ΠΎΠΈΡ…. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ, Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹ΠΉ Ρ„ΠΎΠ½, пытаСтся ΠΈΠΌΠΈΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΡƒΡŽ схСму Instagram, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ Π΄Ρ€ΡƒΠ³ΠΎΠΉ создаСт эффСкт Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹:

 // Home.js
...
      Π“Π»Π°Π²Π½Ρ‹ΠΉ экран
       {}}>
        <Π›ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚
          Π½Π°Ρ‡Π°Π»ΠΎ = {{ Ρ…: 0, Ρƒ: 0}}
          ΠΊΠΎΠ½Π΅Ρ† = {{Ρ…: 1, Ρƒ: 1}}
          colors={['#5851DB', '#C13584', '#E1306C', '#FD1D1D', '#F77737']}
          ΡΡ‚ΠΈΠ»ΡŒ = {styles.instagramButton}
          >
          <Π‘Ρ‚ΠΈΠ»ΡŒ тСкста={{ Ρ†Π²Π΅Ρ‚: 'Π±Π΅Π»Ρ‹ΠΉ' }}>
            Π’ΠΎΠΉΡ‚ΠΈ Ρ‡Π΅Ρ€Π΅Π· Instagram
          
        
      
      <Π›ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚
        Π½Π°Ρ‡Π°Π»ΠΎ = {{ Ρ…: 0, Ρƒ: 0}}
        ΠΊΠΎΠ½Π΅Ρ† = {{Ρ…: 1, Ρƒ: 1}}
        colors={[ 'красный', 'ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ', 'Π·Π΅Π»Π΅Π½Ρ‹ΠΉ' ]}
        ΡΡ‚ΠΈΠ»ΡŒ = {{
          alignItems: 'Ρ†Π΅Π½Ρ‚Ρ€',
          justifyContent: 'Ρ†Π΅Π½Ρ‚Ρ€',
          границаРадиус: 10,
        }}
      >
         {}}
          ΡΡ‚ΠΈΠ»ΡŒ = {styles. signUpButton}
        >
          Π—Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ
        
      
...
// стили
  instagramButton: {
    Π½Π°Π±ΠΈΠ²ΠΊΠ°Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ: 40,
    paddingVertical: 10,
    границаРадиус: 10,
    ΠΌΠ°Ρ€ΠΆΠ°: 20
  },
  SignUpButton: {
    ΠΏΠΎΠ»Π΅: 1,
    ΡˆΠΈΡ€ΠΈΠ½Π°: 200,
    границаРадиус: 10,
    paddingVertical: 10,
    alignItems: 'Ρ†Π΅Π½Ρ‚Ρ€',
    justifyContent: 'Ρ†Π΅Π½Ρ‚Ρ€',
    backgroundColor: Β«Π±Π΅Π»Ρ‹ΠΉΒ»,
  },
 

ΠŸΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π²Ρ‹ΡˆΠ΅ ΠΊΠΎΠ΄ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π΄Π°Ρ‚ΡŒ Π½Π°ΠΌ ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅:

Π“Π»Π°Π²Π½Ρ‹ΠΉ экран React Native с ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ Instagram

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

Как всСгда, ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ° ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½ΡΡ‚Π²Ρƒ, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ поэкспСримСнтируйтС с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚Π°ΠΌΠΈ, ΠΏΠΎΠΊΠ° Π½Π΅ ΠΎΡΠ²ΠΎΠΈΡ‚Π΅ΡΡŒ. Π’ качСствС прСдостСрСТСния, ΠΊΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ Ρ†Π²Π΅Ρ‚ΠΎΠ², ΡΡ‚Π°Ρ€Π°ΠΉΡ‚Π΅ΡΡŒ Π½Π΅ ΠΏΠ΅Ρ€Π΅Π±Π°Ρ€Ρ‰ΠΈΠ²Π°Ρ‚ΡŒ с Π½ΠΈΠΌΠΈ. Блишком ΠΌΠ½ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚ΠΎΠ² Π½Π° экранС ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ Π½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΌ интСрфСйсС ΠΈ ΠΎΠΏΡ‹Ρ‚Π΅. НадСюсь, Π²Π°ΠΌ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ»Π°ΡΡŒ эта ΡΡ‚Π°Ρ‚ΡŒΡ. Π£Π΄Π°Ρ‡Π½ΠΎΠ³ΠΎ кодирования!

LogRocket: МгновСнноС воссозданиС ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ Π² Π²Π°ΡˆΠΈΡ… прилоТСниях React Native.

LogRocket β€” это Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€ΠΈΠ½Π³Π° React Native, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚Ρ‹ ошибок ΠΈ Π°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ React Native.

LogRocket Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ коэффициСнт конвСрсии ΠΈ использованиС ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°, Ρ‚ΠΎΡ‡Π½ΠΎ показывая, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‚ с вашим ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ. Π€ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π°Π½Π°Π»ΠΈΡ‚ΠΈΠΊΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ² LogRocket Π²Ρ‹ΡΠ²Π»ΡΡŽΡ‚ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρ‹, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π½Π΅ Π·Π°Π²Π΅Ρ€ΡˆΠ°ΡŽΡ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ процСсс ΠΈΠ»ΠΈ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π½ΠΎΠ²ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ.

НачнитС Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ ΠΎΡ‚ΡΠ»Π΅ΠΆΠΈΠ²Π°Ρ‚ΡŒ свои прилоТСния React Native β€” ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ LogRocket бСсплатно.

Kitavi Joseph ΠŸΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ React Native Developer

  • Π‘Π΅Π· ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ
  • #react native

ΠšΠΈΡΡ‚ΠΈ Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠ³ΠΎ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° β€” .NET MAUI

  • Π‘Ρ‚Π°Ρ‚ΡŒΡ

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Π·Π΅Ρ†

Класс LinearGradientBrush ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΌΠ½ΠΎΠ³ΠΎΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ прилоТСния .NET (.NET MAUI) являСтся ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄Π½Ρ‹ΠΌ ΠΎΡ‚ класса GradientBrush ΠΈ Π·Π°ΠΊΡ€Π°ΡˆΠΈΠ²Π°Π΅Ρ‚ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΌ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡΠΌΠ΅ΡˆΠΈΠ²Π°Π΅Ρ‚ Π΄Π²Π° ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ Ρ†Π²Π΅Ρ‚Π° вдоль Π»ΠΈΠ½ΠΈΠΈ, извСстной ΠΊΠ°ΠΊ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ ось. ΠžΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ GradientStop ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для указания Ρ†Π²Π΅Ρ‚ΠΎΠ² Π² Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π΅ ΠΈ ΠΈΡ… полоТСния. Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ свСдСния ΠΎΠ± ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°Ρ… GradientStop см. Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹.

Класс LinearGradientBrush опрСдСляСт ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ свойства:

  • StartPoint Ρ‚ΠΈΠΏΠ° Point , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прСдставляСт Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹Π΅ Π΄Π²ΡƒΠΌΠ΅Ρ€Π½Ρ‹Π΅ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠ³ΠΎ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ этого свойства Ρ€Π°Π²Π½ΠΎ (0,0).
  • EndPoint , Ρ‚ΠΈΠΏ Point , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прСдставляСт ΠΊΠΎΠ½Π΅Ρ‡Π½Ρ‹Π΅ Π΄Π²ΡƒΠΌΠ΅Ρ€Π½Ρ‹Π΅ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠ³ΠΎ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ этого свойства Ρ€Π°Π²Π½ΠΎ (1,1).

Π­Ρ‚ΠΈ свойства ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌΠΈ BindableProperty, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ цСлями привязок Π΄Π°Π½Π½Ρ‹Ρ… ΠΈ стилСй.

Класс LinearGradientBrush Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ IsEmpty , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ логичСскоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ , ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅, Π±Ρ‹Π»ΠΈ Π»ΠΈ Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ кисти ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ GradientStop.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅

Π›ΠΈΠ½Π΅ΠΉΠ½Ρ‹Π΅ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ linear-gradient() CSS.

ΠžΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΡ‚Π΅Π»ΠΈ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° кисти Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠ³ΠΎ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° располоТСны вдоль оси Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°. ΠžΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ оси Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ кисти StartPoint 9.0045 ΠΈ Бвойства EndPoint . Управляя этими свойствами, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅, Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΈ Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹, ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°, ΡƒΠΏΠ»ΠΎΡ‚Π½ΡΡ‚ΡŒ распространСниС Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅.

Бвойства StartPoint ΠΈ EndPoint относятся ΠΊ Π·Π°ΠΊΡ€Π°ΡˆΠΈΠ²Π°Π΅ΠΌΠΎΠΉ области. (0,0) прСдставляСт Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ Π»Π΅Π²Ρ‹ΠΉ ΡƒΠ³ΠΎΠ» Π·Π°ΠΊΡ€Π°ΡˆΠΈΠ²Π°Π΅ΠΌΠΎΠΉ области, Π° (1,1) прСдставляСт Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΏΡ€Π°Π²Ρ‹ΠΉ ΡƒΠ³ΠΎΠ» Π·Π°ΠΊΡ€Π°ΡˆΠΈΠ²Π°Π΅ΠΌΠΎΠΉ области. На ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½Π° ось Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° для кисти с Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌ Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΌ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ:

На этой Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ΅ пунктирная линия ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ось Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°, которая выдСляСт ΠΏΡƒΡ‚ΡŒ интСрполяции Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° ΠΎΡ‚ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ Π΄ΠΎ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠ³ΠΎ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚, создайтС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ LinearGradientBrush ΠΈ установитС для Π΅Π³ΠΎ StartPoint Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ (0,0), Π° для Π΅Π³ΠΎ EndPoint Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ (1,0). Π—Π°Ρ‚Π΅ΠΌ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π² ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ LinearGradientBrush.GradientStops Π΄Π²Π° ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° GradientStop, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°Π΄Π°ΡŽΡ‚ Ρ†Π²Π΅Ρ‚Π° Π² Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π΅ ΠΈ ΠΈΡ… полоТСния.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ XAML ΠΏΠΎΠΊΠ°Π·Π°Π½Π° Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ LinearGradientBrush, установлСнная Π² качСствС Ρ„ΠΎΠ½Π° Ρ„Ρ€Π΅ΠΉΠΌΠ°:

 
    <ΠšΠ°Π΄Ρ€.Π€ΠΎΠ½>
        
        
            
            
        
     Background>

 

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρ„ΠΎΠ½ ΠΊΠ°Π΄Ρ€Π° Π·Π°ΠΊΡ€Π°ΡˆΠΈΠ²Π°Π΅Ρ‚ΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ LinearGradientBrush, ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΠΎΠ»ΠΈΡ€ΡƒΡŽΡ‰Π΅ΠΉ ΠΎΡ‚ ΠΆΠ΅Π»Ρ‚ΠΎΠ³ΠΎ ΠΊ Π·Π΅Π»Π΅Π½ΠΎΠΌΡƒ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ:

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠ³ΠΎ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚, создайтС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ LinearGradientBrush ΠΈ установитС для Π΅Π³ΠΎ StartPoint Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ (0,0), Π° для Π΅Π³ΠΎ EndPoint Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ (0,1). Π—Π°Ρ‚Π΅ΠΌ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π² ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ LinearGradientBrush.GradientStops Π΄Π²Π° ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° GradientStop, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°Π΄Π°ΡŽΡ‚ Ρ†Π²Π΅Ρ‚Π° Π² Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π΅ ΠΈ ΠΈΡ… полоТСния.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ XAML ΠΏΠΎΠΊΠ°Π·Π°Π½Π° Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ LinearGradientBrush, установлСнная Π² качСствС Ρ„ΠΎΠ½Π° Ρ„Ρ€Π΅ΠΉΠΌΠ°:

 
    <ΠšΠ°Π΄Ρ€.Π€ΠΎΠ½>
        
        
            
            
        
     Background>

 

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρ„ΠΎΠ½ ΠΊΠ°Π΄Ρ€Π° Π·Π°ΠΊΡ€Π°ΡˆΠΈΠ²Π°Π΅Ρ‚ΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ LinearGradientBrush, ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΠΎΠ»ΠΈΡ€ΡƒΡŽΡ‰Π΅Π³ΠΎ ΠΎΡ‚ ΠΆΠ΅Π»Ρ‚ΠΎΠ³ΠΎ ΠΊ Π·Π΅Π»Π΅Π½ΠΎΠΌΡƒ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ:

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ диагонального Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠ³ΠΎ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚, создайтС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ LinearGradientBrush ΠΈ установитС для Π΅Π³ΠΎ StartPoint Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ (0,0), Π° для Π΅Π³ΠΎ EndPoint Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ (1,1). Π—Π°Ρ‚Π΅ΠΌ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π² ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ LinearGradientBrush.GradientStops Π΄Π²Π° ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° GradientStop, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°Π΄Π°ΡŽΡ‚ Ρ†Π²Π΅Ρ‚Π° Π² Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π΅ ΠΈ ΠΈΡ… полоТСния.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ XAML ΠΏΠΎΠΊΠ°Π·Π°Π½Π° диагональная ΠΊΠΈΡΡ‚ΡŒ LinearGradientBrush, установлСнная ΠΊΠ°ΠΊ Background Frame:

 <ΠšΠ°Π΄Ρ€.Π€ΠΎΠ½> <ΠšΠΈΡΡ‚ΡŒ Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠ³ΠΎ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°>