Π Π°Π·Π½ΠΎΠ΅

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ psd ΠΌΠ°ΠΊΠ΅Ρ‚: Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ PSD ΠΌΠ°ΠΊΠ΅Ρ‚ Π°ΠΉΡ„ΠΎΠ½Π° ΠΈ ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ? / Π₯Π°Π±Ρ€

01.04.1985

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

SavePearlHarbor

ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ΠΎ Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ admin

ВступлСниС

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

Π’ Π΄Π°Π½Π½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ пСрСчислСны Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹Π΅ шаги, ΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹, с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ Π― столкнулся, ΠΊΠΎΠ³Π΄Π° Ρ€Π΅ΡˆΠΈΠ» Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ для сСбя ΠΎΡ‡Π΅Ρ€Π΅Π΄Π½ΠΎΠΉ, ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΉ инструмСнт, для создания интСрфСйса Π²Π΅Π±-прилоТСния.

ДисклСймСр

Π’ ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ соврСмСнныС Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΈ стандарты.

Π₯отя вСсь ΠΊΠΎΠ΄ Π±Ρ‹Π» написан ΠΏΠΎΠ΄ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Chrome послСднСй вСрсии,

Π§ΠΈΡ‚Π°Ρ‚ΡŒ Π΄Π°Π»Π΅Π΅ β†’

Π ΡƒΠ±Ρ€ΠΈΠΊΠ°: Π‘Π΅Π· Ρ€ΡƒΠ±Ρ€ΠΈΠΊΠΈ | Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ΠΎ Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ admin

Π§Π°ΡΡ‚Π΅Π½ΡŒΠΊΠΎ Π±Ρ‹Π²Π°Π΅Ρ‚ такая ситуация, ΠΊΠΎΠ³Π΄Π° программист Ρ€ΡƒΠ³Π°Π΅Ρ‚ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€Π° ΠΈΠ·-Π·Π° Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ„Π»ΠΈΠΊΡ‚Π°. Π‘ΡƒΡ‚ΡŒ ΠΊΡ€ΠΈΡ‚ΠΈΠΊΠΈ сводится ΠΊ Ρ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚ ΠΊΠ°ΠΊ устроСна β€œΡ€Π΅Π°Π»ΡŒΠ½Π°Ρ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒβ€ ΠΈ пытаСтся Π²Π΅Π·Π΄Π΅ Π²Ρ‹Π΅Ρ…Π°Ρ‚ΡŒ Π½Π° β€œΡΠΎΡ„Ρ‚-скилах”. ЗанимаСтся β€œΠ½Π΅Ρ‚Π²ΠΎΡ€ΠΊΠΈΠ½Π³ΠΎΠΌβ€ вмСсто изучСния Ρ‡Π΅Π³ΠΎ Ρ‚ΠΎ хотя Π±Ρ‹ Π½Π° Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅, Π² ΠΎΠ±Ρ‰Π΅ΠΌ Π±Π°Π»Π°Π±ΠΎΠ»ΡŒΡΡ‚Π²ΡƒΠ΅Ρ‚ ΠΈ ΠΌΠ°Π½ΠΈΠΏΡƒΠ»ΠΈΡ€ΡƒΠ΅Ρ‚ понятиями ΠΈ шаблонами ΠΎΡ‚ΠΎΡ€Π²Π°Π½Π½Ρ‹ΠΌΠΈ ΠΎΡ‚ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ понимания Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. А ΠΏΠΎΡ‚ΠΎΠΌ этот ΠΆΠ΅ программист, Π² своё свободноС врСмя, мСчтая ΠΎ собствСнном ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎΠΌ стартапС, пытаСтся ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ИИ ΠΎΠ±Ρ‰Π΅Π³ΠΎ назначСния Π½Π° основС языковой ΠΌΠΎΠ΄Π΅Π»ΠΈ, Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚ Π² ΠΎΠ±ΡƒΡ‡Π°ΡŽΡ‰ΠΈΠΉ Π½Π°Π±ΠΎΡ€ Π΄Π°Π½Π½Ρ‹Ρ… Π³ΠΈΠ³Π°Π±Π°ΠΉΡ‚Ρ‹ тСкстов ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, оТидая ΠΏΡ€ΠΈ этом ΠΏΡ€Π°ΠΊΡ‚ΠΈΡ‡Π½ΠΎΠ³ΠΎ рассудочного ΠΌΡ‹ΡˆΠ»Π΅Π½ΠΈΡ ΠΎΡ‚ создаваСмой нСйросСти.

И Π΄Π΅Π»ΠΎ Π΄Π°ΠΆΠ΅ Π½Π΅ Π² ограничСнности соврСмСнных Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… нСйросСтСй. А Π² Ρ‚ΠΎΠΌ Ρ‡Ρ‚ΠΎ этот программист сам Ρ‚ΠΎΠ³ΠΎ Π½Π΅ осознавая, основываСт свою Ρ€Π°Π±ΠΎΡ‚Ρƒ

Π§ΠΈΡ‚Π°Ρ‚ΡŒ Π΄Π°Π»Π΅Π΅ β†’

Π ΡƒΠ±Ρ€ΠΈΠΊΠ°: Π‘Π΅Π· Ρ€ΡƒΠ±Ρ€ΠΈΠΊΠΈ | Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ΠΎ

02.10.2022 Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ admin

КакоС-Ρ‚ΠΎ бСсплатноС стоковоС Ρ„ΠΎΡ‚ΠΎ с Unsplash.com

Будя ΠΏΠΎ ΡΡ‚Π°Ρ‚ΡŒΡΠΌ Π½Π° Ρ‚Π΅ΠΌΡƒ Ρ„ΠΈΠ·ΠΎ ΠΈ обсуТдСниям ΠΏΠΎΠ΄ Π½ΠΈΠΌΠΈ, Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ всС Ρ…Π°Π±Ρ€ΠΎΠ²Ρ‡Π°Π½Π΅ Π»ΡŽΠ±ΡΡ‚ ΡƒΠΏΡ€Π°ΠΆΠ½ΡΡ‚ΡŒΡΡ (Π° ΠΊΡ‚ΠΎ-Ρ‚ΠΎ Π²ΠΎΠΎΠ±Ρ‰Π΅ с дСтства Π½Π΅Π½Π°Π²ΠΈΠ΄ΠΈΡ‚ Π»ΡŽΠ±Ρ‹Π΅ околоспортивныС активности). А ΠΎΠ½ΠΈ Π½ΡƒΠΆΠ½Ρ‹.

НС Π±ΡƒΠ΄Ρƒ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΏΠΎΡ‡Π΅ΠΌΡƒ, ΠΈΠ±ΠΎ Ρ‚ΡƒΡ‚ достаточно статСй Π½Π° эту Ρ‚Π΅ΠΌΡƒ. ΠŸΡ€ΠΎ влияниС Ρ„ΠΈΠ·Π½Π°Π³Ρ€ΡƒΠ·ΠΎΠΊ Π½Π° ΠΊΠΎΠ³Π½ΠΈΡ‚ΠΈΠ²ΠΊΡƒ, Ссли интСрСсно, ΡΠΎΠ²Π΅Ρ‚ΡƒΡŽ Π³Π»ΡΠ½ΡƒΡ‚ΡŒ большой ΠΎΠ±Π·ΠΎΡ€ исслСдований/мСтаисслСдований.

К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, Ссли Π²Ρ‹ считаСтС физичСскиС Π½Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Β«Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΌ Π·Π»ΠΎΠΌΒ», появился способ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΡ… занятиСм, приносящим ΡƒΠ΄ΠΎΠ²ΠΎΠ»ΡŒΡΡ‚Π²ΠΈΠ΅: VR фитнСс. Π₯ΠΎΡ‡Ρƒ Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ Π²Π°ΠΌ ΠΎ своём ΠΎΠΏΡ‹Ρ‚Π΅.

Для Π½Π°Ρ‡Π°Π»Π° Π½Π°ΠΌ Π½ΡƒΠΆΠ½Π° VR-шапка. ΠŸΡ€Π΅Π΄Π»Π°Π³Π°ΡŽ Π±Π΅Π·Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ Q2.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ Meta* Quest 2?

  • ΠΠ²Ρ‚ΠΎΠ½ΠΎΠΌΠ½ΠΎΡΡ‚ΡŒ. Q2 Π½Π΅ Π½ΡƒΠΆΠ΅Π½ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ (Π½ΠΎ ΠΏΡ€ΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒΡΡ ΠΊ Π½Π΅ΠΌΡƒ ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΠ²ΠΎΠ΄ΠΎΠΌ, Ρ‚Π°ΠΊ ΠΈ ΠΏΠΎ WiFi). Для фитнСса это Π²ΠΎΠΎΠ±Ρ‰Π΅ ΠΊΠΈΠ»Π»Π΅Ρ€-Ρ„ΠΈΡ‡Π°, Π½ΠΈΠΊΡƒΠ΄Π° Π½Π΅ Π½Π°Π΄ΠΎ ΠΈΠ΄Ρ‚ΠΈ, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒΡΡ Π² любом мСстС Π² любоС врСмя (Π³Π»Π°Π²Π½ΠΎΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Π»ΠΎ достаточно свСта, хотя с ИК-Π»Π°ΠΌΠΏΠΎΡ‡ΠΊΠΎΠΉ для подсвСтки ΠΌΠΎΠΆΠ½ΠΎ ΠΈ Π² Ρ‚Π΅ΠΌΠ½ΠΎΡ‚Π΅).

  • Π¦Π΅Π½Π°. VR is ♂️three hundred

Π§ΠΈΡ‚Π°Ρ‚ΡŒ Π΄Π°Π»Π΅Π΅ β†’

Π ΡƒΠ±Ρ€ΠΈΠΊΠ°: Π‘Π΅Π· Ρ€ΡƒΠ±Ρ€ΠΈΠΊΠΈ | Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ΠΎ Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ admin

Π£ мСня Π΅ΡΡ‚ΡŒ паяльник, ΠΏΡ€ΠΎΠ²ΠΎΠ»ΠΎΠΊΠ° ΠΈ кусок крСмния. Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ процС… Π₯отя, Π½Π΅Ρ‚. Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΄ΠΈΠΎΠ΄?

Π‘Ρ‚Π°Ρ‚ΡŒΡ носит чисто ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ…Π°Ρ€Π°ΠΊΡ‚Π΅Ρ€ ΠΈ Π½ΠΈ Π² ΠΊΠΎΠ΅ΠΉ ΠΌΠ΅Ρ€Π΅ Π½Π΅ ΠΏΡ€ΠΈΠ·Ρ‹Π²Π°Π΅Ρ‚ ΠΊ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡŽ дСйствий, описанных Π² Π΄Π°Π½Π½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅. Π—Π΄Π΅ΡΡŒ всС ΡΠΌΠ΅Ρ€Ρ‚Π΅Π»ΡŒΠ½ΠΎ опасно: начиная ΠΎΡ‚ высоких Ρ‚Π΅ΠΌΠΏΠ΅Ρ€Π°Ρ‚ΡƒΡ€, заканчивая Ρ…ΠΈΠΌΡ€Π΅Π°ΠΊΡ‚ΠΈΠ²Π°ΠΌΠΈ.

Ну Ρ‡Ρ‚ΠΎ? ΠŸΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΠΌ? ΠŸΠ΅Ρ€Π²ΠΎΠ΅, Ρ‡Ρ‚ΠΎ Π±Ρ‹Π»ΠΎ сдСлано, Ρ‚Π°ΠΊ это ΠΊΡƒΠΏΠ»Π΅Π½Π° крСмнСвая пластина n-проводимости. ΠŸΠΎΡ‚ΠΎΠΌ Ρ€Π°Π·Π΄Π΅Π»ΠΈΠ» Π΅Ρ‘ Π½Π° Π±ΠΎΠ»Π΅Π΅ ΠΌΠ΅Π»ΠΊΠΈΠ΅ пластинки. Π”Π°Π»Π΅Π΅ Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΎΠΊΡΠΈΠ΄Π½ΡƒΡŽ ΠΏΠ»Π΅Π½ΠΊΡƒ Π½Π° повСрхности крСмния. Для этого ΠΏΠΎΠ»ΠΎΠΆΠΈΠ² ΠΊΡ€Π΅ΠΌΠ½ΠΈΠΉ Π² Ρ‚ΠΈΠ³Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΏΠ΅Ρ‡ΡŒ, Ρ€Π°Π·ΠΎΠ³Ρ€Π΅Ρ‚ΡƒΡŽ Π΄ΠΎ 1000 Π‘, ΠΏΠΎΠ»ΠΈΠ²Π°Π» Π΅Π³ΠΎ дистиллированной Π²ΠΎΠ΄ΠΎΠΉ. ΠŸΠΎΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅, ΠΏΡƒΡΡ‚ΡŒ Π½Π° Ρ‚Ρ€ΠΎΠ΅Ρ‡ΠΊΡƒ, Π½ΠΎ ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π»ΠΎΡΡŒ. ПослС охлаТдСния ΠΏΠΎΠΊΡ€Ρ‹Π» ΠΎΠ΄Π½Ρƒ сторону фоторСзистом, ΠΏΠΎΠ΄ΡΡƒΡˆΠΈΠ» ΠΈ засвСтил Π£Π€-Π»Π°ΠΌΠΏΠΎΠΉ.

Π£ мСня Π±Ρ‹Π»Π° плавиковая кислота (HF) 40%, Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ ΠΊΠΎΠ½Ρ†Π΅Π½Ρ‚Ρ€Π°Ρ†ΠΈΡŽ. Для этого Ρ€Π°Π·Π²Π΅Π» Π΅Ρ‘ дистиллированной Π²ΠΎΠ΄ΠΎΠΉ 1 ΠΊ 10. ΠŸΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ

Π§ΠΈΡ‚Π°Ρ‚ΡŒ Π΄Π°Π»Π΅Π΅ β†’

Π ΡƒΠ±Ρ€ΠΈΠΊΠ°: Π‘Π΅Π· Ρ€ΡƒΠ±Ρ€ΠΈΠΊΠΈ | Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ΠΎ Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ admin

НС для ΠΊΠΎΠ³ΠΎ Π½Π΅ сСкрСт, Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΏΡ‡Π° являСтся популярным срСдством, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ½ΠΈΠ·ΠΈΡ‚ΡŒ Π½Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ Π½Π° сайт ΠΈ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ скачиваниС ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Ρ€ΠΎΠ±ΠΎΡ‚Π°ΠΌΠΈ.

БСгодня, ΠΊΠΎΠ³Π΄Π° ΠΊΠ°ΠΏΡ‡Π° примСняСтся практичСски Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ сайтС, рассмотрим кСйс с Π΅Π΅ ΠΎΠ±Ρ…ΠΎΠ΄ΠΎΠΌ Π½Π° сСрвисС Β«ΠŸΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ бизнСс».

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Β«ΠŸΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ бизнСс»?

БСрвис содСрТит ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ финансовых ΠΈ ΠΏΡ€Π°Π²ΠΎΠ²Ρ‹Ρ… ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°Ρ… ΡŽΡ€ΠΈΠ΄ΠΈΡ‡Π΅ΡΠΊΠΈΡ… Π»ΠΈΡ† (ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ Ρ‚ΡƒΡ‚). Данная информация ΠΏΠΎΠ»Π΅Π·Π½Π° ΠΊΠ°ΠΊ для самих ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΉ с Ρ†Π΅Π»ΡŒΡŽ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ ΠΊΠΎΠ½Ρ‚Ρ€Π°Π³Π΅Π½Ρ‚ΠΎΠ², Ρ‚Π°ΠΊ ΠΈ для спСциалистов ΠΏΠΎ Π΄Π°Π½Π½Ρ‹ΠΌ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, с Ρ†Π΅Π»ΡŒΡŽ сбора статистики ΠΈ построСния ΠΈΠ½Ρ„ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ² ΠΏΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌΡƒ Ρ€Π΅Π³ΠΈΠΎΠ½Ρƒ ΠΈΠ»ΠΈ странС Π² Ρ†Π΅Π»ΠΎΠΌ.

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π½Π°Ρ‡Π°Ρ‚ΡŒ, допустим, Ρ‡Ρ‚ΠΎ Ρƒ нас ΡƒΠΆΠ΅ Π΅ΡΡ‚ΡŒ список ИНН, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π½Π°Π΄ΠΎ ΠΎΠΏΡ€ΠΎΡΠΈΡ‚ΡŒ БСрвис. Если Π½Π΅Ρ‚, ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Ρ‚Π°Ρ‰ΠΈΡ‚ΡŒ ΠΈΠ· ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ… ЀНБ ΠΈΠ»ΠΈ Ρ‚ΡƒΡ‚.

На старт

НачнСм с POST запроса Π½Π° https://pb.nalog.ru/search-proc.json. Π’Π΅Π»ΠΎ запроса Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π°ΠΊΠΈΠΌ:

payload = {'page': '1', 'pageSize': '10', 'pbCaptchaToken': '', 'token': '', 'mode': 'search-ul', 'queryAll': '',

Π§ΠΈΡ‚Π°Ρ‚ΡŒ Π΄Π°Π»Π΅Π΅ β†’

Π ΡƒΠ±Ρ€ΠΈΠΊΠ°: Π‘Π΅Π· Ρ€ΡƒΠ±Ρ€ΠΈΠΊΠΈ | Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Как ΠΈΠ· psd ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ сайт

БовсСм Π½Π΅Π΄Π°Π²Π½ΠΎ я Π½Π° Π±Π»ΠΎΠ³Π΅ рассказывал ΠΊΠ°ΠΊ Π² Photoshop ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π½Π΅ слоТный ΠΌΠ°ΠΊΠ΅Ρ‚ сайта. Если Π’Ρ‹ Π΅Π³ΠΎ Π½Π΅ Π²ΠΈΠ΄Π΅Π»ΠΈ, здСсь Π’Ρ‹ Π΅Π³ΠΎ смоТСтС ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ. Π’Π΅ΠΏΠ΅Ρ€ΡŒ этот ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ Π² HTML ΠΈ CSS. Π₯ΠΎΡ‡Ρƒ сразу ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ это Π½Π΅ лёгкая Ρ€Π°Π±ΠΎΡ‚Π°, Π½ΠΎ Π²ΠΏΠΎΠ»Π½Π΅ выполнимая. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎ этой ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅ Π²Ρ‹Ρ…ΠΎΠ΄ этого поста Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ затянулся. Но Π’Ρ‹ Π½Π΅ Π²ΠΎΠ»Π½ΡƒΠΉΡ‚Π΅ΡΡŒ, я ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΡŽ Π’Π°ΠΌ всё ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ сильнСС ΠΎΠ±Π»Π΅Π³Ρ‡ΠΈΡ‚ΡŒ Π²Π°ΠΌ Π·Π°Π΄Π°Ρ‡Ρƒ. Ну Π° Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠΎΠ΅Ρ…Π°Π»ΠΈ.

Π’Π°ΠΊ ΠΆΠ΅ ΠΏΠΎ Ρ‚Π΅ΠΌΠ΅

Π”Ρ€ΡƒΠ·ΡŒΡ, для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Π»ΠΎ понятнСС ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ скачайтС Ρ„Π°ΠΉΠ»Ρ‹ ΡƒΠΆΠ΅ Π³ΠΎΡ‚ΠΎΠ²ΠΎΠ³ΠΎ шаблона. Π’Π°ΠΊ ΠΆΠ΅ Π² Π°Ρ€Ρ…ΠΈΠ² Π²Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΈ PSD ΠΌΠ°ΠΊΠ΅Ρ‚ сайта. И ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅ Π’Ρ‹ смоТСтС ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π΄Π΅ΠΌΠΎ шаблона Π² дСйствии.

Π”Π΅ΠΌΠΎ ΞΉ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠŸΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΊΠ°

Для Π½Π°Ρ‡Π°Π»Π° Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ ΠΏΠ°ΠΏΠΊΡƒ, ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π° Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌ столС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ ΠΏΠΎΡ‚Π΅Ρ€ΡΡ‚ΡŒ Π΅Ρ‘. Π’Π°ΠΌ Π±ΡƒΠ΄ΡƒΡ‚ Π»Π΅ΠΆΠ°Ρ‚ΡŒ всС наши Ρ„Π°ΠΉΠ»Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ входят Π² шаблон сайта.

Π‘ΠΎΠ·Π΄Π°Ρ‘ΠΌ ΠΏΠ°ΠΏΠΊΡƒ, Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌ Π΅Ρ‘ ΠΊΠ°ΠΊ Π’Π°ΡˆΠ΅ΠΉ Π΄ΡƒΡˆΠ΅ ΡƒΠ³ΠΎΠ΄Π½ΠΎ. И создаём ΠΏΠ°ΠΏΠΊΡƒ Π΅Ρ‰Ρ‘ ΠΎΠ΄Π½Ρƒ, ΠΈ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌ Π΅Ρ‘ images, Π΄ΡƒΠΌΠ°ΡŽ, Ρ‡Ρ‚ΠΎ Ρ‚ΡƒΡ‚ всё понятно, Π² этой ΠΏΠ°ΠΏΠΊΠ΅ Π±ΡƒΠ΄ΡƒΡ‚ Π»Π΅ΠΆΠ°Ρ‚ΡŒ всС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ. ПослС Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΅Ρ‰Ρ‘ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ тСкстовый Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ ΠΈ Π½Π°Π·Π²Π°Ρ‚ΡŒ Π΅Π³ΠΎ index.

Всё. Π’ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ΅ ΠΌΡ‹ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ шаг ΡƒΠΆΠ΅ сдСлали. πŸ™‚ ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ ΠΊ добавлСнию ΠΊΠΎΠ΄Π° HTML.

ДобавляСм Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ HTML

Π”Ρ€ΡƒΠ·ΡŒΡ, Π³ΠΎΠ²ΠΎΡ€ΡŽ, сразу, Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄Π΅ΠΌ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ Π½Π° HTML5, Ссли Π’Ρ‹ Π½ΠΎΠ²ΠΈΡ‡Ρ‘ΠΊ, ΡƒΡ‡ΠΈΡ‚Π΅ΡΡŒ сразу этой Π½ΠΎΠ²ΠΎΠΉ вСрсткС.

ΠžΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ наш тСкстовый Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ index ΠΈ вставляСм Π² Π½Π΅Π³ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄:

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ остановимся Π½Π° ΠΊΠΎΠ΄Π΅.

Π‘ΡƒΠ΄ΡƒΡ‰ΠΈΠΉ шаблон Ρƒ нас Π±ΡƒΠ΄Π΅Ρ‚ Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Π½Π° Ρ‚Ρ€ΠΈ части. Π­Ρ‚ΠΎ шапка сайта, сСрСдина, ΠΈ Π½ΠΈΠ· сайта.

Π¨Π°ΠΏΠΊΠ° сайта

Π—Π° Π²Π΅Ρ€Ρ… сайта Ρƒ нас ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π²ΠΎΡ‚ этот ΠΊΠΎΠ΄:

Π’ нашСм случаС класс Β«headerΒ» это голубая полоска Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅, которая растягиваСтся Π½Π° всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ страницы.

Π‘Π΅Ρ€Π΅Π΄ΠΈΠ½Π° сайта

Π—Π° срСдний участок ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π²ΠΎΡ‚ этот ΠΊΠΎΠ΄:

    >Низ сайта

Π‘ Ρ„ΡƒΡ‚Π΅Ρ€ΠΎΠΌ сайта я Π΄ΡƒΠΌΠ°ΡŽ Ρ‡Ρ‚ΠΎ всё понятно. Π’ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ΅ ΠΎΠ½ ΠΏΠΎΡ‡Ρ‚ΠΈ Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ вСрхняя голубая полоса ΠΌΠ°ΠΊΠ΅Ρ‚Π°.

Ну Π° сСйчас Π½Π°Ρ‡Π½Ρ‘ΠΌ Π½Π°ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ наш ΠΊΠΎΠ΄, ΠΈ Π½Π°Ρ‡Π½Ρ‘ΠΌ ΠΌΡ‹ ΠΈΠ· шапки.

Вёрстка HTML ΠΈ CSS

Для Π½Π°Ρ‡Π°Π»Π° Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ HTML Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€. Π― всСгда ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Π² ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΌ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΠžΠΏΠ΅Ρ€Π° вСрсии 12.16. ΠžΡ‡Π΅Π½ΡŒ расстроился, Ρ‡Ρ‚ΠΎ Π² Π½ΠΎΠ²ΠΎΠΉ ΠžΠΏΠ΅Ρ€Π΅ 16 Π΅Π³ΠΎ Π½Π΅Ρ‚ πŸ™ Он ΠΎΡ‡Π΅Π½ΡŒ простой, ΠΈ сразу ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ измСнСния, Π±Π΅Π·ΡƒΠΌΠ½ΠΎ ΡƒΠ΄ΠΎΠ±Π½ΠΎ.

ПослС Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Π’Ρ‹ вставили ΠΊΠΎΠ΄ Π² наш тСкстовый Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ index, Π΅Π³ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ. НаТимаСм Π½Π° Β«Π€Π°ΠΉΠ»Β» ΠΈ Β«ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΒ», Π΄Π°Π»Π΅Π΅ Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²ΠΊΡƒ Β«UTF β€” 8Β» ΠΈ сохраняСм.

Когда Ρ„Π°ΠΉΠ» сохранился, ΠΏΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΡƒΠΉΡ‚Π΅ Π΅Π³ΠΎ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ с .txt Π² .html. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ наш Ρ„Π°ΠΉΠ» с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΎΠΏΠ΅Ρ€Π°. Π£ нас появится простоС Π±Π΅Π»ΠΎΠ΅ ΠΏΠΎΠ»Π΅, Π½Π° Π½Ρ‘ΠΌ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ, Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ Β«Π˜ΡΡ…ΠΎΠ΄Π½Ρ‹ΠΉ ΠΊΠΎΠ΄Β» ΠΈ ΠΌΡ‹ ΠΏΠΎΠΏΠ°Π΄Ρ‘ΠΌ Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ измСнСния послС рСдактирования ΠΊΠΎΠ΄Π°, Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° Β«ΠŸΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ измСнСния».

CSS

Π‘Ρ‚ΠΈΠ»ΠΈ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΠΏΠΈΡΠ°Ρ‚ΡŒ Ρ‚ΡƒΡ‚ ΠΆΠ΅. ΠŸΠΎΡ‚ΠΎΠΌ ΠΈΡ… просто ΠΌΠΎΠΆΠ½ΠΎ пСрСнСсти Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ„Π°ΠΉΠ» ΠΈ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠΈΡ‚ΡŒ ΠΊ ΠΊΠΎΠ΄ html. ΠŸΠ΅Ρ€Π΅Π΄ Ρ‚Π΅Π³ΠΎΠΌ ставим Ρ‚Π΅Π³ΠΈ , Π° ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ, соотвСтствСнно Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ ΠΊΠΎΠ΄ CSS.

ДобавляСм Π²ΠΎΡ‚ этот ΠΊΠΎΠ΄ CSS

Π’ΡƒΡ‚ ΠΌΡ‹ Π·Π°Π΄Π°Π»ΠΈ нСсколько стилСй для Ρ‚Π΅Π³Π° body. Π¨ΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту Π² 100%. Π¦Π²Π΅Ρ‚ для тСкста #333. Π¨Ρ€ΠΈΡ„Ρ‚Ρ‹, ΠΈ Π΅Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€, Π° Ρ‚Π°ΠΊ ΠΆΠ΅ расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ строчСк.

Для списков ΠΌΡ‹ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΠ»ΠΈ Ρ‚ΠΎΡ‡ΠΊΠΈ, Π° для ссылок ΠΎΡ‚ΠΌΠ΅Π½ΠΈΠ»ΠΈ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅.

Π­Ρ‚ΠΎ Ρ‚Π°ΠΊ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ стандартныС стили, ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΏΠΎ собствСнному ТСланию.

Π“Π»Π°Π²Π½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ (Π²Π΅Ρ€Ρ…, сСрСдина ΠΈ Π½ΠΈΠ·)

Π’Π΅ΠΏΠ΅Ρ€ΡŒ вставляСм Π²ΠΎΡ‚ этот ΠΊΠΎΠ΄ стилСй CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‚ Π·Π° располоТСниС Π³Π»Π°Π²Π½Ρ‹Ρ… Ρ‚Ρ€Ρ‘Ρ… Π±Π»ΠΎΠΊΠΎΠ² Π½Π° страницС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ id #wrapper (большой срСдний Π±Π»ΠΎΠΊ) ΠΈΠΌΠ΅Π΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π² 1200Ρ€Ρ…, Π° Ρ‚Π°ΠΊΠΆΠ΅ выравниваСтся ΠΏΠΎ сСрСдинС ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ margin: 0 auto;

Класс .header растягиваСтся Π½Π° 100%. Π­Ρ‚ΠΎ наша голубая полоса, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ я Π³ΠΎΠ²ΠΎΡ€ΠΈΠ» Π²Ρ‹ΡˆΠ΅, ΠΈ Π² ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ входят Π²Π΅Ρ€Ρ…Π½Π΅Π΅ мСню ΠΈ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ Π·Π°ΠΊΠ»Π°Π΄ΠΊΠΈ. #headerInner ΠΈΠΌΠ΅Π΅Ρ‚ Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π² 1200 Ρ€Ρ…, Ρ‚ΠΎΡ‡Π½ΠΎ такая ΠΆΠ΅ ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠ°ΠΊ ΠΈ Π² Π±Π»ΠΎΠΊΠ΅ сСрСдины ΠΌΠ°ΠΊΠ΅Ρ‚Π°. #content Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Ρ‚ΡŒ свСрху Π»Π΅Π²ΡƒΡŽ ΠΈ ΠΏΡ€Π°Π²ΡƒΡŽ сторону сайта.

#colLeft ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° Π±Π»ΠΎΠΊ постов (лСвая сторона), Π° #colRight Π·Π° ΠΏΡ€Π°Π²ΡƒΡŽ сторону. Оба ΠΎΠ½ΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π»Π΅Π²ΠΎΠΉ сторонС (float:left;) для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ сайдбар располагался послС Π»Π΅Π²ΠΎΠΉ стороны сайта.

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

Π’ ΠΊΠΎΠ΄Π΅ HTML ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚Π΅Π³Π°ΠΌΠΈ

ΠŸΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ стили ΠΊ мСню Π½ΡƒΠΆΠ½ΠΎ ΠΈΠ· ΠΌΠ°ΠΊΠ΅Ρ‚ PSD Π²Ρ‹Ρ€Π΅Π·Π°Ρ‚ΡŒ полоску, которая раздСляСт список:

ΠžΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ наш PSD ΠΌΠ°ΠΊΠ΅Ρ‚. Π’ слоях ΠΈΡ‰Π΅ΠΌ Π³Ρ€ΡƒΠΏΠΏΡƒ Β«Π₯ΠΈΠ΄Π΅Ρ€Β», Π·Π°Ρ‚Π΅ΠΌ Π³Ρ€ΡƒΠΏΠΏΡƒ «МСню Π²Π΅Ρ€Ρ…Π½Π΅Π΅Β» Π΄Π°Π»Π΅Π΅ Β«Π›ΠΈΠ½ΠΈΠΈΒ». И Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ любой слой с Π»ΠΈΠ½ΠΈΠ΅ΠΉ, Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ Π½Π° Π½Ρ‘ΠΌ ΠΏΡ€Π°Π²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΡ‹ΡˆΠΈ, ΠΈ Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ Β«ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ Π² смарт-ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Β». ΠŸΠΎΡ‚ΠΎΠΌ слой помСняСт ΠΈΠΊΠΎΠ½ΠΊΡƒ, Π½ΡƒΠΆΠ½ΠΎ ΠΊΠ»ΠΈΠΊΠ½ΡƒΡ‚ΡŒ Π΄Π²Π° Ρ€Π°Π·Π° Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΠΎ ΠΈΠΊΠΎΠ½ΠΊΠ΅ стиля, Π½Π΅ ΠΏΠΎ названию, ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΠΎ ΠΈΠΊΠΎΠ½ΠΊΠ΅. Π—Π°Ρ‚Π΅ΠΌ Вас ΠΏΠ΅Ρ€Π΅ΠΊΠΈΠ½Π΅Ρ‚ Π½Π° Π½ΠΎΠ²Ρ‹ΠΉ слой ΡƒΠΆΠ΅ с Π²Ρ‹Ρ€Π΅Π·Π°Π½Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠ΅ΠΉ.

ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ Β«Π€Π°ΠΉΠ»Β» ΠΈ Β«Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ для webΒ» Π–Π΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ PNG-24, Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ Β«ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒΒ», ΠΈ сохраняСм Π½Π°ΡˆΡƒ линию ΠΏΠΎΠ΄ ΠΈΠΌΠ΅Π½Π΅ΠΌ line Π² ΠΏΠ°ΠΏΠΊΡƒ images.

А Π²ΠΎΡ‚ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ смСло Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ стили для нашСго мСню, Π²ΠΎΡ‚ ΠΎΠ½ΠΈ:

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

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

Π”Π°Π½Π½Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π²Ρ‹Ρ€Π΅Π·Π°ΡŽΡ‚ΡΡ Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ линия для мСню. ΠžΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ Π³Ρ€ΡƒΠΏΠΏΡƒ Β«Π₯ΠΈΠ΄Π΅Ρ€Β» Π΄Π°Π»Π΅Π΅ Β«Π‘ΠΎΡ† Π·Π°ΠΊΠ»Π°Π΄ΠΊΠΈΒ». Π£ нас Ρ‚Π°ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Ρ€ΠΈ ΠΈΠΊΠΎΠ½ΠΊΠΈ.

Π‘Π»ΠΎΠΉ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΎΡ‚ rss ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Ρ‹Π²Π°Π΅ΠΌ Π² смарт ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ ΠΈ сохраняСм ΠΏΠΎΠ΄ ΠΈΠΌΠ΅Π½Π΅ΠΌ rss-variation. Π’ΠΎΠΆΠ΅ самоС Π΄Π΅Π»Π°Π΅ΠΌ ΠΈ для ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… Π΄Π²ΡƒΡ… ΠΈΠΊΠΎΠ½ΠΎΠΊ, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΠΊΠΎΠ½ΠΊΡƒ ΠΎΡ‚ mail Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌ Β«email-variationΒ», ΠΎΡ‚ Π’Π²ΠΈΡ‚Ρ‚Π΅Ρ€Π° Β«twitter-variationΒ» Π½Π΅ Π·Π°Π±Ρ‹Π²Π°Π΅ΠΌ всё ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π² ΠΏΠ°ΠΏΠΊΡƒ images.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠΎΠ΄ HTML ΠΊΠΎΠ΄ΠΎΠΌ мСню добавляСм Π²ΠΎΡ‚ этот ΠΊΠΎΠ΄:

А Π² стили CSS Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π²ΠΎΡ‚ это:

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

Π’ PSD ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ ΠΈΡ‰Π΅ΠΌ Π³Ρ€ΡƒΠΏΠΏΡƒ Β«Π›ΠΎΠ³ΠΎΒ». Π‘Π»ΠΎΠΉ с Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠΌ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Ρ‹Π²Π°Π΅ΠΌ Π² смарт ΠΎΠ±ΡŠΠ΅ΠΊΡ‚, Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ ΠΏΠΎ ΠΈΠΊΠΎΠ½ΠΊΠ΅ Π»ΠΎΠ³ΠΎ Π΄Π²Π° Ρ€Π°Π·Π°, ΠΈ сохраняСм Π΅Π³ΠΎ с ΠΈΠΌΠ΅Π½Π΅ΠΌ logo. ПослС ΠΊΠΎΠ΄ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… Π·Π°ΠΊΠ»Π°Π΄ΠΎΠΊ вставляСм HTML ΠΊΠΎΠ΄:

Π“Π»Π°Π²Π½ΠΎΠ΅, Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню

Под ΠΊΠΎΠ΄ΠΎΠΌ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° добавляСм ΠΊΠΎΠ΄ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ мСню:

Но Π½Π΅ Π±ΡƒΠ΄Π΅ΠΌ ΡΠΏΠ΅ΡˆΠΈΡ‚ΡŒ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ стили, сначала Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Ρ€Π΅Π·Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ ΠΈΠ· ΠΌΠ°ΠΊΠ΅Ρ‚Π° PSD.

Для этого Π² Photoshop ΠΏΡ€ΠΈΠ±Π»ΠΈΠΆΠ°Π΅ΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π»ΡƒΠΏΡ‹ Ρ„ΠΎΠ½ мСню (Π’Ρ‘ΠΌΠ½Ρ‹ΠΉ):

Π’Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ инструмСнт Β«Π Π°ΠΌΠΊΠ°Β»

Когда инструмСнт Π²Ρ‹Π±Ρ€Π°Π½ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ½ΠΊΡƒΡŽ полосу Ρ„ΠΎΠ½Π°. Π“Π»Π°Π²Π½ΠΎΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°ΠΌΠΊΠΈ Π²Π΅Ρ€Ρ…Π° Π½ΠΈΠ·Π° Ρ‚ΠΎΡ‡Π½ΠΎ совпадали с Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ΠΌ:

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠΎ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ области Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ Π΄Π²Π° Ρ€Π°Π·Π°. ПослС этого Ρ‚ΠΎΡ‚ Ρ„ΠΎΠ½, Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ для мСню автоматичСски обрСТСтся. Π’Π°ΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ для web Π² ΠΏΠ°ΠΏΠΊΡƒ images ΠΏΠΎΠ΄ ΠΈΠΌΠ΅Π½Π΅ΠΌ bgmenu.

Ну Π° сСйчас ΠΌΠΎΠΆΠ½ΠΎ смСло Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ CSS:

Π‘Π»ΠΎΠΊ «ПослСдниС записи»

Π‘Ρ€Π°Π·Ρƒ послС Ρ‚Π΅Π³Π° Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ HTML ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ сСрый Π±Π»ΠΎΠΊ:

Π›Π΅Π²Ρ‹ΠΉ Π±Π»ΠΎΠΊ с послСдними записями

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π±ΡƒΠ΄Π΅ΠΌ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π±Π»ΠΎΠΊΠΈ с послСдними записями. ПослС Ρ‚Π΅Π³Π°

Π—Π°ΠΌΠ΅Ρ‚ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π² Π΄Π°Π½Π½ΠΎΠΌ случаС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° (ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π°) ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ 800 Π½Π° 300 пиксСлСй. Π–Π΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΈΡ‚ΡŒ Ρ‚Π°ΠΊΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ сразу.

Бамая послСдняя строчка Π² ΠΊΠΎΠ΄Π΅

И ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅ Π½Π΅ Π·Π°Π±Ρ‹Π²Π°Π΅ΠΌ ΠΏΡ€ΠΎ CSS для постов:

Π§Ρ‚ΠΎΠ±Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ Π±Ρ‹Π»ΠΎ Π²ΠΈΠ΄Π½ΠΎ ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒΡΡ ΠΌΠ°ΠΊΠ΅Ρ‚, просто скопируйтС HTML ΠΊΠΎΠ΄ Π±Π»ΠΎΠΊΠ° постов ΠΈ ΠΏΠΎΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ΄ ΠΎΠ΄Π½ΠΈΠΌ. Π’ ΠΈΡ‚ΠΎΠ³Π΅ Π²ΠΎΡ‚ Ρ‡Ρ‚ΠΎ получится:

ΠŸΡ€Π°Π²Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ (Π‘Π°ΠΉΠ΄Π±Π°Ρ€)

ДобавляСм поиск. ПослС Ρ‚Π΅Π³Π° вставляСм ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

И стили для поиска:

Π’ΠΈΠ΄ΠΆΠ΅Ρ‚

ПослС ΠΊΠΎΠ΄Π° поиска вставляСм:

Из ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π½Π΅ Π·Π°Π±Ρ‹Π²Π°Π΅ΠΌ Π²Ρ‹Ρ€Π΅Π·Π°Ρ‚ΡŒ Π³ΠΎΠ»ΡƒΠ±ΡƒΡŽ ΠΈΠΊΠΎΠ½ΠΊΡƒ. ВырСзаСтся ΠΎΠ½Π° Ρ‚ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… Π·Π°ΠΊΠ»Π°Π΄ΠΎΠΊ (ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π²Ρ‹ΡˆΠ΅), Ρ‚ΠΎΠ»ΡŒΠΊΠΎ имя для нСю Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ h3img ΠΈ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π² ΠΏΠ°ΠΏΠΊΠ΅ images нашСго шаблона.

CSS ΠΊΠΎΠ΄ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ΠΎΠ²:

Π€ΡƒΡ‚Π΅Ρ€

Π’ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ Π²ΠΎΡ‚ Ρ‚Π°ΠΊΠΎΠΉ шаблон:

Π”Π΅ΠΌΠΎ ΞΉ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π”Ρ€ΡƒΠ·ΡŒΡ, я надСюсь, Ρ‡Ρ‚ΠΎ Π’Π°ΠΌ понравился этот ΡƒΡ€ΠΎΠΊ, я старался ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ понятнСС ΠΎΠ±ΡŠΡΡΠ½ΠΈΡ‚ΡŒ. Π•Ρ‰Ρ‘ самоС Π³Π»Π°Π²Π½ΠΎΠ΅, Π½ΡƒΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ самому, ΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ, ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ. НС ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ, ΠΏΠ΅Ρ€Π΅Π΄Π΅Π»Π°Ρ‚ΡŒ. НС нравится, Π΅Ρ‰Ρ‘ Ρ€Π°Π· ΠΏΠ΅Ρ€Π΅Π΄Π΅Π»Π°Ρ‚ΡŒ. Π’ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΈΡ‚ΠΎΠ³Π΅ всё получится πŸ™‚

Π’ ΠΎΠ±Ρ‰Π΅ΠΌ Ссли Ρƒ Вас Π±ΡƒΠ΄ΡƒΡ‚ вопросы ΡΠΏΡ€Π°ΡˆΠΈΠ²Π°ΠΉΡ‚Π΅ Π² коммСнтариях.

Π’ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ я наглядно ΠΏΠΎΠΊΠ°Π·Π°Π», ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ сайта Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅ Photoshop, ΠΈ Π² ΠΈΡ‚ΠΎΠ³Π΅ получился простой, Π½ΠΎ Π½Π΅ Ρ€Π΅ΠΆΡƒΡ‰ΠΈΠΉ Π³Π»Π°Π· шаблон.

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ я ΠΏΠΎΠΊΠ°ΠΆΡƒ, ΠΊΠ°ΠΊ ΡΠ²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΈΠ· PSD-ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π² Π³ΠΎΡ‚ΠΎΠ²ΡƒΡŽ Π²Π΅Π±-страницу, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ инструмСнты HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΈ каскадныС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй (CSS).

Π’ΠΎΠΎΠ±Ρ‰Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠ² ΠΊ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΊΠ΅ шаблонов сущСствуСт мноТСство: ΠΊΡ‚ΠΎ-Ρ‚ΠΎ сначала досконально прорисовываСт шаблон ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΡ‚ΠΎΠΌ занимаСтся вёрсткой, ΠΊΡ‚ΠΎ-Ρ‚ΠΎ отрисовываСт Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΡ€ΠΈΠ±Π»ΠΈΠ·ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, добавляя ΡˆΡ‚Ρ€ΠΈΡ…ΠΈ Π²ΠΎ врСмя вёрстки; ΠΎΠ΄Π½ΠΈ сначала Ρ€ΠΈΡΡƒΡŽΡ‚, Π·Π°Ρ‚Π΅ΠΌ Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‚ΡΡ Π½Π°Ρ€Π΅Π·ΠΊΠΎΠΉ, Π΄Ρ€ΡƒΠ³ΠΈΠ΅ (ΠΊΠ°ΠΊ ΠΌΡ‹ Π² ΠΏΡ€ΠΎΡˆΠ»ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅) ΡΠΎΡ…Ρ€Π°Π½ΡΡŽΡ‚ графичСскиС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ нСпосрСдствСнно Π² процСссС создания Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π”Π°ΠΆΠ΅ инструмСнты вёрстки ΠΈ рисования Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ свои: ΠΎΠ΄Π½ΠΈ ставят ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π² Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°Ρ…, Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ стандартный Π½Π°Π±ΠΎΡ€ возмоТностСй ΠΈ Π²Π΅Ρ€ΡΡ‚Π°ΡŽΡ‚ Π² простом рСдакторС… Π² ΠΎΠ±Ρ‰Π΅ΠΌ, Π½ΠΈΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Π½ всСго лишь ΠΎΠ΄ΠΈΠ½ способ ΠΈΠ· ΠΌΠ½ΠΎΠ³ΠΈΡ….

ΠŸΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ этап

Π˜Ρ‚Π°ΠΊ, создайтС Π³Π΄Π΅ ΡƒΠ³ΠΎΠ΄Π½ΠΎ (Ρ…ΠΎΡ‚ΡŒ Π½Π° Π Π°Π±ΠΎΡ‡Π΅ΠΌ столС, Ρ…ΠΎΡ‚ΡŒ Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅) Ρ„Π°ΠΉΠ» index.html. Π’ этот ΠΆΠ΅ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΡŽ images. Она Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ всС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ Π² шаблонС ΠΈ Π½Π° страницС. Π’Π°ΠΊ ΠΊΠ°ΠΊ графичСскиС элСмСнты ΠΌΡ‹ Π²Ρ‹Ρ€Π΅Π·Π°Π»ΠΈ Π·Π°Π±Π»Π°Π³ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ, сразу скопируСм ΠΈΡ… Π² ΠΏΠ°ΠΏΠΊΡƒ images ΠΈ Π΄Π°Π΄ΠΈΠΌ Ρ‚Π°ΠΊΠΈΠ΅ названия:

  • back_all β€” ΠΏΠΎΠ΄Π»ΠΎΠΆΠΊΠ° сайта.
  • header_top β€” Ρ„ΠΎΠ½ шапки.
  • big_pic β€” Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ.
  • title β€” Ρ„ΠΎΠ½ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π»Π΅Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ.
  • footer β€” Π·Π°Π»ΠΈΠ²ΠΊΠ° Π½ΠΈΠ·Π° сайта.
  • 1mini β€” ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Ρ„ΠΎΡ‚ΠΎ для основной части страницы.
  • 2mini β€” Π²Ρ‚ΠΎΡ€ΠΎΠ΅ Ρ„ΠΎΡ‚ΠΎ.

Π’ ΠΏΠ°ΠΏΠΊΠ΅ со страницСй index.html создайтС Ρ„Π°ΠΉΠ» styles.css β€” Π² Π½Ρ‘ΠΌ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Ρ‹ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй шаблона.

Π‘Π»ΠΎΠΊΠ½ΠΎΡ‚ для рСдактирования ΠΊΠΎΠ΄Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ рСкомСндуСтся. Π“ΠΎΡ€Π°Π·Π΄ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ для этой Ρ†Π΅Π»ΠΈ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Notepad++. Π­Ρ‚ΠΎ ΠΏΠΎΠ΄ΡΠ²Π΅Ρ‡ΠΈΠ²Π°ΡŽΡ‰Π°Ρ синтаксис Ρ€Π°Π·Π½Ρ‹Ρ… языков (HTML ΠΈ CSS β€” Π² Ρ‚ΠΎΠΌ числС) ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°, Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒΡΡ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π³ΠΎΡ€Π°Π·Π΄ΠΎ ΡƒΠ΄ΠΎΠ±Π½Π΅ΠΉ, Ρ‡Π΅ΠΌ Π² простых Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°Ρ… тСкстовых Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ².

Π”Π΅Π»ΠΈΠΌ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Π½Π° Π±Π»ΠΎΠΊΠΈ

ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ index.html ΠΈ Π²ΠΏΠΈΡˆΠΈΡ‚Π΅ Π² Π½Π΅Π³ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄:

Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ». ВсС эти Ρ‚Π΅Π³ΠΈ ΠΌΡ‹ ΡƒΠΆΠ΅ Π΄Π°Π²Π½ΠΎ ΠΈΠ·ΡƒΡ‡ΠΈΠ»ΠΈ ΠΈ Π² пояснСнии ΠΎΠ½ΠΈ Π½Π΅ Π½ΡƒΠΆΠ΄Π°ΡŽΡ‚ΡΡ. Кодом Π²Ρ‹ΡˆΠ΅ ΠΌΡ‹ создали основу HTML-страницы, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π½ΡƒΠΆΠ½ΠΎ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΅Ρ‘ Π½Π° Π±Π»ΠΎΠΊΠΈ β€” ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ структуру Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, Ρ‡Ρ‚ΠΎ Π·Π° Ρ‡Π΅ΠΌ Π² Π½Ρ‘ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ΄Ρ‚ΠΈ.

Π‘Π»ΠΎΠΊΠΎΠ² Ρƒ нас 7, пСрСчислим ΠΈΡ… ΠΏΠΎ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρƒ (Π·Π½Π°Ρ‡Π΅Π½ΠΈΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° >

1. content β€” Π±Π»ΠΎΠΊ, Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π±ΡƒΠ΄ΡƒΡ‚ Ρ…Ρ€Π°Π½ΠΈΡ‚ΡŒΡΡ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ.

2. header β€” Π±Π»ΠΎΠΊ шапки, Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π±ΡƒΠ΄ΡƒΡ‚:

2.1. menu β€” вСрхняя навигация.

2.2. logo β€” ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° с тСкстом.

3. right β€” основная Ρ‡Π°ΡΡ‚ΡŒ страницы.

4. left β€” панСль слСва.

5. footer β€” Π½ΠΈΠ· сайта.

Π’Π°ΠΊ ΠΈ запишСм (Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Π²ΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄):

Π’ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ страница Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ пустой, Π½ΠΎ структуру Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΡƒΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΎΠ½Π° Π³ΠΎΡ‚ΠΎΠ²Π°.

УстанавливаСм Π±Π°Π·ΠΎΠ²ΠΎΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Ρ‘ΠΌ ΠΊ CSS-ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΡŽ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρƒ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅.

ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ style.css ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ‚ΡƒΠ΄Π° строки ΠΊΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ встрСтитС Π½ΠΈΠΆΠ΅.

Π£Π±ΠΈΡ€Π°Π΅ΠΌ отступы ΠΈ поля Π½Π° страницС ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ:

УстанавливаСм Ρ†Π²Π΅Ρ‚Π° ссылок Π² зависимости ΠΎΡ‚ повСдСния ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ (Π½Π°Π²Ρ‘Π» курсор, Π½Π΅ Π½Π°Π²Ρ‘Π», посСтил) ΠΈ ΡƒΠ±ΠΈΡ€Π°Π΅ΠΌ ΠΏΠΎΠ΄Ρ‡Ρ‘Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Ρƒ ссылок, Π½Π°Π΄ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ находится ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ:

НастраиваСм основноС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ страницы: прописываСм Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅-ΠΏΠΎΠ΄Π»ΠΎΠΆΠΊΡƒ (ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ Π·Π°Π΄Π°Ρ‘ΠΌ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅), устанавливаСм Ρ†Π²Π΅Ρ‚, ΡΡ‚ΠΈΠ»ΡŒ ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°:

ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° content:

Π’ΠΎΡ‚ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ страницу. Она Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π° рисунком-ΠΏΠΎΠ΄Π»ΠΎΠΆΠΊΠΎΠΉ. Пока СдинствСнноС Π²ΠΈΠ΄ΠΈΠΌΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅, Π·Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ свойство background класса body.

ΠžΡ„ΠΎΡ€ΠΌΠ»ΡΠ΅ΠΌ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню

Начало Π΅ΡΡ‚ΡŒ, ΠΈ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠ°Ρ‚ΡŒ ΠΊ вёрсткС ΡƒΠΆΠ΅ нСпосрСдствСнно основных Π±Π»ΠΎΠΊΠΎΠ².

Начнём, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, с шапки. ΠšΠΎΡ‚ΠΎΡ€Π°Ρ, Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, состоит ΠΈΠ· Π±Π»ΠΎΠΊΠΎΠ² Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню ΠΈ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ°.

Π‘Π½Π°Ρ‡Π°Π»Π° Π·Π°Π΄Π°Π΄ΠΈΠΌ ΠΎΠ±Ρ‰Π΅Π΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΎΠ±ΠΎΠΈΡ… элСмСнтов шапки: Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ, Π±Π΅Π»Ρ‹ΠΉ Ρ„ΠΎΠ½ ΠΈ высоту 306px:

Π’Π°ΠΊ ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ своСго Ρ€ΠΎΠ΄Π° пространство шапки: Π±Π΅Π»Ρ‹ΠΉ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π΅Ρ‘ элСмСнты.

Π›ΠΎΠ³ΠΈΡ‡Π½ΠΎ Π±Ρ‹Π»ΠΎ Π±Ρ‹ прямо сСйчас Π·Π°Π½ΡΡ‚ΡŒΡΡ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ мСню. Π’Π°ΠΊ ΠΌΡ‹ ΠΈ поступим, Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€Π΅ΠΆΠ΄Π΅, Ρ‡Π΅ΠΌ Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Π΅Π³ΠΎ Π² HTML, Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π° CSS, ΠΈΠ½Π°Ρ‡Π΅ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒΡΡ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ это Π±ΡƒΠ΄Π΅Ρ‚ уТасно.

ВнСсём ΠΏΠ΅Ρ€Π²Ρ‹Π΅ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΠ²Ρ‹: Π·Π°Π΄Π°Π΄ΠΈΠΌ Π»Π΅Π²ΡƒΡŽ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ Π² 2 пиксСля Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½ΠΎΠΉ, ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту нашСго мСню, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΠΉΡΡ ΠΏΠΎ оси X Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ рисунок:

Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° Π² ΠΎΠ±ΠΎΠ·Ρ€Π΅Π²Π°Ρ‚Π΅Π»Π΅ Ρ‚ΡƒΡ‚ ΠΆΠ΅ прСобразится ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈ само мСню Π² Ρ„Π°ΠΉΠ» index.html:

Обновив страницу ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΎ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ появилось.

Волько Π²ΠΎΡ‚ Π²ΠΈΠ΄ ссылок оставляСт ΠΆΠ΅Π»Π°Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ. Установим для Π½ΠΈΡ… свои ΠΏΡ€Π°Π²ΠΈΠ»Π° (Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅, ΡˆΠΈΡ€ΠΈΠ½Ρƒ, Ρ†Π²Π΅Ρ‚, ΠΆΠΈΡ€Π½ΠΎΡΡ‚ΡŒ ΠΈ Ρ‚. Π΄.), Π° ссылкам ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π·Π°Π΄Π°Π΄ΠΈΠΌ смСну Ρ†Π²Π΅Ρ‚Π° ΠΈ Π²Π΅Ρ€Π½Ρ‘ΠΌ ΡƒΠ±Ρ€Π°Π½Π½ΠΎΠ΅ ΠΏΠΎ всСму ΡˆΠ°Π±Π»ΠΎΠ½Ρƒ ΠΏΠΎΠ΄Ρ‡Ρ‘Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅:

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ мСню ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ с PSD-шаблоном.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ мСняСтся ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΏΡƒΠ½ΠΊΡ‚Π°, Ссли подвСсти ΠΊ Π½Π΅ΠΌΡƒ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ (Π·Π° это ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‚ ΠΏΡ€Π°Π²ΠΈΠ»Π° #menu a:hover).

НастраиваСм Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ

Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏ Ρƒ нас ΡƒΠΆΠ΅ Π΅ΡΡ‚ΡŒ ΠΈ Π»Π΅ΠΆΠΈΡ‚ Π² ΠΏΠ°ΠΏΠΊΠ΅, остаётся Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π½Π° страницу ΠΈ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌΠΈ. И Ρ‚ΠΎ, ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ срСдствами CSS, Ρ‡Π΅ΠΌ ΠΌΡ‹ ΠΈ Π½Π΅ ΠΏΡ€Π΅ΠΌΠΈΠ½Π΅ΠΌ Π·Π°Π½ΡΡ‚ΡŒΡΡ.

Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏ вставлСн Ρ€ΠΎΠ²Π½ΠΎ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ.

ЕдинствСнноС, Ρ‡Π΅Π³ΠΎ Π΅ΠΌΡƒ Π½Π΅ Ρ…Π²Π°Ρ‚Π°Π΅Ρ‚, Ρ‚Π°ΠΊ это тСкста. Вставим Π½Π΅Π΄ΠΎΡΡ‚Π°ΡŽΡ‰Π΅Π΅ Π² Π±Π»ΠΎΠΊ logo Ρ„Π°ΠΉΠ»Π° index. html, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ:

ВСкст появился, Π½ΠΎ Π΅Π³ΠΎ Ρ‚ΠΎΠΆΠ΅ Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠ»ΡΡ‚ΡŒ.

Π˜ΡΡ…ΠΎΠ΄Ρ ΠΈΠ· Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ ΠΏΠΎΡ‡Ρ‚ΠΈ всСгда Π±Ρ‹Π²Π°Π΅Ρ‚ ссылкой, Π·Π°Π΄Π°Π΄ΠΈΠΌ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ классам.

ΠŸΠΎΡΡΠ½ΡΡ‚ΡŒ здСсь Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ, со всСми свойствами Π²Ρ‹ Π·Π½Π°ΠΊΠΎΠΌΡ‹ Π΅Ρ‰Ρ‘ ΠΈΠ· ΡƒΡ€ΠΎΠΊΠΎΠ² CSS. Однако внСшний Π²ΠΈΠ΄ тСкста измСнился, ΠΈ Π² Ρ†Π΅Π»ΠΎΠΌ шапка Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ выглядит Π΄Π°ΠΆΠ΅ Π»ΡƒΡ‡ΡˆΠ΅, Ρ‡Π΅ΠΌ Π½Π° PSD-ΠΌΠ°ΠΊΠ΅Ρ‚Π΅.

ВСрстаСм ΠΎΡΠ½ΠΎΠ²Π½ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ страницы

Π”Π°Π»Π΅Π΅ настраиваСм самый большой Π±Π»ΠΎΠΊ, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‰Ρ‘Π½ вСсь ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. Он Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ 500px ΠΈ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π² ΠΏΡ€Π°Π²ΠΎΠΉ части сайта. Установим ΠΏΡ€Π°Π²ΠΈΠ»Π° позиционирования, оформлСния Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ², Π°Π±Π·Π°Ρ†Π΅Π² ΠΈ ссылок (ΠΎΠ±ΠΎ всСх свойствах ΠΌΡ‹ ΡƒΠΆΠ΅ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ Π² ΡΡ‚Π°Ρ‚ΡŒΡΡ… ΠΏΠΎ CSS).

Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΌΡ‹ зафиксировали Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π±Π»ΠΎΠΊΠ°, Π²ΠΈΠ΄ΠΈΠΌΡ‹Ρ… ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π½Π°Π±Π»ΡŽΠ΄Π°Ρ‚ΡŒΡΡ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° ΠΌΡ‹ Π½Π΅ Π½Π°ΠΏΠΎΠ»Π½ΠΈΠΌ Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ β€” высота страницы Π±ΡƒΠ΄Π΅Ρ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Π² зависимости ΠΎΡ‚ содСрТимого.

Π—Π°ΠΏΠΎΠ»Π½ΠΈΠΌ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ right. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ помСстим Π² ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ.

ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ» Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ, Π½ΠΎ Π΅ΠΌΡƒ явно Π½Π΅ Ρ…Π²Π°Ρ‚Π°Π΅Ρ‚ Π±Π΅Π»ΠΎΠ³ΠΎ Ρ„ΠΎΠ½Π°, ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ появится Π΅Ρ‰Ρ‘ Π½Π΅ скоро.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π»Π΅Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ

Π’ΠΎ врСмя вёрстки, Π½ΠΎ ΡƒΠΆΠ΅ послС отрисовки ΠΌΠ°ΠΊΠ΅Ρ‚Π°, Π²Ρ‹ΡΡΠ½ΠΈΠ»ΠΎΡΡŒ, Ρ‡Ρ‚ΠΎ Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ мСню Π΅Ρ‰Ρ‘ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Ρ‹, ΠΏΡ€ΠΈΡ‡Ρ‘ΠΌ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠΎΡΠ²Π»ΡΡ‚ΡŒΡΡ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π³Π»Π°Π²Π½Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ ΠΈ ΠΈΡΡ‡Π΅Π·Π°Ρ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° указатСля Π½Π° Π½Ρ‘ΠΌ Π½Π΅Ρ‚.

Π‘ΠΈΡ‚ΡƒΠ°Ρ†ΠΈΠΈ, ΠΊΠΎΠ³Π΄Π° приходится Π΄ΠΎΡ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ Β«Π½Π° Ρ…ΠΎΠ΄ΡƒΒ», Π²ΡΡ‚Ρ€Π΅Ρ‡Π°ΡŽΡ‚ΡΡ довольно часто. РасстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ мСню ΠΈ основным содСрТимым позволяСт Π½Π°ΠΌ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Ρ‹, ΠΎΠ΄Π½Π°ΠΊΠΎ интСрСсСн фокус с исчСзновСниСм ΠΈ появлСниСм подмСню.

Π’ Ρ„Π°ΠΉΠ» CSS Π²ΠΏΠΈΡˆΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΏΡ€Π°Π²ΠΈΠ»Π° классов ul ΠΈ li β€” сСкрСт исчСзновСния мСню находится Ρ‚Π°ΠΌ, раскройтС Π΅Π³ΠΎ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ.

Π’ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ left HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° Π΄ΠΎΠ±Π°Π²ΠΈΠΌ сначала ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ Π±Π»ΠΎΠΊ Π±Π΅Π· мСню.

Π‘Π΅Π»Ρ‹ΠΉ Ρ„ΠΎΠ½ распространился Π΅Ρ‰Ρ‘ Π½ΠΈΠΆΠ΅ ΠΏΠΎ страницС.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ самоС врСмя Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π² HTML-Ρ„Π°ΠΉΠ» ΠΊΠΎΠ΄ мСню Π»Π΅Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ. Оно, Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ списками, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ Π΅Ρ‰Ρ‘ ΠΈΠ· CSS-ΠΏΡ€Π°Π²ΠΈΠ».

ВзглянитС, ΠΊΠ°ΠΊ смотрится список. МногиС ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ это Ρ‚Π°Π±Π»ΠΈΡ†Π°.

ПодмСню Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, Π½Π°Π΄ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ подвСсти ΠΌΡ‹ΡˆΠΊΡƒ ΠΊ ΠΏΡƒΠ½ΠΊΡ‚Ρƒ, Π΅Π³ΠΎ содСрТащСму (Ρƒ нас это ГалСрСя, ΠŸΡ€Π°ΠΉΡ ΠΈ ΠžΠ±Ρ€Π°Π·Ρ†Ρ‹).

Π”Π΅Π»Π°Π΅ΠΌ Π½ΠΎΠ³ΠΈ

Π—Π°Π²Π΅Ρ€ΡˆΠ°ΡŽΡ‰Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ шаблона β€” Ρ„ΡƒΡ‚Π΅Ρ€. ΠŸΡ€ΠΎΡΡ‚ΠΎΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅, ΠΈΠ· элСмСнтов Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π°Π±Π·Π°Ρ†Ρ‹ ΠΈ ссылки.

ΠžΠ±Ρ‹Ρ‡Π½ΠΎ Π² Ρ„ΡƒΡ‚Π΅Ρ€Π΅ размСщаСтся Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Π°Ρ информация, Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π΅Ρ‘ Π² HTML-ΠΊΠΎΠ΄ (ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€

footer).

На этом ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ сайта Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΎ. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ Π·Π°ΠΊΠΎΠ½Ρ‡Π΅Π½Π½Ρ‹ΠΉ, Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ ΠΊ использованию шаблон, части ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ вынСсти Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ PHP-Ρ„Π°ΠΉΠ»Ρ‹, сдСлав ΠΈΠ· статичСской страницы Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π΅ΡΠΊΡƒΡŽ.

ΠŸΠΎΠ»ΡƒΡ‡ΠΈΠ²ΡˆΠΈΠΉΡΡ ΠΊΠΎΠ΄ здСсь ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ΡŒ Π½Π΅ Π±ΡƒΠ΄Ρƒ β€” Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ просто ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ вСсь шаблон.

ΠŸΠΎΠ»Π΅Π·Π½Ρ‹Π΅ ссылки:

  • ΠžΡΠ½ΠΎΠ²Ρ‹ HTML β€” бСсплатный 2-Ρ… часовой видСокурс ΠΏΠΎ основам HTML;
  • БСсплатный курс ΠΏΠΎ вСрсткС сайта β€” ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вёрстки с чистого листа;
  • Вёрстка сайта с нуля 2. 0 β€” ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹ΠΉ ΠΏΠ»Π°Ρ‚Π½Ρ‹ΠΉ курс;
  • Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ для Android β€” для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Π΄Π°Π²Π½ΠΎ Ρ…ΠΎΡ‚Π΅Π» ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ сСбя Π² мобильной Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ (
    Π½Π΅ для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ²
    ).

Π’ Π΄Π°Π½Π½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ€Π΅Ρ‡ΡŒ ΠΏΠΎΠΉΠ΄Ρ‘Ρ‚ ΠΎ сайтах, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ, Ρ‚. Π΅. Π²Π΅Ρ€ΡΡ‚Π°ΡŽΡ‚.

Π‘Ρ‚Π°Ρ‚ΡŒΡ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π° для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, Π·Π½Π°ΠΊΠΎΠΌΡ‹Ρ… с HTML ΠΈ CSS. Π’Π°ΠΊΠΆΠ΅ ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ хотя Π±Ρ‹ основы Adobe Photoshop

Одним ΠΈΠ· этапов создания Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ сайта, являСтся созданиС PSD шаблона. МоТно Π΅Ρ‰Ρ‘ Π²ΡΡ‚Ρ€Π΅Ρ‚ΠΈΡ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ названия ΠΊΠ°ΠΊ ΠΌΠ°ΠΊΠ΅Ρ‚, Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈΠ»ΠΈ исходник.

Π¨Π°Π±Π»ΠΎΠ½ заказываСтся Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρƒ. Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ рисуСт ΠΌΠ°ΠΊΠ΅Ρ‚ Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅ Adobe Photoshop ΠΈ сохраняСт Π΅Π³ΠΎ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ PSD.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ PSD Ρ„ΠΎΡ€ΠΌΠ°Ρ‚?

Для Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ понимания ΠΌΠΎΠΆΠ½ΠΎ привСсти простой ΠΆΠΈΠ·Π½Π΅Π½Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€. Π’ дСтствС всС ΠΊΠ»Π΅ΠΈΠ»ΠΈ Π°ΠΏΠΏΠ»ΠΈΠΊΠ°Ρ†ΠΈΠΈ. Π’Ρ‹Ρ€Π΅Π·Π°Π»ΠΈ ΠΈΠ· Π±ΡƒΠΌΠ°Π³ΠΈ Π΄ΠΎΠΌΠΈΠΊ – Π½Π°ΠΊΠ»Π΅ΠΈΠ»ΠΈ. Π’Ρ‹Ρ€Π΅Π·Π°Π»ΠΈ Ρ‘Π»ΠΎΡ‡ΠΊΡƒ – Π½Π°ΠΊΠ»Π΅ΠΈΠ»ΠΈ. И Ρ‚Π°ΠΊ Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° Ρ€Π°Π±ΠΎΡ‚Π° Π½Π΅ Π³ΠΎΡ‚ΠΎΠ²Π°.

А Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΡΠΈΡ‚ΡƒΠ°Ρ†ΠΈΡŽ, ΠΏΡ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Ρ„ΠΈΠ³ΡƒΡ€ΠΊΠΈ Π²Ρ‹Ρ€Π΅Π·Π°Π»ΠΈ, Ρ€Π°Π·Π»ΠΎΠΆΠΈΠ»ΠΈ Π½Π° листС Π² Π½ΡƒΠΆΠ½Ρ‹Ρ… мСстах, Π½ΠΎ Π΅Ρ‰Ρ‘ Π½Π΅ ΠΏΡ€ΠΈΠΊΠ»Π΅ΠΈΠ»ΠΈ. Π’Π°ΠΊ Π²ΠΎΡ‚ PSD Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Ρ„Π°ΠΉΠ»ΠΎΠ², ΠΌΠΎΠΆΠ½ΠΎ ΡΡ€Π°Π²Π½ΠΈΡ‚ΡŒ с Π°ΠΏΠΏΠ»ΠΈΠΊΠ°Ρ†ΠΈΠ΅ΠΉ, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π΅Ρ‰Ρ‘ Π½Π΅ ΠΏΡ€ΠΈΠΊΠ»Π΅ΠΈΠ»ΠΈ Ρ„ΠΈΠ³ΡƒΡ€ΠΊΠΈ, Π½ΠΎ располоТили ΠΈΡ… Π² Π½ΡƒΠΆΠ½ΠΎΠΌ порядкС.

Благодаря этому ΠΊΠ°ΠΆΠ΄ΡƒΡŽ Ρ‚Π°ΠΊΡƒΡŽ Β«Ρ„ΠΈΠ³ΡƒΡ€ΠΊΡƒΒ», Π° Ρ‚ΠΎΡ‡Π½Π΅Π΅ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ шаблона ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ ΠΊΠ°ΠΊ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΏΠΎΡ‚ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° сайтС.

Π’ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ страницы, которая Π±ΡƒΠ΄Π΅Ρ‚ создана.

ПослС Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Ρƒ нас Π΅ΡΡ‚ΡŒ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ шаблон Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅PSD ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ нСпосрСдствСнно ΠΊ вёрсткС

  1. Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΠ°ΠΏΠΊΡƒ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Ρ…Ρ€Π°Π½ΠΈΡ‚ΡŒΡΡ вёрстка, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Β«Π‘Π°ΠΉΡ‚Β».
  2. Π’ ΠΏΠ°ΠΏΠΊΠ΅ Β«Π‘Π°ΠΉΡ‚Β» ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΠ°ΠΏΠΊΡƒ для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ img.
  3. Π’ ΠΏΠ°ΠΏΠΊΠ΅ Β«Π‘Π°ΠΉΡ‚Β» ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΠ°ΠΏΠΊΡƒ для стилСй, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ css.
  4. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ Adobe Photoshop ΠΈ Π² Π½Π΅ΠΉ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ psd Ρ„Π°ΠΉΠ». ΠžΡ‚ΡΡŽΠ΄Π° Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Β«Π²Ρ‹Ρ‚Π°Ρ‰ΠΈΡ‚ΡŒΒ» всС изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π½Π° сайтС.

Π—Π΄Π΅ΡΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Π‘Π»ΠΎΠΈΒ». На рисункС ΠΎΠ½Π° Π²Ρ‹Π΄Π΅Π»Π΅Π½Π° красным ΠΎΠ²Π°Π»ΠΎΠΌ.

Π­Ρ‚ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ΠΈ Π²Ρ‹ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ окошко со слоями. Π‘Π»ΠΎΠΈ – это ΠΈ Π΅ΡΡ‚ΡŒ Ρ‚Π΅ самыС Π½Π΅ склССнныС Π΄Π΅Ρ‚Π°Π»ΠΈ Π°ΠΏΠΏΠ»ΠΈΠΊΠ°Ρ†ΠΈΠΈ. Π‘Π»ΠΎΠΈ для удобства распрСдСлСны ΠΏΠΎ ΠΏΠ°ΠΏΠΊΠ°ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΈ Ρ€Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ. ΠŸΡ€ΠΈΠ½Ρ†ΠΈΠΏ Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΏΠΎΡ‡Ρ‚ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ Ρ‡Ρ‚ΠΎ ΠΈ Π² ΠΏΡ€ΠΎΠ²ΠΎΠ΄Π½ΠΈΠΊΠ΅ Windows.

ΠŸΠ΅Ρ€Π²Ρ‹ΠΌ Π΄Π΅Π»ΠΎΠΌ всС ΠΏΠ°ΠΏΠΊΠΈ Π»ΡƒΡ‡ΡˆΠ΅ ΡΠ²Π΅Ρ€Π½ΡƒΡ‚ΡŒ. Π Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ нСобходимости.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Ρ‡Π°Ρ‚ΡŒ Β«Π²Ρ‹Ρ‚Π°ΡΠΊΠΈΠ²Π°Ρ‚ΡŒΒ» ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ

ΠŸΠ΅Ρ€Π²Ρ‹ΠΌ Π΄Π΅Π»ΠΎΠΌ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ инструмСнт Ρ€Π°ΠΌΠΊΠ° . Π—Π°Ρ‚Π΅ΠΌ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Ρƒ Ρ‡Π°ΡΡ‚ΡŒ, которая ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ сайта

ПослС этого Π½Π°ΠΆΠ°Ρ‚ΡŒ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Enter. Всё ΠΊΡ€ΠΎΠΌΠ΅ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ области Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚Ρ€Π΅Π·Π°Π½ΠΎ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ Ρ„ΠΎΠ½. Для этого Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ слой с Ρ„ΠΎΠ½ΠΎΠΌ.

Π‘ Ρ†Π΅Π»ΡŒΡŽ быстрого поиска Π½ΡƒΠΆΠ½Ρ‹Ρ… слоёв ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ дСйствия:

  • Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ инструмСнт Β«ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅Β»
  • Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ для Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ инструмСнта настройки «Автовыбор» ΠΈ Β«Π“Ρ€ΡƒΠΏΠΏΡ‹ слоёв»
  • Π’Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Ρ‰Π΅Π»Ρ‡ΠΎΠΊ ΠΏΠΎ Π»ΡŽΠ±ΠΎΠΌΡƒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρƒ (Π² частности ΠΏΠΎ Π±Π΅Π»ΠΎΠΌΡƒ Ρ„ΠΎΠ½Ρƒ). Π‘Π»ΠΎΠΉ с этим ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠΌ станСт Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ

Π—Π΄Π΅ΡΡŒ слой Π½Π°Π·Π²Π°Π½ Β«Π€ΠΈΠ³ΡƒΡ€Π° 2Β». Π©Π΅Π»Ρ‡ΠΊΠΎΠΌ ΠΏΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ Π³Π»Π°Π·Π° слой становится Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ.

Однако остаётся Π΅Ρ‰Ρ‘ Π΄Π²Π° слоя, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚Π°ΠΊΠΆΠ΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ. ДСйствия Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹Π΅.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ. Для этого Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ дСйствия

Π€Π°ΠΉΠ» – Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ для Web

Π’Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΈΠ· 4 ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ², Π° ΠΈΠ· ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… Π²Ρ‚ΠΎΡ€ΠΎΠΉ. Π Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ gif.

ΠΠ°ΠΆΠ°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ.

Имя Ρ„Π°ΠΉΠ»Π° logo.gif. Π€Π°ΠΉΠ» ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π² ΠΏΠ°ΠΏΠΊΡƒ img. Π’ΡƒΠ΄Π° слСдуСт ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ ΠΈ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ изобраТСния.

Если качСство Π½Π΅ устраиваСт, Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ png-8 ΠΈΠ»ΠΈ png-24.

МоТно ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΈΠΌ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ°ΠΌ:

  • фотографичСскоС качСство – jpg
  • фотографичСскоС качСство с ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌ фоном– png-8, Π½Π΅ устроило качСство – png-24
  • ΠΌΠ°Π»ΠΎ Ρ†Π²Π΅Ρ‚ΠΎΠ² Π² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ – gif

Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ Π΄ΠΎ ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ, Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΎΠΊΠ½ΠΎ история

Π’Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Ρ‰Π΅Π»Ρ‡ΠΎΠΊ ΠΏΠΎ названию Ρ„Π°ΠΉΠ»Π° ΠΈ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ подходящий ΠΌΠ°ΡΡˆΡ‚Π°Π±.

Аналогичным ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΡΠΎΡ…Ρ€Π°Π½ΡΡŽΡ‚ΡΡ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ изобраТСния.

Π“Ρ€ΡƒΠΏΠΏΡƒ собак ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π½Π° ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠΌ Ρ„ΠΎΠ½Π΅. Π’Π°ΠΊ впослСдствии Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΡ‰Π΅ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π½Π° страницу, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π΄Ρ€ΡƒΠ³ΡƒΡŽ Π³Ρ€ΡƒΠΏΠΏΡƒ собак. МоТно ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ с Ρ„ΠΎΠ½ΠΎΠΌ «шапки» сайта.

Π’ΠΎ ΠΆΠ΅ самоС касаСтся изобраТСния Π»Π°ΠΏΡ‹, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ появляСтся ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΏΡƒΠ½ΠΊΡ‚ мСню

ΠžΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ изобраТСния – ΠΏΠΎ ТСланию. МоТно Π½Π° Π±Π΅Π»ΠΎΠΌ, ΠΌΠΎΠΆΠ½ΠΎ Π½Π° ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠΌ.

Π—Π΄Π΅ΡΡŒ слСдуСт Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ сохранСния ΠΎΡ‡Π΅Π½ΡŒ Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½ΠΎ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ, сто Π² psd исходниках Π½Π΅Ρ€Π΅Π΄ΠΊΠΈ изобраТСния с ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹ΠΌΠΈ краями. Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±Ρ‹Π»ΠΎ сохранСно Π½Π° ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠΌ Ρ„ΠΎΠ½Π΅. Однако ΠΏΡ€ΠΈ просмотрС Π΅Π³ΠΎ Π½Π° Ρ‡Ρ‘Ρ€Π½ΠΎΠΌ – Π²ΠΈΠ΄Π½Ρ‹ ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹Π΅ края. Но ΠΏΡ€ΠΈ использовании свСтлого Ρ„ΠΎΠ½Π° – этот Π΄Π΅Ρ„Π΅ΠΊΡ‚ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π΅Π·Π°ΠΌΠ΅Ρ‚Π΅Π½.

Для Ρ„ΠΎΠ½Π° Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΌΠ°Π»Π΅Π½ΡŒΠΊΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ, которая Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ страницу ΠΊΠ°ΠΊ ΠΊΠ°Ρ„Π΅Π»ΡŒΠ½Π°Ρ ΠΏΠ»ΠΈΡ‚ΠΊΠ°. Однако Π² этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρ„ΠΎΠ½ Π½Π΅ являСтся ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΠΌΡΡ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π»ΡƒΡ‡ΡˆΠ΅ Π½Π°ΠΉΡ‚ΠΈ ΠΏΠΎΡ…ΠΎΠΆΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ. А ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ΄ΠΎΠ±Ρ€Π°Ρ‚ΡŒ, вырСзая ΠΈΠ· Ρ„ΠΎΠ½Π° Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹.

Начало вёрстки. ΠžΠ±Ρ‘Ρ€Ρ‚ΠΊΠ°. Π¨Π°ΠΏΠΊΠ° сайта.

Вёрстка Π±ΡƒΠ΄Π΅Ρ‚ рассмотрСна с использованиСм HTML5 ΠΈ CSS3.

Π’ ΠΏΠ°ΠΏΠΊΠ΅ своСго сайта Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ HTML Ρ„Π°ΠΉΠ». НапримСр index.html.

Π’ ΠΏΠ°ΠΏΠΊΠ΅ css ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ» style.css.

ΠšΡ€ΠΎΠΌΠ΅ этого, Π² ΠΏΠ°ΠΏΠΊΠ΅ css Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ» reset.css со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΊΠΎΠ΄ΠΎΠΌ

Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·Π½Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ для ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ Ρ‚Π΅Π³Π° ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ настройки. Для обСспСчСния кроссбраузСрности ΠΈΡ… Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ±Ρ€ΠΎΡΠΈΡ‚ΡŒ. ΠŸΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ Π²Ρ‹ΡˆΠ΅ ΠΊΠΎΠ΄ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ Π­Ρ€ΠΈΠΊΠΎΠΌ ΠœΠ°ΠΉΠ΅Ρ€ΠΎΠΌ.

Π‘Π½Π°Ρ‡Π°Π»Π° Π² index.html слСдуСт Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ основныС Ρ‚Π΅Π³ΠΈ.

Для Ρ‚Π΅Π³Π° Π² стилях Π½ΡƒΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½.

Как ΡƒΠΆΠ΅ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΎΡΡŒ, Ρ„ΠΎΠ½ здСсь Π½Π΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΠΉΡΡ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Ρ€Π°Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Π΅Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ΄ΠΎΠ±Ρ€Π°Ρ‚ΡŒ любой ΠΏΠΎΡ…ΠΎΠΆΠΈΠΉ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΎΠ±Ρ‘Ρ€Ρ‚ΠΊΡƒ сайта – Π±Π»ΠΎΠΊ Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ всё содСрТимоС.

Рядом с Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ

Π’Π°ΠΊΠΆΠ΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π±Π»ΠΎΠΊΠ° находится слово wrapper. Оно Ρ‚Π°ΠΌ находится Π²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ. ЦСль – Π²ΠΎ врСмя вёрстки Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΈ ΠΎΡ‚Π»ΠΈΡ‡Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΎΡ‚ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ…. По этой ΠΆΠ΅ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅ Π² стилях Π±Π»ΠΎΠΊΡƒ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ Π΄Π°Π½ ΠΊΠ°ΠΊΠΎΠΉ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ свСтлый Ρ„ΠΎΠ½.

Для установки стилСй Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π½Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ отступы свСрху ΠΈ снизу. Для измСрСния ΠΌΠΎΠΆΠ½ΠΎ Π² Adobe Photoshop инструмСнтом Β«ΠŸΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡ‚ΡŒΒ» Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ сайта ΠΎΡ‚ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ Π΄ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ края. Высота Π½Π΅ Π²Π°ΠΆΠ½Π°.

Π¨ΠΈΡ€ΠΈΠ½Ρƒ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π² ΠΎΠΊΠ½Π΅ Β«Π˜Π½Ρ„ΠΎΒ»

Аналогичным ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡƒΠΆΠ΅ Π²Π°ΠΆΠ½Π° высота Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ области, Π° Π½Π΅ ΡˆΠΈΡ€ΠΈΠ½Π°, ΠΈΠ·ΠΌΠ΅Ρ€ΡΡŽΡ‚ΡΡ отступы свСрху ΠΈ снизу.

ΠŸΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ 100px свСрху ΠΈ 85px снизу.

Π’Π°ΠΊΠΈΠΌ способом ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ Π»ΡŽΠ±Ρ‹Π΅ расстояния Π² исходникС.

Π‘ΠΏΡ€Π°Π²Π° ΠΈ слСва установлСны отступы auto. Благодаря этому Π±Π»ΠΎΠΊ выравниваСтся ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ создаётся «шапка» сайта. Π’ Adobe Photoshop Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΠ·ΠΌΠ΅Ρ€ΠΈΡ‚ΡŒ Π΅Ρ‘ высоту.

Π­Ρ‚ΠΎΡ‚ Π±Π»ΠΎΠΊ состоит ΠΈΠ· Π΄Π²ΡƒΡ… частСй. Π’ ΠΏΠ΅Ρ€Π²ΠΎΠΉ части Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ ΠΈ ссылки, Π²ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΉ собаки ΠΈ слоган.

Для ΠΏΠ΅Ρ€Π²ΠΎΠΉ части создаётся Π΅Ρ‰Ρ‘ ΠΎΠ΄ΠΈΠ½ Π±Π»ΠΎΠΊ.

Высота этого Π±Π»ΠΎΠΊΠ° 100px. Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° – Π±Π΅Π»Ρ‹ΠΉ. И Π΅Ρ‰Ρ‘ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ Π²Π½ΡƒΡ‚Ρ€ΠΈ этого Π±Π»ΠΎΠΊΠ° Π±ΡƒΠ΄ΡƒΡ‚ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ понадобится установка свойства position: relative.

Π’Π½ΡƒΡ‚Ρ€ΠΈ этого Π±Π»ΠΎΠΊΠ° слСдуСт ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π±Π»ΠΎΠΊ с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ-Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠΌ. Π­Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ссылкой Π½Π° Π³Π»Π°Π²Π½ΡƒΡŽ страницу.

Π’ стилях ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ этого Π±Π»ΠΎΠΊΠ°. МоТно Π½Π΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ, Ссли для Π±Π»ΠΎΠΊΠ° Π½Π΅ планируСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΎΡ‚ Π±Π΅Π»ΠΎΠ³ΠΎ.

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ – это ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹ ΠΈ врСмя Ρ€Π°Π±ΠΎΡ‚Ρ‹.

Π’ стилях Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ тСкста, Ρ†Π²Π΅Ρ‚ ΠΈ ΡˆΡ€ΠΈΡ„Ρ‚.

Для опрСдСлСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π° тСкста, ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈ Ρ†Π²Π΅Ρ‚Π° Π² Adobe PhotoshopΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ инструмСнт Β«Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ тСкст» ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Ρ‰Π΅Π»Ρ‡ΠΎΠΊ ΠΏΠΎ Π½ΡƒΠΆΠ½ΠΎΠΌΡƒ тСксту. Π’ ΠΏΠ°Π½Π΅Π»ΠΈ свойств ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ ΡˆΡ€ΠΈΡ„Ρ‚. Π¦Π²Π΅Ρ‚ указываСтся Π² ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ΅. На рисункС, для наглядности, ΠΎΠ½ ΠΎΡ‚ΠΌΠ΅Ρ‡Π΅Π½ красным ΠΎΠ²Π°Π»ΠΎΠΌ.

Π©Π΅Π»Ρ‡ΠΎΠΊ ΠΏΠΎ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΡƒ Π²Ρ‹Π·ΠΎΠ²Π΅Ρ‚ ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρƒ Ρ†Π²Π΅Ρ‚ΠΎΠ².

Π—Π΄Π΅ΡΡŒ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ Ρ†Π²Π΅Ρ‚Π°.

ΠšΡ€ΠΎΠΌΠ΅ этого Π±Π»ΠΎΠΊ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Π΄Π²ΠΈΠ½ΡƒΡ‚ΡŒ. Π›ΡƒΡ‡ΡˆΠ΅ всСго Π΄Π΅Π»Π°Ρ‚ΡŒ это с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ позиционирования. Для

ΠžΡ‚ΡΡ‚ΡƒΠΏΡ‹ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Ρ€ΠΈΡ‚ΡŒ Π² Adobe Photoshop способом, рассмотрСнным Ρ€Π°Π½Π΅Π΅.

Π’ΠΎΡ‚ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅

ΠžΡΡ‚Π°Π»ΠΈΡΡŒ Π² этой части ссылки Π½Π° Π²Ρ…ΠΎΠ΄ ΠΈ Ρ€Π΅Π³ΠΈΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ.

Π‘Π½Π°Ρ‡Π°Π»Π° ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ стили для

Бсылки Π½Π° Ρ€Π΅Π³ΠΈΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈ Π²Ρ…ΠΎΠ΄ цСлСсообразно ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌΠΈ элСмСнтами, установив свойство display: block, ΠΈ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π² Π½ΡƒΠΆΠ½Ρ‹Π΅ мСста ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ.

МоТно для ссылки, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π½Π°Π²Π΅Π»ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ особСнный ΡΡ‚ΠΈΠ»ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΄ΠΈΠ½Π°ΠΌΠΈΠΊΠΈ. ΠžΡ‡Π΅Π½ΡŒ часто ΡƒΠ±ΠΈΡ€Π°ΡŽΡ‚ ΠΏΠΎΠ΄Ρ‡Ρ‘Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅. Или Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚. ΠŸΠΎΠ΄Ρ‡Ρ‘Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΡ Π½Π΅Ρ‚, Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΎΠ½ΠΎ появляСтся.

Π’ΠΎΡ‚ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ – это ниТняя Ρ‡Π°ΡΡ‚ΡŒ «шапки» сайта.

Оба Π±Π»ΠΎΠΊΠ° (dogs ΠΈ slogan) Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π²ΠΈΠ³Π°Ρ‚ΡŒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΠΎ Π°Π½Π°Π»ΠΎΠ³ΠΈΠΈ с ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΌΠΈ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ. Для слогана Π΅Ρ‰Ρ‘ устанавливаСтся свойство line-height. Оно слуТит для увСличСния мСТстрочного ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Π°

На этом ΠΏΠΎΠΊΠ° всС. Π’ слСдущСй ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ Ρ€Π°Π·Π±Π΅Ρ€Π΅ΠΌ созданиС Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ для нашСго сайта. Π§Π°ΡΡ‚ΡŒ 2>>

ВрСбования ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½-ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌ web-страниц для вСрстки ΠΈΠ»ΠΈ Π΄Π΅Π»Π°Π΅ΠΌ ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ psd-ΠΌΠ°ΠΊΠ΅Ρ‚

Β«Π― Π½Π΅ дСлаю Π±Ρ€Π°ΠΊ, я Π½Π΅ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°ΡŽ Π±Ρ€Π°ΠΊ, я Π½Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π°ΡŽ Π±Ρ€Π°ΠΊΒ»
Toyota Production System

Π’ ΠΎΡ‡Π΅Π½ΡŒ Ρ€Π΅Π΄ΠΊΠΈΡ… случаях, ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ»ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ возьмСм Π½Π° Π΄Π°Π»ΡŒΠ½Π΅ΠΉΡˆΡƒΡŽ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ с ΡƒΠΆΠ΅ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ. Но такая ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ° ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ‚Ρ€ΡƒΠ΄ΠΎΠ²Ρ‹Π΅ Π·Π°Ρ‚Ρ€Π°Ρ‚Ρ‹.

Если ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ Π² студии, Ρ‚ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΌΠΎΠΆΠ΅Ρ‚ Π»Π΅Π³ΠΊΠΎ ΡƒΡ‚ΠΎΡ‡Π½ΠΈΡ‚ΡŒ Ρƒ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€Π° ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΈΠ»ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° Π»ΡŽΠ±Ρ‹Π΅ вопросы, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎ имСлось Π² Π²ΠΈΠ΄Ρƒ Π² тСхничСском Π·Π°Π΄Π°Π½ΠΈΠΈ, ΠΈΠ»ΠΈ ΠΆΠ΅ ΠΊΠ°ΠΊ Π² прСдставлСнии Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΈΡ‚ΠΎΠ³ Ρ€Π°Π±ΠΎΡ‚Ρ‹. Но Ссли Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊ ΡƒΠΆΠ΅ Π½Π°Ρ‡Π°Π» с ΠΊΠ΅ΠΌ-Ρ‚ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΏΡ€ΠΈΡˆΠ΅Π» ΠΊ Π½Π°ΡˆΠ΅ΠΌΡƒ спСциалисту, Π½Π°Π»Π°Π΄ΠΈΡ‚ΡŒ Ρ‚Π°ΠΊΡƒΡŽ ΠΊΠΎΠΌΠΌΡƒΠ½ΠΈΠΊΠ°Ρ†ΠΈΡŽ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ. ОсобСнно ΠΌΠ½ΠΎΠ³ΠΎ слоТностСй это доставляСт, ΠΊΠΎΠ³Π΄Π° Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π°Ρ… Π΅ΡΡ‚ΡŒ ошибки, вСдь ΠΈΡΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΈΡ… Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π΅ΠΊΠΎΠΌΡƒ. ΠšΠ°ΠΊΠΎΠ²Ρ‹ самыС распространСнныС ΠΎΠ³Ρ€Π΅Ρ…ΠΈ Π³ΠΎΡ€Π΅-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ²? Π§Ρ‚ΠΎ стоит ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ ΠΎΡ‚Π΄Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π½Π° вСрстку? Π­Ρ‚ΠΈ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ вопросы ΠΏΠΎ Ρ‚Π΅ΠΌΠ΅ ΠΌΡ‹ рассмотрим Π² Π΄Π°Π½Π½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅.

  1. ΠœΠ°ΠΊΠ΅Ρ‚ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ прСдставлСн Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ (.psd). Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС сайт Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚Π°.
  2. Π‘Ρ‚Ρ€ΠΎΠ³ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠ΅ пространство RGB. ИмСнно ΠΎΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π² web. CMYK ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΏΠΎΠ»ΠΈΠ³Ρ€Π°Ρ„ΠΈΠΈ, Π° Π½Π΅ для web.
  3. Π•Π΄ΠΈΠ½ΠΈΡ†Π°ΠΌΠΈ измСрСния Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ пиксСли, Π° Π½Π΅ сантимСтры, ΠΌΠΈΠ»Π»ΠΈΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΌΠ΅Ρ€Ρ‹ Π΄Π»ΠΈΠ½Ρ‹ . Указания Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π΄Ρ€ΠΎΠ±Π½Ρ‹ΠΌΠΈ!
  4. ВсС слои ΠΎΠ΄Π½ΠΎΠ³ΠΎ логичСского элСмСнта Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΌΠΎΠ΄ΡƒΠ»ΡŒ Π°Π²Ρ‚ΠΎΡ€ΠΈΠ·Π°Ρ†ΠΈΠΈ).
  5. Π‘Π»ΠΎΠΈ Π½ΠΈ Π² ΠΊΠΎΠ΅ΠΌ случаС Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ склССны.
  6. Π’Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ элСмСнты Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΌΠΈ элСмСнтами: ΠΈΠΊΠΎΠ½ΠΊΠΈ, стрСлки ΠΈ Ρ‚.Π΄. Π”ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ элСмСнты shape ΠΈ smart-ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ с ai-элСмСнтами.
  7. Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ слоСв – строго ΠΏΠΎ β€œRulers”. Π˜Ρ… Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅.
  8. β€œRulers” Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Ρ‹ строго с Ρ‚ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒΡŽ Π΄ΠΎ ΠΎΠ΄Π½ΠΎΠ³ΠΎ пиксСля. ПолпиксСля Π½Π΅ допустимы.
  9. НСобходимо Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ слои ΠΏΠΎ ΠΏΠ°ΠΏΠΊΠ°ΠΌ (смысловым Π±Π»ΠΎΠΊΠ°ΠΌ) с осмыслСнными названиями, Π° Π½Π΅ Β«Π“Ρ€ΡƒΠΏΠΏΠ° 3 copyΒ». Π’ΠΎ ΠΆΠ΅ самоС касаСтся всСх слоСв (шапка, ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, ΠΏΠΎΠ΄Π²Π°Π» ΠΈ Ρ‚.ΠΏ.).ΠŸΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡΡ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΈ «свСрху Π²Π½ΠΈΠ·Β» ΠΈ «слСва Π½Π°ΠΏΡ€Π°Π²ΠΎΒ».
  10. Π’ случаС фиксированного шаблона Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Ρ‡Π΅Ρ‚ΠΊΠΎΠ΅ соотвСтствиС ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½Π½ΠΎΠΉ минимальной ΡˆΠΈΡ€ΠΈΠ½Π΅ сайта.
  11. Для Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΈΠ»ΠΈ элСмСнты для 640px – 960px – 1200px – 1600px.
  12. ΠŸΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Β«ΠΏΠΎΠ΄ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅Β» ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ‚Ρ€ΠΈΡΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ Π² Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Π° Π½Π΅ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π° (ΠΏΡ€ΠΈ 1024 ΡˆΠΈΡ€ΠΈΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° 1000).
  13. Π’ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ «слуТСбныС страницы» (404).



ВСкстовоС содСрТимоС. Π§Π΅Ρ‚ΠΊΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΈ отступы:

  1. НСобходимо ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Β«Ρ€ΠΎΠ΄Π½Ρ‹Π΅Β» Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ photoshop ΠΈΠ»ΠΈ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹Π΅ сСтки, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‚ΠΎΡ‡Π½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ располоТСниС элСмСнта Π½Π° страницС.
  2. НуТно осознанно Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² ΠΈ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΡ… ΠΊΡ€Π°Ρ‚Π½Ρ‹ΠΌΠΈ 10, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, 1000px, Π° Π½Π΅ 998px.
  3. Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π±Π΅Π· Π΄Ρ€ΠΎΠ±Π΅ΠΉ. Никогда Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Ρ€Π°ΡΡ‚ΡΠ³ΠΈΠ²Π°Ρ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚ ΠΏΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ.
  4. НС допускаСтся растрированиС тСкста ΠΈΠ»ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π΅Π³ΠΎ Π² smart-ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π΅.
  5. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ Tahoma, Arial, Verdana, Times New Roman, Courier, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΈΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒ ΠΊ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Π΅ΠΌΡ‹ΠΌ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°ΠΌ. ΠŸΠ΅Ρ€Π΅Π΄Π°Π²Π°Π΅ΠΌΡ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ² ttf ΠΈ otf.
  6. Допустимо ΠΈ Π΄Π°ΠΆΠ΅ привСтствуСтся использованиС свободных кирилличСских ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² ΠΎΡ‚ Google web fonts.
  7. ВсС тСкстовыС элСмСнты Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ сглаТСны ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠΌ β€œWindows LCD”.
  8. НСобходимо ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ссылок Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ («нСактивная», Β«ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈΒ», «посСщСнная») Π² мСню / ΠΌΠΎΠ΄ΡƒΠ»Π΅, Ρ‚ΠΎ ΠΆΠ΅ самоС касаСтся ссылок, ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‰ΠΈΡ…ΡΡ ΠΎΡ‚ Π΄Π΅Ρ„ΠΎΠ»Ρ‚Π½ΠΎΠ³ΠΎ стиля (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ссылки Π² мСню, pathway ΠΈ Ρ‚.Π΄.)

Π‘Π°ΠΌΠΎΠ΅ Π³Π»Π°Π²Π½ΠΎΠ΅ – Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΎΠΌ, Π±Ρ‹Ρ‚ΡŒ Π² состоянии ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡΠ²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ нарисовал (ΠΏΡƒΡΡ‚ΡŒ ΠΈ Π½Π΅ быстро, Π½Π΅ Π½Π° 100% Π²Π°Π»ΠΈΠ΄Π½ΠΎ).

ГрафичСскиС Ρ„ΠΈΡˆΠΊΠΈ:

  1. Π€ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΠΌΡΡ, тСкстурированныС Ρ„ΠΎΠ½Ρ‹ Π±Π΅Π· Π»ΠΎΠ³ΠΈΠΊΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π° Π½Π΅ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°ΡŽΡ‚ΡΡ.
  2. ВсС слои Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π² Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅ налоТСния (normal). НС допускаСтся Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ слоСв Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ€Π΅ΠΆΠΈΠΌΠ°Ρ…, ΠΊΠ°ΠΊ Ρ‚ΠΎ multiply, overlay ΠΈ Ρ‚.Π΄.
  3. НСобходимо ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ элСмСнтов, Ρ‡Ρ‚ΠΎ ΠΏΠΎΡ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ создания графичСских Ρ„Π°ΠΉΠ»ΠΎΠ² png-24 (ΠΏΠΎΠ»ΡƒΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ etc).
  4. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½Π° ΠΏΡ€ΠΈΡΡƒΡ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ favicon.ico для сайта. НС Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π±Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎ favicon для Apple.
  5. Π’Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ ΠΌΠ΅Π»ΠΊΠΈΠ΅ элСмСнты Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ отрисованы согласно однопиксСльной сСткС.
  6. ΠΠ°ΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ рСкомСндуСтся Π²Ρ‹ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ отступы ΠΌΠ΅ΠΆΠ΄Ρƒ элСмСнтами, Ρ‡ΡŒΠΈ значСния ΠΊΡ€Π°Ρ‚Π½Ρ‹ 10, Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… случаях – ΠΊΡ€Π°Ρ‚Π½Ρ‹ 5.

Π˜ΡΡ…ΠΎΠ΄Π½Ρ‹Π΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹ ΠΌΠ°ΠΊΠ΅Ρ‚Π°

  • ΠœΠ°ΠΊΠ΅Ρ‚ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ PSD
  • Π¨Ρ€ΠΈΡ„Ρ‚Ρ‹
  • Π˜ΡΡ…ΠΎΠ΄Π½Ρ‹Π΅ изобраТСния

Π’Π°ΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠΈΡ‚ΡŒ Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΏΠ°ΠΏΠΊΡƒ всС изобраТСния Π² исходном качСствС ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅.

ВсС нСстандартныС ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΠΊΠΎΠΏΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π² Ρ‚Ρƒ ΠΆΠ΅ ΠΏΠ°ΠΏΠΊΡƒ. Π£ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π΅ Π±Ρ‹Ρ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ³ΠΎ Π²Π°ΠΌ красивого ΡˆΡ€ΠΈΡ„Ρ‚Π°. И Π½Π° Π΅Π³ΠΎ поиски ΡƒΠΉΠ΄Π΅Ρ‚ ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.

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

23.04.2018 Π—Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊΡƒ 17386 Автор: Команда Peppers Digital ВСбмастСр ΠŸΡ€ΠΎΡ†Π΅ΡΡ

PSD ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ с CorelDraw для вСрстки сайта. β€’ фриланс-Ρ€Π°Π±ΠΎΡ‚Π° для спСциалиста β€’ катСгория Π”ΠΈΠ·Π°ΠΉΠ½ сайтов ≑ Π—Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊ Design ΠŸΠ΅Ρ‚Ρ€ΠΎΠ²

Switch to English version?

Yes

ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΠΈΡΡŒ Π½Π° ΡƒΠΊΡ€Π°Ρ—Π½ΡΡŒΠΊΡƒ Π²Π΅Ρ€ΡΡ–ΡŽ?

Π’Π°ΠΊ

ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒΡΡ Π½Π° Ρ€ΡƒΡΡΠΊΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ?

Π”Π°

Przełączyć się na polską weкrsję?

Tak

3 ΠΈΠ· 3

истСкло врСмя Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ

  1. публикация

  2. ΠΏΡ€ΠΈΠ΅ΠΌ ΡΡ‚Π°Π²ΠΎΠΊ

  3. истСкло врСмя Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ


PSD ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ с CorelDraw для вСрстки сайта. ΠœΠ°ΠΊΠ΅Ρ‚Ρ‹ сдСланы Π² пиксСлях. НуТны ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹ Π½Π° Π²Ρ‹Ρ…ΠΎΠ΄Π΅ для Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ°. Если Π²Ρ‹ Π΅Ρ‰Π΅ ΠΈ вСрстаСтС Π±ΡƒΠ΄Π΅Ρ‚ Π’Π°ΠΌ большС Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΈ ΠΎΠΏΠ»Π°Ρ‚Ρ‹. ΠΠ°ΠΏΠΈΡˆΠΈΡ‚Π΅ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹.

ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΡ…ΠΎΠΆΠΈΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚

Π—Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊ Π½Π΅ ΠΆΠ΅Π»Π°Π΅Ρ‚ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€Π΅Π΄ΠΎΠΏΠ»Π°Ρ‚Ρƒ? ΠžΠΏΠ»Π°Ρ‚Π° Ρ‡Π΅Ρ€Π΅Π· Π‘Π΅ΠΉΡ„ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠ³ΠΎ ΠΌΠΎΡˆΠ΅Π½Π½ΠΈΡ‡Π΅ΡΡ‚Π²Π°.

  • Π‘Ρ‚Π°Π²ΠΊΠΈ 15
  • ΠžΠ±ΡΡƒΠΆΠ΄Π΅Π½ΠΈΠ΅ 10

Π΄Π°Ρ‚Π° ΠΎΠ½Π»Π°ΠΉΠ½ Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ ΡΡ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ врСмя выполнСния


  1. ставка скрыта фрилансСром

  2. ставка скрыта фрилансСром

  3. ставка скрыта фрилансСром

  4. 5 Π΄Π½Π΅ΠΉ3000β€―UAH

    5 Π΄Π½Π΅ΠΉ3000β€―UAH

    ЗдравствуйтС.
    ΠœΠΎΠ³Ρƒ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ ΡƒΠΆΠ΅ сСйчас. Π—Π°Π½ΠΈΠΌΠ°ΡŽΡΡŒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ Π±ΠΎΠ»Π΅Π΅ 4Ρ… Π»Π΅Ρ‚, Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π² ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ.
    ΠžΡ‚Ρ‡Π΅Ρ‚ ΠΏΠΎ ΠΏΡ€ΠΎΠ΄Π΅Π»Π°Π½Π½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Π΅ Π΅ΠΆΠ΅Π΄Π½Π΅Π²Π½ΠΎ, всСгда Π½Π° связи.
    Π’ вСрсткС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Π»ΡƒΡ‡ΡˆΠΈΠ΅ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΈ Ρ‡Ρ‚ΠΎ позволяСт сущСствСнно ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ врСмя Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

  5. 3 дня1000β€―UAH

    3 дня1000β€―UAH

    Π”ΠΎΠ±Ρ€Ρ‹ΠΉ дСнь.
    Π’Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΈΠ· Π‘dr ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Psd? ΠΠ°ΠΏΠΈΡˆΠΈΡ‚Π΅ поТалуйста Π² Π»ΠΈΡ‡Π½Ρ‹Π΅ сообщСния, обсудим Π·Π°Π΄Π°Ρ‡Ρƒ.

  6. 3 дня1200β€―UAH

    3 дня1200β€―UAH

    ΠœΠΎΠ³Ρƒ Π³Ρ€Π°ΠΌΠΎΡ‚Π½ΠΎ пСрСвСсти Π΄ΠΈΠ·Π°ΠΉΠ½ Π² PSD. ПослС мСня Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊ смоТСм Π»Π΅Π³ΠΊΠΎ Π·Π°Π½ΡΡ‚ΡŒΡΡ своим Π΄Π΅Π»ΠΎΠΌ.

    ΠŸΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ Ρ‚ΡƒΡ‚:
    Freelancehunt

  7. 2 дня300β€―UAH

    2 дня300β€―UAH

    ЗдравствуйтС Π³ΠΎΡ‚ΠΎΠ² Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ, Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΌΠΎΠ³Ρƒ прямо сСйчас, сдСлаю всС качСствСнно ΠΈ Π² срок ΠΎΠ±Ρ€Π°Ρ‰Π°ΠΉΡ‚Π΅ΡΡŒ!

  8. 3 дня2000β€―UAH

    3 дня2000β€―UAH

    ЗдравствуйтС!
    Π‘ΡƒΠ΄Ρƒ Ρ€Π°Π΄Π° сотрудничСству. ΠœΠΎΠ³Ρƒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, Π±Π΅Π· вСрстки.
    ΠŸΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ ΠΏΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ: Behance
    ΠžΠ±Ρ‰Π΅Π΅ ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ: http://www.coroflot.com/elya_od/
    ΠŸΠΈΡˆΠΈΡ‚Π΅: [email protected]

  9. 3 дня3000β€―UAH

    3 дня3000β€―UAH

    ЗдравствуйтС,

    Π‘ΠΏΠ΅ΡˆΡƒ ΡΠΎΠΎΠ±Ρ‰ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠΌΠ°Π½Π΄Π° TATL Group https://www.tatlgroup.com ΠΈΠΌΠ΅Π΅Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΉ ΠΎΠΏΡ‹Ρ‚ ΠΈ ΠΊΠΎΠΌΠΏΠ΅Ρ‚Π΅Π½Ρ†ΠΈΡŽ для осущСствлСния Π΄Π°Π½Π½ΠΎΠΉ Π·Π°Π΄Π°Ρ‡ΠΈ Π»ΡƒΡ‡ΡˆΠΈΠΉ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π² ΠΊΡ€Π°Ρ‚Ρ‡Π°ΠΉΡˆΠΈΠ΅ сроки ΠΈ ΠΏΠΎ Ρ€Π°Π·ΡƒΠΌΠ½ΠΎΠΉ Ρ†Π΅Π½Π΅. Π‘ΡƒΠ΄Π΅ΠΌ Ρ€Π°Π΄Ρ‹ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ ΠΊ Ρ€Π°Π±ΠΎΡ‚Π΅ Π² блиТайшСС врСмя. Для обсуТдСния Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΎΠ±Ρ€Π°Ρ‰Π°ΠΉΡ‚Π΅ΡΡŒ ΠΏΠΎ Π½ΠΎΠΌΠ΅Ρ€Ρƒ, Π»ΠΈΠ±ΠΎ Π² Π»ΠΈΡ‡Π½Ρ‹Ρ… сообщСниях.

    Бпасибо!
    Π‘ ΡƒΠ²Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ,
    Π₯ΠΎΠΌΠ΅Π½ΠΊΠΎ Π•ΠΊΠ°Ρ‚Π΅Ρ€ΠΈΠ½Π°
    Π ΡƒΠΊΠΎΠ²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ ΠΎΡ‚Π΄Π΅Π»Π° ΠΏΡ€ΠΎΠ΄Π°ΠΆ TATL Group
    +380932720605

  10. 5 Π΄Π½Π΅ΠΉ3000β€―UAH

    5 Π΄Π½Π΅ΠΉ3000β€―UAH

    ЗдравствуйтС! Π“ΠΎΡ‚ΠΎΠ² ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, имССтся ΠΎΠΏΡ‹Ρ‚ вСрстки ΠΈΠ· CorelDraw. Π¦Π΅Π½Ρƒ ΠΈ сроки Π² зависимости ΠΎΡ‚ объСма Ρ€Π°Π±ΠΎΡ‚Ρ‹. Если Ρ‡Ρ‚ΠΎ ΠΎΠ±Ρ€Π°Ρ‰Π°ΠΉΡ‚Π΅ΡΡŒ Π² Π²ΠΊ: https://vk.com/timkinguin ΠΈΠ»ΠΈ Π² лс для Π΄Ρ€ΡƒΠ³ΠΈΡ… способов связи.

  11. 5 Π΄Π½Π΅ΠΉ1000β€―UAH

    5 Π΄Π½Π΅ΠΉ1000β€―UAH

    Π”ΠΎΠ±Ρ€ΠΎΠ³ΠΎ дня. Π’ΠΈΠΊΠΎΠ½ΡƒΡŽ Ρ€ΠΎΠ±ΠΎΡ‚ΠΈ ΠΏΠΎ вСрстанні сайту. ΠŸΠΎΠΏΡ€ΠΎΡˆΡƒ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΠΈ Π²Π°ΡˆΡ– ΠΌΠ°Ρ‚Π΅Ρ€Ρ–Π°Π»ΠΈ. МоТливо Π·ΠΌΠΎΠΆΡƒ звСрстати Π±Π΅Π· PSD ΠΌΠ°ΠΊΠ΅Ρ‚Π°. Π„ досвід Ρƒ вСрстанні Π· PNG Ρ„Π°ΠΉΠ»Ρ–Π².

  12. 2 дня3500β€―UAH

    2 дня3500β€―UAH

    Π“ΠΎΡ‚ΠΎΠ² ΠΏΠΎΠΌΠΎΡ‡ΡŒ! πŸ™‚
    ΠžΠΏΡ‹Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρ‹ β€” 1.5 Π³ΠΎΠ΄Π° Π² ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ WePoll (US) ΠΈ ΠΏΠΎ ΠΊΠΎΠ½Ρ‚Ρ€Π°ΠΊΡ‚Ρƒ с WORLDcafe β€” Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° CRM систСмы (Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π΅ΡΡ‚ΡŒ Π² ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ)
    ΠΠ°ΠΏΠΈΡˆΠΈΡ‚Π΅ ΠΌΠ½Π΅, обсудим Π΄Π΅Ρ‚Π°Π»ΠΈ ΠΈ приступим ΠΊ Ρ€Π°Π±ΠΎΡ‚Π΅!
    ΠŸΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ: Freelancehunt
    Π’Πš: https://vk. com/vammivammi
    Telegram, whatsapp: +79217540662
    ΠŸΠΎΡ‡Ρ‚Π°: [email protected]
    Skype: suprale

  13.  Ρ„рилансСр большС Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° сСрвисС

  14. 10 Π΄Π½Π΅ΠΉ10β€―000β€―UAH

    10 Π΄Π½Π΅ΠΉ10β€―000β€―UAH

    Π“ΠΎΡ‚ΠΎΠ²Ρ‹ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚.
    Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π΅ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΈ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ.
    для Ρ‚ΠΎΡ‡Π½ΠΎΠΉ ΠΎΡ†Π΅Π½ΠΊΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° трСбуСтся тСхничСскоС Π·Π°Π΄Π°Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ нравятся.
    ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π½Π°ΡˆΠΈΡ… Ρ€Π°Π±ΠΎΡ‚ http://it-format.com/portfolio/
    +38099-114-5335
    +38095-091-7782

  15. ставка скрыта фрилансСром


4 Π³ΠΎΠ΄Π° Π½Π°Π·Π°Π΄

239 просмотров

  • вСрстка
  • psd
  • CorelDRАW

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ PSD-Ρ„Π°ΠΉΠ» ΠΈ ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ?

Adobe Systems Incorporated Π±Ρ‹Π»Π° ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΠΊΡ€ΡƒΠΏΠ½Π΅ΠΉΡˆΠΈΡ… ΠΏΠ΅Ρ€Π²ΠΎΠΏΡ€ΠΎΡ…ΠΎΠ΄Ρ†Π΅Π² Π² тСхнологичСской отрасли, производя мноТСство Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ² Ρ„Π°ΠΉΠ»ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ стали отраслСвыми стандартами. Одним ΠΈΠ· самых Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² этих Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ² Ρ„Π°ΠΉΠ»ΠΎΠ² являСтся Portable Document Format (PDF), Π° Ρ‚Π°ΠΊΠΆΠ΅ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ„Π°ΠΉΠ»ΠΎΠ², созданныС Π² Adobe Suite. Одним ΠΈΠ· Ρ‚Π°ΠΊΠΈΡ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ² являСтся Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Ρ„Π°ΠΉΠ»Π° PSD.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ PSD?

Π Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ Ρ„Π°ΠΉΠ»Π° Photoshop Document ΠΈΠ»ΠΈ PSD β€” это собствСнный Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Ρ„Π°ΠΉΠ»Π°, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹ΠΉ Adobe Systems Incorporated для своСго прилоТСния Photoshop. Π­Ρ‚ΠΎΡ‚ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Ρ„Π°ΠΉΠ»Π° ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌΠΈ ΠΏΡ€ΠΈ создании Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ Π² Photoshop. Π€Π°ΠΉΠ»Ρ‹ PSD часто содСрТат Ρ…Ρ€Π°Π½ΠΈΠ»ΠΈΡ‰Π΅ Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ для Π΄ΠΈΠ·Π°ΠΉΠ½Π°, шаблонов, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±Ρ‹Π»ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Photoshop, ΠΈΠ½Ρ„ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠΈ ΠΈ Ρ‚. Π΄. Π”Π°ΠΆΠ΅ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΈ PowerPoint ΠΈ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ для оформлСния ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ΡΡ с использованиСм Photoshop.

Как ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ дизайнСрскиС прилоТСния Adobe, Ρ„Π°ΠΉΠ»Ρ‹ PSD хранят изобраТСния ΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ Π² Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… слоях. PSD ΡˆΠΈΡ€ΠΎΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ это ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых ΠΌΠΎΡ‰Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ² хранСния Π΄Π°Π½Π½Ρ‹Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ Π΄ΠΎ 30 000 пиксСлСй. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Π΅ Photoshop для извСстных сторонних ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΈ сСрвисов, Ρ‚Π°ΠΊΠΆΠ΅ Π΄Π΅Π»Π°ΡŽΡ‚ Π΅Π³ΠΎ вСсьма ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ для использования графичСскими Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌΠΈ.

Π˜ΡΡ‚ΠΎΡ€ΠΈΡ PSD

Π€ΠΎΡ€ΠΌΠ°Ρ‚ Ρ„Π°ΠΉΠ»Π° PSD, ΡΡ‚Π°Π²ΡˆΠΈΠΉ отраслСвым стандартом, Π±Ρ‹Π» создан вмСстС с ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ Photoshop Π΅Ρ‰Π΅ Π² 1987. Оно Π±Ρ‹Π»ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ Вомасом ΠΈ Π”ΠΆΠΎΠ½ΠΎΠΌ Нолл, двумя Π±Ρ€Π°Ρ‚ΡŒΡΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΏΡ€ΠΎΠ΄Π°Π»ΠΈ Π΅Π³ΠΎ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ Adobe Systems. Вомас Нолл Π±Ρ‹Π» Π΄ΠΎΠΊΡ‚ΠΎΡ€ΠΎΠΌ философии. студСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π» Ρ„ΠΎΡ‚ΠΎΡˆΠΎΠΏ, ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ написав ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ для ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π° Mac для отобраТСния ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² градациях сСрого Π½Π° ΠΌΠΎΠ½ΠΎΡ…Ρ€ΠΎΠΌΠ½ΠΎΠΌ дисплСС. Π•Π³ΠΎ Π±Ρ€Π°Ρ‚ Π”ΠΆΠΎΠ½ ΠΏΠΎΡ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π» Вомасу ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² Π±ΠΎΠ»Π΅Π΅ комплСксноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²Π΅Π»ΠΎ ΠΊ созданию Photoshop. Оба Π±Ρ€Π°Ρ‚Π° интСнсивно Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ Π½Π°Π΄ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΠ΄Π°Π»ΠΈ Ρ‡Π΅Ρ€Π΅Π· Barneyscan 200 ΠΊΠΎΠΏΠΈΠΉ прилоТСния для своСго сканСра ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. ПозТС ΠΎΠ½ΠΈ смогли ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎ ΠΏΡ€ΠΎΠ΄Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²Π° Adobe послС дСмонстрации. ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ вмСстС с Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠΌ Ρ„Π°ΠΉΠ»Π° PSD, Π²Ρ‹ΡΡ‚ΡƒΠΏΠ°ΡŽΡ‰ΠΈΠΌ Π² качСствС собствСнного Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°, Π±Ρ‹Π»ΠΎ Π²Ρ‹ΠΏΡƒΡ‰Π΅Π½ΠΎ Π² 19 Π³ΠΎΠ΄Ρƒ. 90.

Как ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Photoshop, Ρ‚Π°ΠΊ ΠΈ Π΅Π³ΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Ρ„Π°ΠΉΠ»Π° PSD ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΠ»ΠΈΡΡŒ Π² отраслСвой стандарт ΠΈ сдСлали компанию Adobe извСстной своими прилоТСниями для ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. ΠœΠ°Π½ΠΈΠΏΡƒΠ»ΡΡ†ΠΈΠΈ с изобраТСниями Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Photoshop Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΡ‡Π½Ρ‹, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Π½Ρ‹Π΅ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΡ‚ΡŒ послС рСдактирования, ΠΏΠΎΠΌΠ΅Ρ‡Π°ΡŽΡ‚ΡΡ ΠΊΠ°ΠΊ Β«ΠΎΡ‚Ρ„ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ»Π΅Π½Π½Ρ‹Π΅Β».

Как ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ PSD

Π€Π°ΠΉΠ»Ρ‹ PSD ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π² Adobe Photoshop ΠΈ рядС Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΡ… просмотр, ΠΈΠΌΠΏΠΎΡ€Ρ‚ ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ„Π°ΠΉΠ»ΠΎΠ² PSD. НСкоторыС ΠΈΠ· этих ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π»ΡƒΡ‡ΡˆΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ со слоями, ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌΠΈ для рСдактирования.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Ρ„Π°ΠΉΠ»Π° PSD, ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎΠ³ΠΎ Π² Adobe Photoshop

Adobe Photoshop

Π‘Π°ΠΌΡ‹ΠΉ ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½Ρ‹ΠΉ способ открытия Ρ„Π°ΠΉΠ»ΠΎΠ² PSD β€” использованиС прилоТСния Photoshop. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ PSD являСтся собствСнным Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠΌ Photoshop, Ρ„Π°ΠΉΠ»Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ для рСдактирования с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ прилоТСния. Однако Π΅ΡΡ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ прилоТСния, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΠ΅ Ρ„Π°ΠΉΠ»Ρ‹ PSD. Если Ρƒ вас Π½Π΅Ρ‚ Photoshop ΠΈΠ»ΠΈ Π²Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ список Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ², Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ прилоТСния, упомянутыС Π½ΠΈΠΆΠ΅.

CorelDraw

CorelDraw β€” ΠΎΠ΄Π½ΠΎ ΠΈΠ· самых извСстных ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ для рСдактирования ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. CorelDraw, ΠΊΠΎΠ½ΠΊΡƒΡ€ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ с прилоТСниями для Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ рСдактирования, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ Adobe Illustrator ΠΈ Photoshop, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΈΠΌΠΏΠΎΡ€Ρ‚ ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ„Π°ΠΉΠ»ΠΎΠ² PSD. Π˜ΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹ часто Π²ΠΏΠΎΠ»Π½Π΅ совмСстимы, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ, ΠΊΠ°ΠΊ ΠΈ Photoshop, CorelDraw Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ слои ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

GIMP

GIMP β€” это ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для рСдактирования ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, доступноС для Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ. Он ΠΈΠΌΠ΅Π΅Ρ‚ вСрсии для Mac, Windows, FreeBSD, Solaris ΠΈ Linux ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ ΠΈ экспорт Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΈΠ· Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° Ρ„Π°ΠΉΠ»ΠΎΠ² PSD. GIMP Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΈΠΌΠΏΠΎΡ€Ρ‚ ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ PSD-Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ бСсплатной Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²ΠΎΠΉ Π΄ΠΎΡ€ΠΎΠ³ΠΈΠΌ прилоТСниям, Ρ‚Π°ΠΊΠΈΠΌ ΠΊΠ°ΠΊ Adobe Photoshop ΠΈ CorelDraw.

Онлайн-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Photopea

Онлайн-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Photopea β€” это Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для открытия ΠΈ рСдактирования Ρ„Π°ΠΉΠ»ΠΎΠ² Photoshop с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°Ρ‡Π°Ρ‚ΡŒ с простого ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° PSD-Ρ„Π°ΠΉΠ»Π° ΠΈ Ρ‡ΡƒΠ²ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ сСбя ΠΊΠ°ΠΊ Π΄ΠΎΠΌΠ°, рСдактируя Π΅Π³ΠΎ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π·Π½Π°ΠΊΠΎΠΌΡ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Photoshop.

IrfanView

IrfanView β€” это бСсплатная ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° для просмотра ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, которая ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π±Π»ΠΎΠ³Π³Π΅Ρ€Π°ΠΌΠΈ для быстрого открытия тяТСлых Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΈ выполнСния основных ΠΏΡ€Π°Π²ΠΎΠΊ. Одним ΠΈΠ· нСдостатков использования PSD-Ρ„Π°ΠΉΠ»ΠΎΠ² являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΈΡ… ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°Π½ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ΅ для быстрого ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ просмотра Ρ„Π°ΠΉΠ»ΠΎΠ² PSD, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ IrfanView, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ быстро ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ PSD.

AVS Image Converter

AVS Image Converter β€“ это бСсплатный ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ тяТСлыС PSD-Ρ„Π°ΠΉΠ»Ρ‹ Π²ΠΎ всС основныС популярныС Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ JPEG, PNG, GIF, BMP ΠΈ Ρ‚. Π΄. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Π½ΠΎΡΠΈΡ‚ΡŒ основныС измСнСния, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, настройка яркости ΠΈ Ρ†Π²Π΅Ρ‚, добавляйтС соврСмСнныС Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹ ΠΈ эффСкты ΠΈ Π΄Π°ΠΆΠ΅ Π·Π°Ρ‰ΠΈΡ‰Π°ΠΉΡ‚Π΅ свои Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ водяного Π·Π½Π°ΠΊΠ°.

Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ PSD

Π€Π°ΠΉΠ»Ρ‹ PSD, Π±ΡƒΠ΄ΡŒ Ρ‚ΠΎ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹, изобраТСния ΠΈΠ»ΠΈ содСрТимоС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ сохранили для ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ рСдактирования, ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΎΡ‚ΠΊΡ€Ρ‹Π² ΠΈΡ… Π² Photoshop ΠΈΠ»ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ с ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ PSD, Ρ‚Π°ΠΊΠΎΠΌ ΠΊΠ°ΠΊ GIMP, CorelDraw ΠΈΠ»ΠΈ Photopea Online Editor. Π€Π°ΠΉΠ»Ρ‹ PSD ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ слои с изобраТСниями ΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π° для создания ΠΈ рСдактирования ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π”Π°ΠΆΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, созданныС Π½Π° Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ…, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ MediaModfier, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для сохранСния ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ PSD, послС Ρ‡Π΅Π³ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ упомянутыС Π²Ρ‹ΡˆΠ΅ прилоТСния для дальнСйшСго управлСния Ρ„Π°ΠΉΠ»ΠΎΠΌ PSD.

Π˜Π·ΡƒΡ‡Π΅Π½ΠΈΠ΅ Photoshop β€” Π½Π΅ дСтская ΠΈΠ³Ρ€Π°, ΠΈ Ссли Π²Ρ‹ Π½ΠΎΠ²ΠΈΡ‡ΠΎΠΊ Π² этом ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΎΠΉΡ‚ΠΈ нСсколько мСсяцСв, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π²Ρ‹ освоитС Π΅Π³ΠΎ. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… Π½ΠΈΠΆΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ.

Final Words

НСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ Π»ΠΈ Π²Ρ‹ с Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΌ PSD ΠΈΠ»ΠΈ создаСтС свои собствСнныС ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ PSD, Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Ρ„Π°ΠΉΠ»Π° являСтся ΠΌΠΎΡ‰Π½Ρ‹ΠΌ инструмСнтом для создания ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с высоким Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ хранСния Π΄Π°Π½Π½Ρ‹Ρ…. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π³Π»ΡƒΠ±ΠΈΠ½Ρƒ изобраТСния для рСдактирования ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… ΠΈΠ»ΠΈ создания Π½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π° Ρ‚Π°ΠΊΠΆΠ΅ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ ΠΎΡ…Π²Π°Ρ‚. НС говоря ΡƒΠΆΠ΅ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Photoshop извСстСн Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ создаСт ΡΡŽΡ€Ρ€Π΅Π°Π»ΠΈΡΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠ΅ изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΡ‚ΡŒ, учитывая, Ρ‡Ρ‚ΠΎ Ρƒ Π½Π΅Π³ΠΎ Π΅ΡΡ‚ΡŒ нСсколько ΠΌΠΎΡ‰Π½Ρ‹Ρ… инструмСнтов для рСдактирования Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹Ρ… Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π² Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠΌ Π²ΠΈΠ΄Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ.

Как Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ PSD-шаблон для ΠΊΠ°ΠΌΠΏΠ°Π½ΠΈΠΈ ΠΏΠΎ элСктронной ΠΏΠΎΡ‡Ρ‚Π΅

Π’Ρ‹ Π΄ΡƒΠΌΠ°Π΅Ρ‚Π΅ ΠΎ ΠΏΠΈΠΊΡΠ΅Π»ΡŒΠ½Ρ‹Ρ… кампаниях ΠΏΠΎ элСктронной ΠΏΠΎΡ‡Ρ‚Π΅? Π£Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΡƒΡΠΏΠ΅ΡˆΠ½Ρ‹ΠΉ PSD-Π΄ΠΈΠ·Π°ΠΉΠ½ Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅β€¦

ΠœΡ‹, компания Email Uplers, Ρ‚Π²Π΅Ρ€Π΄ΠΎ ΡƒΠ±Π΅ΠΆΠ΄Π΅Π½Ρ‹ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ элСктронноС письмо Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ HTML с Ρ€Π΅Π»Π΅Π²Π°Π½Ρ‚Π½Ρ‹ΠΌ содСрТаниСм ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ нравится вашим подписчикам, ΠΈΠΌΠ΅Π΅Ρ‚ большС всСго шансов Π½Π° Ρ€Π΅Π³ΠΈΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ. Π±ΠΎΠ»Π΅Π΅ высокиС ΠΏΠΎΠΊΠ°Π·Π°Ρ‚Π΅Π»ΠΈ открытия ΠΈ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. Π˜Π·ΡƒΡ‡Π΅Π½ΠΈΠ΅ совСтов ΠΏΠΎ созданию шаблона элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹, ΠΈ Π² этом Π±Π»ΠΎΠ³Π΅ ΠΌΡ‹ Π΄Π°Π΄ΠΈΠΌ Π²Π°ΠΌ совСты, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ слСдуСт ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΡ€ΠΈ создании PSD-Π΄ΠΈΠ·Π°ΠΉΠ½ для ΠΊΠ°ΠΌΠΏΠ°Π½ΠΈΠΈ ΠΏΠΎ элСктронной ΠΏΠΎΡ‡Ρ‚Π΅.

ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΊΠ°:

ВсС начинаСтся с понимания Ρ‚ΠΈΠΏΠ° HTML-сообщСния, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ. ВсС Ρ‚ΠΈΠΏΡ‹ элСктронных писСм ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π° 2 большиС ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ:
a) Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Π°Ρ рассылка ΠΏΠΎ элСктронной ΠΏΠΎΡ‡Ρ‚Π΅
b) РСкламная элСктронная ΠΏΠΎΡ‡Ρ‚Π° ΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°Ρ…/услугах


Π’ Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Ρ€Π΅ΠΊΠ»Π°ΠΌΠ½Ρ‹Π΅ элСктронныС письма основаны Π½Π° изобраТСниях, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ сопровоТдаСмых ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌ описаниСм, ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ Π±ΡŽΠ»Π»Π΅Ρ‚Π΅Π½ΠΈ ΠΏΠΎ элСктронной ΠΏΠΎΡ‡Ρ‚Π΅ содСрТат ΠΌΠ½ΠΎΠ³ΠΎ тСкста ΠΈ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ являСтся Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ.

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

Одна ΠΈΠ· Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊ Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ шаблонов элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹ β€” максимальная ΡˆΠΈΡ€ΠΈΠ½Π° шаблона 800 ΠΈΠ»ΠΈ 600 пиксСлСй. Для мобильного ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΡˆΠΈΡ€ΠΈΠ½Π° Π΄ΠΎΠ»ΠΆΠ½Π° ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒΡΡ Π΄ΠΎ ~320 пиксСлСй. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ ΠΎΠ±Ρ€Π΅Π·ΠΊΡƒ ΠΈΠ»ΠΈ смСщСниС содСрТимого элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹, Π²Π°ΠΆΠ½ΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ отступы с ΠΎΠ±Π΅ΠΈΡ… сторон. Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ свой ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… 500 пиксСлСй для ΠΌΠ°ΠΊΠ΅Ρ‚Π° для Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ΠΎΠ² ΠΈ 300 пиксСлСй для ΠΌΠ°ΠΊΠ΅Ρ‚Π° для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ, Π΄Π°ΠΆΠ΅ ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π²Ρ‹ Π½Π°Ρ‡Π½Π΅Ρ‚Π΅ ΠΌΠΎΠ·Π³ΠΎΠ²ΠΎΠΉ ΡˆΡ‚ΡƒΡ€ΠΌ эстСтики Π΄ΠΈΠ·Π°ΠΉΠ½Π° своих ΠΊΠ°ΠΌΠΏΠ°Π½ΠΈΠΉ, Π²Π°ΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρƒ вас Π±Ρ‹Π»Π° ΡΡΠ½ΠΎΡΡ‚ΡŒ Π² ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΈ Π²Π°ΡˆΠΈΡ… Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ элСктронной рассылки.

Π‘Π°Π·ΠΎΠ²Ρ‹ΠΉ скСлСт: ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ HTML-Π΄ΠΈΠ·Π°ΠΉΠ½ элСктронного письма

Π›ΡŽΠ±ΠΎΠ΅ элСктронноС письмо состоит ΠΈΠ· 3 основных Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ²:

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ: Π”Π°ΠΆΠ΅ Ссли ваши подписчики ΠΎΡ‚ΠΊΡ€ΠΎΡŽΡ‚ элСктронноС письмо, ΡƒΠ·Π½Π°Π² имя отправитСля ΠΈ строку Ρ‚Π΅ΠΌΡ‹, Π²Π°ΠΆΠ½ΠΎ ΠΈΠΌΠ΅Ρ‚ΡŒ элСмСнт Π±Ρ€Π΅Π½Π΄Π° Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ ΠΏΠ»ΠΎΡ…ΠΎ Π·Π½Π°ΠΊΠΎΠΌ с вашими элСктронными письмами.

Из-Π·Π° ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ совмСстимости с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ ΠΏΠΎΡ‡Ρ‚ΠΎΠ²Ρ‹ΠΌΠΈ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°ΠΌΠΈ ваша элСктронная ΠΏΠΎΡ‡Ρ‚Π° Π΄ΠΎΠ»ΠΆΠ½Π° ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ просмотра элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅, ΠΈ эта опция Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ Π·Π°ΠΌΠ΅Ρ‚Π½ΠΎΠΉ.

НСкоторыС ΠΏΠΎΡ‡Ρ‚ΠΎΠ²Ρ‹Π΅ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρ‹, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Apple Mail, Gmail ΠΈ собствСнныС ΠΏΠΎΡ‡Ρ‚ΠΎΠ²Ρ‹Π΅ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρ‹, ΠΈΠ·Π²Π»Π΅ΠΊΠ°ΡŽΡ‚ ΠΏΠ΅Ρ€Π²Ρ‹Π΅ нСсколько символов ΠΈΠ· вашСй элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹ Π² качСствС тСкста ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ просмотра. ΠŸΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ вашСго PSD-шаблона элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ тСкст ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ просмотра, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ Π²ΠΎ врСмя кодирования, Ρ‡Ρ‚ΠΎΠ±Ρ‹ подписчики Π½Π΅ ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡ‚Ρ‹Π²Π°Π»ΠΈ тСкст послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΎΡ‚ΠΊΡ€ΠΎΡŽΡ‚ элСктронноС письмо. Если Ρƒ вас Π΅ΡΡ‚ΡŒ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ мСню, Π»ΡƒΡ‡ΡˆΠ΅ всСго Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅.

Π’Π΅Π»ΠΎ: Когда ваш подписчик ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ элСктронноС письмо, ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ взгляд являСтся Ρ€Π΅ΡˆΠ°ΡŽΡ‰ΠΈΠΌ. Он опрСдСляСт, Π±ΡƒΠ΄ΡƒΡ‚ Π»ΠΈ ΠΎΠ½ΠΈ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ дальшС ΠΈΠ»ΠΈ ΡƒΠ΄Π°Π»ΡΡ‚ΡŒ (ΠΈΠ»ΠΈ ΠΎΡ‚ΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒΡΡ, Ссли ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ iOS 10) элСктронноС письмо. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ваТная информация Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ прСдоставлСна ​​в ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… 250–400 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части вашСго PSD-Π΄ΠΈΠ·Π°ΠΉΠ½Π° (Ρ‚Π°ΠΊ называСмая Β«Π²Ρ‹ΡˆΠ΅ сгиба») Π² зависимости ΠΎΡ‚ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ экрана устройства. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π±ΠΎΠ³Π°Ρ‚ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ гСроя, Π±Π°Π½Π½Π΅Ρ€ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ простоС привСтствиС.

Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ Ρ‚ΠΎ ΠΆΠ΅ самоС.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ изобраТСния

НСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ Π²ΠΎΠ·Ρ€Π°Π·ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΈΠ² этого, Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ CTA Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части ΠΌΠ°ΠΊΠ΅Ρ‚Π° элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΡŽ числа ΠΊΠ»ΠΈΠΊΠΎΠ² Π² элСктронных ΠΏΠΈΡΡŒΠΌΠ°Ρ… с дСмонстрациСй ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ²/услуг. Помимо ΠΈΡ… размСщСния, ΠΊΠ½ΠΎΠΏΠΊΠ° CTA Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π° ΠΈ Π½Π° Π½Π΅Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΆΠ°Ρ‚ΡŒ большим ΠΏΠ°Π»ΡŒΡ†Π΅ΠΌ Π² вашСм элСктронном письмС PSD.

Π­Ρ‚ΠΎ элСктронноС письмо ΠΎΡ‚ Fitbit β€” прСкрасный ΠΏΡ€ΠΈΠΌΠ΅Ρ€ идСального размСщСния ΠΏΡ€ΠΈΠ·Ρ‹Π²Π° ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ изобраТСния

Π’ зависимости ΠΎΡ‚ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Π΅ΠΌΠΎΠ³ΠΎ сообщСния, Ссли изобраТСния Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹, ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π² вашСм ΠΌΠ°ΠΊΠ΅Ρ‚ шаблона элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½ вашСго элСктронного письма . Если ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Apple ΠΏΡ€Π΅ΠΎΠ±Π»Π°Π΄Π°ΡŽΡ‚ Π² спискС Π²Π°ΡˆΠΈΡ… подписчиков, ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ изобраТСния, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ Π² Π²Π°ΡˆΠΈΡ… ΠΌΠ°ΠΊΠ΅Ρ‚Π°Ρ… элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹, совмСстимы с дисплССм Retina.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ тСкста ΠΈ изобраТСния соотвСтствуСт Π»ΡƒΡ‡ΡˆΠΈΠΌ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ°ΠΌ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΌ Π² вашСй отрасли. Для элСктронных писСм PSD с большим количСством ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ нСсколько ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ продСмонстрированы с использованиСм ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… элСмСнтов, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Π²Ρ€Π°Ρ‰Π°ΡŽΡ‰ΠΈΠΉΡΡ Π±Π°Π½Π½Π΅Ρ€, слайдСр ΠΈΠ»ΠΈ ΠΈΠ½Ρ„ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠ°, Π° Ρ€Π΅Π·Π΅Ρ€Π²Π½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ прСдоставлСн Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ GIF.

ΠžΡΠ½ΠΎΠ²Ρ‹Π²Π°ΡΡΡŒ Π½Π° ΠΌΠΎΠ΄Π΅Π»ΠΈ двиТСния Π³Π»Π°Π·, ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠ³Ρ€Π°Π΅Ρ‚ Ρ€Π΅ΡˆΠ°ΡŽΡ‰ΡƒΡŽ Ρ€ΠΎΠ»ΡŒ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π²Π°ΡˆΠΈΡ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹. Π’ ΠΊΠΎΠ½Ρ†Π΅ ΠΊΠΎΠ½Ρ†ΠΎΠ², это опрСдСляСт, ΠΊΠ°ΠΊ ваши Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½Π½ΡƒΡŽ Π² Π²Π°ΡˆΠΈΡ… элСктронных ΠΏΠΈΡΡŒΠΌΠ°Ρ…. Π‘ΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ для дСмонстрации вашСго ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° для облСгчСния сканирования. (Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ для ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΉ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ)

  • Π Π°Π·Π΄Π΅Π» Flip-flop
  • Π”Π²Π° / Ρ‚Ρ€ΠΈ / Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ столбца
  • ΠŸΠΎΠ»Π½Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹
  • ΠŸΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ
  • ΠœΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π° с тСкстом
  • Π Π°Π·Π΄Π΅Π» ΠΎΡ‚Π·Ρ‹Π²ΠΎΠ²

ΠŸΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств ΠœΠ°ΠΊΠ΅Ρ‚:

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

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π²Ρ‹ Π·Π°ΠΊΠΎΠ½Ρ‡ΠΈΡ‚Π΅ с этим, Π² Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ» Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΅Ρ‰Π΅ ΠΎΠ΄Π½Ρƒ Π²Π΅Ρ‰ΡŒ: Π·Π°ΠΊΠΎΠ½ CAN-SPAM ΠΎΡ‚ 2003 Π³ΠΎΠ΄Π° Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ элСктронноС письмо, отправляСмоС Π² список рассылки, содСрТало ссылку ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ΡŒ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΡŽ свободно ΠΎΡ‚ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ вмСстС с физичСским ΠΏΠΎΡ‡Ρ‚ΠΎΠ²Ρ‹ΠΌ адрСсом отправитСля. НСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ESP Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ ссылку для ΠΎΡ‚ΠΊΠ°Π·Π° ΠΎΡ‚ подписки, Π»ΡƒΡ‡ΡˆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΅Π΅ с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ, ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΡ‹Π΅ ΠΊ ΠΎΠ±Ρ‰Π΅ΠΉ элСктронной ΠΏΠΎΡ‡Ρ‚Π΅:
  • Π¨Ρ€ΠΈΡ„Ρ‚Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… 12-14 ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² для облСгчСния чтСния ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ бСзопасными для элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹.
  • ΠžΠ±Ρ‰Π°Ρ высота шаблона Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π° 1800-2000px, ΠΈΠ½Π°Ρ‡Π΅ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Ρ€Π΅Π·Π°Π½ Π² Gmail.
  • Если это Π½Π΅ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ Π±ΡŽΠ»Π»Π΅Ρ‚Π΅Π½ΡŒ, подписчики Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΎΡ‚Π΄Π°Π΄ΡƒΡ‚ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚Π΅Π½ΠΈΠ΅ Π΄Π»ΠΈΠ½Π½ΠΎΠΌΡƒ элСктронному ΠΏΠΈΡΡŒΠΌΡƒ.
  • Π”ΠΈΠ·Π°ΠΉΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΠΈΡ€ΠΌΠ΅Π½Π½ΠΎΠΌΡƒ Ρ†Π²Π΅Ρ‚Ρƒ ΠΈ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ°ΠΌ.
  • Π’ Ρ†Π΅Π»ΠΎΠΌ элСктронная ΠΏΠΎΡ‡Ρ‚Π° Π΄ΠΎΠ»ΠΆΠ½Π° ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹, Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»Π΅ΠΌ.
  • Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹, Ссли Ρƒ вас Π΅ΡΡ‚ΡŒ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, Π²Π°ΠΌ слСдуСт ΠΈΠ·Π±Π΅Π³Π°Ρ‚ΡŒ добавлСния Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния Π² этот Ρ€Π°Π·Π΄Π΅Π».

ПодвСдСниС ΠΈΡ‚ΠΎΠ³ΠΎΠ²

Ну Π²ΠΎΡ‚! Π’Π°Ρˆ шаблон Π΄ΠΈΠ·Π°ΠΉΠ½Π° элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹ Π³ΠΎΡ‚ΠΎΠ². Uplers ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ с ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹ PSD Π² HTML ΠΈ Π΄Π°ΠΆΠ΅ с ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ всСй ΠΊΠ°ΠΌΠΏΠ°Π½ΠΈΠ΅ΠΉ элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹. ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ своим ΠΎΠΏΡ‹Ρ‚ΠΎΠΌ Π² коммСнтариях Π½ΠΈΠΆΠ΅.

Π’Π°ΠΌ понравился этот пост? ПодСлись!
  • Π‘ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΎ Π² Π±ΡƒΡ„Π΅Ρ€ ΠΎΠ±ΠΌΠ΅Π½Π°

Modern Psd Π”ΠΈΠ·Π°ΠΉΠ½ шаблонов, Ρ‚Π΅ΠΌΡ‹, ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ ΠΈ Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅ΠΌΡ‹Π΅ графичСскиС элСмСнты Π½Π° Dribbble

  1. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ бизнСс-Π±Ρ€ΠΎΡˆΡŽΡ€Ρƒ Square Bifold

    ДСловая Π±Ρ€ΠΎΡˆΡŽΡ€Π° Square Bifold

  2. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Laurus β€” Square Cards

    Laurus β€” ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚

  3. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ 3D Signage: ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠ²

    3D-вывСски: ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠ²

  4. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ подписи элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹

    ЭлСктронная подпись

  5. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ бСсплатный 3D ΠΌΠ°ΠΊΠ΅Ρ‚ iPhone

    БСсплатный 3D ΠΌΠ°ΠΊΠ΅Ρ‚ iPhone

  6. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ PSD-шаблона ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ

    PSD-шаблон ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ

  7. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ шаблон ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΊΠΈ

    Π¨Π°Π±Π»ΠΎΠ½ ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΊΠΈ

  8. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠΎΠΊΠ°ΠΏΡ‹ Π²ΠΈΠ·ΠΈΡ‚Π½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ

    ΠœΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡ‚ΠΈΡ‡Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π²ΠΈΠ·ΠΈΡ‚Π½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ

  9. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… канцСлярских Ρ‚ΠΎΠ²Π°Ρ€ΠΎΠ²

    ΠœΠΎΠΊΠ°ΠΏΡ‹ ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… канцСлярских принадлСТностСй

  10. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½Π°Π±ΠΎΡ€ ΠΌΠΎΠΊΠ°ΠΏΠΎΠ² канцСлярских принадлСТностСй

    Набор ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² канцСлярских принадлСТностСй

  11. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… канцСлярских Ρ‚ΠΎΠ²Π°Ρ€ΠΎΠ²

    ΠœΠΎΠΊΠ°ΠΏΡ‹ ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… канцСлярских принадлСТностСй

  12. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΌΠΎΠΊΠ°ΠΏΡ‹ Π²ΠΈΠ·ΠΈΡ‚Π½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ

    ΠœΠΎΠΊΠ°ΠΏΡ‹ Π²ΠΈΠ·ΠΈΡ‚Π½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ

  13. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ склССнных ΠΏΠ»Π°ΠΊΠ°Ρ‚ΠΎΠ²

    Π‘ΠΊΠ»Π΅Π΅Π½Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ постСров

  14. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ бСсплатный ΠΌΠΎΠΊΠ°ΠΏ удостовСрСния личности.

    БСсплатный ΠΌΠ°ΠΊΠ΅Ρ‚ удостовСрСния личности.

  15. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Мокап ΠšΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ ВсС Π‘Ρ†Π΅Π½Ρ‹

    Мокап Π²ΠΈΠ·ΠΈΡ‚ΠΊΠΈ ВсС сцСны

  16. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΌΠΎΠΊΠ°ΠΏΡ‹ Π²ΠΈΠ·ΠΈΡ‚Π½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ

    ΠœΠΎΠΊΠ°ΠΏΡ‹ Π²ΠΈΠ·ΠΈΡ‚Π½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ

  17. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ шаблона PSD ΠΆΡƒΡ€Π½Π°Π»Π° Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ

    PSD шаблон ΠΆΡƒΡ€Π½Π°Π»Π° Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ

  18. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ бСсплатныС ΠΌΠΎΠΊΠ°ΠΏΡ‹ Π±ΡƒΠΌΠ°ΠΆΠ½Ρ‹Ρ… ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ²

    БСсплатныС ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π±ΡƒΠΌΠ°ΠΆΠ½Ρ‹Ρ… ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ²

  19. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ бСсплатный PSD ΠΌΠ°ΠΊΠ΅Ρ‚ автомобиля

    БСсплатный ΠΌΠ°ΠΊΠ΅Ρ‚ автомобиля Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ PSD

  20. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ PSD ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ

    PSD ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ

  21. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΌΠΎΠΊΠ°ΠΏΡ‹ Π²ΠΈΠ·ΠΈΡ‚Π½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ

    ΠœΠΎΠΊΠ°ΠΏΡ‹ Π²ΠΈΠ·ΠΈΡ‚Π½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ

  22. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ соврСмСнныС ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ΠΌΠΎΠΊΠ°ΠΏΡ‹

    ΠœΠΎΠΊΠ°ΠΏΡ‹ соврСмСнных ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств

  23. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ PSD-шаблон Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠ³ΠΎ ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³Π°

    Π¨Π°Π±Π»ΠΎΠ½ PSD для Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠ³ΠΎ ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³Π°

  24. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΊΠΎΡ€ΠΎΠ±ΠΎΠΊ

    ΠœΠ°ΠΊΠ΅Ρ‚ ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ

Π—Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΡƒΠΉΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ Π²ΠΎΠΉΠ΄ΠΈΡ‚Π΅ Π² систСму

Π˜Π΄Π΅Ρ‚ загрузка…

8 Π»ΡƒΡ‡ΡˆΠΈΡ… способов ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ PSD-Ρ„Π°ΠΉΠ» Π±Π΅Π· Photoshop

Photoshop ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎ справился с Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠΌ Ρ„Π°ΠΉΠ»Π° PSD. Он сохраняСт ΠΏΠΎΠ»Π½ΠΎΠ΅ состояниС Π΅Ρ‰Π΅ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ³ΠΎ изобраТСния, поэтому Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ Π΅Π³ΠΎ ΠΈ Π²ΠΎΠ·ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ ΠΏΠΎΠ·ΠΆΠ΅.

ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ PSD Π½Π΅ являСтся ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠΌ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌΠΈ прилоТСниями, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π½Π°ΡŽΡ‚ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Ρ„Π°ΠΉΠ»Π°. Π’Π°ΡˆΠ° Π»ΡƒΡ‡ΡˆΠ°Ρ ставка? ΠžΠΏΠ»Π°Ρ‚ΠΈΡ‚Π΅ ΠΏΠ»Π°Π½ подписки Adobe Photoshop CC.

Но Ссли Π²Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΠ»ΠΈ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ сСбС этого ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ΡŒ, Ρ‚ΠΎ ΠΊΠ°ΠΊ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ PSD? Π’ этом случаС Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· бСсплатных Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ нашли для вас. Π˜ΠΌΠ΅ΠΉΡ‚Π΅ Π² Π²ΠΈΠ΄Ρƒ, ΠΎΠ΄Π½Π°ΠΊΠΎ, Ρ‡Ρ‚ΠΎ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ фактичСски Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ PSD-Ρ„Π°ΠΉΠ»Ρ‹ β€” ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ PSD-Ρ„Π°ΠΉΠ»Ρ‹ ΠΊΠ°ΠΊ сглаТСнныС изобраТСния. Если Π²Π°ΠΌ Π² любом случаС Π½ΡƒΠΆΠ΅Π½ просмотр плоского изобраТСния, Ρ‚ΠΎ эти Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ стоит ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ.

GIMP Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ вашСй ΠΏΠ΅Ρ€Π²ΠΎΠΉ остановкой ΠΏΡ€ΠΈ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠ΅ бСсплатно ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΈ ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ» PSD. Π­Ρ‚ΠΎ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π»ΡƒΡ‡ΡˆΠ°Ρ бСсплатная Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π° Photoshop, Π½ΠΎ ΠΈ доступная для Windows, Mac ΠΈ Linux, поэтому Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ Π΅Π΅ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π· ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²ΠΎ всСх своих систСмах.

А Ссли нСпонятно, Ρ‚ΠΎ Π΄Π°, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° PSD встроСна прямо Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. НС Π½ΡƒΠΆΠ½ΠΎ Π²ΠΎΠ·ΠΈΡ‚ΡŒΡΡ со сторонними ΠΏΠ»Π°Π³ΠΈΠ½Π°ΠΌΠΈ ΠΈΠ»ΠΈ Ρ‡Π΅ΠΌ-Ρ‚ΠΎ Π΅Ρ‰Π΅.

  1. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ Π€Π°ΠΉΠ» > ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ .
  2. НайдитС ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» PSD.
  3. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ .

ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²ΠΎ GIMP Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ слои Ρ„Π°ΠΉΠ»Π° PSD. НСдостатком являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ слои Π½Π΅ Ρ‡ΠΈΡ‚Π°ΡŽΡ‚ΡΡ Π² GIMP ΠΈΠ»ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ растрированы, Ρ‡Ρ‚ΠΎΠ±Ρ‹ GIMP ΠΌΠΎΠ³ с Π½ΠΈΠΌΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ. Π‘ΠΎΡ…Ρ€Π°Π½Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ²Π΅Ρ€Ρ… PSD ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΡ€Ρ‚ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ», Ссли Π²Ρ‹ ΡΠΎΠ±ΠΈΡ€Π°Π΅Ρ‚Π΅ΡΡŒ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Π΅Π³ΠΎ Π² Photoshop ΠΏΠΎΠ·ΠΆΠ΅.

GIMP β€” это ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ нСсколько прСимущСств (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ просмотра исходного ΠΊΠΎΠ΄Π° Π² любоС врСмя). Π›ΡƒΡ‡ΡˆΠΈΠΉ способ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ„Π°ΠΉΠ» PSD β€” ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΏΠ»Π°Π½ подписки Adobe Photoshop CC, Π½ΠΎ GIMP Ρ…ΠΎΡ€ΠΎΡˆ, Ссли Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π° бСсплатная Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π°.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ: GIMP (бСсплатно)

Paint.NET Ρ‚ΠΎΡ‡Π½ΠΎ Π·Π½Π°Π΅Ρ‚, Ρ‡Π΅ΠΌ ΠΎΠ½ Ρ…ΠΎΡ‡Π΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ: ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· Π»ΡƒΡ‡ΡˆΠΈΡ… Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ² Microsoft Paint, Π½Π΅ Ρ‚Π°ΠΊΠΎΠΉ Ρ€Π°Π·Π΄ΡƒΡ‚ΠΎΠΉ ΠΈΠ»ΠΈ ΠΏΡƒΠ³Π°ΡŽΡ‰Π΅ΠΉ для изучСния, ΠΊΠ°ΠΊ GIMP ΠΈΠ»ΠΈ Adobe Photoshop. Π­Ρ‚ΠΎ Ρ‚ΠΎΡ‡Π½ΠΎ посСрСдинС.

Но Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΌΠΎΡ‰Π½Ρ‹ΠΌ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, установив Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ сторонниС ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹. И Ссли Π²Ρ‹ ΡΠΎΠ±ΠΈΡ€Π°Π΅Ρ‚Π΅ΡΡŒ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, Π΅ΡΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Π°ΠΌ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ: ΠΏΠ»Π°Π³ΠΈΠ½ PSD.

  1. Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ PSD.
  2. Π˜Π·Π²Π»Π΅ΠΊΠΈΡ‚Π΅ содСрТимоС ZIP-Ρ„Π°ΠΉΠ»Π°.
  3. Π‘ΠΊΠΎΠΏΠΈΡ€ΡƒΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» PhotoShop.dll .
  4. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² ΠΏΠ°ΠΏΠΊΡƒ установки Paint.NET (располоТСниС ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ β€” C:/Program Files/paint.net ).
  5. Π’ΡΡ‚Π°Π²ΡŒΡ‚Π΅ Ρ„Π°ΠΉΠ» PhotoShop.dll Π² ΠΏΠΎΠ΄ΠΏΠ°ΠΏΠΊΡƒ FileTypes .
  6. ЗапуститС Paint.NET.

Π‘ установлСнным ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ Π²Ρ‹ смоТСтС Π±Π΅Π· ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ PSD. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ хотя Paint.NET ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ прСкрасно справляСтся со слоями PSD, врСмя ΠΎΡ‚ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°Ρ‚ΡŒΡΡ с ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Paint.NET Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ всС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Photoshop.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ: Paint.NET (бСсплатно)

Если Π²Ρ‹ Π½ΠΈΠΊΠΎΠ³Π΄Π° Ρ€Π°Π½ΡŒΡˆΠ΅ Π½Π΅ ΡΠ»Ρ‹ΡˆΠ°Π»ΠΈ ΠΎ Photopea, вас ΠΆΠ΄Π΅Ρ‚ ΡΡŽΡ€ΠΏΡ€ΠΈΠ·. Π­Ρ‚ΠΎ ΠΌΠ΅Π½Π΅Π΅ извСстноС Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² основном ΠΏΠΎΡ…ΠΎΠΆΠ΅ Π½Π° ΠΎΠ½Π»Π°ΠΉΠ½-Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρƒ Adobe Photoshop ΠΈΠ»ΠΈ GIMP. ΠžΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ это Π½Π΅ Ρ‚Π°ΠΊ Ρ…ΠΎΡ€ΠΎΡˆΠΎ β€” Π²Π΅Π±-прилоТСния Ρ€Π΅Π΄ΠΊΠΎ ΠΏΡ€ΠΈΠ±Π»ΠΈΠΆΠ°ΡŽΡ‚ΡΡ ΠΊ своим Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹ΠΌ Π°Π½Π°Π»ΠΎΠ³Π°ΠΌ, β€” Π½ΠΎ всС ΠΆΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ.

ΠŸΠ»Π°Π½ΠΈΡ€ΠΎΠ²ΠΊΠ° похоТая, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ Ρ‡ΡƒΠ²ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ сСбя ΠΊΠ°ΠΊ Π΄ΠΎΠΌΠ°. Π₯ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ„Π°ΠΉΠ» PSD? Π­Ρ‚ΠΎ просто.

  1. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ Π€Π°ΠΉΠ» > ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ .
  2. НайдитС ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» PSD.
  3. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ .

И самоС интСрСсноС, Ρ‡Ρ‚ΠΎ Photopea ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ слои, Ρ‡Π΅Π³ΠΎ нСльзя ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ ΠΎΡ‚ бСсплатного Π²Π΅Π±-прилоТСния. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, это Π·Π΄ΠΎΡ€ΠΎΠ²ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ бСсплатно Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свои PSD-Ρ„Π°ΠΉΠ»Ρ‹, Π³Π΄Π΅ Π±Ρ‹ Π²Ρ‹ Π½ΠΈ Π½Π°Ρ…ΠΎΠ΄ΠΈΠ»ΠΈΡΡŒ. ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ΡΡŒ ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Ρƒ.

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

Π‘Π°ΠΌΠΎΠ΅ Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π² этом малоизвСстном ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ 500 Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ² ΠΈ ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ 70 Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ², поэтому ΠΎΠ½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для просмотра ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π½ΠΎ ΠΈ для ΠΈΡ… прСобразования.

  1. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ Π€Π°ΠΉΠ» > ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ .
  2. НайдитС ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» PSD.
  3. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ .

ΠŸΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Ρ‚Ρ€Π΅Ρ… Ρ‚ΠΈΠΏΠΎΠ² установки: ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ, стандартный ΠΈ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹ΠΉ. Для минимального трСбуСтся наимСньшСС количСство мСста Π½Π° дискС, ΠΈ это всС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ для открытия Ρ„Π°ΠΉΠ»ΠΎΠ² PSD. НСт нСобходимости Π² надстройках, ΠΏΠ»Π°Π³ΠΈΠ½Π°Ρ… ΠΈΠ»ΠΈ Ρ‡Π΅ΠΌ-Ρ‚ΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠΌ.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ: XnView (бСсплатно)

IrfanView ΠΏΠΎΡ…ΠΎΠΆ Π½Π° XnView Π² Ρ‚ΠΎΠΌ смыслС, Ρ‡Ρ‚ΠΎ Π² основном ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² качСствС срСдства просмотра ΠΈ прСобразования ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Он ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ², сколько XnView, Π½ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ всС Π²Π°ΠΆΠ½Ρ‹Π΅ β€” ΠΈ это всС, Ρ‡Ρ‚ΠΎ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π²Π°ΠΆΠ½ΠΎ, Π²Π΅Ρ€Π½ΠΎ?

Π₯отя IrfanView ΠΌΠΎΠΆΠ΅Ρ‚ Π»Π΅Π³ΠΊΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ плоскиС PSD-Ρ„Π°ΠΉΠ»Ρ‹, ΠΎΠ½ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ ΠΈΡ…, Ссли Π²Ρ‹ сначала Π½Π΅ экспортируСтС ΠΈΡ… Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚.

  1. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ Π€Π°ΠΉΠ» > ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ .
  2. НайдитС ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» PSD.
  3. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ .

ΠœΡ‹ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ это ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² вашСй систСмС. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π΅Π³ΠΎ Π² качСствС основного срСдства просмотра ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΈ ΠΎΠ½ΠΎ вас Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Ρ€Π°Π·ΠΎΡ‡Π°Ρ€ΡƒΠ΅Ρ‚. Π‘Π°ΠΌΠΎΠ΅ приятноС Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΠΎΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠΈΠΉ ΠΈ быстрый. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ IrfanView с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ².

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ: IrfanView (бСсплатно)

ИспользованиС Google Диска Π² качСствС срСдства просмотра Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ странным, Π½ΠΎ Π²Ρ‹ Π²ΠΏΠΎΠ»Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, ΠΈ это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ довольно Ρ…ΠΎΡ€ΠΎΡˆΠΎ. Как ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ‚ΠΈΠΏΡ‹ Ρ„Π°ΠΉΠ»ΠΎΠ², Ρ„Π°ΠΉΠ»Ρ‹ PSD ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ Π½Π° Google ДискС Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅.

  1. ΠŸΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅ страницу Google Диска.
  2. НаТмитС Мой диск ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Ρ„Π°ΠΉΠ»Π° .
  3. НайдитС ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» PSD.
  4. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ .
  5. Π”Π²Π°ΠΆΠ΄Ρ‹ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π΅Π³ΠΎ.

Когда Π±Ρ‹ Π²Ρ‹ использовали Google Диск для этого? ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π½Π΅ Π½Π° своСм ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅ ΠΈ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС. Π’Π°ΠΊΠΆΠ΅ Π»Π΅Π³ΠΊΠΎ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΎΠ±Ρ‰ΠΈΠΌΠΈ Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ Π½Π° Google ДискС, поэтому это ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, Ссли Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π° простая ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° для просмотра PSD, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Ρ€Π°Π±ΠΎΡ‚ΠΎΠΉ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ людьми.

Π­Ρ‚ΠΎΡ‚ послСдний ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Π½Π΅ позволяСт ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ, ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ PSD-Ρ„Π°ΠΉΠ»Ρ‹. Π­Ρ‚ΠΎ просто способ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ PSD Π² Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ PNG ΠΈ JPG. Если это СдинствСнная ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚Π΅Π»ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ PSD-Ρ„Π°ΠΉΠ»Ρ‹, Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½Ρ‹Π΅ шаги.

  1. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ»Ρ‹ .
  2. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» PSD.
  3. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π½ΠΎΠ²Ρ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Ρ„Π°ΠΉΠ»Π°.
  4. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ .
  5. ПослС Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ прСобразования Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ .

ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΈ понятно. Π‘ΠΎΠ»ΡŒΡˆΠ΅ Π½ΠΈΡ‡Π΅Π³ΠΎ.

Если Π²Ρ‹ ΡΠ²Π»ΡΠ΅Ρ‚Π΅ΡΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ Mac, Π²Π°ΠΌ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС β€” Ρƒ вас Π΅ΡΡ‚ΡŒ собствСнная встроСнная ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° для открытия PSD-Ρ„Π°ΠΉΠ»ΠΎΠ². ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Preview довольно Π»Π΅Π³ΠΊΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ PSD-Ρ„Π°ΠΉΠ»Ρ‹.

  1. НайдитС Ρ„Π°ΠΉΠ» PDF ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π΅Π³ΠΎ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ.
  2. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ > ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ просмотр

И это всС, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Π½ΠΎΡΠΈΡ‚ΡŒ нСбольшиС измСнСния ΠΈ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ Π² Ρ€Π°Π·Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ…, Π½ΠΎ всС PSD-Ρ„Π°ΠΉΠ»Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚Π΅ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ просмотра, Π±ΡƒΠ΄ΡƒΡ‚ свСдСны, поэтому Π²Ρ‹ потСряСтС всю ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ слоях Π² Ρ„Π°ΠΉΠ»Π΅.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ Π±Ρ‹ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Adobe Photoshop?

Π­Ρ‚ΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚, поэтому, Ссли ΠΎΠ½ΠΈ вас ΡƒΡΡ‚Ρ€Π°ΠΈΠ²Π°ΡŽΡ‚, ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°ΠΉΡ‚Π΅ ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. Но Ссли Π²Ρ‹ Π½Π°ΠΌΠ΅Ρ€Π΅Π½Ρ‹ ΡΠ΅Ρ€ΡŒΠ΅Π·Π½ΠΎ Π·Π°Π½ΡΡ‚ΡŒΡΡ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ PSD Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ, Π²Π°ΠΌ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ слСдуСт ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎ ΠΏΡ€ΠΈΠΎΠ±Ρ€Π΅Ρ‚Π΅Π½ΠΈΠΈ ΠΏΠ»Π°Π½Π° подписки Adobe Photoshop CC.

Π­Ρ‚ΠΎ особСнно Ρ†Π΅Π½Π½ΠΎ, Ссли Π²Ρ‹ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ β€” нСзависимо ΠΎΡ‚ уровня Π²Π°ΡˆΠΈΡ… Π½Π°Π²Ρ‹ΠΊΠΎΠ². Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‚Π°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ для рСдактирования ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Ρ‡Ρ‚ΠΎ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π² бСсплатных прилоТСниях.

Новый ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΡ… Π² Photoshop CC

Π‘Ρ‚Π°Ρ€Ρ‹ΠΉ способ добавлСния Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΡ… Π² Photoshop

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΌΡ‹ ΡƒΠ·Π½Π°Π΅ΠΌ всС ΠΎ Π½ΠΎΠ²ΠΎΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΡ…, Π΄Π°Π²Π°ΠΉΡ‚Π΅ быстро рассмотрим «старый способ» добавлСния Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΡ…. Π’Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎ ΠΌΡ‹ Π½Π°Ρ‡Π°Π»ΠΈ Π±Ρ‹ с Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Π»ΠΈΠ½Π΅Π΅ΠΊ Photoshop, поднявшись Π΄ΠΎ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΊΠΈ 9.0061 ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ мСню Π² строкС мСню Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части экрана ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Rulers :

ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² мСню Β«ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Β» > Β«Π›ΠΈΠ½Π΅ΠΉΠΊΠΈΒ».

Π­Ρ‚ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Π΅Ρ‚ Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ вдоль Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ ΠΈ Π»Π΅Π²ΠΎΠΉ стороны Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°:

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ Π²ΠΈΠ΄Π½Ρ‹ свСрху ΠΈ слСва.

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΡƒΡŽ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΡƒΡŽ, ΠΌΡ‹ Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ»ΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ слСва ΠΈ, удСрТивая Π½Π°ΠΆΠ°Ρ‚ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΡ‹ΡˆΠΈ, ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΠ»ΠΈ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΡƒΡŽ с Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚:

ΠŸΠ΅Ρ€Π΅Ρ‚Π°ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉ ΠΈΠ· Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ слСва.

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΡƒΡŽ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΡƒΡŽ, ΠΌΡ‹ Ρ‰Π΅Π»ΠΊΠ°Π΅ΠΌ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ Π²Π²Π΅Ρ€Ρ…Ρƒ ΠΈ, снова удСрТивая Π½Π°ΠΆΠ°Ρ‚ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΡ‹ΡˆΠΈ, пСрСтаскиваСм Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΡƒΡŽ Π²Π½ΠΈΠ· с Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚:

ΠŸΠ΅Ρ€Π΅Ρ‚Π°ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉ ΠΈΠ· Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ Π²Π²Π΅Ρ€Ρ…Ρƒ.

Π­Ρ‚ΠΎΡ‚ способ добавлСния Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΡ… ΠΏΡƒΡ‚Π΅ΠΌ пСрСтаскивания ΠΈΡ… с Π»ΠΈΠ½Π΅Π΅ΠΊ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π΄Π°ΠΆΠ΅ Π² послСдних вСрсиях Photoshop, Π½ΠΎ Π² Photoshop CC Π΅ΡΡ‚ΡŒ способ ΠΏΠΎΠ»ΡƒΡ‡ΡˆΠ΅, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ использованиС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° «Новый ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉΒ». Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, ΠΊΠ°ΠΊ это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.

Плагин ΡˆΠΎΡ€Ρ‚ΠΊΠΎΠ΄ΠΎΠ², дСйствий ΠΈ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠ²: ошибка Π² ΡˆΠΎΡ€Ρ‚ΠΊΠΎΠ΄Π΅ [ ads-basics-middle ]

Новый Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉ

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ ΠΊ ΠΎΠΏΡ†ΠΈΠΈ «Новый ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉΒ», ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² мСню View Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части экрана ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ «Новый ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉΒ» . ΠžΠΏΡΡ‚ΡŒ ΠΆΠ΅, это доступно Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Photoshop CC:

.

ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΊ просмотру > Π½ΠΎΠ²Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉ.

ΠžΡ‚ΠΊΡ€ΠΎΠ΅Ρ‚ΡΡ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ «Новый ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉΒ». Из этого Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π° ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π»Π΅Π³ΠΊΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ любоС количСство строк ΠΈ столбцов Π² наш ΠΌΠ°ΠΊΠ΅Ρ‚. ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‡Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ для столбцов ΠΈΠ»ΠΈ Ρ‚ΠΎΡ‡Π½ΡƒΡŽ высоту для строк, ΠΈΠ»ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ΡŒ Photoshop Ρ€Π°ΡΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΈΡ… ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ для нас! ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΆΠ΅Π»ΠΎΠ± ΠΌΠ΅ΠΆΠ΄Ρƒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠΌΠΈ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ поля свСрху, слСва, снизу ΠΈ справа нашСго Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. ΠœΡ‹ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ наш собствСнный ΠΌΠ°ΠΊΠ΅Ρ‚ Π² качСствС прСдустановки, Ρ‡Ρ‚ΠΎΠ±Ρ‹ быстро Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ Π½Π°ΠΌ понадобится!

Если Π²Ρ‹ Ρ€Π°Π½Π΅Π΅ Π½Π΅ использовали Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ «Новый ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉΒ», появится Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ с настройками ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ восСмь столбцов, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ отступом Π² 20 пиксСлСй. Π‘Ρ‚Ρ€ΠΎΠΊΠΈ Π½Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ с настройками ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, Π½ΠΎ ΠΏΠΎΠ·ΠΆΠ΅ ΠΌΡ‹ ΡƒΠ²ΠΈΠ΄ΠΈΠΌ, ΠΊΠ°ΠΊ Π»Π΅Π³ΠΊΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ строки:

Π”ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ «Новый ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉΒ».

Π’ΠΎΡ‚ ΠΊΠ°ΠΊ выглядит ΠΌΠ°ΠΊΠ΅Ρ‚ руководства ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΎΠ΄Π½Π°ΠΊΠΎ, Ρ‡Ρ‚ΠΎ Π΄Π²Π΅ ΠΌΠΎΠΈ исходныС Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ (Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ я Π²Ρ‹Ρ‚Π°Ρ‰ΠΈΠ» ΠΈΠ· Π»ΠΈΠ½Π΅Π΅ΠΊ) всС Π΅Ρ‰Π΅ Π½Π° мСстС, прорСзая Ρ†Π΅Π½Ρ‚Ρ€ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°:

Компоновка Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΡ… ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ плюс Π΄Π²Π΅ исходныС Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅.

ΠžΡ‡ΠΈΡΡ‚ΠΈΡ‚ΡŒ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ всС ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠ΅ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ ΠΈ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½ΠΎΠ²Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΡ…, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Β«ΠžΡ‡ΠΈΡΡ‚ΠΈΡ‚ΡŒ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Β» Π² Π½ΠΈΠΆΠ½Π΅ΠΉ части Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π°:

Π’Ρ‹Π±ΠΎΡ€ Β«Π£Π΄Π°Π»ΠΈΡ‚ΡŒ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅Β».

И Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ эти ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠ΅ руководства ΡƒΡˆΠ»ΠΈ, оставив ΠΌΠ½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½ΠΎΠ²ΡƒΡŽ раскладку ΠΈΠ· восьми столбцов:

ΠŸΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠ΅ руководства ΡƒΠ΄Π°Π»Π΅Π½Ρ‹.

ИзмСнСниС количСства столбцов

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ количСство столбцов Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅, просто ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² ΠΏΠΎΠ»Π΅ Число . Π― ΡƒΠΌΠ΅Π½ΡŒΡˆΡƒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ с 8 Π΄ΠΎ 4 :

УмСньшСниС количСства столбцов с 8 Π΄ΠΎ 4.

Photoshop ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ обновляСт ΠΌΠ°ΠΊΠ΅Ρ‚, измСняя количСство столбцов ΠΈ Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎ распрСдСляя ΠΈΡ… слСва Π½Π°ΠΏΡ€Π°Π²ΠΎ:

ΠœΠ°ΠΊΠ΅Ρ‚ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ содСрТит Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ равноотстоящих столбца вмСсто восьми, с отступом Π² 20 пиксСлСй ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ.

Π’Π°Ρ€ΠΈΠ°Π½Ρ‚ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ просмотра

Если Π²Ρ‹ Π½Π΅ Π²ΠΈΠ΄ΠΈΡ‚Π΅ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ просмотр Π²Π°ΡˆΠΈΡ… ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ просмотр Π² Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ (Ρ„Π»Π°ΠΆΠΎΠΊ):

Π”ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ установлСн Ρ„Π»Π°ΠΆΠΎΠΊ ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ просмотр.

Π—Π°ΠΌΠ΅Π½Π° ΠΆΠ΅Π»ΠΎΠ±Π°

ΠŸΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡ‚Π²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρƒ столбцами (ΠΈ строками) извСстно ΠΊΠ°ΠΊ ΠΆΠ΅Π»ΠΎΠ± . Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ ΠΆΠ΅Π»ΠΎΠ±, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² ΠΏΠΎΠ»Π΅ Gutter . Π Π°Π·ΠΌΠ΅Ρ€ поля ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ составляСт 20 пиксСлСй, Ρ‡Ρ‚ΠΎ добавляСт 20 пиксСлСй пространства ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ столбцом. На самом Π΄Π΅Π»Π΅ я ΡΠΎΠ±ΠΈΡ€Π°ΡŽΡΡŒ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ ΠΆΠ΅Π»ΠΎΠ±, Π²Ρ‹Π΄Π΅Π»ΠΈΠ² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Gutter с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΡ‹ΡˆΠΈ ΠΈ Π½Π°ΠΆΠ°Π² Backspace (Win) / Π£Π΄Π°Π»ΠΈΡ‚ΡŒ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ (Mac) Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π΅. Π­Ρ‚ΠΎ очистит Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΆΠ΅Π»ΠΎΠ±Π° ΠΈ оставит ΠΏΠΎΠ»Π΅ пустым:

Π£Π΄Π°Π»Π΅Π½ΠΈΠ΅ пространства ΠΌΠ΅ΠΆΠ΄Ρƒ столбцами ΠΏΡƒΡ‚Π΅ΠΌ очистки значСния Gutter.

ΠŸΡ€ΠΈ пустом ΠΏΠΎΠ»Π΅ Gutter столбцы большС Π½Π΅ Ρ€Π°Π·Π΄Π΅Π»ΡΡŽΡ‚ΡΡ ΠΏΡ€ΠΎΠ±Π΅Π»Π°ΠΌΠΈ:

ΠŸΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡ‚Π²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρƒ столбцами ΡƒΠ΄Π°Π»Π΅Π½ΠΎ.

Π£ΠΊΠ°Π·Π°Π½ΠΈΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ столбца

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Photoshop автоматичСски измСняСт Ρ€Π°Π·ΠΌΠ΅Ρ€ столбцов Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ Π±Ρ‹Π»ΠΈ Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎ распрСдСлСны ΠΏΠΎ всСму Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρƒ слСва Π½Π°ΠΏΡ€Π°Π²ΠΎ, Π½ΠΎ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ, ввСдя Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² ΠΏΠΎΠ»Π΅ 9.0061 Π¨ΠΈΡ€ΠΈΠ½Π° поля . НапримСр, я Π²Π²Π΅Π΄Ρƒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ для своих столбцов 150 пиксСлСй :

.

Π’Π²ΠΎΠ΄ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ столбцов.

Photoshop снова обновляСт ΠΌΠ°ΠΊΠ΅Ρ‚, Π½Π° этот Ρ€Π°Π· устанавливая ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ столбца Ρ€ΠΎΠ²Π½ΠΎ Π½Π° 150 пиксСлСй:

ΠœΠ°ΠΊΠ΅Ρ‚ послС указания ΡˆΠΈΡ€ΠΈΠ½Ρ‹ столбцов.

Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ»ΠΎΠ½Π½

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ столбцы большС Π½Π΅ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅. ВмСсто этого ΠΎΠ½ΠΈ смСщСны Π²Π»Π΅Π²ΠΎ. Π§Ρ‚ΠΎΠ±Ρ‹ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ Π²Π²Π΅Π»ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π¦Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½Ρ‹Π΅ столбцы ΠžΠΏΡ†ΠΈΡ Π² Π½ΠΈΠΆΠ½Π΅ΠΉ части Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π°:

Π’ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΠΎΠΏΡ†ΠΈΠΈ Β«Π¦Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½Ρ‹Π΅ столбцы».

Если Ρ„Π»Π°ΠΆΠΎΠΊ Β«Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ столбцы» установлСн, столбцы снова Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅:

ΠœΠ°ΠΊΠ΅Ρ‚ послС цСнтрирования столбцов.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ строк

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ строки Π² ΠΌΠ°ΠΊΠ΅Ρ‚, сначала Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Rows (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΎΠ½ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½):

Π’ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ строк.

Π—Π°Ρ‚Π΅ΠΌ просто Π²Π²Π΅Π΄ΠΈΡ‚Π΅ Π½ΡƒΠΆΠ½ΠΎΠ΅ количСство строк Π² ΠΏΠΎΠ»Π΅ 9.0061 ПолС Π½ΠΎΠΌΠ΅Ρ€Π° . Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ввСсти ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ высоту для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ строки Π² ΠΏΠΎΠ»Π΅ Высота ΠΈΠ»ΠΈ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ пустым ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ΡŒ Photoshop Ρ€Π°ΡΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΈΡ… ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ввСсти Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Gutter , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ пространство ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ строкой.

Π’ ΠΌΠΎΠ΅ΠΌ случаС я ΡΠΎΠ±ΠΈΡ€Π°ΡŽΡΡŒ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ количСство строк Π½Π° 3 , Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ количСство столбцов Π½Π° 3 . Π― ΠΎΡΡ‚Π°Π²Π»ΡŽ ΠΏΠΎΠ»Π΅ Β«Π¨ΠΈΡ€ΠΈΠ½Π°Β» для столбцов ΠΈ ΠΏΠΎΠ»Π΅ «Высота» для строк пустыми, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ΡŒ Photoshop Ρ€Π°ΡΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΈΡ… ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ, ΠΈ я Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡΡ‚Π°Π²Π»ΡŽ пустыми поля Gutter:

Установка столбцов ΠΈ строк Π½Π° 3.

Π­Ρ‚ΠΎ быстрый ΠΈ простой способ создания стандартной сСтки 3 Π½Π° 3, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ я, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π·Π°Ρ…ΠΎΡ‡Ρƒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΏΠΎΡ€ΡΠ΄ΠΎΡ‡ΠΈΡ‚ΡŒ ΠΈ ΡΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ элСмСнты Π² ΠΌΠΎΠ΅ΠΌ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Β«ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ Ρ‚Ρ€Π΅Ρ‚Π΅ΠΉΒ»:

Бтандартная сСтка 3 Π½Π° 3 Π»Π΅Π³ΠΊΠΎ создаСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ «Новый ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉΒ».

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Π΅ΠΉ

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ поля ΠΏΠΎ краям Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, сначала Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Margin , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π΅Π³ΠΎ, Π·Π°Ρ‚Π΅ΠΌ Π²Π²Π΅Π΄ΠΈΡ‚Π΅ количСство мСста, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ, Π² ΠΏΠΎΠ»Π΅ ВСрхняя , ЛСвая , НиТняя ΠΈ ΠŸΡ€Π°Π²Π°Ρ ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ. Π’ ΠΌΠΎΠ΅ΠΌ случаС я ΡƒΡΡ‚Π°Π½ΠΎΠ²Π»ΡŽ всС Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ значСния Π½Π° 20 px :

.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Π΅ΠΉ ΠΊ ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ.

Π­Ρ‚ΠΎ добавляСт 20 пиксСлСй пространства Π²ΠΎΠΊΡ€ΡƒΠ³ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΡ… ΠΊΡ€Π°Π΅Π² ΠΌΠΎΠ΅Π³ΠΎ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Photoshop автоматичСски измСняСт Ρ€Π°Π·ΠΌΠ΅Ρ€ столбцов ΠΈ строк соотвСтствСнно:

Π’ΠΎΡ‚ ΠΆΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚ 3 Π½Π° 3 с Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½Ρ‹ΠΌΠΈ полями.

ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π΄Π°ΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля, просто ввСдя ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния. ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ ΠΏΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ элСмСнтов Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ ΠΈΠ»ΠΈ ΠΏΡ€ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅ элСмСнтов, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°Π΅Ρ‚ Π²ΠΈΠ΄ΠΈΠΌΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° (холст). Π― измСню ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ· Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ (свСрху, слСва, снизу ΠΈ справа) Π½Π° 9.0061 -20 пиксСлСй :

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΏΠΎΠ»Π΅ΠΉ ΠΊ ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ.

Π­Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ ΠΌΠ½Π΅ Ρ‚Π΅ ΠΆΠ΅ поля ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 20 пиксСлСй, Π½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅Ρ‚ ΠΈΡ… Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ области Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. И снова Photoshop автоматичСски измСняСт Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ столбцов ΠΈ строк:

.

Поля Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ находятся Π²Π½Π΅ области Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, Π° Π½Π΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ.

Π‘ΠΎΡ…Ρ€Π°Π½Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉ Π² качСствС прСдустановки

Если Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ Π²Π°ΠΌ потрСбуСтся снова ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ этот ΠΆΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ врСмя, сохранив ΠΌΠ°ΠΊΠ΅Ρ‚ Π² качСствС прСдустановки. НаТмитС Π½Π° ПолС Preset Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π° (Π³Π΄Π΅ написано Β«CustomΒ»):

НаТатиС Π½Π° ΠΏΠΎΠ»Π΅ Π²Ρ‹Π±ΠΎΡ€Π° Preset.

Π­Ρ‚ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ мСню с нСсколькими встроСнными прСдустановлСнными ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈ Π½Π° Π²Ρ‹Π±ΠΎΡ€ (8 столбцов, 12 столбцов, 18 столбцов ΠΈ 24 столбца), Π½ΠΎ Π½Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ прСсСт :

Π’Ρ‹Π±ΠΎΡ€ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° Β«Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ прСдустановку».

Когда появится Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Β«Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒΒ», Π²Π²Π΅Π΄ΠΈΡ‚Π΅ ΠΎΠΏΠΈΡΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ имя для Π½ΠΎΠ²ΠΎΠ³ΠΎ прСсСта Π² ΠΏΠΎΠ»Π΅ Β«Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊ Β». Π― Π½Π°Π·ΠΎΠ²Ρƒ свой Β«cols-3-rows-3-margins-neg20pxΒ». Π—Π°Ρ‚Π΅ΠΌ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠ°:

ΠŸΡ€ΠΈΡΠ²ΠΎΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π½ΠΈ ΠΈ сохранСниС Π½ΠΎΠ²ΠΎΠ³ΠΎ прСсСта.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° ΠΌΠ°ΠΊΠ΅Ρ‚ сохранСн ΠΊΠ°ΠΊ прСдустановка, Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ Π²Π°ΠΌ понадобится, Π²Ρ‹ смоТСтС быстро Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΈΠ· списка прСдустановок:

ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠ°Ρ прСдустановка Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ отобраТаСтся Π² спискС.

Π‘ΠΎΠ·Π΄Π°Π² Π½ΡƒΠΆΠ½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉ, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ OK , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ «Новый ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉΒ»:

НаТмитС OK, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚.

Π‘ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ ΠΈ очистка Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΡ…

Π§Ρ‚ΠΎΠ±Ρ‹ Π²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉ ΠΈΠ· Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ мСню View , Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Show , Π·Π°Ρ‚Π΅ΠΌ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Guides . Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ Ρ‚ΠΎ ΠΆΠ΅ самоС Π΅Ρ‰Π΅ Ρ€Π°Π·, Ρ‡Ρ‚ΠΎΠ±Ρ‹ снова Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π΅Π³ΠΎ. Или просто Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Ctrl+; (ПобСда) / Команда+; (Mac) Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π΅ для Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΈ Π²Ρ‹ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΡ…:

ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² Β«Π’ΠΈΠ΄Β» > Β«ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΒ» > Β«ΠΠ°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅Β», Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΎΡ‡ΠΈΡΡ‚ΠΈΡ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉ, ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ View ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Clear Guides :

ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΊ просмотру > ΠΎΡ‡ΠΈΡΡ‚ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Π²Π΅Π±-ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ Photoshop?

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Π²Π΅Π±-шаблон PSD? Π’Π΅Π±-шаблон PSD β€” это Π½Π΅Π·Π°ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π²Π΅Π±-сайт. Он содСрТит всС Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ элСмСнты Π²Π΅Π±-сайта, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Ρ„ΠΎΠ½, изобраТСния, ΠΌΠ°ΠΊΠ΅Ρ‚, Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΡƒ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅. Но здСсь Π½Π΅Ρ‚ HTML ΠΈΠ»ΠΈ CSS. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ слой Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ элСмСнты для Π²Π΅Π±-сайта.

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

Π§Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Π²Π΅Π±-шаблон?

Π¨Π°Π±Π»ΠΎΠ½Ρ‹ Π²Π΅Π±-сайтов β€” это ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΡƒΠΏΠΎΡ€ΡΠ΄ΠΎΡ‡ΠΈΠ²Π°Ρ‚ΡŒ содСрТимоС Π½Π° Π²Π΅Π±-страницС для создания простого, Π½ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½Π½ΠΎΠ³ΠΎ Π²Π΅Π±-сайта. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅Ρ‚Π°ΡΠΊΠΈΠ²Π°Ρ‚ΡŒ элСмСнты, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π±Π»ΠΎΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Ρ„ΠΎΡ‚ΠΎΠ³Π°Π»Π΅Ρ€Π΅ΠΈ, Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡ‹ ΠΈ Ρ‚. Π΄., Π² шаблон, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ Ρ‚Π²ΠΎΠΉ собствСнный.

Какова Π²Π°ΠΆΠ½ΠΎΡΡ‚ΡŒ шаблона PSD Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅?

Π’ΠΈΠΏ Ρ„Π°ΠΉΠ»Π° PSD сохраняСт Π΄ΠΈΠ·Π°ΠΉΠ½ Π² Π²ΠΈΠ΄Π΅ многослойных ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Ρ‡Ρ‚ΠΎ Ρ‡Ρ€Π΅Π·Π²Ρ‹Ρ‡Π°ΠΉΠ½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ для Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ рСдактирования (ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ рСдактирования) Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… частСй Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π‘ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ слоСм ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ, Π½Π΅ затрагивая ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ элСмСнты Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Как Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ Π² Photoshop?

ПослС запуска Photoshop Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Β«Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒΒ» ΠΈΠ»ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Β«Control+NΒ» (Windows) ΠΈΠ»ΠΈ Β«Command+NΒ» (Mac OS). Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Β«Π€Π°ΠΉΠ»Β» > Β«Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒΒ». Π—Π°Ρ‚Π΅ΠΌ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ Π²Π²Π΅Ρ€Ρ…Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹, подходящиС для вашСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°Ρ‡Π°Ρ‚ΡŒ с шаблона с Π±ΠΎΠ³Π°Ρ‚Ρ‹ΠΌ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΈΠ»ΠΈ Π½Π°Π±ΠΎΡ€Π° настроСк, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ пустой Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚.

КакиС ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Ρ‚ΠΈΠΏΡ‹ шаблонов Π²Π΅Π±-сайтов?

БущСствуСт Π΄Π²Π° основных Ρ‚ΠΈΠΏΠ° шаблонов Π²Π΅Π±-сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ слСдуСт ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ создании своСго ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-сайта. Π­Ρ‚ΠΎ статичСскиС ΠΈΠ»ΠΈ HTML-ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ ΠΈ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ WordPress.

Как ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Π΅Π±-шаблон?

Когда Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ²ΡˆΠΈΠΉΡΡ шаблон Ρƒ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ поставщика, просто Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ Π΅Π³ΠΎ Π½Π° свой ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€. Π—Π°Ρ‚Π΅ΠΌ, просматривая свой сайт WordPress Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Β«Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄Β», Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ просто Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ» Π΄ΠΈΠ·Π°ΠΉΠ½Π° шаблона, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΠ»ΠΈ, ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΅Π³ΠΎ прямо Π½Π° сайт.

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Π΅Π±-шаблон?

  1. Π—Π½Π°ΠΉΡ‚Π΅ Ρ€Π°Π·Π½ΠΈΡ†Ρƒ ΠΌΠ΅ΠΆΠ΄Ρƒ Π²Π΅Π±-сайтом ΠΈ шаблоном
  2. ΠŸΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ шаблон выглядСл
  3. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ шаблон
  4. Π”Π°ΠΉΡ‚Π΅ ΡˆΠ°Π±Π»ΠΎΠ½Ρƒ логичСскоС имя, понятноС всСм Π² вашСй ΠΊΠΎΠΌΠ°Π½Π΄Π΅
  5. НачнитС с Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°
  6. Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½
  7. Π’Ρ‰Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ создавайтС домашнюю страницу.

Π§Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ PSD Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅?

PSD (Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Photoshop) β€” это Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Ρ„Π°ΠΉΠ»Π° изобраТСния, встроСнный Π² популярноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Adobe Photoshop. Π­Ρ‚ΠΎ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ для рСдактирования ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ нСсколько слоСв изобраТСния ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ изобраТСния. Π€Π°ΠΉΠ»Ρ‹ PSD ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для хранСния высококачСствСнных графичСских Π΄Π°Π½Π½Ρ‹Ρ….

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ PSD?

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ PSD-Ρ„Π°ΠΉΠ»? Π€Π°ΠΉΠ»Ρ‹ PSD β€” это собствСнный Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Ρ„Π°ΠΉΠ»ΠΎΠ² Adobe Photoshop Π’Ρ‹, вСроятно, Π²ΠΈΠ΄Π΅Π»ΠΈ Ρ„Π°ΠΉΠ»Ρ‹ с Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° psd, особСнно Ссли Π²Ρ‹ Π±Ρ‹Π»ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ Adobe Photoshop. Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹ Photoshop, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‡Π°Ρ‰Π΅ всСго ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌΠΈ ΠΈ Ρ…ΡƒΠ΄ΠΎΠΆΠ½ΠΈΠΊΠ°ΠΌΠΈ, ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ собой ΠΌΠΎΡ‰Π½Ρ‹Π΅ инструмСнты для хранСния ΠΈ создания Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

Π§Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ PSD для WordPress?

ΠŸΡ€ΠΎΡ‰Π΅ говоря, Β«PSD to WordPress serviceΒ» β€” это ΠΊΠΎΠ³Π΄Π° ΠΊΡ‚ΠΎ-Ρ‚ΠΎ Π±Π΅Ρ€Π΅Ρ‚ PSD-Ρ„Π°ΠΉΠ»Ρ‹ вашСго Π½ΠΎΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π²Π΅Π±-сайта ΠΈ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ ΠΈΡ… Π² ΠΏΠΎΠ»Π½ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΡƒΡŽ Ρ‚Π΅ΠΌΡƒ WordPress. Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, Π²Ρ‹ Π²Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ Π² Π΄Π²Π΅Ρ€ΡŒ с Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΈ Π²Ρ‹ΠΉΡ‚ΠΈ с Ρ‚Π΅ΠΌΠΎΠΉ WordPress.

Как Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹?

  1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠΈΡ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ шаблон.
  2. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡƒ Β«Π€Π°ΠΉΠ»Β».
  3. На экранС Β«Π€Π°ΠΉΠ»Β» Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ Β«ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹Β». ΠŸΠΎΡΠ²ΠΈΡ‚ΡΡ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Β«ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ WordΒ».
  4. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ «Надстройки» Π² Π»Π΅Π²ΠΎΠΉ части Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π° Β«ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ WordΒ».
  5. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Β«Π¨Π°Π±Π»ΠΎΠ½Ρ‹Β» Π² Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡΡ спискС Β«Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅Β»
  6. НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈΒ».

Π“Π΄Π΅ я ΠΌΠΎΠ³Ρƒ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ бСсплатныС ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ Photoshop?

  • 365psd.
  • Brusheezy: БСсплатныС PSD.
  • пиксСлСй ΠΏΡ€Π΅ΠΌΠΈΡƒΠΌ-класса.
  • Dribbble: бСсплатныС Ρ„Π°ΠΉΠ»Ρ‹ PSD.
  • Freepik: бСсплатныС PSD-Ρ„Π°ΠΉΠ»Ρ‹.
  • Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π€ΠΎΡ‚ΠΎΡˆΠΎΠΏ бСсплатно.
  • FreePSDFiles. net.

Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ шаблон Π² Photoshop?

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

КакиС ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ 3 Ρ‚ΠΈΠΏΠ° Π²Π΅Π±-сайтов?

Π’Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ Π±Ρ‹Π²Π°Π΅Ρ‚ Ρ‚Ρ€Π΅Ρ… Π²ΠΈΠ΄ΠΎΠ²: статичСский, динамичСский ΠΈΠ»ΠΈ CMS ΠΈ элСктронная коммСрция.

Π₯ΠΎΡ€ΠΎΡˆΠΈ Π»ΠΈ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹?

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

КакиС Π±Ρ‹Π²Π°ΡŽΡ‚ Ρ‚ΠΈΠΏΡ‹ шаблонов?

  • Π¨Π°Π±Π»ΠΎΠ½Ρ‹ сайтов.
  • Π€Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹.
  • Π¨Π°Π±Π»ΠΎΠ½Ρ‹ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.
  • шаблонов ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.
  • Π¨Π°Π±Π»ΠΎΠ½Ρ‹ Ρ„ΠΎΡ€ΠΌ.
  • Π¨Π°Π±Π»ΠΎΠ½Ρ‹ содСрТимого страницы.
  • Π¨Π°Π±Π»ΠΎΠ½Ρ‹ элСмСнтов конструктора ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.
  • Π¨Π°Π±Π»ΠΎΠ½Ρ‹ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ΠΎΠ².

Π§Ρ‚ΠΎ Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅ ΠΏΠΎ шаблонам Как Π²Ρ‹ добавляСтС Π½Π° свою Π²Π΅Π±-страницу?

Π¨Π°Π±Π»ΠΎΠ½Ρ‹ β€” это Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ Π²Π΅Π±-сайты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ выглядСли ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΈ свСТими, Π½ΠΎ ΠΏΡ€ΠΈ этом Π·Π½Π°ΠΊΠΎΠΌΡ‹ΠΌΠΈ. Π¨Π°Π±Π»ΠΎΠ½Ρ‹ созданы ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ ΠΈ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ созданиС Π²Π΅Π±-сайтов. Π’Π°ΠΌ, Π³Π΄Π΅ ΠΊΠΎΠ³Π΄Π°-Ρ‚ΠΎ для создания Π²Π΅Π±-сайта Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π»ΠΈΡΡŒ Π΄ΠΎΡ€ΠΎΠ³ΠΈΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΈ программисты, ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‚ высокоС качСство ΠΏΡ€ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹Ρ… Π·Π°Ρ‚Ρ€Π°Ρ‚Π°Ρ… ΠΈΠ»ΠΈ Π²ΠΎΠΎΠ±Ρ‰Π΅ бСсплатно.

Какова Ρ†Π΅Π»ΡŒ Π²Π΅Π±-сайта?

МногиС ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ свои Π²Π΅Π±-сайты для привлСчСния Π»ΠΈΠ΄ΠΎΠ² ΠΈΠ»ΠΈ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ², Π½ΠΎ Π½Π° самом Π΄Π΅Π»Π΅ Π½Π΅ ΡΠΎΠ²Π΅Ρ€ΡˆΠ°ΡŽΡ‚ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΡ€ΠΎΠ΄Π°ΠΆΠΈ. ВмСсто этого Ρ†Π΅Π»ΡŒ Π²Π΅Π±-сайта состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ ΠΊΠ²Π°Π»ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ² ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ΡŒ ΠΈΠΌ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ свою ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ бизнСсу, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π·Π°Ρ‚Π΅ΠΌ свяТСтся с коммСрчСским Π·Π²ΠΎΠ½ΠΊΠΎΠΌ.

Для Ρ‡Π΅Π³ΠΎ Π½ΡƒΠΆΠ΅Π½ HTML-шаблон?

Π’Π΅Π³ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² качСствС ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° для хранСния Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ содСрТимого HTML, скрытого ΠΎΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ страницы. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΎ ΠΏΠΎΠ·ΠΆΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот Ρ‚Π΅Π³, Ссли Ρƒ вас Π΅ΡΡ‚ΡŒ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ снова ΠΈ снова, Π½ΠΎ Π½Π΅ Ρ€Π°Π½ΡŒΡˆΠ΅, Ρ‡Π΅ΠΌ Π²Ρ‹ попроситС ΠΎΠ± этом.

Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ шаблон PSD?

ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» PSD Π² Adobe Photoshop. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ любой тСкст с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ тСкстового инструмСнта (горячая клавиша Β«TΒ»). Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» изобраТСния, Π° Π·Π°Ρ‚Π΅ΠΌ просто ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ Π΅Π³ΠΎ Π² свой шаблон, ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΉ Π² Photoshop. Когда Π²Ρ‹ вноситС всС измСнСния Π² свой Ρ„Π°ΠΉΠ» Β«PSDΒ», Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Π½Ρ‹Π΅ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ шаблон Ρ„ΠΎΠ½Π° Π² Photoshop?

  1. Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Photoshop бСсплатно.
  2. ΠžΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ Photoshop Π΄ΠΎ послСднСй вСрсии, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эти Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ
  3. На ΠΏΠ°Π½Π΅Π»ΠΈ Β«Π‘Π»ΠΎΠΈΒ» Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ слой «МодСль».
  4. ΠŸΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Shift Edge Π²Π»Π΅Π²ΠΎ (-100%)
  5. На ΠΏΠ°Π½Π΅Π»ΠΈ Β«Π‘Π»ΠΎΠΈΒ» Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Β«Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ маску слоя».

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Π΅Π±-сайт с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML?

  1. Π¨Π°Π³ 1: ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Π‘Π»ΠΎΠΊΠ½ΠΎΡ‚ (ПК) Windows 8 ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ·Π΄Π½Π΅ΠΉ вСрсии: .
  2. Π¨Π°Π³ 1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ TextEdit (Mac) ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Finder > ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ > TextEdit
  3. Π¨Π°Π³ 2. ΠΠ°ΠΏΠΈΡˆΠΈΡ‚Π΅ ΠΊΠΎΠ΄ HTML
  4. Π¨Π°Π³ 3. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ HTML-страницу
  5. Π¨Π°Π³ 4. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ HTML-страницу Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ шаблон страницы HTML?

HTML-шаблон ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ части: ОбъявлСниС Ρ‚ΠΈΠΏΠ° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° (ΠΈΠ»ΠΈ doctype) Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ ΠšΠΎΠ΄ΠΈΡ€ΠΎΠ²ΠΊΠ° символов ΠœΠ΅Ρ‚Π°-элСмСнт ΠΎΠΊΠ½Π° просмотра.

МоТно Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ Π²Π΅Π±-сайтов?

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ Π—Π°Ρ‚Π΅ΠΌ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ шаблон для создания Π²Π΅Π±-сайта Π±Π΅Π· нСобходимости Π½Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°. ΠŸΡ€ΠΎΡΡ‚ΠΎ внСситС нСсколько ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²ΠΎΠΊ, ΠΏΡ€ΠΎΠ²Π΅Π΄ΠΈΡ‚Π΅ нСбольшоС тСстированиС, ΠΈ всС Π³ΠΎΡ‚ΠΎΠ²ΠΎ. ΠŸΡ€ΠΈ этом ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ идСально подходят для Π²Π΅Π±-сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ практичСски Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ кодирования.

Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ шаблон сайта?

  1. Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ ΠΈ просмотритС свой HTML-шаблон. Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ шаблон, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ
  2. НайдитС Ρ‚Π΅Π³ «Имя» Π² инспСкторС
  3. Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚Π΅Π³ Π² HTML
  4. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ своС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅
  5. ИзмСнСниС ссылок Π½Π° ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ сСти
  6. Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π΄Π΅Π» «О ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅Β»
  7. Услуги ΠΏΠΎ настройкС Π Π°Π·Π΄Π΅Π»
  8. Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ тСкст ΠΎΠ± авторских ΠΏΡ€Π°Π²Π°Ρ….

МоТСм Π»ΠΈ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ бСсплатный шаблон для Π²Π΅Π±-сайта?

Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π²Π΅Π±-хостингов ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Π²Π΅Π±-сайтов ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ своим ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°ΠΌ бСсплатныС ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для быстрого создания своих Π²Π΅Π±-сайтов МногиС ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠ°Ρ‚, Ρ‡Ρ‚ΠΎ бСсплатныС ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ всС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ΅ для достиТСния успСха, Ссли ΠΎΠ½ΠΈ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ ΠΌΠΈΡ€ΠΈΡ‚ΡŒΡΡ с нСдостатками ΠΈΡ… использования.

КакоС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°?

  1. Викс. Π›ΡƒΡ‡ΡˆΠ΅Π΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС для Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Ссли Π²Ρ‹ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚Π΅
  2. AdobeXD. Π›ΡƒΡ‡ΡˆΠ΅Π΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС для Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° для прототипирования
  3. Π£ΠΈΠ±Π»ΠΈ. Π›ΡƒΡ‡ΡˆΠ΅Π΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС для Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° для e-com
  4. Π’Π΅Π±-ΠΏΠΎΡ‚ΠΎΠΊ. Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ конструктор сайтов для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…
  5. Лаборатория ΠΌΠΎΠ΄Π΅Π»Π΅ΠΉ. Π›ΡƒΡ‡ΡˆΠ΅Π΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС для Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° для систСм проСктирования Π·Π΄Π°Π½ΠΈΠΉ
  6. Бутстрап
  7. Π²ΠΎΠ·Π²Ρ‹ΡˆΠ΅Π½Π½Ρ‹ΠΉ тСкст 3
  8. WordPress.org.

Π“Π΄Π΅ бСсплатно ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ сайт?

  1. Wix β€” Π»ΡƒΡ‡ΡˆΠΈΠΉ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΉ конструктор сайтов.
  2. GoDaddy β€” самый быстрый ΠΈ эффСктивный конструктор.
  3. Weebly β€” идСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΌΠ°Π»ΠΎΠ³ΠΎ бизнСса.
  4. Jimdo – конструктор Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ².
  5. Site123 β€” создано для простых Π²Π΅Π±-сайтов.
  6. ΠŸΠΎΡ€Π°Π·ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ β€” создано для простых Π²Π΅Π±-сайтов.
  7. Webflow β€” Π»ΡƒΡ‡ΡˆΠΈΠΉ для Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ².

БСсплатСн Π»ΠΈ ΠšΠΎΠ½ΡΡ‚Ρ€ΡƒΠΊΡ‚ΠΎΡ€ Π²Π΅Π±-сайтов Wix?

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ бСсплатный ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ Π²Π΅Π±-сайт с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Wix Π‘ Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ 500 настраиваСмых, ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… шаблонов, бСсплатным Π½Π°Π΄Π΅ΠΆΠ½Ρ‹ΠΌ Π²Π΅Π±-хостингом, ΠΌΠΎΡ‰Π½Ρ‹ΠΌΠΈ инструмСнтами SEO ΠΈ круглосуточной ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ², Wix β€” это большС, Ρ‡Π΅ΠΌ просто конструктор Π²Π΅Π±-сайтов, это комплСксноС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для ΠΎΠ½Π»Π°ΠΉΠ½-бизнСса. .

Как ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ PSD Π² HTML?

  1. Π¨Π°Π³ 1. Π Π°Π·Π±Π΅ΠΉΡ‚Π΅ PSD Π½Π° части
  2. Π¨Π°Π³ 2. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³ΠΎΠ²
  3. Π¨Π°Π³ 3: Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ HTML
  4. Π¨Π°Π³ 4. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Ρ„Π°ΠΉΠ»ΠΎΠ² стилСй
  5. Π¨Π°Π³ 5: ΠžΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΡ Π½Π°Π±ΠΎΡ€Π° Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°
  6. Π¨Π°Π³ 6. ВзаимодСйствиС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ сцСнария Java
  7. Π¨Π°Π³ 7: послСдний ΡˆΡ‚Ρ€ΠΈΡ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΌ.

Как ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ JPEG Π² Photoshop?

  1. Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ jpg-Ρ„Π°ΠΉΠ»(Ρ‹) Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ»Ρ‹ с ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°, Google Диска, Dropbox, URL ΠΈΠ»ΠΈ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΠ² ΠΈΡ… Π½Π° страницу.
  2. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Β«Π² psdΒ» Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ psd ΠΈΠ»ΠΈ любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ (поддСрТиваСтся Π±ΠΎΠ»Π΅Π΅ 200 Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ²)
  3. Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ ваш psd.

Какой Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Photoshop?

PSD: это Ρ‚ΠΈΠΏ Ρ„Π°ΠΉΠ»Π° ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ² Photoshop, хотя Π²Ρ‹ Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ изобраТСния. Он сохранит ваши слои ΠΈ всю Π΄Ρ€ΡƒΠ³ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π² вашСм ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π»Π΅Π³ΠΊΠΎ ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΏΠΎΠ·ΠΆΠ΅.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ PSD ΠΈ PNG?

Π€Π°ΠΉΠ»Ρ‹ PSD Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ Ρ„Π°ΠΉΠ»Π°ΠΌ PNG Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹Π΅ слои. ОсновноС ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρ„Π°ΠΉΠ»Ρ‹ PSD ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² Adobe Photoshop, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ Ρ„Π°ΠΉΠ»Ρ‹ PNG ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ собой плоскиС сТатыС изобраТСния. Π§Ρ‚ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ, Ссли Ρƒ вас Π΅ΡΡ‚ΡŒ PSD с ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌ Ρ„ΠΎΠ½ΠΎΠΌ, Π½ΠΎ ΠΎΠ½ слишком Π²Π΅Π»ΠΈΠΊ для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈΠ»ΠΈ ΠΎΠ±ΠΌΠ΅Π½Π°? НСкоторыС Ρ„Π°ΠΉΠ»Ρ‹ PSD ΠΌΠΎΠ³ΡƒΡ‚ Π²Π΅ΡΠΈΡ‚ΡŒ ΠΏΠΎΡ‡Ρ‚ΠΈ 3 Π“Π‘.

МоТно Π»ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ» PSD?

Π€Π°ΠΉΠ» Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° Photoshop (PSD) β€” это ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Ρ„Π°ΠΉΠ»Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ сохраняСт Ρ‚ΠΎΡ‡Π½ΠΎΠ΅ состояниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° β€” тСкст, Ρ„ΠΈΠ³ΡƒΡ€Ρ‹, слои, маски, эффСкты ΠΈ всС ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ΅.

Как ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠΎΠΉ Π²Π΅Π±-сайт Photoshop Π² WordPress?

  1. Анализ PSD. Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Ρ‚Ρ‰Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свой PSD ΠΈ ΠΏΠΎΠ½ΡΡ‚ΡŒ слоТности, с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΡ‚ΠΎΠ»ΠΊΠ½ΡƒΡ‚ΡŒΡΡ ΠΏΡ€ΠΈ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠΈ PSD Π² WordPress
  2. .
  3. Π Π°Π·Ρ€Π΅Π·Π°Ρ‚ΡŒ PSD
  4. НаписаниС HTML, CSS и JAVASCRIPT
  5. Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΡ WordPress
  6. Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π΅Π³ΠΈ WordPress
  7. ΠžΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ тСстированиС.

ΠœΠΎΠΆΠ΅Ρ‚Π΅ Π»ΠΈ Π²Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ PSD Π² WordPress?

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ ваш PSD-Ρ„Π°ΠΉΠ» Π² Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΡƒΡŽ Ρ‚Π΅ΠΌΡƒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² WordPress, Π²Π°ΠΌ ΠΏΠΎΡ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ΡΡ знания языков Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ HTML, CSS ΠΈ JavaScript, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π³ΠΎ языка программирования PHP.

Как ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ» Photoshop ΠΊΠ°ΠΊ Π²Π΅Π±-сайт?

ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΡŽ ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Β«Π€Π°ΠΉΠ»Β» > Β«Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ для Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°Β». Π—Π°Ρ‚Π΅ΠΌ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Π² мСню Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° Ρ„Π°ΠΉΠ»Π° (GIF, JPEG, PNG-8 ΠΈΠ»ΠΈ PNG-24) ΠΈ Π·Π°Π΄Π°ΠΉΡ‚Π΅ Π½ΡƒΠΆΠ½Ρ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹. (МСню Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° Ρ„Π°ΠΉΠ»Π° находится нСпосрСдствСнно ΠΏΠΎΠ΄ мСню Preset.) Π­Ρ‚ΠΎ сохраняСт копию вашСго Ρ„Π°ΠΉΠ»Π° Π±Π΅Π· пСрСзаписи исходного изобраТСния.

Π§Π΅ΠΌ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹?

Π¨Π°Π±Π»ΠΎΠ½Ρ‹ ΡƒΠΏΡ€ΠΎΡ‰Π°ΡŽΡ‚ созданиС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ² Π¨Π°Π±Π»ΠΎΠ½Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠ±Π»Π΅Π³Ρ‡ΠΈΡ‚ΡŒ Π½Π°ΡˆΡƒ Ρ€Π°Π±ΠΎΡ‚Ρƒ ΠΈ ΡΠ½ΠΈΠ·ΠΈΡ‚ΡŒ стрСсс, ΠΈ Π² Ρ‚ΠΎ ΠΆΠ΅ врСмя ΠΎΠ½ΠΈ ΠΏΠΎΠ²Ρ‹ΡˆΠ°ΡŽΡ‚ ΡΡ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ.

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *