Π Π°Π·Π½ΠΎΠ΅

Π Π°Π·ΠΌΠ΅Ρ€ ΠΌΠ°ΠΊΠ΅Ρ‚Π° для сайта Π² Ρ„ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ΅: Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° сайта Π² Ρ„ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ΅, Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΌΠ°ΠΊΠ΅Ρ‚Π°

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

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° сайта Π² Ρ„ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ΅, Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΌΠ°ΠΊΠ΅Ρ‚Π°

ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ всСх Π½Π° fotodizart.ru. Π’ сСгодняшнСй нСбольшой ΡΡ‚Π°Ρ‚ΡŒΠ΅ я Π±Ρ‹ Ρ…ΠΎΡ‚Π΅Π» ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ созданиС Π΄ΠΈΠ·Π°ΠΉΠ½Π° сайта Π² Ρ„ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ΅. А Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ± ΠΎΠ΄Π½ΠΎΠΌ ΠΏΠΎΠ΄Π²ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠ°ΠΌΠ½Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π»ΠΈΠ±ΠΎ попросту Π½Π΅ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°ΡŽΡ‚, Π»ΠΈΠ±ΠΎ Π½Π΅ Π·Π½Π°ΡŽΡ‚ ΠΎ Π½Π΅ΠΌ. Π’ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· своих ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… статСй я ΡƒΠΆΠ΅ рассказывал ΠΎΠ± основных ΠΌΠΎΠΌΠ΅Π½Ρ‚Π°Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΡƒΠΆΠ½ΠΎ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚Π°.

ΠŸΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΠΎΠ± этих ΠΌΠΎΠΌΠ΅Π½Ρ‚Π°Ρ… ΠΌΠΎΠΆΠ½ΠΎ Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° сайта ΠΊΡ€ΠΎΠΌΠ΅ photoshop. БСгодня ΠΆΠ΅ Ρ€Π΅Ρ‡ΡŒ ΠΏΠΎΠΉΠ΄Π΅Ρ‚ ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΉ Π·Π°Π΄Π°Ρ‡Π΅, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Ρ€Π΅ΡˆΠ°Ρ‚ΡŒ ΠΈ ΡƒΠ·Π½Π°Π΅ΠΌ ΠΊΠ°ΠΊΠΈΠ΅ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊΠΈΠ΅, Π° Π½Π΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅. Π Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ ΠΌΡ‹ Π±ΡƒΠ΄ΠΈΠΌ созданиС Π΄ΠΈΠ·Π°ΠΉΠ½Π° сайта с фиксированной ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.

Π˜Ρ‚Π°ΠΊ, допустим, Ρƒ нас Π΅ΡΡ‚ΡŒ тСхничСскоС Π·Π°Π΄Π°Π½ΠΈΠ΅, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊ просит нас Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ сайт с фиксированной ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ Ρ‚Π΅Π»Π° сайта, Π° ΠΏΠΎ Π±ΠΎΠΊΠ°ΠΌ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ Ρ„ΠΎΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²Ρ‹ΠΌ ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°ΡΡ‚ΡΠ³ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π² зависимости ΠΎΡ‚ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ зашСдшСго Π½Π° Π±ΡƒΠ΄ΡƒΡ‰ΠΈΠΉ сайт.

Π˜ΡΡ…ΠΎΠ΄Ρ ΠΈΠ· поставлСнной Π·Π°Π΄Π°Ρ‡ΠΈ ΠΌΡ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ΄ минимальноС Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π°, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ Π½Π° сСгодняшний дСнь, это 1024Ρ…768 пиксСлСй.

Π’ΠΎΡ‚ Ρ‚ΡƒΡ‚ Ρ‚ΠΎ ΠΈ скрыт наш с Π²Π°ΠΌΠΈ ΠΏΠΎΠ΄Π²ΠΎΠ΄Π½Ρ‹ΠΉ камСнь, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π½Π΅ Π·Π°Π΄ΡƒΠΌΡ‹Π²Π°ΡŽΡ‚ΡΡ ΠΈ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‚ Ρ€Π°Π±ΠΎΡ‚Ρƒ Π½Π°Π΄ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ. Нас интСрСсуСт ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎ ΡˆΠΈΡ€ΠΈΠ½Π° Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π°, Π° Π½Π΅ высота. Высота ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ любая ΠΈΠ· расчСта наполнСния ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ сайта. Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, высота Π½Π° Π’Π°ΡˆΠ΅ усмотрСниС.

А Π²ΠΎΡ‚ ΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ слСдуСт ΠΏΡ€ΠΈΠ·Π°Π΄ΡƒΠΌΠ°Ρ‚ΡŒΡΡ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚ΠΎ Π΅Π΅???? А Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ‚Π΅Π»Π° сайта Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π² 1003 пиксСля, Π’Ρ‹ спроситС, ΠΏΠΎΡ‡Π΅ΠΌΡƒ 1003 пиксСля, Π° Π½Π΅ 1024, Π΄Π° ΠΏΠΎΡ‚ΠΎΠΌΡƒ ΠΊΠ°ΠΊ Π½ΡƒΠΆΠ½ΠΎ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ скроллинг Ρƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Π° ΠΎΠ½ составляСт Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π½Π΅ ΠΌΠ°Π»ΠΎ 21 пиксСль.

Π’ΠΎΡ‚ ΠΈ получаСтся, Ρ‡Ρ‚ΠΎ Ρ‚Π΅Π»ΠΎ нашСго сайта Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ 1003 пиксСля, этот ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚, Ρ‡Ρ‚ΠΎ Ρƒ вас Π½Π΅ появится Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ скроллинг Ρƒ сайта. Π’Π°ΠΊ ΠΊΠ°ΠΊ Π±Ρ‹Π²Π°ΡŽΡ‚ случаи, ΠΊΠΎΠ³Π΄Π° Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊ вСрстаСт ΠΌΠ°ΠΊΠ΅Ρ‚, ΠΏΠΎΠ΄ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ 1024Ρ…768 пиксСлСй, послС Ρ‡Π΅Π³ΠΎ появляСтся Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ скроллинг, благодаря ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ нСбольшая, Π½ΠΎ всС ΠΆΠ΅, Ρ‡Π°ΡΡ‚ΡŒ сайта находится Π²Π½Π΅ ΠΏΡ€Π΅Π΄Π΅Π»ΠΎΠ² ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

А это ΡƒΠΆΠ΅ ΠΊΠ°ΠΊ Π²Ρ‹ Π½Π°Π²Π΅Ρ€Π½ΠΎΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚Π΅ ΠΌΠ°Π»ΠΎ Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎ Π½Π΅ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ смотрится Π½ΠΎ ΠΈ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ нСудобство для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ сайтом (ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°), это большой минус. Π­Ρ‚ΠΎΡ‚ скроллинг появляСтся ΠΈΠ·-Π·Π° Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ Π½Π΅ ΡƒΡ‡Π΅Π» Ρ‡Ρ‚ΠΎ фиксированная ΡˆΠΈΡ€ΠΈΠ½Π° ΠΌΠ°ΠΊΠ΅Ρ‚Π° сайта 1003 пиксСля, Π° Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊ свСрстал ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π° 1024 пиксСля. ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, это ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈ ошибка Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ°, Π½ΠΎ сСйчас Π½Π΅ ΠΎ вСрсткС.

Π˜Ρ‚Π°ΠΊ, я Π΄ΡƒΠΌΠ°ΡŽ, ΠΌΡ‹ поняли, Ρ‡Ρ‚ΠΎ фиксированная Ρ‡Π°ΡΡ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Π° максимально Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ 1003 пиксСля, ΠΎΠ½Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈ мСньшС, ΠΌΡ‹ рассматриваСм ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ сайта Π½Π° минимальном Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π° с 1024Ρ…768 пикс.

Π― ΠΏΡ€ΠΈ созданиС Π΄ΠΈΠ·Π°ΠΉΠ½Π° сайта Π² Ρ„ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ холста Ρ€Π°Π²Π½Ρ‹Π΅ 1200 Ρ… 1800 пикс. Π€ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ дСлаю Π² 1000 пиксСлСй, Π° ΠΎΡΡ‚Π°Π²ΡˆΠΈΠ΅ΡΡ 200 пиксСлСй Ρ€Π°Π·Π΄Π΅Π»ΡΡŽ ΠΏΠΎΠΏΠΎΠ»Π°ΠΌ ΠΏΠΎ 100 Π½Π° ΠΏΡ€Π°Π²ΡƒΡŽ ΠΈ Π»Π΅Π²ΡƒΡŽ стороны соотвСтствСнно, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ Ρ€Π΅Π·ΠΈΠ½ΠΊΠΈ для ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€ΠΎΠ². НиТС я ΠΏΡ€ΠΈΠ²Π΅Π» схСму, ΠΊΠ°ΠΊΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² я создаю холст ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ.

Π‘Ρ‚Π°Ρ‚ΡŒΡ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»Π°ΡΡŒ нСбольшая, постарался максимально понятно Π΄Π°Ρ‚ΡŒ описаниС, Ссли Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ вопросы, ΠΏΠΈΡˆΠΈΡ‚Π΅ Π² коммСнтариях.

НСбольшоС Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: ΠΊΠ°ΠΊ Π·Π°ΠΌΠ΅Ρ‚ΠΈΠ» ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»Π΅ΠΉ, Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π±ΠΎΠΊΠΎΠ²ΠΎΠ³ΠΎ скроллинга Ρƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² измСнились. Если Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Ρ‚ΠΎΡ‡Π½ΠΎ ΠΏΡ€ΠΎΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π΄ΠΎ пиксСля, Ρ‚ΠΎ ΡƒΡ‡Ρ‚ΠΈΡ‚Π΅ этот Ρ„Π°ΠΊΡ‚.

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»: для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π²Π°ΠΌ потрСбуСтся ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½Π΅ ΠΎΠ΄ΠΈΠ½ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΊΠ°ΠΊ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²Ρ‹ΡˆΠ΅, Π° Π³ΠΎΡ€Π°Π·Π΄ΠΎ большС. Π Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π² этом вопросС ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ нСбольшой Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ… ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΏΡ€ΠΈ созданиС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° сайта.

ΠŸΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ сайта Π² Ρ„ΠΎΡ‚ΠΎΡˆΠΎΠΏ / Π€ΠΎΡ‚ΠΎΡˆΠΎΠΏ-мастСр

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… Π²Π΅Π±-ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² – Π½Π΅ΠΎΡ‚ΡŠΠ΅ΠΌΠ»Π΅ΠΌΠ°Ρ Ρ‡Π°ΡΡ‚ΡŒ ΠΆΠΈΠ·Π½ΠΈ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°. Π’ этом ΡƒΡ€ΠΎΠΊΠ΅ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ сайта с нуля. Π’ процСссС ΡƒΡ€ΠΎΠΊΠ° Π’Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Π΅ Ρ‚Ρ€ΡŽΠΊΠΈ ΠΏΡ€ΠΈ создании Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

РСсурсы ΡƒΡ€ΠΎΠΊΠ°:

  1. Набор ΠΈΠΊΠΎΠ½ΠΎΠΊ (wefunction.com)

    ΠΠ»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ ΠΈΠΊΠΎΠ½ΠΎΠΊ
  2. Иконка Twitter (iconeden.com)
  3. Π¨Ρ€ΠΈΡ„Ρ‚ Bebas (dafont.com)

Архив

Π¨Π°Π³ 1. Mockup

ΠŸΡ€Π΅ΠΆΠ΄Π΅, Ρ‡Π΅ΠΌ ΠΌΡ‹ Π½Π°Ρ‡Π½Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ сайта, Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΠ»Π°Π½-эскиз Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΈΠ΄Π½Π° Π΅Π³ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΈ ΠΏΡ€ΠΈΠ±Π»ΠΈΠ·ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ внСшний Π²ΠΈΠ΄.

Π¨Π°Π³ 2. Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚.

ΠœΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ сайта ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ Π² 960 пиксСлов. Для этого, создайтС Π½ΠΎΠ²Ρ‹ΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ 1200Ρ…1500Β  пиксСлов. Π Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ 72 пиксСла.

Π’Π°ΠΊ, ΠΊΠ°ΠΊ ΠΌΠ°ΠΊΠ΅Ρ‚ сайта Π±ΡƒΠ΄Π΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ Π² 960 пиксСлов, Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ эту ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅. Π’Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅ вСсь Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ (Ctrl+A).

ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² мСню Π’Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ – Π’Ρ€Π°Π½ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ (Select > Transform Selection). На ΠΏΠ°Π½Π΅Π»ΠΈ свойств Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части экрана установитС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ 960 пиксСлов. Π­Ρ‚ΠΎ ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ рабочая ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Π°.

УстановитС Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Ρ‚ΠΎΡ‡Π½ΠΎ ΠΏΠΎ Π³Ρ€Π°Π½ΠΈΡ†Π°ΠΌ выдСлСния.

Нам Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ отступ ΠΌΠ΅ΠΆΠ΄Ρƒ краями Ρ€Π°Π±ΠΎΡ‡Π΅ΠΉ области ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΈ ΠΎΠ±Π»Π°ΡΡ‚ΡŒΡŽ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΏΠΎΠ·ΠΆΠ΅. ΠŸΡ€ΠΈ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΌ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠΈ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, снова ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² мСню Π’Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ – Π’Ρ€Π°Π½ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ (Select > Transform Selection). Π£ΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚Π΅ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ Π΄ΠΎ 920 пиксСлов. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ с ΠΊΠ°ΠΆΠ΄ΠΎΠΉ стороны ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π±ΡƒΠ΄Π΅Ρ‚ отступ Π² 20 пиксСлов, Π² ΠΈΡ‚ΠΎΠ³Π΅ всСго это 40 пиксСлов.

УстановитС Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ ΠΏΠΎ Π½ΠΎΠ²ΠΎΠΌΡƒ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΡŽ:

Π¨Π°Π³ 3. Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΡˆΠ°ΠΏΠΊΡƒ сайта.

ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ ΠΊ созданию шапки сайта. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ высотой Π² 465 пиксСлов Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части ΠΌΠ°ΠΊΠ΅Ρ‚Π°.

Π—Π°Π»Π΅ΠΉΡ‚Π΅ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ сСрым Ρ†Π²Π΅Ρ‚ΠΎΠΌ, Π° Π² дальнСйшСм ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ стили слоя, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚Π° ΠΈ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹.

К шапкС Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½ΡƒΡŽ Π·Π°Π»ΠΈΠ²ΠΊΡƒ Ρ‡Π΅Ρ€Π΅Π· ΡΡ‚ΠΈΠ»ΡŒ слоя НалоТСниС Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° (Gradient Overlay). Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ ΠΈΠ· Π΄Π²ΡƒΡ… Ρ†Π²Π΅Ρ‚ΠΎΠ².

Π’Π΅ΠΏΠ΅Ρ€ΡŒ шапка Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

К шапкС Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ подсвСтку. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π½ΠΎΠ²Ρ‹ΠΉ слой (Ctrl + Alt + Shift + N) ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΌΡΠ³ΠΊΡƒΡŽ ΠΊΠΈΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ 600 пиксСлов. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ†Π²Π΅Ρ‚ #19535a ΠΈ ΠΊΠΈΡΡ‚ΡŒΡŽ ΠΊΠ»ΠΈΠΊΠ½ΠΈΡ‚Π΅ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π· Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½ΠΎΠΉ части шапки.

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π½Π° шапкС Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π² 110 пиксСлов.

НаТмитС ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Delete, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ.

Π‘Π»ΠΎΠΉ с подсвСткой соТмитС ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ (Ctrl + T).

НуТно ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ свСтовоС пятно Π½Π° шапкС находится Ρ€ΠΎΠ²Π½ΠΎ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ. Для этого, сдСлайтС Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ слои с шапкой ΠΈ подсвСткой ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ инструмСнт ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ (Move Tool) (V). На ΠΏΠ°Π½Π΅Π»ΠΈ свойств Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части экрана Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Ρ†Π΅Π½Ρ‚Ρ€ΠΎΠ² ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ (Align Horizontal Centers).

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π½ΠΎΠ²Ρ‹ΠΉ слой (Shift + Ctrl + N) ΠΈ нарисуйтС инструмСнтом ΠšΠ°Ρ€Π°Π½Π΄Π°Ρˆ (Pencil Tool) Ρ‚ΠΎΡ‡ΠΊΡƒ, Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ Π² 1 пиксСл. Для рисования ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ†Π²Π΅Ρ‚ #01bfd2.

Π‘Π³Π»Π°Π΄ΠΈΠΌ края этого слоя, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½ΡƒΡŽ маску. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ инструмСнт Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ (Gradient Tool) ΠΈ создайтС Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅:

ΠŸΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚Π΅ Π½ΠΎΠ²Ρ‹ΠΉ слой с маской, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π·Π°Π»Π΅ΠΉΡ‚Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ созданным Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ.

Π¨Π°Π³ 4. Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΡƒΠ·ΠΎΡ€

Π’Π΅ΠΏΠ΅Ρ€ΡŒ создадим простой ΡƒΠ·ΠΎΡ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΊ шапкС. Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌ ΠšΠ°Ρ€Π°Π½Π΄Π°Ρˆ (Pencil Tool) Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ Π² 2 пиксСла нарисуйтС Π΄Π²Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° рисункС. ΠžΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ Π½Π° врСмя Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ слоя (ΠΊΠ»ΠΈΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ ΠΈΠΊΠΎΠ½ΠΊΠ΅ Π³Π»Π°Π·Π° ΠΎΠΊΠΎΠ»ΠΎ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ слоя) ΠΈ создайтС ΡƒΠ·ΠΎΡ€ (Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ – ΠžΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΡƒΠ·ΠΎΡ€) (Edit > Define Pattern):

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π½ΠΎΠ²Ρ‹ΠΉ слой (Shift + Ctrl + N) ΠΈ помСститС Π΅Π³ΠΎ ΠΏΠΎΠ΄ слой с подсвСткой. Π’Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π’Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡƒΠ·ΠΎΡ€Β  ΠΈ ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ ΠΎΠΊΠ½ΠΎ Π’Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π·Π°Π»ΠΈΠ²ΠΊΡƒ (Fill) (Shift + F5). НаТмитС ОК.

ПослС добавлСния тСкстуры шапка выглядит Ρ‚Π°ΠΊ:

Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ ΠΏΠ»Π°Π²Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΎΡ‚ ΡƒΠ·ΠΎΡ€Π° ΠΊ шапкС: ΠΊ слою с ΡƒΠ·ΠΎΡ€ΠΎΠΌ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ маску ΠΈ мягкой ΠΊΠΈΡΡ‚ΡŒΡŽ Π±Π΅Π»ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π° (#ffffff) с Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒΡŽ 60% ΠΏΡ€ΠΎΠΉΠ΄ΠΈΡ‚Π΅ΡΡŒ ΠΏΠΎ маскС.

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Π¨Π°Π³ 5. ДобавляСм Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ

ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ ΠΊ добавлСнию Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ°. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΌΡΠ³ΠΊΡƒΡŽ ΠΊΠΈΡΡ‚ΡŒ с Ρ†Π²Π΅Ρ‚ΠΎΠΌ #19535a ΠΈ нарисуйтС пятно.

ΠΠ°ΠΏΠΈΡˆΠΈΡ‚Π΅ тСкст:

К слою с Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠΌ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΡΡ‚ΠΈΠ»ΡŒ слоя ВСнь (Drop Shadow).

Π¨Π°Π³ 6. Навигация

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ тСкст для Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.

НарисуйтС ΠΊΠ½ΠΎΠΏΠΊΡƒ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ инструмСнт ΠŸΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ выдСлСния (Rectangular Marquee Tool). Π—Π°Π»Π΅ΠΉΡ‚Π΅ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π»ΡŽΠ±Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Π—Π°Π»ΠΈΠ²ΠΊΠ° Π΄ΠΎ нуля.

К слою с ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΡΡ‚ΠΈΠ»ΡŒ НалоТСниС Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° (Gradient Overlay).

Π¨Π°Π³ 7. Π‘Π»Π°ΠΉΠ΄Π΅Ρ€ для ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ 580Ρ…295 пиксСлов.

Π—Π°Π»Π΅ΠΉΡ‚Π΅ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π»ΡŽΠ±Ρ‹ΠΌ ΠΎΡ‚Ρ‚Π΅Π½ΠΊΠΎΠΌ сСрого.

ΠŸΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Π—Π°ΠΊΡ€Π΅ΠΏΠΈΡ‚Π΅ Π΅Π³ΠΎ со слоСм, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ создали Ρ€Π°Π½Π΅Π΅.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΊ слайдСру Π΄ΠΎΠ±Π°Π²ΠΈΠΌ эффСкт. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π½ΠΎΠ²Ρ‹ΠΉ слой (Shift + Ctrl + N), Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠšΠΈΡΡ‚ΡŒ (Brush Tool) с Π΄ΠΈΠ°ΠΌΠ΅Ρ‚Ρ€ΠΎΠΌ 400 пиксСлов. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρƒ ΠšΠΈΡΡ‚ΡŒ (F5) ΠΈ установитС Ρ‚Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ Π½Π° ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Π΅:

Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ (#000000) ΠΈ нарисуйтС пятно:

Для смягчСния ΠΊΡ€Π°Π΅Π² ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚Π΅ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ Π Π°Π·ΠΌΡ‹Ρ‚ΠΈΠ΅ ΠΏΠΎ Гауссу (Gaussian Blur).

Π’Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅ ниТнюю ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρƒ Ρ‚Π΅Π½ΠΈ ΠΈ ΡƒΠ΄Π°Π»ΠΈΡ‚Π΅ (Delete).

ΠŸΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ слой с Ρ‚Π΅Π½ΡŒΡŽ Π½Π°Π΄ слайдСром:

Π‘ΠΎΠΆΠΌΠΈΡ‚Π΅ слой с Ρ‚Π΅Π½ΡŒΡŽ Π·Π° срСдний ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ (Ctrl + T), Π° Π·Π°Ρ‚Π΅ΠΌ снова ΠΎΡ‚Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΡƒΠΉΡ‚Π΅ слой с Ρ‚Π΅Π½ΡŒΡŽ: Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅ ΠΎΠ±Π° слоя ΠΈ Π² ΠΏΠ°Π½Π΅Π»ΠΈ свойств Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Ρ†Π΅Π½Ρ‚Ρ€ΠΎΠ² ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ (Align Horizontal Centers).

Π”ΡƒΠ±Π»ΠΈΡ€ΡƒΠΉΡ‚Π΅ слой с Ρ‚Π΅Π½ΡŒΡŽ (Ctrl + J) ΠΈ помСститС Π΄ΡƒΠ±Π»ΠΈΠΊΠ°Ρ‚ Π½Π° Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΡ€Π°ΠΉ слайдСра.

НарисуйтС ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° слайдСрС, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ инструмСнт ΠŸΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ выдСлСния (Rectangular Marqee Tool). Π—Π°Π»Π΅ΠΉΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ‡Π΅Ρ€Π½Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ (#000000).

Π£ΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚Π΅ Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ слоя с ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ Π΄ΠΎ 50%.

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ„ΠΈΠ³ΡƒΡ€Ρƒ стрСлки Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ слайдСра:

На Π½ΠΈΠΆΠ½Π΅ΠΉ части слайдСра нарисуйтС полосу ΠΈ Π·Π°Π»Π΅ΠΉΡ‚Π΅ Π΅Π΅ Ρ‡Π΅Ρ€Π½Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ (#000000).

Π£ΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚Π΅ Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ слоя с полосой Π΄ΠΎ 50%.

На эту полосу Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ описаниС Π’Π°ΡˆΠ΅Π³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°:

Π¨Π°Π³ 8. ДобавляСм тСкст с привСтствиСм

ΠΠ°ΠΏΠΈΡˆΠΈΡ‚Π΅ тСкст с привСтствиСм:

Π¨Π°Π³ 9. Π—Π°Π²Π΅Ρ€ΡˆΠ°Π΅ΠΌ Ρ€Π°Π±ΠΎΡ‚Ρƒ Π½Π°Π΄ шапкой сайта

ΠœΡ‹ ΠΏΠΎΡ‡Ρ‚ΠΈ Π·Π°ΠΊΠΎΠ½Ρ‡ΠΈΠ»ΠΈ Ρ€Π°Π±ΠΎΡ‚Ρƒ Π½Π°Π΄ шапкой сайта. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π΅Π»Π΅ Π·Π°ΠΌΠ΅Ρ‚Π½ΡƒΡŽ Ρ‚Π΅Π½ΡŒ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ инструмСнта ΠšΠΈΡΡ‚ΡŒ (Brush Tool).

ΠžΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚Π΅Π½ΡŒΡŽ ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ пропуск Π² 1 пиксСл.

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π½ΠΎΠ²Ρ‹ΠΉ слой ΠΏΠΎΠ΄ слоСм с шапкой (Shift + Ctrl + N) ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚Π΅ ΠΊ Π½Π΅ΠΌΡƒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚.

Π¨Π°Π³ 10. ДобавляСм ΠΊΠ½ΠΎΠΏΠΊΠΈ для слайдСра

НарисуйтС ΠΊΠ½ΠΎΠΏΠΊΠΈ смСны слайдов.

К ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΡΡ‚ΠΈΠ»ΡŒ слоя ВнутрСнняя Ρ‚Π΅Π½ΡŒ (Inner Shadow), Π° Π·Π°Ρ‚Π΅ΠΌ Π΄ΡƒΠ±Π»ΠΈΡ€ΡƒΠΉΡ‚Π΅ слой с ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ Π½ΡƒΠΆΠ½ΠΎΠ΅ количСство Ρ€Π°Π· (Ctrl + J).

Π¨Π°Π³ 12. Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΡŒ для ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌ ΠšΠ°Ρ€Π°Π½Π΄Π°Ρˆ (Pencil Tool) ΠΈ нарисуйтС свСтло-ΡΠ΅Ρ€ΡƒΡŽ (#aaaaaa) линию ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ Π² 1 пиксСл.

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΊ слою с Π»ΠΈΠ½ΠΈΠ΅ΠΉ маску ΠΈ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° сдСлайтС ΠΏΠ»Π°Π²Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ Π½Π° краях.

Π¨Π°Π³ 13.  ДобавляСм ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚

ΠŸΡ€ΠΈΡˆΠ»ΠΎ врСмя Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ области ΠΏΠΎΠ΄ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. ΠžΠ±Π»Π°ΡΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π° Π½Π° 3 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ с Ρ€Π°Π²Π½Ρ‹ΠΌ отступом. ΠœΠ΅ΠΆΠ΄Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΎΠΉ Π±ΡƒΠ΄Π΅Ρ‚ отступ Π² 25 пиксСлов.

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ ΠΏΠΎ ΠΎΠ±Π΅ΠΈΠΌ сторонам ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ.

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π² ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ список услуг. Π£ΠΊΡ€Π°ΡΡŒΡ‚Π΅ тСкст с услугами ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ.

НарисуйтС ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Read MoreΒ» ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ инструмСнта ΠŸΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ со скруглСнными ΡƒΠ³Π»Π°ΠΌΠΈ (Rounded Rectangle Tool) Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ слой-Ρ„ΠΈΠ³ΡƒΡ€Ρ‹.

К слою с ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚Π΅ стили слоя НалоТСниС Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° (Gradient Overlay) ΠΈ Обводка (Stroke).

Π”ΡƒΠ±Π»ΠΈΡ€ΡƒΠΉΡ‚Π΅ слой с ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ (Ctrl + J).

Π’ Π½ΠΈΠΆΠ½Π΅ΠΉ части этих Ρ‚Ρ€Π΅Ρ… ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ нарисуйтС сСрыС ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΈ ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΊ Π½ΠΈΠΌ ΡΡ‚ΠΈΠ»ΡŒ Обводка (Stroke), Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ Π² 3 пиксСла.

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ изобраТСния Π² эти сСрыС области:

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Ρ‚Π΅Π½ΡŒ, ΠΊΠ°ΠΊ Π΄Π΅Π»Π°Π»ΠΈ это Ρ€Π°Π½Π΅Π΅ ΠΈ помСститС Π΅Π΅ ΠΏΠΎΠ΄ области с фотографиями:

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ описаниС ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°:

ΠŸΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ Π² ΠΎΠ΄Π½Ρƒ ΠΈΠ· ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈΠΊΠΎΠ½ΠΊΡƒ Twitter.

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ сообщСниС ΠΎ Twitter.

НарисуйтС ΠΊΠ½ΠΎΠΏΠΊΡƒ More Tweets.

ΠŸΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚Π΅ ΠΊ этой ΠΊΠ½ΠΎΠΏΠΊΠ΅ стили слоя:

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ тСкст.

Π¨Π°Π³ 14. Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Ρ„ΡƒΡ‚Π΅Ρ€

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π² Π½ΠΈΠΆΠ½Π΅ΠΉ части ΠΌΠ°ΠΊΠ΅Ρ‚Π° – это Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΏΠΎΠ΄ Ρ„ΡƒΡ‚Π΅Ρ€, ΠΈ Π·Π°Π»Π΅ΠΉΡ‚Π΅ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ сСрым Ρ†Π²Π΅Ρ‚ΠΎΠΌ.

ΠŸΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚Π΅ ΠΊ этой области ΡΡ‚ΠΈΠ»ΡŒ слоя НалоТСниС Ρ†Π²Π΅Ρ‚Π° (Color Overlay).

Π’ Ρ„ΠΈΠ½Π°Π»Π΅, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π½Π° Ρ„ΡƒΡ‚Π΅Ρ€ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ ΠΈ ΠΊΠΎΠΏΠΈΡ€Π°ΠΉΡ‚.

ЀинальноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅:

Автор ΡƒΡ€ΠΎΠΊΠ°: Niranth

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΈΠ»ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½ сайта Π² Photoshop

По многочислСнным ΠΏΡ€ΠΎΡΡŒΠ±Π°ΠΌ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»Π΅ΠΉ, ΠΌΡ‹ сСгодня Π±ΡƒΠ΄Π΅ΠΌ Π΄Π΅Π»Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½, Π²Π΅Ρ€Π½Π΅Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚ сайта Π²Β Photoshop. ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ Ссли с этим Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ сталкивался, ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ довольно Π½Π΅ просто, Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ мноТСство вопросов, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ я сСгодня ΠΏΠΎΡΡ‚Π°Ρ€Π°ΡŽΡΡŒ ΠΎΡ‚Π²Π΅Ρ‚ΠΈΡ‚ΡŒ. Как оказываСтся, Ρ‡Ρ‚ΠΎ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π° ΠΏΠΎ этому ΠΏΠΎΠ²ΠΎΠ΄Ρƒ Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ Π½Π΅ Ρ‚Π°ΠΊ ΡƒΠΆ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ. Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΊΡƒΡ‡Π°, Π° ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ сайта Π½ΠΈΠΊΡ‚ΠΎ Π½Π΅ рассказываСт. ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ я просто ΠΏΠ»ΠΎΡ…ΠΎ искал? πŸ™‚

ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅

Π’ ΠΎΠ±Ρ‰Π΅ΠΌ Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΡƒΠΆΠ΅ Π΄Π΅Π»Π°Ρ‚ΡŒ.

Для Π½Π°Ρ‡Π°Π»Π° я ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΈΠ» Π½Π΅ слоТный ΠΌΠ°ΠΊΠ΅Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ с Π’Π°ΠΌΠΈ Ρ€Π°Π·Π±ΠΈΡ€Π°Ρ‚ΡŒ. Π’ΠΎΡ‚ ΠΊΠ°ΠΊ ΠΎΠ½ выглядит:

Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ шаблон получился Π½Π΅ слоТный, СстСствСнно это Π±Π»ΠΎΠ³ΠΎΠ²Ρ‹ΠΉ шаблон, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠ·ΠΆΠ΅ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ Π² HTML. Ну Π° ΠΏΠΎΠΊΠ° Ρ‡Ρ‚ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π±ΡƒΠ΄Π΅ΠΌ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ. Ну Π° Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠΎΠ΅Ρ…Π°Π»ΠΈ.

ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС

ΠŸΠ΅Ρ€Π²ΠΎΠ΅, Ρ‡Ρ‚ΠΎ Π’Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ это Photoshop. Если Ρƒ Вас Π΅Π³ΠΎ Π½Π΅Ρ‚, ΠΏΠΎΠΊΡƒΠΏΠ°ΠΉΡ‚Π΅ πŸ™‚

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Π² Π€ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ΅ Π½ΡƒΠΆΠ½ΠΎ Π·Π°ΠΉΡ‚ΠΈ Π² Β«Π€Π°ΠΉΠ»Β» ΠΈ ΠΊΠ»ΠΈΠΊΠ½ΡƒΡ‚ΡŒ Β«Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒΒ», Π·Π°Ρ‚Π΅ΠΌ появится ΠΎΠΊΠ½ΠΎ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹.

Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ зависят ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚ Π’Π°Ρˆ Π±ΡƒΠ΄ΡƒΡ‰ΠΈΠΉ сайт. Π’ΠΎΡ‚ Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π’Ρ‹ Ρ€Π΅ΡˆΠΈΠ»ΠΈ, Ρ‡Ρ‚ΠΎ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ сайт Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ 1000 Ρ€Ρ…, ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ большС Π³Π΄Π΅ Ρ‚ΠΎ 1200 Ρ€Ρ…. Π­Ρ‚ΠΎ дСлаСтся Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ для удобства, Ρ‡Ρ‚ΠΎ Π±Ρ‹ Π’Π°Ρˆ ΠΌΠ°ΠΊΠ΅Ρ‚ смотрСлся Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅.

По ΠΏΠΎΠ²ΠΎΠ΄Ρƒ высоты, выставляСтся Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΎΡ‚ Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠΈ шаблона. Но ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π΄Π΅Π»Π°ΠΉΡ‚Π΅ большС, 4000 Ρ€Ρ… Π΄ΡƒΠΌΠ°ΡŽ Ρ…Π²Π°Ρ‚ΠΈΡ‚. Π­Ρ‚ΠΎ дСлаСтся для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π² дальнСйшСм всС элСмСнты Π²Π»Π΅Π·Π»ΠΈ. ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ я ΠΊΠ°ΠΊ Ρ‚ΠΎ сдСлал ΠΌΠ°Π»Π΅Π½ΡŒΠΊΡƒΡŽ высоту, ΠΈ ΠΌΠ½Π΅ ΠΏΡ€ΠΈΡˆΠ»ΠΎΡΡŒ ΠΏΠΎΡ‚ΠΎΠΌ ΠΏΠ΅Ρ€Π΅Π½ΠΎΡΠΈΡ‚ΡŒ всё Π² Π½ΠΎΠ²Ρ‹ΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚.

Π’ ΠΌΠΎΡ‘ΠΌ случаС сайт Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π² 1200Ρ€Ρ…. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ я сдСлал Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ Π² 1300 Ρ€Ρ… ΠΈ высотой Π² 4000 Ρ€Ρ…. ΠžΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ настройки ΠΎΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΠΊΠ°ΠΊ Π΅ΡΡ‚ΡŒ.

Π€ΠΎΠ½ шаблона сайта

ПослС Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΠΌΡ‹ создали Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚, Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ сдСлайтС Ρ„ΠΎΠ½ для сайта. НС Π²Π°ΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎ это Π±ΡƒΠ΄Π΅Ρ‚ Ρ†Π²Π΅Ρ‚ ΠΈΠ»ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π½ΠΎ сдСлайтС Π΅Π³ΠΎ. Π’ ΠΌΠΎΡ‘ΠΌ случаС это просто Π±Π΅Π»Ρ‹ΠΉ Ρ„ΠΎΠ½. Π’Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ инструмСнт Β«Π—Π°Π»ΠΈΠ²ΠΊΠ°Β» Π² ΠΏΠ°Π»ΠΈΡ‚Ρ€Π΅ Ρ†Π²Π΅Ρ‚ΠΎΠ² Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ Π±Π΅Π»Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚, Π·Π°Ρ‚Π΅ΠΌ просто ΠΊΠ»ΠΈΠΊΠ°Π΅ΠΌ ΠΏΠΎ Ρ„ΠΎΠ½Ρƒ.

Π¨ΠΈΡ€ΠΈΠ½Π° Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ сайта Π² 1200 Ρ€Ρ…

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ сайта, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒΡΡ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. Π”Π΅Π»Π°Ρ‚ΡŒ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ это с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ. Если ΠΎΠ½Π° Ρƒ Вас Π½Π΅ Π°ΠΊΡ‚ΠΈΠ²Π½Π°, Π½ΡƒΠΆΠ½ΠΎ Π·Π°ΠΉΡ‚ΠΈ Π² Β«ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Β» ΠΈ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π³Π°Π»ΠΎΡ‡ΠΊΡƒ Π½Π° ΠΏΡ€ΠΎΡ‚ΠΈΠ² Β«Π›ΠΈΠ½Π΅ΠΉΠΊΠ°Β». Π—Π°Ρ‚Π΅ΠΌ ΠΎΠ½Π° Π΄ΠΎΠ»ΠΆΠ½Π° ΠΏΠΎΡΠ²ΠΈΡ‚ΡŒΡΡ Ρƒ Вас Π² ΠΎΠΊΠ½Π΅ просмотра.

А Π²ΠΎΡ‚ ΠΊΠ°ΠΊ ΠΎΠ½Π° выглядит:

ВыдСляСм наш слой, Π½ΡƒΠΆΠ½ΠΎ просто ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π· ΠΊΠ»ΠΈΠΊΠ½ΡƒΡ‚ΡŒ Π½Π° Π½Π΅Π³ΠΎ:

А сСйчас Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π»ΠΈΠ½Π΅ΠΉΠΊΡƒ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ нашСго Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, Π²Π΅Ρ€Π½Π΅Π΅ Π½Π°ΠΉΡ‚ΠΈ Ρ†Π΅Π½Ρ‚Ρ€. Для этого Π½Π°Π²ΠΎΠ΄ΠΈΠΌ курсор Π½Π° Π»ΠΈΠ½Π΅ΠΉΠΊΡƒ Π½Π° Π½Π΅ΠΉ ΠΆΠ΅ Π·Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ Π»Π΅Π²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΡ‹ΡˆΠΈ ΠΈ вытягиваСм линию Π½Π° наш Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚. ВянСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Π½Π° сСрСдину, Π»ΠΈΠ½Π΅ΠΉΠΊΠ° сама Π½Π°ΠΉΠ΄Ρ‘Ρ‚ Ρ†Π΅Π½Ρ‚Ρ€.

ПослС Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΠΌΡ‹ нашли Ρ†Π΅Π½Ρ‚Ρ€, Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ наш сайт ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ Π² 1200 Ρ€Ρ… Π² Ρ†Π΅Π½Ρ‚Ρ€ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π² 1300 Ρ€Ρ…. Для этого Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ инструмСнт Β«ΠŸΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡ‚ΡŒΒ», свСрху устанавливаСм Π‘Ρ‚ΠΈΠ»ΡŒ Π½Π° Π—Π°Π΄Π°Π½Π½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€, ΠΊΡƒΠ΄Π° пишСм Π²ΠΎΡ‚ Ρ‚Π°ΠΊΠΈΠ΅ значСния: ΡˆΠΈΡ€ΠΈΠ½Π° β€” 1200Ρ€Ρ…, высота 400Ρ€Ρ…. Π”Π°Π»Π΅Π΅ просто ΠΊΠ»ΠΈΠΊΠ°Π΅ΠΌ ΠΏΠΎ Π½Π°ΡˆΠ΅ΠΌΡƒ Π±Π΅Π»ΠΎΠΌΡƒ Ρ„ΠΎΠ½Ρƒ ΠΈ Ρƒ нас появится выдСлСнная ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Ρ‚ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ которая Π½Π°ΠΌ Π½ΡƒΠΆΠ½Π°.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π°ΡˆΡƒ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΏΠΎΠΌΠ΅Ρ‰Π°Π΅ΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΡ‹ΡˆΠΊΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ, ΠΎΠ½Π° Π½Π°ΠΉΠ΄Ρ‘Ρ‚ Ρ†Π΅Π½Ρ‚Ρ€ сама. Π—Π°Ρ‚Π΅ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Ρ‚Π°Ρ‰ΠΈΡ‚ΡŒ Π΅Ρ‰Ρ‘ 2 Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ ΠΈ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈΡ… ΠΏΠΎ ΠΎΠ±Π΅ стороны Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ области. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΌΡ‹ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°Π΅ΠΌ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ нашСго Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ сайта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π² 1200 Ρ€Ρ…. Π’Π°ΠΊ ΠΆΠ΅ ΠΏΠΎ этим Π»ΠΈΠ½Π΅ΠΉΠΊΠ° Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΡ‰Π΅ ΠΏΠΎΠ΄Π³ΠΎΠ½ΡΡ‚ΡŒ элСмСнты Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Если Π’Π°ΠΌ Π½Π΅ понятно сдСлайтС Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ Π½Π° рисункС Π½ΠΈΠΆΠ΅.

Π›ΠΈΠ½Π΅ΠΉΠΊΡƒ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π² дальнСйшСм, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π±Π΅Π· Π½Π΅Ρ‘ здСсь Π½Π΅ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ, ΠΎΠ½Π° позволяСт Π²Ρ‹ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ всё Ρ€ΠΎΠ²Π½ΠΎ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ практичСски ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΈΠ»ΠΈ наш Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚. ΠœΡ‹ ΡƒΠ·Π½Π°Π»ΠΈ сСрСдину, Π° Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡ΠΈΠ»ΠΈ Ρ‚ΠΎΡ‡Π½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π·Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π»Π°Π·ΠΈΡ‚ΡŒ. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ ΠΊ самому интСрСсному, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΊ созданию Π΄ΠΈΠ·Π°ΠΉΠ½Π° сайта (ΠΌΠ°ΠΊΠ΅Ρ‚Π°).

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈΠ»ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π° сайта

Π’Π°ΠΆΠ½ΠΎ!

ВсСгда создавайтС Π³Ρ€ΡƒΠΏΠΏΡ‹ для слоёв ΠΈ Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΈΠΌ названия. ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π² дальнСйшСм Ρ‚ΠΎΡ‡Π½ΠΎ Π·Π°ΠΏΡƒΡ‚Π°Π΅Ρ‚Π΅ΡΡŒ!

Π“Ρ€ΡƒΠΏΠΏΡ‹

Π‘ΠΎΠ·Π΄Π°Ρ‘ΠΌ Π³Ρ€ΡƒΠΏΠΏΡƒ, ΠΈ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌ Π΅Ρ‘ Β«Π₯ΠΈΠ΄Π΅Ρ€Β» (Π¨Π°ΠΏΠΊΠ°) Π² Π½Π΅ΠΉ ΠΆΠ΅ создаём ΠΏΠΎΠ΄ Π³Ρ€ΡƒΠΏΠΏΡƒ Β«Π’Π΅Ρ€Ρ…Π½Π΅Π΅ мСню» Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅ΠΌ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ с Π½Π΅Π³ΠΎ. Π’ Π³Ρ€ΡƒΠΏΠΏΠ΅ создаём Π½ΠΎΠ²Ρ‹ΠΉ слой ΠΈ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌ Π΅Π³ΠΎ Β«Ρ„ΠΎΠ½Β». Π­Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Ρ„ΠΎΠ½ нашСго Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ мСню.

Π’ΠΎΡ‚ Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ:

Π’Π΅Ρ€Ρ…Π½Π΅Π΅ мСню

ΠžΠΏΡΡ‚ΡŒ вытягиваСм Π»ΠΈΠ½Π΅ΠΉΠΊΡƒ ΠΈ выставляСм Π΅Ρ‘ ΠΊΠ°ΠΊ Π½Π° рисункС:

Π’Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ инструмСнт Β«ΠŸΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡ‚ΡŒΒ» ΠΈ выдСляСм вдоль Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ:

Π’ ΠΏΠ°Π»ΠΈΡ‚Ρ€Π΅ Ρ†Π²Π΅Ρ‚ΠΎΠ² Π²Π±ΠΈΠ²Π°Π΅ΠΌ Π²ΠΎΡ‚ этот Ρ†Π²Π΅Ρ‚ #0dbfe5, Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ инструмСнт Β«Π—Π°Π»ΠΈΠ²ΠΊΠ°Β» ΠΈ Π·Π°Π»ΠΈΠ²Π°Π΅ΠΌ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, Π·Π°Ρ‚Π΅ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Β«Π’Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅Β» Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° Β«ΠžΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅Β»:

КликаСм Π½Π° инструмСнт Β«Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ тСкст». Π‘Π²Π΅Ρ€Ρ…Ρƒ Π² ΠΏΠ°Π½Π΅Π»ΠΈ Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ Β«Segoe UIΒ». Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΊΠ»ΠΈΠΊΠ°Π΅ΠΌ Π½Π° Π³ΠΎΠ»ΡƒΠ±ΠΎΠΌ Ρ„ΠΎΠ½Π΅ мСню ΠΈ пишСм Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Π½Π°ΡˆΠΈΡ… страниц. ΠŸΠΎΡ‚ΠΎΠΌ Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ тСкст ΠΊΡƒΠ΄Π° Π’Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ создаём Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ страницами. И сдСлаСм ΠΈΠΌ нСбольшой эффСкт вдавлСнности. Π‘ΠΎΠ·Π΄Π°Ρ‘ΠΌ Π½ΠΎΠ²Ρ‹ΠΉ слой, Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ инструмСнт «Линия». Π—Π°Ρ‚Π΅ΠΌ Π·Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ Shift ΠΈ рисуСм Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΡƒΡŽ линию Ρ‡Π΅Ρ€Π΅Π· вСсь Π³ΠΎΠ»ΡƒΠ±ΠΎΠΉ Ρ„ΠΎΠ½ нашСго мСню.

По слою с Ρ„ΠΈΠ³ΡƒΡ€ΠΎΠΉ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ Π΄Π²Π° Ρ€Π°Π·Π° ΠΌΡ‹ΡˆΠΊΠΎΠΉ, откроСтся ΠΎΠΊΠ½ΠΎ со стилСм слоя. Π‘Ρ‚Π°Π²ΠΈΠΌ Π³Π°Π»ΠΎΡ‡ΠΊΠΈ Π½Π° ΠΏΡ€ΠΎΡ‚ΠΈΠ² «НалоТСниС Ρ†Π²Π΅Ρ‚Π°Β» И Π²Π±ΠΈΠ²Π°Π΅ΠΌ Ρ‚ΡƒΠ΄Π° Π²ΠΎΡ‚ этот Ρ†Π²Π΅Ρ‚ #0aaacc.

ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ Π² ΠΏΡƒΠ½ΠΊΡ‚ «ВСнь» ΠΈ Π·Π°Π΄Π°Ρ‘ΠΌ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹:

Π’ΠΎΡ‚, Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ:

ПослС этого просто ΠΊΠΎΠΏΠΈΡ€ΡƒΠ΅ΠΌ слой с нашСй Π»ΠΈΠ½ΠΈΠ΅ΠΉ ΠΈ выставляСм послС ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ слова. Π’ΠΎΡ‚ Ρ‡Ρ‚ΠΎ Ρƒ мСня ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ:

Иконки ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… Π·Π°ΠΊΠ»Π°Π΄ΠΎΠΊ

Π—Π΄Π΅ΡΡŒ ΠΆΠ΅ Π² мСню Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΏΡ€Π°Π²ΠΎΠΉ стороны ΠΌΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π·Π°ΠΊΠ»Π°Π΄ΠΎΠΊ. Π’ ΠΌΠΎΡ‘ΠΌ случаС это Ρ„ΠΈΠ³ΡƒΡ€Ρ‹, Π½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ скачанныС ΠΈΠΊΠΎΠ½ΠΊΠΈ. Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΎΡ‚ здСсь.

Для Π½Π°Ρ‡Π°Π»Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ высоту Π½Π°ΡˆΠΈΡ… ΠΈΠΊΠΎΠ½ΠΎΠΊ, Ρ‡Ρ‚ΠΎ Π±Ρ‹ ΠΎΠ½ΠΈ Π±Ρ‹Π»ΠΈ Ρ€ΠΎΠ²Π½Ρ‹ΠΌΠΈ. Π’ΠΎΡ‚ , Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ:

ΠŸΠΎΡ‚ΠΎΠΌ создаём Π³Ρ€ΡƒΠΏΠΏΡƒ, Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌ Π΅Ρ‘ Β Β«Π‘ΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ Π·Π°ΠΊΠ»Π°Π΄ΠΊΠΈΒ», создаём Π² Π½Π΅ΠΉ Π½ΠΎΠ²Ρ‹ΠΉ слой. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΊΠ»ΠΈΠΊΠ°Π΅ΠΌ ΠΏΠΎ инструмСнту Β«ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½Π°Ρ Ρ„ΠΈΠ³ΡƒΡ€Π°Β» Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ Π½ΡƒΠΆΠ½ΡƒΡŽ Ρ„ΠΈΠ³ΡƒΡ€Ρƒ:

Наводим курсор Π² Ρ‚ΠΎ мСсто Π³Π΄Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΊΠΎΠ½ΠΊΠ°, Π·Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ Shift, (для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠΊΠΎΠ½ΠΊΠ° появилась ровная) ΠΈ растягиваСм Π΄ΠΎ Π½ΡƒΠΆΠ½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ². И Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅ процСсс повторяСм со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ Ρ„ΠΈΠ³ΡƒΡ€Π°ΠΌΠΈ. Π’ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ Π²ΠΎΡ‚ Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ:

ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ ΠΊ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡƒ. ΠžΠΏΡΡ‚ΡŒ ΠΆΠ΅ создаём ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΡƒΡŽ Π³Ρ€ΡƒΠΏΠΏΡƒ для Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° ΠΈ Π² Π½ΠΎΠ²Ρ‹ΠΉ слой.

Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏ

ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ Π½Π° этот сайт ΠΈ ΠΊΠ°Ρ‡Π°Π΅ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚. Π’Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ инструмСнт Β«Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ тСкст». Π˜Ρ‰Π΅ΠΌ Π² ΠΏΠΎΠ»Π΅ со ΡˆΡ€ΠΈΡ„Ρ‚Π°ΠΌΠΈ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ нашСго ΡˆΡ€ΠΈΡ„Ρ‚Π° Olivier. КликаСм Π½Π° Ρ‚ΠΎ мСсто Π³Π΄Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π»ΠΎΠ³ΠΎ ΠΈ пишСм Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Π½Π° Английском, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ этот ΡˆΡ€ΠΈΡ„Ρ‚ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΊΠΈΡ€ΠΈΠ»Π»ΠΈΡ†Ρƒ. Π’ΠΎΡ‚ Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ:

Π‘ΠΎΠ·Π΄Π°Ρ‘ΠΌ Π³Ρ€ΡƒΠΏΠΏΡƒ «НиТнСС мСню» ΠΈ Π½ΠΎΠ²Ρ‹ΠΉ слой.

НиТнСС мСню (Π“Π»Π°Π²Π½ΠΎΠ΅)

ВыставляСм Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ ΠΊΠ°ΠΊ Π½Π° рисункС:

Π’Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ инструмСнт Β«ΠŸΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡ‚ΡŒΒ» ΠΈ выдСляСм. Π—Π°Ρ‚Π΅ΠΌ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π·Π°Π»ΠΈΠ²Π°Π΅ΠΌ Π²ΠΎΡ‚ этим Ρ†Π²Π΅Ρ‚ΠΎΠΌ #303030. Π’ΠΎΡ‚ Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ:

ΠžΡ‚ΠΌΠ΅Π½ΡΠ΅ΠΌ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Β«Π’Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅Β». Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΈΠ΄Ρ‘ΠΌ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ Π€ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹ β€” Π¨ΡƒΠΌ ΠΈ Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΡˆΡƒΠΌ. ΠŸΠΎΡ‚ΠΎΠΌ выставляСм Ρ‚Π°ΠΊΠΈΠ΅ значСния:

ДобавляСм Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Ρ€ΡƒΠ±Ρ€ΠΈΠΊ, ΠΊΠ»ΠΈΠΊΠ°Π΅ΠΌ ΠΏΠΎ инструмСнту Β«Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ тСкст» ΠΈ пишСм Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Ρ€ΡƒΠ±Ρ€ΠΈΠΊ, Π΄Π΅Π»Π°ΠΉΡ‚Π΅ ΠΊΠ°ΠΊ Ρƒ мСня:

ДобавляСм Π»ΠΈΠ½ΠΈΠΈ. Π”Π΅Π»Π°ΡŽΡ‚ΡΡ ΠΎΠ½ΠΈ Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ мСню Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΠ·ΠΌΠ΅Π½Ρ‘Π½ сам Ρ†Π²Π΅Ρ‚ Π»ΠΈΠ½ΠΈΠΈ. Π”ΡƒΠΌΠ°ΡŽ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΡΠΏΡ€Π°Π²ΠΈΡ‚Π΅ΡΡŒ, ΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Π²ΠΎΡ‚ Ρ‡Ρ‚ΠΎ:

БСйчас ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ ΠΊ ΠΏΠ°Π½Π΅Π»ΠΈ с ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ, которая Π±ΡƒΠ΄Π΅Ρ‚ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π³Π΄Π΅ ΠΎΠ½ находится Π½Π° сайтС.

Как ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π² Π³Ρ€ΡƒΠΏΠΏΠ΅ Β«Π₯ΠΈΠ΄Π΅Ρ€Β» создаём Π³Ρ€ΡƒΠΏΠΏΡƒ Β«Π˜Π½Ρ„ΠΎ панСль» с Π½ΠΎΠ²Ρ‹ΠΌ слоСм.

ПанСль с ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ

Для Π½Π°Ρ‡Π°Π»Π° добавляСм полосы с Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ ΠΊΠ°ΠΊ Π½Π° рисункС Π½ΠΈΠΆΠ΅:

Π’Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ инструмСнт Β«ΠŸΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡ‚ΡŒΒ» ΠΈ выдСляСм ΠΎΠ±Π»Π°ΡΡ‚ΡŒ прям ΠΏΠΎΠ΄ мСню, ΠΈ Π·Π°Π»ΠΈΠ²Π°Π΅ΠΌ Π΅Ρ‘ Ρ‡Ρ‘Ρ€Π½Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ #000000

Π”Π°Π»Π΅Π΅ создаём Π½ΠΎΠ²Ρ‹ΠΉ слой, ΠΏΠΎΡ‚ΠΎΠΌ Ρ‚Π΅ΠΌ ΠΆΠ΅ инструмСнтом выдСляСм ΠΎΠ±Π»Π°ΡΡ‚ΡŒ которая Π½ΠΈΠΆΠ΅ ΠΈ Π·Π°Π»ΠΈΠ²Π°Π΅ΠΌ Π΅Ρ‘ Π²ΠΎΡ‚ этим Ρ†Π²Π΅Ρ‚ΠΎΠΌ #eeeeee

ΠžΡ‚ΠΌΠ΅Π½ΡΠ΅ΠΌ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅, Π±Π΅Ρ€Ρ‘ΠΌ Β«Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ тСкст» измСняСм Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π½Π°Β 48 ΠΏΡ‚ ΠΈ Ρ†Π²Π΅Ρ‚ #a4a4a4. ПишСм «ПослСдниС Записи». Π’ΠΎΡ‚, Ρ‡Ρ‚ΠΎ Ρƒ Вас Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Π² ΠΈΡ‚ΠΎΠ³Π΅:

ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚

ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ ΠΊ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅ сСрСдины нашСго Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ сайта. Нам Π½ΡƒΠΆΠ½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ Π³Π΄Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π±Π»ΠΎΠΊΠΈ постов ΠΈ Π±Π»ΠΎΠΊ сайтбара (ΠŸΡ€Π°Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ).

Π‘Ρ€Π°Π·Ρƒ ΠΆΠ΅ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ 2 ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Π³Ρ€ΡƒΠΏΠΏΡ‹:

  • ΠœΠ΅Ρ‚ΠΊΠΈ β€” Π² эту Π³Ρ€ΡƒΠΏΠΏΡƒ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ тСкст с Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ Π½Π°ΡˆΠΈΡ… ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ.
  • ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚ β€” Π³Ρ€ΡƒΠΏΠΏΠ° Π³Π΄Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ вся наша сСрСдина сайта.

Π’ Π³Ρ€ΡƒΠΏΠΏΠ΅ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ создаём ΠΏΠΎΠ΄ Π³Ρ€ΡƒΠΏΠΏΡƒ Β«Π›Π΅Π²Ρ‹ΠΉΒ», Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π±ΡƒΠ΄ΡƒΡ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ наши Π±Π»ΠΎΠΊΠΈ с записями.

Π’Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ инструмСнт Β«ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡ‚ΡŒΒ», Π·Π°Π΄Π°Ρ‘ΠΌ Π΅ΠΉ ΡΡ‚ΠΈΠ»ΡŒ Β«Π·Π°Π΄Π°Π½Π½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€Β» ΠΈ выставляСм ΡˆΠΈΡ€ΠΈΠ½Ρƒ 800Ρ€Ρ… высоту 100Ρ€Ρ…. Π’ΠΎΡ‚ ΠΈΡ‚ΠΎΠ³:

ДобавляСм Π»ΠΈΠ½ΠΈΠΈ с Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ ΠΊΠ°ΠΊ Π½Π° рисункС, ΠΈ отмСняСм Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅:

ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ΡΡ Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Π΄Π²Π΅ Π»ΠΈΠ½ΠΈΠΈ ΠΈ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π³Π΄Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ наши Π±Π»ΠΎΠΊΠΈ с записями.

Π’ Π³Ρ€ΡƒΠΏΠΏΠ΅ Β«ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚Β» Π΄Π΅Π»Π°Π΅ΠΌ ΠΏΠΎΠ΄ Π³Ρ€ΡƒΠΏΠΏΡƒ с Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Β«ΠŸΡ€Π°Π²Ρ‹ΠΉΒ» (Π‘Π°ΠΉΡ‚Π±Π°Ρ€). Π‘ΡƒΠ΄Π΅ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ‡Π°Ρ‚ΡŒ мСсто для ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ сайта.

ΠžΠΏΡΡ‚ΡŒ Π±Π΅Ρ€Ρ‘ΠΌ Β«ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡ‚ΡŒΒ», Π° Π²ΠΎΡ‚ Π² стилС области Π·Π°Π΄Π°Ρ‘ΠΌ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ мСньший Ρ€Π°Π·ΠΌΠ΅Ρ€ Π² ΡˆΠΈΡ€ΠΈΠ½Ρƒ 350Ρ€Ρ… высоту оставим Ρ‚Ρƒ ΠΆΠ΅ Π² 100Ρ€Ρ…. И Π΄Π°Π»Π΅Π΅ Π΄Π΅Π»Π°Π΅ΠΌ всё ΠΊΠ°ΠΊ Π½Π° рисункС:

Π’ΠΎΡ‚ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ Ρ‚ΠΎΡ‡Π½ΠΎ Π·Π½Π°Π΅ΠΌ Π³Π΄Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Π±Π»ΠΎΠΊΠΈ с записями ΠΈ сайтбар. И всё Π±ΡƒΠ΄Π΅Ρ‚ Ρ€ΠΎΠ²Π½ΠΎ.

ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅ ΠΌΡ‹ создали Π³Ρ€ΡƒΠΏΠΏΡƒ ΠΌΠ΅Ρ‚ΠΊΠΈ? Π’Π°ΠΌ просто создайтС слой с надписями Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² Π±Π»ΠΎΠΊΠΎΠ², Π²ΠΎΡ‚ ΠΊΠ°ΠΊ Ρƒ мСня:

Π­Ρ‚ΠΈ ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΈ вёрсткС. НС Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΡΠΏΠΎΠΌΠΈΠ½Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹.

Π‘Π»ΠΎΠΊΠΈ с записями

Начнём ΠΌΡ‹ ΠΏΠΎΠΆΠ°Π»ΡƒΠΉ с Π±Π»ΠΎΠΊΠΎΠ² с записями, Π΄Π΅Π»Π°ΡŽΡ‚ΡΡ ΠΎΠ½ΠΈ Π² Π΄Π°Π½Π½ΠΎΠΌ случаС ΠΎΡ‡Π΅Π½ΡŒ просто.

Π’ Π³Ρ€ΡƒΠΏΠΏΠ΅ Β«Π›Π΅Π²Ρ‹ΠΉΒ» создаём ΠΏΠΎΠ΄Π³Ρ€ΡƒΠΏΠΏΡƒ Β«Π±Π»ΠΎΠΊΒ» ΠΈ Π½ΠΎΠ²Ρ‹ΠΉ слой.

ΠžΠΏΡΡ‚ΡŒ Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ инструмСнт Β«ΠŸΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡ‚ΡŒΒ». Π’ стилС Π·Π°Π΄Π°Ρ‘ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ 800 Ρ… 300. ПодгоняСм ΠΏΠΎΠ΄ Π»ΠΈΠ½ΠΈΠΈ. ΠŸΠΎΡ‚ΠΎΠΌ Π·Π°Π»ΠΈΠ²Π°Π΅ΠΌ Π²ΠΎΡ‚ этим Ρ†Π²Π΅Ρ‚ΠΎΠΌ #d9d9d9. Π­Ρ‚ΠΎ Ρƒ нас ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»Π°ΡΡŒ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π°.

Π’ Ρ‚ΠΎΠΉ ΠΆΠ΅ Π³Ρ€ΡƒΠΏΠΏΠ΅ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΌΠ΅Ρ‚ΠΊΡƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ тСкста ΠΊΠ°ΠΊ Ρƒ мСня Π½Π° рисункС Π²Ρ‹ΡˆΠ΅.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΊ записи. Π‘Π΅Ρ€Ρ‘ΠΌ Β«Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ тСкст» ставим Ρ€Π°Π·ΠΌΠ΅Ρ€ Π²Β 35 ΠΏΡ‚ ΠΈ Ρ†Π²Π΅Ρ‚ Ρ‡Ρ‘Ρ€Π½Ρ‹ΠΉ. ДобавляСм прям ΠΏΠΎΠ΄ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€ΠΎΠΉ:

ДобавляСм ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΊ посту. Π‘Ρ‚Π°Π²ΠΈΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π²Β 14 ΠΏΡ‚ ΠΈ Ρ†Π²Π΅Ρ‚ Π±Π»ΠΈΠΆΠ΅ ΠΊ сСрому:

И описаниС ΠΊ посту:

БСйчас Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π”Π°Π»Π΅Π΅. Она Ρ‚ΠΎΠΆΠ΅ ΠΎΡ‡Π΅Π½ΡŒ простая. Π’Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ инструмСнт Β«ΠŸΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ со скруглСнными ΡƒΠ³Π»Π°ΠΌΠΈΒ» Π·Π°Π΄Π°Ρ‘ΠΌ Π΅ΠΌΡƒ Π²ΠΎΡ‚ это Ρ†Π²Π΅Ρ‚ #0dbfe5 ΠΈ радиус ΡƒΠ³Π»ΠΎΠ² Π² 2Ρ€Ρ…. И рисуСм ΠΊΠ½ΠΎΠΏΠΊΡƒ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π’Π°ΠΌ понравится:

Π’Π΅ΠΏΠ΅Ρ€ΡŒ добавляСм тСкст ΠΈ смотрим, Ρ‡Ρ‚ΠΎ Ρƒ нас ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ:

Π§Ρ‚ΠΎΠ±Ρ‹ записи Ρ…ΠΎΡ‚ΡŒ Π½Π΅ ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ создадим простой Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΡŒ ΠΈΠ· ΠΊΡ€ΡƒΠ³ΠΎΠ².

Π‘ΠΎΠ·Π΄Π°Ρ‘ΠΌ Π³Ρ€ΡƒΠΏΠΏΡƒ Β«Π Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΡŒΒ», Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ «Овальная ΠΎΠ±Π»Π°ΡΡ‚ΡŒΒ» создаём слой. И ΠΏΠΎΠ΄ Π±Π»ΠΎΠΊΠΎΠΌ записСй заТимая Shift рисуСм ΠΊΡ€ΡƒΠ³, Π·Π°Ρ‚Π΅ΠΌ Π·Π°Π»ΠΈΠ²Π°Π΅ΠΌ Π΅Π³ΠΎ Π²ΠΎΡ‚ этим Ρ†Π²Π΅Ρ‚ΠΎΠΌ #efefef.

ΠžΡ‚ΠΌΠ΅Π½ΡΠ΅ΠΌ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠΈΡ‰Π΅ΠΌ сСрСдину ΠΊΡ€ΡƒΠ³Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ

Π’Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ слой с нашим ΠΊΡ€ΡƒΠΆΠΊΠΎΠΌ Π½Π° Π½Ρ‘ΠΌ ΠΆΠ΅ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ ΠΏΡ€Π°Π²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΡ‹ΡˆΠΈ ΠΈ Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ Β«Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄ΡƒΠ±Π»ΠΈΠΊΠ°Ρ‚ слоя». ΠŸΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ Π΅Π³ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π²Π»Π΅Π²ΠΎ.

Π’ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π·Π°Ρ…ΠΎΠ΄ΠΈ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ Β«Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅Β» β€” ВрансформированиС ΠΈ Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. И Π΄Π΅Π»Π°Π΅ΠΌ ΠΊΡ€ΡƒΠ³ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ мСньшС ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ, ΠΏΡ€ΠΈ этом заТимая Shift Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΡ€ΡƒΠ³ получился Ρ€ΠΎΠ²Π½Ρ‹ΠΌ.

Π’ΠΎΡ‚ Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ:

ΠšΠΎΠΏΠΈΡ€ΡƒΠ΅ΠΌ слой этого малСнького ΠΊΡ€ΡƒΠ³Π° ΠΎΠΏΡΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅ΠΌ Π΅Π³ΠΎ Π²Π»Π΅Π²ΠΎ. Π’Π°ΠΊ ΠΆΠ΅ Ρ‚ΠΎΡ‡Π½ΠΎ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅ΠΌ Π΅Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ°ΠΊ написано Π²Ρ‹ΡˆΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ Π²ΠΎΡ‚ Ρ‚Π°ΠΊ:

БСйчас Π’Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄ΡƒΠ±Π»ΠΈΠΊΠ°Ρ‚ срСднСго ΠΊΡ€ΡƒΠ³Π° ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π²ΠΏΡ€Π°Π²ΠΎ, ΠΈ Ρ‚ΠΎΠΆΠ΅ самоС ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ с малСньким ΠΊΡ€ΡƒΠ³ΠΎΠΌ. Π§Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Π»ΠΎ понятнСС сдСлайтС ΠΊΠ°ΠΊ Π½Π° рисункС:

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

БСйчас Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Π΅ΠΌ Π±Π»ΠΎΠΊ записСй ΠΏΠΎΠ΄ Π±Π»ΠΎΠΊΠΎΠΌ. Π‘ΠΎΠ·Π΄Π°Ρ‘ΠΌ Π΄ΡƒΠ±Π»ΠΈΠΊΠ°Ρ‚ нашСй Π³Ρ€ΡƒΠΏΠΏΡ‹ Β«Π‘Π»ΠΎΠΊΒ» На ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ курсор (самый Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ). И пСрСтаскиваСм наш Π±Π»ΠΎΠΊ записСй Π²Π½ΠΈΠ·. ΠΈ Ρ‚Π°ΠΊ Π΄Π΅Π»Π°Π΅ΠΌ Ρ€Π°Π· 5.

Π‘Π°ΠΉΠ΄Π±Π°Ρ€ (правая ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°)

Находим Π½Π°ΡˆΡƒ Π³Ρ€ΡƒΠΏΠΏΡƒ Β«Π‘Π°ΠΉΠ΄Π±Π°Ρ€Β», ΠΈ создаём Π² Π½Π΅ΠΉ ΠΏΠΎΠ΄Π³Ρ€ΡƒΠΏΠΏΡƒ «Поиск». Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π»ΠΈΠ½ΠΈΠΈ Π΄Π΅Π»Π°Π΅ΠΌ Π²ΠΎΡ‚ Ρ‚Π°ΠΊ:

Π’Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ инструмСнт Β«ΠŸΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡ‚ΡŒΒ» ΠΈ выдСляСм ΠΏΠΎΠ»Π΅ для поиска, Π·Π°Ρ‚Π΅ΠΌ Π·Π°Π»ΠΈΠ²Π°Π΅ΠΌ Π΅Π³ΠΎ Π²ΠΎΡ‚ этим Ρ†Π²Π΅Ρ‚ΠΎΠΌ #eeeeee

НС Π·Π°Π±Ρ‹Π²Π°Π΅ΠΌ ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅, ΠΊΠ»ΠΈΠΊΠ°Π΅ΠΌ Π½Π° инструмСнт Β«Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ тСкст» ΠΈ Π² сСром ΠΏΠΎΠ»Π΅ пишСм слово Поиск

Π‘Π»Π΅Π²Π° Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ инструмСнт Β«ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½Π°Ρ Ρ„ΠΈΠ³ΡƒΡ€Π°Β» ΠΈ свСрху ΠΈΡ‰Π΅ΠΌ Ρ„ΠΈΠ³ΡƒΡ€Ρƒ Π»ΡƒΠΏΡ‹. Она Π΅ΡΡ‚ΡŒ Π² стандартных Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ…. Π‘ΠΎΠ·Π΄Π°Ρ‘ΠΌ слой Π² Π³Ρ€ΡƒΠΏΠΏΠ΅ «Поиск» Π½Π°Π²ΠΎΠ΄ΠΈΠΌ Π½Π° ΠΏΠΎΠ»Π΅ ΠΈ рисуСм Π½Π°ΡˆΡƒ Ρ„ΠΈΠ³ΡƒΡ€Ρƒ удСрТивая Shift.

ПолС поиска Π³ΠΎΡ‚ΠΎΠ²ΠΎ. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ ΠΊ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π°ΠΌ.

Π‘ΠΎΠ·Π΄Π°Ρ‘ΠΌ Π³Ρ€ΡƒΠΏΠΏΡƒ Β«Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Β» ΠΈ Π½ΠΎΠ²Ρ‹ΠΉ слой Π² Π½Π΅ΠΉ. Π—Π°Ρ‚Π΅ΠΌ добавляСм Π»ΠΈΠ½ΠΈΠΉ ΠΊΠ°ΠΊ Π½Π° рисункС. Π­Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Ρ„ΠΎΠ½ нашСго Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, ΠΈ Π·Π°Π»ΠΈΠ²Π°Π΅ΠΌ Π΅Π³ΠΎ эти Ρ†Π²Π΅Ρ‚ΠΎΠΌ #eeeeee

Π’ наш Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ сам Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, Π΄Π΅Π»Π°Π΅ΠΌ это с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ тСкста. А Π΅Ρ‰Ρ‘ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΈΠΊΠΎΠ½ΠΊΡƒ ΠΊ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡƒ. Для этого Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π»ΡŽΠ±ΡƒΡŽ Ρ„ΠΈΠ³ΡƒΡ€Ρƒ которая ΠΏΠΎ Π΄ΡƒΡˆΠ΅, ΠΈ которая ΠΏΠΎ смыслу ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ πŸ™‚ НС Π·Π°Π±Ρ‹Π²Π°Π΅ΠΌ Π·Π°ΠΆΠΈΠΌΠ°Ρ‚ΡŒ Shift ΠΊΠΎΠ³Π΄Π° добавляСм Ρ„ΠΈΠ³ΡƒΡ€Ρƒ. И Π·Π°Π»Π΅ΠΉΡ‚Π΅ Π΅Ρ‘ Π²ΠΎΡ‚ этим Ρ†Π²Π΅Ρ‚ΠΎΠΌ #0dbfe5

И ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅ Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ записи ΠΊ нашим Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π°ΠΌ. НуТно Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ инструмСнт Β«Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ тСкст», Π·Π°Ρ‚Π΅ΠΌ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π²Β 16 ΠΏΡ‚. И ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ° Π½Π° рисункС Π½ΠΈΠΆΠ΅

Π—Π°Ρ‚Π΅ΠΌ просто создаём Π΄ΡƒΠ±Π»ΠΈΠΊΠ°Ρ‚ Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΈ пСрСтаскиваСм Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ Π²Π½ΠΈΠ·. Π”Π΅Π»Π°Π΅ΠΌ Ρ‚ΠΎ ΠΆΠ΅ самоС Ρ‡Ρ‚ΠΎ ΠΈ с постами.

Π’ΠΎΡ‚ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°Π±Π»ΡŽΠ΄Π°Ρ‚ΡŒ ΠΏΠΎΡ‡Ρ‚ΠΈ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ ΠΈ простой ΠΌΠ°ΠΊΠ΅Ρ‚ для нашСго Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ сайта.

Π€ΡƒΡ‚Π΅Ρ€ (Низ сайта)

Ну ΠΊΠ°ΠΊ ΠΆΠ΅ Π±Π΅Π· Π½Π΅Π³ΠΎ. Π’ этом шаблонС ΠΎΠ½ Ρ‚ΠΎΠΆΠ΅ Π½Π΅ сильно слоТный.

Всё ΠΊΠ°ΠΊ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ создаём Π³Ρ€ΡƒΠΏΠΏΡƒ Β«Π€ΡƒΡ‚Π΅Ρ€Β» ΠΈ слой Π² Π½Π΅ΠΉ. И Ρ€Π°Π·ΠΌΠ΅Ρ‡Π°Π΅ΠΌ Π΅Π³ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ, Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ наш ΡƒΠΆΠ΅ Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΉ инструмСнт Β«ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡ‚ΡŒΒ» выдСляСм Π΅Π³ΠΎ ΠΈ Π·Π°Π»ΠΈΠ²Π°Π΅ΠΌ #0dbfe5

ΠžΡ‚ΠΌΠ΅Π½ΡΠ΅ΠΌ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅. Π‘Π΅Ρ€Ρ‘ΠΌ Β«Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ тСкст» Π½Π°Ρ…ΠΎΠ΄ΠΈΠΌ Ρ‚ΠΎΡ‚ ΡˆΡ€ΠΈΡ„Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ скачали (Olivier), ΠΈ вписываСм наш Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ†Π²Π΅Ρ‚ тСкста Π΄Π΅Π»Π°Π΅ΠΌ Ρ‡ΡƒΡ‚ΡŒ Ρ‚Π΅ΠΌΠ½Π΅Π΅.

А с ΠΏΡ€Π°Π²ΠΎΠΉ стороны нашСго Ρ„ΡƒΡ‚Π΅Ρ€Π° добавляСм мСню Ρ‚Π°ΠΊΠΎΠ΅ ΠΆΠ΅ ΠΊΠ°ΠΊ свСрху Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π±Π΅Π· Π»ΠΈΠ½ΠΈΠΈ. Π•Π³ΠΎ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ просто ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π²Π½ΠΈΠ·.

Π’ΠΎΡ‚ ΠΈ всё, Π΄Ρ€ΡƒΠ·ΡŒΡ, Ρƒ нс Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡƒΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ πŸ™‚

Π•Ρ‰Ρ‘, Π²ΠΎΡ‚ Π’Π°ΠΌ Π΅Π³ΠΎ PSD Ρ„Π°ΠΉΠ». Π‘ΠΊΠ°Ρ‡ΠΈΠ²Π°ΠΉΡ‚Π΅, ΠΈ смотритС Ссли Ρ‡Ρ‚ΠΎ Ρ‚ΠΎ Π½Π΅ поняли.

Π”Ρ€ΡƒΠ·ΡŒΡ, Ссли Π’Π°ΠΌ Ρ‡Ρ‚ΠΎ Π½ΠΈΠ±ΡƒΠ΄ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅ понятно, ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡΠΏΡ€Π°ΡˆΠΈΠ²Π°ΠΉΡ‚Π΅ Π² коммСнтариях.

Π”ΠΎ скорых встрСч.

Π Π°Π·ΠΌΠ΅Ρ€ ΠΌΠ°ΠΊΠ΅Ρ‚Π° сайта

Π Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ экрана (ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π°) – это Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌΠΎΠ³ΠΎ Π½Π° экранС изобраТСния Π² пиксСлях. НапримСр, Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ экрана 1920 x 1080 ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΡˆΠΈΡ€ΠΈΠ½Π° изобраТСния Π½Π° ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π΅ Ρ€Π°Π²Π½Π° 1920, Π° высота 1080 пиксСлСй.
ΠŸΠΎΠΏΡƒΠ»ΡΡ€Π½Ρ‹Π΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€ΠΎΠ² (стационарныС ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Ρ‹ ΠΈ Π½ΠΎΡƒΡ‚Π±ΡƒΠΊΠΈ):
1920 Ρ… 1080 (full HD)
1600 Ρ… 900
1440 Ρ… 900
1366 Ρ… 768
1280 Ρ… 1024
1280 Ρ… 960
1024 Ρ… 600
Когда ΠΌΡ‹ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅ΠΌ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ для дСсктопа, Ρ‚ΠΎ Π½Π°ΠΌ Π²Π°ΠΆΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ для всСх ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ΠΎΠ², Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΌΠ°ΠΊΠ΅Ρ‚Π° сайта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π±ΡƒΠ΄ΡƒΡ‰ΠΈΠΉ сайт ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ Π½Π° всСх дСсктопах.
Π£Π½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ для ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ ΠΈ Π½ΠΎΡƒΡ‚Π±ΡƒΠΊ являСтся 1920 пкс, Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΡˆΠΈΡ€ΠΈΠ½Π° 1440 ΠΈΠ»ΠΈ 1280 пкс. Π£Π½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠΉ высоты Π½Π΅Ρ‚, Ρ‚.ΠΊ. Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΎΠ½Π° своя ΠΈ зависит ΠΎΡ‚ количСства Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ².Β 

Когда ΠΌΡ‹ создаСм ΠΌΠ°ΠΊΠ΅Ρ‚ сайта ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 1440 пкс, Π½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ Π΅Π³ΠΎ Π½Π° ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π΅ 1920 пкс, Ρ‚ΠΎ ΠΏΠΎ Π±ΠΎΠΊΠ°ΠΌ ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ Π±Π΅Π»Ρ‹Π΅ ΠΈΠ»ΠΈ сСрыС полосы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°ΠΏΠΎΠ»Π½ΡΡŽΡ‚ пустоС пространство. Если ΠΆΠ΅ ΠΌΡ‹ создаСм ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 1920 пкс, Π° ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ Π΅Π³ΠΎ Π½Π° ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π΅ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 1440 пкс, Ρ‚ΠΎ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ (ΠΈΠ»ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚) β€œΠΎΠ±Ρ€Π΅Π·Π°Π΅Ρ‚ΡΡβ€ ΠΏΠΎ Π±ΠΎΠΊΠ°ΠΌ, ΠΈ ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ содСрТимоС сайта Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… 1440 пкс. Π’ Ρ‚Π°ΠΊΠΎΠΌ случаС Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρƒ Π½ΡƒΠΆΠ½ΠΎ ΡƒΡ‡Π΅ΡΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ — Π²Π°ΠΆΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ (тСксты, ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ нСбольшиС Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ) Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹. Π—Π° Ρ‚Π°ΠΊΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ‡Π°Ρ‰Π΅ всСго принимаСтся Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 1170 ΠΈΠ»ΠΈ 940. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ создаСт ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ (ΠΈΠ»ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚) ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 1920 пкс, Π½ΠΎ вСсь Π²Π°ΠΆΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΡƒΠΌΠ΅Ρ‰Π°Π΅Ρ‚ Π½Π° ΡˆΠΈΡ€ΠΈΠ½Π΅ 1170 ΠΈΠ»ΠΈ 960 пкс.

БСгодня ΠΌΡ‹ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ рассмотрСли Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΌΠ°ΠΊΠ΅Ρ‚Π° сайта Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для дСсктопов (ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ΠΎΠ² ΠΈ Π½ΠΎΡƒΡ‚Π±ΡƒΠΊΠΎΠ²), Π° Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΏΠΎΡ€Ρ‚Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… устройств (ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚ΠΎΠ² ΠΈ смартфонов) ΠΌΡ‹ рассмотрим Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ€Π°Π·. ΠŸΠΎΠ΄ΠΏΠΈΡΡ‹Π²Π°ΠΉΡΡ Π½Π° Π±Π»ΠΎΠ³ ΠΏΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ.

ΠŸΡ€ΠΎΡΡ‚ΠΎ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ Ρ„ΠΎΡ€ΠΌΡƒ Π½ΠΈΠΆΠ΅.
Π’Ρ‹ смоТСтС ΠΎΡ‚ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π² любой ΠΌΠΎΠΌΠ΅Π½Ρ‚.

Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΌΠ°ΠΊΠ΅Ρ‚Π° сайта ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°

Π’ΠΏΠ΅Ρ€Π²Ρ‹Π΅ ΡΡ‚ΠΎΠ»ΠΊΠ½ΡƒΠ²ΡˆΠΈΡΡŒ с Π·Π°Π΄Π°Ρ‡Π΅ΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта, Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡŽΡ‚ вопросы, связанныС с Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π°. Π­Ρ‚ΠΈ вопросы Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡŽΡ‚ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρƒ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°, Π½ΠΎ ΠΈ часто Ρƒ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°. Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ Π·Π°Π΄Π°Π΅Ρ‚ вопрос ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρƒ, ΠΏΠΎΠ΄ ΠΊΠ°ΠΊΠΈΠ΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚, Π° ΠΊΠ»ΠΈΠ΅Π½Ρ‚ ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚, ΠΏΠΎΠ΄ всС. И Ρ‚ΡƒΡ‚ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ ступор, вСдь Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ мноТСство, Π° Ссли Π½Π΅Ρ‚ ΠΎΠΏΡ‹Ρ‚Π°, Ρ‚ΠΎ всС каТСтся слоТным. Π”Π°Π²Π°ΠΉΡ‚Π΅ Π±ΡƒΠ΄Π΅ΠΌ Ρ€Π°Π·Π±ΠΈΡ€Π°Ρ‚ΡŒΡΡ.

Для Π½Π°Ρ‡Π°Π»Π° Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ вСрсткС сайта Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅ΠΌ с Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°ΠΌΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ², Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ отобраТаСтся.

Разрабатывая ΠΆΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚ Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ сайта Π² графичСском Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ (Photoshop) ΠΈΠ»ΠΈ сСрвисС (Figma), Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°ΠΌΠΈ, Π΅ΠΌΡƒ приходится Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ ТСсткиС Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΌΠ°ΠΊΠ΅Ρ‚Π°. Π­Ρ‚ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ создаСт с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ минимального ΠΈ максимального Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ популярных экранов, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ опрСдСляСт для ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

Для ПК вСрсии возьмСм Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ 1920 px с ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π½ΠΎΠΉ Ρ‡Π°ΡΡ‚ΡŒΡŽ Π² 1280 px. ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚Π½ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈ большС, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ 1440 px, ΠΈΠ»ΠΈ Π²ΠΎ всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ, Ссли создаСтся, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ сСрвис ΠΈΠ»ΠΈ административная панСль. На Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Ρ‡Π°Ρ‰Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚. Для смартфонов самым ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ считаСтся 320 px. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠ»ΠΈ максимальноС ΠΈ минимальноС Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ. Π”Π°Π»Π΅Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ с ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½Ρ‹ΠΌΠΈ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΠΌΠΈ.

К Ρ‚Π°ΠΊΠΈΠΌ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΠΌ, относим ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚ с Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠ΅ΠΉ Π½Π° 1024 ΠΈ 768 px. А Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств Π½Π° 480 px Π² Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ. Если Π½Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π° 480, получаСтся слишком большой Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ ΠΏΠΎΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΡ… ΠΌΠ΅ΠΆΠ΄Ρƒ 768-320 px. Π”ΠΈΠ·Π°ΠΉΠ½ Π½Π° Ρ‚Π°ΠΊΠΎΠΌ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠ΅ Π·Π° счСт вСрсии Π² 480 px Π±ΡƒΠ΄Π΅Ρ‚ Π³ΠΎΡ€Π°Π·Π΄ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½ ΠΈ ΡƒΠ΄ΠΎΠ±Π΅Π½.

Иногда вмСсто 320 ΠΈ 480 разрабатываСтся ΠΎΠ΄ΠΈΠ½ ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π° 360 px. Но Ρ‚ΠΎΠ³Π΄Π° Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΡƒ придСтся самому ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ послС вСрстки Π½Π° Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Π² 320, ΠΈΠ½Π°Ρ‡Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ сайт с Π½Π΅ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½Ρ‹ΠΌ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ.

Π˜Ρ‚Π°ΠΊ, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠ»ΠΈΡΡŒ с Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΠΌΠΈ, ΠΏΠΎΠ΄ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ трСбуСтся ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΈ Ρ‚Π°ΠΊΠΈΡ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡΡ‚ΡŒ.

  • ПК – 1920 px Ρ„Π°ΠΉΠ», ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΏΠΎΠ΄ 1280 px Π±Π΅Π· ΡƒΡ‡Π΅Ρ‚Π° отступов Π½Π° скролл ΠΈ отступов справа ΠΈ слСва;
  • ΠŸΠ»Π°Π½ΡˆΠ΅Ρ‚ 1024 px Π±Π΅Π· ΡƒΡ‡Π΅Ρ‚Π° отступов Π½Π° скролл ΠΈ отступов справа ΠΈ слСва;
  • ΠŸΠ»Π°Π½ΡˆΠ΅Ρ‚ 768 px Π±Π΅Π· ΡƒΡ‡Π΅Ρ‚Π° отступов справа ΠΈ слСва;
  • Π‘ΠΌΠ°Ρ€Ρ‚Ρ„ΠΎΠ½Ρ‹ 480 px Π±Π΅Π· ΡƒΡ‡Π΅Ρ‚Π° отступов справа ΠΈ слСва;
  • Π‘ΠΌΠ°Ρ€Ρ‚Ρ„ΠΎΠ½Ρ‹ 320 px Π±Π΅Π· ΡƒΡ‡Π΅Ρ‚Π° отступов справа ΠΈ слСва;

РаньшС Π½Π° скролл ΠΎΡ‚Π½ΠΈΠΌΠ°Π»ΠΎΡΡŒ 21 px ΠΊΠ°ΠΊ стандарт, Π½ΠΎ ΡˆΠΈΡ€ΠΈΠ½Π° скроллинга Ρƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² измСнилась ΠΈ отличаСтся. Но это Π½Π΅ Ρ‚Π°ΠΊ Π²Π°ΠΆΠ½ΠΎ, Π³Π»Π°Π²Π½ΠΎΠ΅ Π½Π΅ Π·Π°Π±Ρ‹Ρ‚ΡŒ ΠΈ ΡƒΡ‡Π΅ΡΡ‚ΡŒ скролл ΠΏΡ€ΠΈ созданиС ΠΌΠ°ΠΊΠ΅Ρ‚Π° для ПК.Β  ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΡƒΡ‡Π΅ΡΡ‚ΡŒ скроллинг Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ Ρ‡ΠΈΡ‚Π°ΠΉΡ‚Π΅ здСсь.

Π₯олст 1920 px создавайтС Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ПК вСрсии, Π½Π° ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΡ… Π² Ρ€Π°Π·ΠΌΠ΅Ρ€. Π Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Π² 1920 px Π΄Π°Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния Π² Π±Π»ΠΎΠΊΠ°Ρ… Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π½Π° ΡˆΠΈΡ€ΠΈΠ½Ρƒ экрана.

Π§Ρ‚ΠΎ касаСтся отступов ΠΏΠΎ краям

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ отступов отличаСтся, Ссли Π±ΡƒΠ΄ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ Ρ‚ΠΎ посмотритС Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ. Если создаСтС ΠΌΠ°ΠΊΠ΅Ρ‚ сайта Π±Π΅Π· Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° Ρ‚ΠΎ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π²ΠΈΡΠ΅Ρ‚ΡŒ ΠΎΡ‚ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ сСтки ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… отступов Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ.

ΠžΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ отступы:

  • ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ 10-15
  • ΠŸΠ»Π°Π½ΡˆΠ΅Ρ‚ 15-20 px. Для Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ Π² 1024 px ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ холст Π½Π° 1000 px это Π·Π° Π²Ρ‹Ρ‡Π΅Ρ‚ΠΎΠΌ скроллинга, ΠΏΠΎΡ‚ΠΎΠΌ ΠΎΡ‚ Π½Π΅Π³ΠΎ ΠΎΡ‚Π½ΠΈΠΌΠ°ΡŽ отступы.
  • ПК контСнтная Ρ‡Π°ΡΡ‚ΡŒ дСлаю Π² Ρ€Π°Π·ΠΌΠ΅Ρ€ 1200 px, отступы зависят ΠΎΡ‚ сСтки.

ΠŸΠΎΠ΄Ρ…ΠΎΠ΄Ρ‹ ΠΊ созданию ΠΌΠ°ΠΊΠ΅Ρ‚Π° сайта Mobile First ΠΈΠ»ΠΈ Desktop First?

ΠšΡ€ΠΎΠΌΠ΅ вопроса: «Какой Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΌΠ°ΠΊΠ΅Ρ‚Π° сайта Π΄Π΅Π»Π°Ρ‚ΡŒ, создавая Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½?Β»

ЗадаСтся Π΅Ρ‰Π΅ ΠΈ ΡΠΎΠΏΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ вопрос: «Какой ΠΈΠ· ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠ² создания ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Π΅Π΅ Mobile First ΠΈΠ»ΠΈ Desktop First?Β»

Mobile First – сначала ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ Π΄Π΅Π»ΠΎΠΌ Ρ€ΠΈΡΡƒΡŽΡ‚ΡΡ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ для мобильного, разумССтся, ΠΏΠ΅Ρ€Π΅Π΄ этим Π΄Π΅Π»Π°ΡŽΡ‚ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ сайта. А ΡƒΠΆΠ΅ ΠΏΠΎΡ‚ΠΎΠΌ пСрСходят ΠΊ созданию ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π½ΠΎΠΉ ΠΈ ПК вСрсии. НСкоторыС ΡΡ‡ΠΈΡ‚Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ благодаря Ρ‚Π°ΠΊΠΎΠΌΡƒ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Ρƒ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ интСрфСйс. И этот ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Π΅Π΅ исходя ΠΈΠ· популярности ΠΈ Π½Π°Ρ€Π°ΡΡ‚Π°ΡŽΡ‰Π΅Π³ΠΎ Ρ‚Ρ€Π°Ρ„ΠΈΠΊΠ°Β ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°.

Desktop First – ΠŸΠ΅Ρ€Π²Ρ‹ΠΌ Π΄Π΅Π»ΠΎΠΌ разрабатываСтся ΠΌΠ°ΠΊΠ΅Ρ‚ для самого большого Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ, Π° Π² послСдствиС для ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π° ΠΈ смартфонов. Π”Ρ€ΡƒΠ³ΠΈΠ΅ ΡΡ‡ΠΈΡ‚Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ Ρ…ΠΎΡ€ΠΎΡˆ Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ сразу Π²ΠΈΠ΄Π΅Π½ ΠΏΠΎΠ»Π½Ρ‹ΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π» ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, это Π΄Π°Π΅Ρ‚ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ Π½Π° ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π΅, смартфонС ΠΈ ΠΊΠ°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ.

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, этот ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΌΠ½Π΅ Π±Π»ΠΈΠΆΠ΅, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ создаю Π΄ΠΈΠ·Π°ΠΉΠ½ сайтов Π΄Π°Π²Π½ΠΎ. Π˜Π·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ Π½Π΅ ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΠ»ΠΎΡΡŒ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ², Π° дСлалась лишь ΠΎΠ΄Π½Π° вСрсия для ПК.

Если ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ, Ρ‚ΠΎ особой Ρ€Π°Π·Π½ΠΈΡ†Ρ‹ Π² ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π°Ρ…, Π»ΠΈΡ‡Π½ΠΎ я Π½Π΅ Π²ΠΈΠΆΡƒ. Π‘Ρ‡ΠΈΡ‚Π°ΡŽ, Ρ‡Ρ‚ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅ Π²Π°ΠΌ, вСдь Π³Π»Π°Π²Π½ΠΎΠ΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚! Если ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π³Ρ€Π°ΠΌΠΎΡ‚Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, сдСлав сначала ПК Π²Π΅Ρ€ΡΠΈΡŽ, Π° ΠΏΠΎΡ‚ΠΎΠΌ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅, Π·Π°Ρ‡Π΅ΠΌ Π·Π°Π΄ΡƒΠΌΡ‹Π²Π°Ρ‚ΡŒΡΡ Π½Π°Π΄ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠΌ.

Как Π±Ρ‹Ρ‚ΡŒ с ΠΏΠ»ΠΎΡ‚Π½ΠΎΡΡ‚ΡŒΡŽ пиксСлСй экранов устройств?

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ вопрос, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ Π΄Π°Π΅Ρ‚ покоя это ΠΏΠ»ΠΎΡ‚Π½ΠΎΡΡ‚ΡŒ пиксСлСй. Π’Π΅Ρ€Π½Π΅Π΅ Π΄Π°ΠΆΠ΅ Π½Π΅ сама ΠΏΠ»ΠΎΡ‚Π½ΠΎΡΡ‚ΡŒ пиксСлСй, Π° ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах с высоким Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ. Часто Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Ρƒ смартфона ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π² Ρ€Π°Π·Ρ‹ Π²Ρ‹ΡˆΠ΅, Ρ‡Π΅ΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ разрабатываСтся для ПК вСрсии.

Π’ этом случаС стоит ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΌΠ½ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒ плотности пиксСлСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π½Π° устройствС Π² нСсколько Ρ€Π°Π· Ρ‡Π΅Ρ‚Ρ‡Π΅.

Зная ΠΌΠ½ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒ плотности пиксСлСй, Π²Ρ‹ с Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒΡŽ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚Π΅ ΠΊΠ°ΠΊΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΈ Π½Π° ΠΊΠ°ΠΊΠΎΠΌ устройствС Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ.

ΠžΡ‚ΡΡŽΠ΄Π° слСдуСт, Ρ‡Ρ‚ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π° сайта стоит ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ΄ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ с 1Ρ… ΠΏΠ»ΠΎΡ‚Π½ΠΎΡΡ‚ΡŒΡŽ пиксСлСй. Иконки ΠΈ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Π² Π²Π΅ΠΊΡ‚ΠΎΡ€Π΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ svg. ΠŸΡ€ΠΈ вСрсткС страниц сайта Ρ‡Π΅Ρ€Π΅Π· media queries ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ экраны с ΠΌΠ½ΠΎΠΆΠΈΡ‚Π΅Π»Π΅ΠΌ ΠΈ ΠΏΠΎΠ΄Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ растровыС изобраТСния, Ссли Ρ‚Π°ΠΊΠΎΠ²Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ.

Π”ΠΈΠ·Π°ΠΉΠ½ ΠΌΠ°ΠΊΠ΅Ρ‚Π° сайта Π² Photoshop. Π”Π΅Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ руководство

Π§Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ ΠΎ рисовкС ΠΌΠ°ΠΊΠ΅Ρ‚Π° сайта Π² Photoshop?

Π“Π»Π°Π²Π½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΏΠΎΡ‡Ρ‚ΠΈ 98% ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… сайтов Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‚ΡΡ с Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΈ рисовки Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² Π€ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ΅.

Π”ΠΈΠ·Π°ΠΉΠ½-ΠΌΠ°ΠΊΠ΅Ρ‚ сайта – Π±ΡƒΠ΄ΡƒΡ‰ΠΈΠΉ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-рСсурс Π½Π° стадии Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ. Π’ Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊ ΠΏΠΎΡ€Ρ‚Π°Π»Ρƒ, Π±Π»ΠΎΠ³Ρƒ ΠΈΠ»ΠΈ ΠΊ Ρ‚ΠΎΡ€Π³ΠΎΠ²ΠΎΠΉ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚ ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΊΠ΅. Π’Π°ΠΊΠΆΠ΅, это ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π»Π΅Π½Π΄ΠΈΠ½Π³ страницСй, ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ прорисованным графичСским ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΈ Ρ‚.ΠΏ. Π”ΠΈΠ·Π°ΠΉΠ½ сайта ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΊΠ°ΠΊ Π½Π΅ΠΉΡ‚Ρ€Π°Π»ΡŒΠ½Ρ‹ΠΌ, Ρ‚Π°ΠΊ ΠΈ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ – Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ прСдставитСля ΠΎΠ±Ρ€Π°Π·Π° прСдоставлСнной ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ†ΠΈΠΈ Π² Π½Π΅ΠΌ ΠΈΠ»ΠΈ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.

На Π²Ρ‹Ρ…ΠΎΠ΄Π΅ получится многослойная раскладка, которая дальшС ΠΏΠΎΠΉΠ΄Π΅Ρ‚ Π² вСрстку ΠΈ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. ΠŸΠΎΡ‚ΠΎΠΌΡƒ Π΄ΠΈΠ·Π°ΠΉΠ½ сайта ΠΈΠΌΠ΅Π΅Ρ‚ свой ряд ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… элСмСнтов:

  • шапка;
  • располоТСниС мСню;
  • навигация;
  • цвСтовая Π³Π°ΠΌΠΌΠ°;
  • ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΠΈ Ρ‚. Π΄.

ΠŸΠ΅Ρ€Π²ΠΎΠ΅ Ρ‡Ρ‚ΠΎ Ρ‚Π΅Π±Π΅ Π½ΡƒΠΆΠ½ΠΎ – концСпция.

ΠžΡ‚Π²Π΅Ρ‚ΡŒ сСбС Π½Π° вопрос: «Для Ρ‡Π΅Π³ΠΎ\ΠΊΠΎΠ³ΠΎ Ρ‚Π΅Π±Π΅ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ Π²Π΅Π±-сайта?Β». ΠŸΡ€ΠΎ рисуй Ρ†Π΅Π»Π΅Π²ΡƒΡŽ Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΡŽ ΠΈ просчитай Π² ΡƒΠΌΠ΅ ΠΏΠ΅Ρ€Π΅Ρ‡Π΅Π½ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΈ Π·Π°Π΄Π°Ρ‡, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ сайт.

Однако ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ ΠΊΠ°Π½ΠΎΠ½Ρ‹ β€” Π΄ΠΈΠ·Π°ΠΉΠ½ сайта Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ максимально Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»Π΅Π½, ΠΏΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅Π½ ΠΈ эстСтичСн.

ПошаговоС созданиС Π΄ΠΈΠ·Π°ΠΉΠ½Π° сайта Π² Photoshop

ΠΠ°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ сайт Π² Ρ„ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ΅ β€” Π½Π΅ΠΎΡ‚ΡŠΠ΅ΠΌΠ»Π΅ΠΌΠ°Ρ Ρ‡Π°ΡΡ‚ΡŒ ΠΆΠΈΠ·Π½ΠΈ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°. Π˜Ρ‚Π°ΠΊ, ΠΌΡ‹ пошагово Ρ€Π°Π·Π±Π΅Ρ€Π΅ΠΌ ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π²Π΅Π± сайта. Π’ этом ΡƒΡ€ΠΎΠΊΠ΅ для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ² Π½Π°Ρ‡Π½Π΅ΠΌ Ρ€Π°Π·Π±ΠΈΡ€Π°Ρ‚ΡŒ пошагово ΡˆΠ°ΠΏΠΊΡƒ Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ сайт, Π° Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΡƒΡ€ΠΎΠΊΠ΅ для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… – ΠΎΡΠ½ΠΎΠ²Π½ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ. Π˜Ρ‚Π°ΠΊ, ΠΌΠ°ΠΊΠ΅Ρ‚ сайта Π² Photoshop.

Β 

Π¨Π°Π³ β„–1

Π”Π΅Π»Π°Π΅ΠΌ Π½ΠΎΠ²Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ для Ρ‡Π°ΠΉΠ½ΠΈΠΊΠΎΠ². Начни с создания ΠΏΠ»Π°Π½-эскиза Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°. Π•Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠ°ΠΊ Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‚ Ρ€ΡƒΠΊΠΈ Π½Π° листкС Π±ΡƒΠΌΠ°Π³ΠΈ, Ρ‚Π°ΠΊ ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π² Photoshop. Он прСдставляСт собой ΠΏΡ€ΠΈΠ±Π»ΠΈΠ·ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π±ΡƒΠ΄ΡƒΡ‰ΠΈΠΉ Π²ΠΈΠ΄ Π²Π΅Π±-сайта.

Β 

Π¨Π°Π³ β„–2

Π’Π²ΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ сайтС Π±ΡƒΠ΄Π΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ Π² 960 пиксСлов (px). НаТми Β«Π€Π°ΠΉΠ»Β» β€” Β«Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒΒ» (> File > New Document) ΠΈΠ»ΠΈ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΡŽ клавиш Β«Ctrl+NΒ». ΠŸΠΎΡΡ‚Π°Π²ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ 1200Ρ…1500 пиксСлов ΠΈ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ 72 пиксСла. Π¦Π²Π΅Ρ‚ RGB, 8 Π±ΠΈΡ‚, Ρ„ΠΎΠ½ – Π±Π΅Π»Ρ‹ΠΉ.

Β 

Π¨Π°Π³ β„–3

Π’Ρ‹Π΄Π΅Π»ΠΈ вСсь Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ инструмСнта Β«ΠŸΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡ‚ΡŒΒ» (> Rectangular Marque Tool) ΠΈΠ»ΠΈ Π½Π°ΠΆΠΌΠΈ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΡŽ клавиш Β«Ctrl+AΒ» -ΠΎΠ½Π° автоматичСски Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ всю ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° Π±Π΅Π· ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠΉ.

Β 

Π¨Π°Π³ β„–4

ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈ Π² мСню Β«Π’Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅Β» – Β«Π’Ρ€Π°Π½ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒΒ» (> Select > Transform Selection).

Π‘Π²Π΅Ρ€Ρ…Ρƒ, Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ настроСк установи Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ – 960 px. Π­Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ главная рабочая ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Π°, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Ρ‚Π΅Π±Π΅ прСдстоит Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ.

Β 

Π¨Π°Π³ β„–5

Установи Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ (Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅) Ρ‚ΠΎΡ‡Π½ΠΎ ΠΏΠΎ Π³Ρ€Π°Π½ΠΈΡ†Π°ΠΌ выдСлСния. ΠŸΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈ ΠΈΡ… Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»Π΅ΠΌ ΠΌΡ‹ΡˆΠΈ. Если Ρƒ тСбя Π² Π€ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ΅ Π½Π΅ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ, Π·Π°ΠΉΠ΄ΠΈ Π² Β«ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Β» ΠΈ Π½Π°ΠΆΠΌΠΈ Π³Π°Π»ΠΎΡ‡ΠΊΡƒ Π½Π°ΠΏΡ€ΠΎΡ‚ΠΈΠ² β€” Β«Π›ΠΈΠ½Π΅ΠΉΠΊΠΈΒ» (> View > Rulers).

Β 

Π¨Π°Π³ β„–6

Π”Π°Π»Π΅Π΅, сдСлай отступ ΠΌΠ΅ΠΆΠ΄Ρƒ краями Ρ€Π°Π±ΠΎΡ‡Π΅ΠΉ области ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΈ Π·ΠΎΠ½ΠΎΠΉ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈ Π² мСню Β«Π’Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅Β» – Β«Π’Ρ€Π°Π½ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒΒ» (Select > Transform Selection). УмСньши Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ Π΄ΠΎ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΊΠΈ Π² 920 пиксСлов.

Β 

Π¨Π°Π³ β„–7

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ – ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ высотой Π² 465 пиксСлов, ΠΊΠ°ΠΊ это ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅.

Β 

Π¨Π°Π³ β„–8

Π‘ΠΎΠ·Π΄Π°ΠΉ Π½ΠΎΠ²Ρ‹ΠΉ слой ΠΈ Π·Π°Π»Π΅ΠΉΡ‚Π΅ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ сСрым, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Β«Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ ΠšΠΈΡΡ‚ΡŒΒ» (> Brush Tool) ΠΈΠ»ΠΈ Β«Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ Π—Π°Π»ΠΈΠ²ΠΊΠ°Β» (> Paint Bucket Tool).

Β 

Π¨Π°Π³ β„–9

Π’Ρ‹Π±Π΅Ρ€ΠΈ Ρ†Π²Π΅Ρ‚Π° для Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρƒ Ρ†Π²Π΅Ρ‚ΠΎΠ² – ΠΎΠ½Π° Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов слСва.

Β 

Π¨Π°Π³ β„–10

ΠŸΡ€ΠΈΠΌΠ΅Π½ΠΈ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚. Π•Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ Ρ‚Π°ΠΊΠΆΠ΅ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов ΠΈΠ»ΠΈ ΠΊΠ»ΠΈΠΊΠ½ΡƒΠ² Π΄Π²Π° Ρ€Π°Π·Π° ΠΌΡ‹ΡˆΠΊΠΎΠΉ ΠΏΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠΌΡƒ слою. На ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ пошагово объяснСно Ρ‡Ρ‚ΠΎ Π·Π° Ρ‡Π΅ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΊΠ»ΠΈΠΊΠ°Ρ‚ΡŒ – 1. «НалоТСниС Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°Β», 2. Β«Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Β», 3. Π’Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ваши Ρ†Π²Π΅Ρ‚Π° ΠΈΠ· ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹ «Набор». 4. Π£ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΆΠ΅Π»Π°Π΅ΠΌΡ‹ΠΉ ΡƒΠ³ΠΎΠ» Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°.

Β 

Β 

Π¨Π°Π³ β„–11

Π’Π²ΠΎΠ΅ΠΉ шапкС сайта Π½ΡƒΠΆΠ½Π° подсвСтка. ΠšΡΡ‚Π°Ρ‚ΠΈ, Π½Π΅ Π·Π°Π±Ρ‹Π²Π°ΠΉ ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΡΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ слои, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΡ‚ΠΎΠΌ Π½Π΅ ΠΏΠ΅Ρ€Π΅ΠΏΡƒΡ‚Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ Π³Π΄Π΅ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ.

Π˜Ρ‚Π°ΠΊ, ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈ. Π‘ΠΎΠ·Π΄Π°ΠΉ Π½ΠΎΠ²Ρ‹ΠΉ слой (сразу Π΅Π³ΠΎ ΠΏΡ€ΠΎΠΈΠΌΠ΅Π½ΡƒΠΉ!) – Β«Ctrl + Alt + Shift + NΒ»ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΌΡΠ³ΠΊΡƒΡŽ ΠΊΠΈΡΡ‚ΡŒ, Ρ€Π°Π·ΠΌΠ΅Ρ€, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΎΠΊΠΎΠ»ΠΎ 600 пиксСлов (моТСшь ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΏΠΎ своСм вкусу).

Β 

Π¨Π°Π³ β„–12

ΠŸΠ΅Ρ€Π΅Π΄Π²ΠΈΠ½ΡŒ всС слои Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ порядкС – Β«ΠŸΠΎΠ΄ΡΠ²Π΅Ρ‚ΠΊΠ°Β» β€” Β«Π¨Π°ΠΏΠΊΠ°Β» β€” Β«Π€ΠΎΠ½Β».

Β 

Π¨Π°Π³ β„–13

Кликни ΠΊΠΈΡΡ‚ΡŒΡŽ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π· Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅ шапки. ΠŸΠΎΡΡ‚Π°Π²ΡŒ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ ΠΈ ΡƒΠ΄Π°Π»ΠΈ ΠΏΠΎΡ‚ΠΎΠΌ Ρ‡Π°ΡΡ‚ΡŒ пятна – Ρ€Π°Π·Ρ€ΡƒΠ±ΠΈ Π΅Π³ΠΎ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, инструмСнтом Β«ΠŸΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡ‚ΡŒΒ» ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Β«DeleteΒ». Π‘Π»ΠΎΠΉ с подсвСткой соТми ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΈ растяни (комбинация клавиш Β«Ctrl + TΒ»).

Β 

Π¨Π°Π³ β„–14

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ слои – Π²Ρ‹Π±Π΅Ρ€ΠΈ ΠΈΡ… ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈ инструмСнт Β«ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅Β» (> Move Tool) ΠΈΠ»ΠΈ клавиша Β«VΒ». На ΠΏΠ°Π½Π΅Π»ΠΈ свойств (Π²Π²Π΅Ρ€Ρ…Ρƒ) Π½Π°ΠΆΠΌΠΈ Β«Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Ρ†Π΅Π½Ρ‚Ρ€ΠΎΠ² ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈΒ» (> Align Horizontal Centers).

Β 

Π¨Π°Π³ β„–15

Π‘ΠΎΠ·Π΄Π°ΠΉ Π½ΠΎΠ²Ρ‹ΠΉ слой (Β«Shift + Ctrl + NΒ»). ΠŸΠΎΡΡ‚Π°Π²ΡŒ ΠΊΠ°Ρ€Π°Π½Π΄Π°ΡˆΠΎΠΌ (> Pencil Tool) Ρ‚ΠΎΡ‡ΠΊΡƒ. Растяни Π΅Π΅ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ (Β«Ctrl+TΒ») ΠΈ сгладь края Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ ΠΊΠ°ΠΊ Π΄Π΅Π»Π°Π» это Ρ€Π°Π½Π΅Π΅.

Β 

Π¨Π°Π³ β„–16

Π’Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ слоя. Π‘Ρ‚Π°Π²ΠΈΠΌ Ρ‚Π°ΠΌ Π΄Π²Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ инструмСнтом Β«ΠšΠ°Ρ€Π°Π½Π°Π΄ΡˆΒ» (Pencil Tool), Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ Π² 2 пиксСла. Π–ΠΌΠΈ Π΄Π°Π»Π΅Π΅ Β«Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅Β» – Β«ΠžΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΡƒΠ·ΠΎΡ€Β» (Edit > Define Pattern).

Β 

Π¨Π°Π³ β„–17

Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Π½ΠΎΠ²Ρ‹ΠΉ слой (Β«Shift + Ctrl + NΒ») ΠΈ Π½Π°ΠΆΠΌΠΈ Β«Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅Β» β€” Β«Π’Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π·Π°Π»ΠΈΠ²ΠΊΡƒΒ».

Β 

Π¨Π°Π³ β„–18

Π’Ρ‹Π±Π΅Ρ€ΠΈ Π΄Π°Π»Π΅Π΅ «РСгулярный» ΠΈ ΠΊΠ»ΠΈΠΊΠ½ΠΈ Π½Π° созданный Ρ‚ΠΎΠ±ΠΎΠΉ ΡƒΠ·ΠΎΡ€.

Β 

Π¨Π°Π³ β„–19

Π’Ρ‹Π±Π΅Ρ€ΠΈ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΊΠ°ΠΊ ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎ Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈ Π·Π°Π΄Π°Ρ‡Ρƒ.

Β 

Π¨Π°Π³ β„–20

Как видишь, Ρƒ нас ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»Π°ΡΡŒ Β«ΡˆΠ°ΡˆΠ΅Ρ‡ΠΊΠ°Β», Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ стоит ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ.

Β 

Π¨Π°Π³ β„–21

Π”Π°Π»Π΅Π΅, выдСляй ΡƒΠ·ΠΎΡ€ Π² ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎΠΌ порядкС инструмСнтом «Овальная ΠΎΠ±Π»Π°ΡΡ‚ΡŒΒ» (> Elliptical Marquee Tool). ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠΉ ΠΈΠ½Π²Π΅Ρ€ΡΠΈΡŽ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ области ΠΈ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Β«Π Π°ΡΡ‚ΡƒΡˆΠ΅Π²ΠΊΠΈΒ» (> Feather) сгладь края ΠΈ удаляй Π½Π΅Π½ΡƒΠΆΠ½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΡƒΠ·ΠΎΡ€Π°.

Β 

Π¨Π°Π³ β„–22

Π—Π°Ρ‚Π΅ΠΌ пишСм Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ инструмСнта Β«Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ тСкст». К слою с Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ слоя «ВСнь» (>Drop Shadow), Ρ‡Ρ‚ΠΎ находится Π² мСню слоя (Π΄Π²Π° Ρ€Π°Π·Π° ΠΆΠΌΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ Π½Π° Π½ΡƒΠΆΠ½Ρ‹ΠΉ слой).

Β 

Π¨Π°Π³ β„–23

Π”ΠΎΠ±Π°Π²ΡŒ Π½ΠΎΠ²Ρ‹Π΅ области Π³Ρ€Π°Π½ΠΈΡ† Π»ΠΈΠ½Π΅ΠΉΠΊΠΎΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ тСкст Π½Π΅ ΠΏΡ€Ρ‹Π³Π°Π» Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π°Π±Π·Π°Ρ†Π°Ρ… Π΄Ρ€ΡƒΠ³ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³Π°.

Β 

Π¨Π°Π³ β„–24

Напиши Π½Π°Π·Π²Π°Π½ΠΈΠ΅ для Π±ΡƒΠ΄ΡƒΡ‰ΠΈΡ… ΠΊΠ½ΠΎΠΏΠΎΠΊ.

Β 

Π¨Π°Π³ β„–25

Π—Π΄Π΅ΡΡŒ Π² дальнСйшСм Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π°ΠΊ Π·Π²Π°Π½Π½Ρ‹ΠΉ – слайдСр для ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. Π’Ρ‹Π΄Π΅Π»ΠΈ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ 580Ρ…295 пиксСлов ΠΈ помСсти Ρ‚ΡƒΠ΄Π° любой снимок.

Β 

Π¨Π°Π³ β„–26

Π”Π°Π»Π΅Π΅, создай Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ эффСкт ΠΊ слайдСру. Π‘ΠΎΠ·Π΄Π°ΠΉ Π½ΠΎΠ²Ρ‹ΠΉ слой (Β«Shift + Ctrl + NΒ»), Π²Ρ‹Π±Π΅Ρ€ΠΈ Β«ΠšΠΈΡΡ‚ΡŒΒ» (> Brush Tool) ΠΈ ΠΏΠΎ Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡƒ, Ρ‡Ρ‚ΠΎ ΠΈ с Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ – ΠΏΠΎΡΡ‚Π°Π²ΡŒ Ρ‚ΠΎΡ‡ΠΊΡƒ Π΄ΠΈΠ°ΠΌΠ΅Ρ‚Ρ€ΠΎΠΌ ΠΎΠΊΠΎΠ»ΠΎ 400 пиксСлов ΠΈ растяни Π΅Π΅ (Ctrl+T).

Β 

Π¨Π°Π³ β„–27

ΠŸΡ€ΠΎΠ΄ΡƒΠ±Π»ΠΈΡ€ΡƒΠΉ слой ΠΈ помСсти Π΅Π³ΠΎ Π·Π° слайдСр, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ, кстати, Ρ‚ΠΎΠΆΠ΅ Π½Π΅ ΠΏΠΎΠΌΠ΅ΡˆΠ°Π΅Ρ‚ ΠΎΡ‚Ρ€Π΅Π³ΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎ Ρ†Π²Π΅Ρ‚Ρƒ.

Β 

Π¨Π°Π³ β„–28

Π£Π±ΠΈΡ€Π°Π΅ΠΌ Π½Π΅Π½ΡƒΠΆΠ½Ρ‹Π΅ края, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΌΠΎΡ‚Ρ€Π΅Π»ΠΎΡΡŒ Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½Π΅Π΅.

Β 

Π¨Π°Π³ β„–29

Π”Π΅Π»Π°ΠΉ Π΄Π²Π° Π½ΠΎΠ²Ρ‹Ρ… слой ΠΈ рисуй ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ для слайдСра. Π”Π΅Π»Π°ΠΉ ΠΈΡ… ΠΏΠΎΠ»ΡƒΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌΠΈ.

Β 

Π¨Π°Π³ β„–30

Π”ΠΎΠ±Π°Π²ΡŒ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ стрСлки инструмСнтом Β«ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½Π°Ρ Ρ„ΠΈΠ³ΡƒΡ€Π°Β».

Β 

Π¨Π°Π³ β„–31

Π‘ΠΎΠ·Π΄Π°ΠΉ Π½ΠΎΠ²Ρ‹ΠΉ слой ΠΈ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΎΠΌ Π²Ρ‹Π΄Π΅Π»ΠΈ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π²Π½ΠΈΠ·Ρƒ слайдСра β€” инструмСнт Β«ΠŸΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ выдСлСния» (> Rectangular Marqee Tool). Π‘Π΄Π΅Π»Π°ΠΉ Π΅Π΅ ΠΏΠΎΠ»ΡƒΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠΉ (Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ β€” 50%). Напиши тСкст.

Β 

Π¨Π°Π³ β„–32

Π”ΠΎΠ±Π°Π²ΡŒ описаниС сайта ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

Команда ΠΎΠ½Π»Π°ΠΉΠ½ ΡˆΠΊΠΎΠ»Ρ‹ WebDesGuru ΠΏΡ€ΠΈΠ»Π°Π³Π°Π΅Ρ‚ всС усилия для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠΉΡ‚ΠΈ ΠΎΡ‚ стандартных ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² обучСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π³ΠΎΠ΄Π°ΠΌΠΈ Π²Ρ‹Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π»ΠΈΡΡŒ Π² систСмС образования. ΠœΡ‹ Π΅ΠΆΠ΅Π΄Π½Π΅Π²Π½ΠΎ Π΄Π΅Π»Π°Π΅ΠΌ шаг Π²ΠΏΠ΅Ρ€Π΅Π΄ ΠΈ ΠΈΠ΄Ρ‘ΠΌ навстрСчу Π½ΠΎΠ²Ρ‹ΠΌ знаниям, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ с нашими ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°ΠΌΠΈ. ΠžΡ†Π΅Π½ΠΈΡ‚Π΅ наши старания! Π—Π°ΠΏΠΈΡΡ‹Π²Π°ΠΉΡ‚Π΅ΡΡŒ Π½Π° курсы web-Π΄ΠΈΠ·Π°ΠΉΠ½Π° для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…, ΠΈ ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Π’Π°ΠΌ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ станСт Π² ΡƒΠ΄ΠΎΠ²ΠΎΠ»ΡŒΡΡ‚Π²ΠΈΠ΅!

ПошаговоС созданиС ΠΌΠ°ΠΊΠ΅Ρ‚Π° сайта Π² Ρ„ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ΅ — шаблон для сайта







.dexter-FlexContainer-Items {
минимальная высота: 65 пиксСлСй;

}

# root_content_flex_copy_copy_copy__1115767512_items_flex_1836510744_items_table_row-3x03igm-column-dp23ifm_flex> .dexter-FlexContainer-Items> *: nth-child (1) {
flex: 0 0 Π°Π²Ρ‚ΠΎ; максимальная ΡˆΠΈΡ€ΠΈΠ½Π°: 100%; ΡˆΠΈΡ€ΠΈΠ½Π°: Π°Π²Ρ‚ΠΎ;
минимальная высота: 65 пиксСлСй;
}

# root_content_flex_copy_copy_copy__1115767512_items_flex_1836510744_items_table_row-3x03igm-column-dp23ifm_flex {

Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: #CACACA;

}

# root_content_flex_copy_copy_copy__1115767512_items_flex_1836510744_items_table_row-3x03igm-column-dp23ifm_flex {
Ρ†Π²Π΅Ρ‚: # 4B4B4B;
}

@media screen ΠΈ (min-width: 600px) {
# root_content_flex_copy_copy_copy__1115767512_items_flex_1836510744_items_table_row-3x03igm-column-dp23ifm_flex>.dexter-FlexContainer-Items {

}

}

@media screen ΠΈ (min-width: 1200px) {
# root_content_flex_copy_copy_copy__1115767512_items_flex_1836510744_items_table_row-3x03igm-column-dp23ifm_flex> .dexter-FlexContainer-Items {

}

}

]]>

.dexter-FlexContainer-Items {
минимальная высота: 65 пиксСлСй;

}

# root_content_flex_copy_copy_copy__1115767512_items_flex_1836510744_items_table_row-3x03igm-column-9u33i66_flex_copy> .dexter-FlexContainer-Items> *: nth-child (1) {
flex: 0 0 Π°Π²Ρ‚ΠΎ; максимальная ΡˆΠΈΡ€ΠΈΠ½Π°: 100%; ΡˆΠΈΡ€ΠΈΠ½Π°: Π°Π²Ρ‚ΠΎ;
минимальная высота: 65 пиксСлСй;
}

# root_content_flex_copy_copy_copy__1115767512_items_flex_1836510744_items_table_row-3x03igm-column-9u33i66_flex_copy {

Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: #CACACA;

}

# root_content_flex_copy_copy_copy__1115767512_items_flex_1836510744_items_table_row-3x03igm-column-9u33i66_flex_copy {
Ρ†Π²Π΅Ρ‚: # 4B4B4B;
}

@media screen ΠΈ (min-width: 600px) {
# root_content_flex_copy_copy_copy__1115767512_items_flex_1836510744_items_table_row-3x03igm-column-9u33i66_flex_copy>.dexter-FlexContainer-Items {

}

}

@media screen ΠΈ (min-width: 1200px) {
# root_content_flex_copy_copy_copy__1115767512_items_flex_1836510744_items_table_row-3x03igm-column-9u33i66_flex_copy> .dexter-FlexContainer-Items {

}

}

]]>

имя

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΎΠ±ΡŠΡΡ‚ΠΈΠ΅

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΎΠ±ΡŠΡΡ‚ΠΈΠ΅

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ сопротивлСниС

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ сопротивлСниС

Имя Π­Ρ‚ΠΈΠΊΠ΅Ρ‚ΠΊΠ°

251

251

750

750

Имя тСкстовоС ΠΏΠΎΠ»Π΅

250

250

750

750

имя

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΎΠ±ΡŠΡΡ‚ΠΈΠ΅

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΎΠ±ΡŠΡΡ‚ΠΈΠ΅

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ сопротивлСниС

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ сопротивлСниС

Имя Π­Ρ‚ΠΈΠΊΠ΅Ρ‚ΠΊΠ°

251

251

750

750

Имя тСкстовоС ΠΏΠΎΠ»Π΅

250

250

750

750

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ

Атрибут

Π¦Π΅Π½Π½ΠΎΡΡ‚ΡŒ

Π­Ρ‚ΠΈΠΊΠ΅Ρ‚ΠΊΠ° с ΠΈΠΌΠ΅Π½Π΅ΠΌ