Π Π°Π·Π½ΠΎΠ΅

ΠœΠ°ΠΊΠ΅Ρ‚Ρ‹ для вСрстки: PSD ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ для вёрстки сайтов

06.06.2018

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

БСсплатныС ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Figma для вСрстки сайта

Portfolio landing page

Бсылка Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚

ΠšΠ»Π°ΡΡΠ½Ρ‹ΠΉ сайт для ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ, Π»ΠΈΡ‡Π½ΠΎ ΠΌΠ½Π΅ нравится простой ΠΈ чистый Π΄ΠΈΠ·Π°ΠΉΠ½.

Π‘Π»ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ: низкая

Β 

Clean simple landing page

Бсылка Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚

Π”ΠΎΠ²ΠΎΠ»ΡŒΠ½ΠΎ простой ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ, Π½ΠΎ Π½Π΅ самый простой Π² ΠΏΠ»Π°Π½Π΅ вСрстки сайт. Π•ΡΡ‚ΡŒ Ρ‡Ρ‚ΠΎ ΠΎΡ‚Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ (Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ элСмСнты, слайдСры ΠΈ Ρ‚.Π΄.)

Π‘Π»ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ: срСдняя

Β 

Client chat

Бсылка Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚

ΠžΠΎΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΡ…ΠΎΠΆΠ΅ Π½Π° мСссСндТСр Slack πŸ™‚ Но Ρ‚Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, интСрСсно Ρ‚Π°ΠΊΠΎΠ΅ ΡΠ²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ, особСнно Π² ΠΏΠ»Π°Π½Π΅ сСмантики.

Π‘Π»ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ: срСдняя

Β 

Restaurant template

Бсылка Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚

НСплохой одностраничник Π½Π° Ρ‚Π΅ΠΌΡƒ рСсторана. Π’Π°ΠΊ ΠΆΠ΅ Π΅ΡΡ‚ΡŒ Π½Π΅ΠΌΠ°Π»ΠΎ ΠΌΠ΅Π»ΠΎΡ‡Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ.

Π‘Π»ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ: срСдняя

Β 

Valorant concept

Бсылка Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚

ΠšΠΎΠ½Ρ†Π΅ΠΏΡ‚ ΠΏΠΎ Π½Π΅Π΄Π°Π²Π½ΠΎ Π²Ρ‹ΡˆΠ΅Π΄ΡˆΠ΅ΠΉ ΠΈΠ³Ρ€Π΅ Valorant. Π’ Ρ†Π΅Π»ΠΎΠΌ, это Π½Π΅ совсСм ΠΌΠ°ΠΊΠ΅Ρ‚ сайта, Π½ΠΎ ΠΌΠ½Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½ нравится, ΠΈ Π² ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ΅, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ сСбя ΠΏΠ΅Ρ€Π΅Π΄Π΅Π»Π°Ρ‚ΡŒ. Для ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΈ β€” самоС Ρ‚ΠΎ)

Π‘Π»ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ: высокая (Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΠ·-Π·Π° нСстандартного ΠΌΠ°ΠΊΠ΅Ρ‚Π°)

Β 

Thrivetalk landing page

Бсылка Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ Π»Π΅Π½Π΄ΠΈΠ½Π³, для ΠΎΡ‚Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ сСток (flexbox) самоС Ρ‚ΠΎ)

Π‘Π»ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ: низкая

Β 

Β 

Пока это всС, Π½Π° самом Π΄Π΅Π»Π΅ Π½Π°ΠΉΡ‚ΠΈ Π°Π΄Π΅ΠΊΠ²Π°Ρ‚Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ для figma Π½Π΅ Ρ‚Π°ΠΊ ΡƒΠΆ ΠΈ просто, Π½ΠΎ Π±ΡƒΠ΄Π΅ΠΌ ΡΡ‚Π°Ρ€Π°Ρ‚ΡŒΡΡ) Если ΠΆΠ΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΅Ρ‰Π΅, ΠΈΠ»ΠΈ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ сборник psd-ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΎΡ‚ мСня β€” ΠΏΠΈΡˆΠΈΡ‚Π΅ Π² ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ, ΠΈ всС Π±ΡƒΠ΄Π΅Ρ‚!

Β 

ВсСм Π΄ΠΎΠ±Ρ€Π°, ΡƒΠ΄Π°Ρ‡ΠΈ Π² вСрсткС ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ²)

ΠœΠ΅Ρ‚ΠΊΠΈ: ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, figma

18 ΠΏΡ€Π°Π²ΠΈΠ» идСального psd-ΠΌΠ°ΠΊΠ΅Ρ‚Π° β€” ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ Ρ‡Π΅ΠΊ-лист для Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² / Π₯Π°Π±Ρ€ΠžΠ±Ρ‰ΠΈΠΉ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ β€” НС Π΄Π΅Π»Π°ΠΉ Π±Ρ€Π°ΠΊ.
НС Π±Π΅Ρ€ΠΈ Π±Ρ€Π°ΠΊ. НС ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°ΠΉ Π±Ρ€Π°ΠΊ.
Π’ΠΎΠΉΠΎΡ‚Π°.

ΠœΡ‹ Ρ€Π΅Π΄ΠΊΠΎ Π±Π΅Ρ€Ρ‘ΠΌ Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ с ΡƒΠΆΠ΅ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, Π½ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ случаСтся. Когда ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ Π²Π½ΡƒΡ‚Ρ€ΠΈ студии, Π½Π° любом ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ½ΠΎΠΌ этапС вёрстки Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΡ‚ΠΎΡ‡Π½ΠΈΡ‚ΡŒ Ρƒ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€Π° ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΈΠ»ΠΈ самого Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°, Ρ‡Ρ‚ΠΎ имСлось Π²Π²ΠΈΠ΄Ρƒ ΠΈ ΠΊΠ°ΠΊ это Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ. Но Π² ситуации, ΠΊΠΎΠ³Π΄Π° Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊ ΡƒΠΆΠ΅ ΠΊΠΎΠΌΡƒ-Ρ‚ΠΎ ΠΎΡ‚Π΄Π°Π» дСньги Π·Π° ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΈ послС ΠΏΡ€ΠΈΡˆΡ‘Π» ΠΊ Ρ‚Π΅Π±Π΅ Π·Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ, Ρ‚Π°ΠΊ Π½Π΅ получится: вСсти ΠΊΠΎΠΌΠΌΡƒΠ½ΠΈΠΊΠ°Ρ†ΠΈΡŽ ΠΌΠ΅ΠΆΠ΄Ρƒ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠΌ ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠΌ становится Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ΠΌ, Π° ΠΈΡΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΎΠ³Ρ€Π΅Ρ…ΠΈ Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π°Ρ… Π½Π΅ΠΊΠΎΠΌΡƒ. Из этой ΡΡ‚Π°Ρ‚ΡŒΠΈ Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅, Π³Π΄Π΅ Π»Π°ΠΆΠ°ΡŽΡ‚ Π³ΠΎΡ€Π΅-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΈ Ρ‡Ρ‚ΠΎ стоит ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ ΠΎΡ‚Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π½Π° вёрстку.

Β«ΠŸΠΎΡ‡Ρ‚ΠΈΒ» ΠΏΠΎ сСткС


Π‘Π΅Ρ‚ΠΊΠ° ΠΏΡ€ΠΈΠ·Π²Π°Π½Π° ΡƒΠΏΡ€ΠΎΡ‰Π°Ρ‚ΡŒ вёрстку ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ мСстополоТСниС ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… элСмСнтов. Π’ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ Π½Π°ΠΌΠ΅Ρ€Π΅Π½Π½ΠΎ отходят ΠΎΡ‚ 12-ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΠΎΠ³ΠΎ Π³Ρ€ΠΈΠ΄Π° для создания Π½Π΅ΠΎΡ€Π΄ΠΈΠ½Π°Ρ€Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Но Ссли ΠΏΡ€ΠΈ создании ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Ρ‹ всё-Ρ‚Π°ΠΊΠΈ ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Π»ΠΈΡΡŒ сСтки β€” Π±ΡƒΠ΄ΡŒΡ‚Π΅ Π΄ΠΎΠ±Ρ€Ρ‹ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ это ΠΏΡ€Π°Π²Π΄Π° Ρ‚Π°ΠΊ. Π’Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΈ Ρ‚ΠΎ ΠΈ Π΄Π΅Π»ΠΎ ΠΆΠ°Π»ΡƒΡŽΡ‚ΡΡ, Ρ‡Ρ‚ΠΎ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅ ΠΎΡ‚ страницы ΠΊ страницС Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ сильно ΠΎΡ‚Π»ΠΈΡ‡Π°Ρ‚ΡŒΡΡ: ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ‡Π½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ‚ΠΎ Π»Π΅Π²Π΅Π΅, Ρ‚ΠΎ ΠΏΡ€Π°Π²Π΅Π΅, ΠΈΠΊΠΎΠ½ΠΊΠΈ Ρ€Π°Π·Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π΅ ΠΏΠΎΡ…ΠΎΠΆΠΈ Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π°.

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

Π‘Π΅Ρ€Π³Π΅ΠΉ, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π² студии Бибирикс:
«НавСрноС, самая главная ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ всС Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ Π·Π½Π°ΡŽΡ‚ хотя Π±Ρ‹ основы html ΠΈ css, поэтому ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π΄Π΅Π»Π°ΡŽΡ‚ΡΡ Π±Π΅Π· оглядки Π½Π° вёрстку. НапримСр, Ρ‡Π°ΡΡ‚Π΅Π½ΡŒΠΊΠΎ встрСчаСтся, ΠΊΠΎΠ³Π΄Π° Π½Π° Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π΅ Π±Π»ΠΎΠΊΠΈ ΠΏΠ΅Ρ€Π΅ΠΊΠΎΠΌΠΏΠ°Π½ΡƒΡŽΡ‚ΡΡ Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π±Π΅Π· дублирования ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° для мобильной ΠΈ дСсктопной вСрсии Π½Π΅ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ β€” это замСдляСт Ρ€Π°Π±ΠΎΡ‚Ρƒ Π½Π°Π΄ вёрсткой».


Π’Π»Π°Π΄ΠΈΠΌΠΈΡ€, Ρ€ΡƒΠΊΠΎΠ²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ студии:
Β«Π•ΡΡ‚ΡŒ ΠΌΠΈΠ»Π»ΠΈΠΎΠ½ случаСв, ΠΊΠΎΠ³Π΄Π° программист Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ «это Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΒ», Π° ΠΏΠΎΡ‚ΠΎΠΌ Π±Π΅Ρ€Π΅Ρ‚ ΠΈ Π΄Π΅Π»Π°Π΅Ρ‚, ΠΊΠ°ΠΊ Π½ΡƒΠΆΠ½ΠΎ. Π—Π½Π°Ρ‡ΠΈΡ‚-Ρ‚Π°ΠΊΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ. И Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ, Π½Π΅ΡƒΠ΄ΠΎΠ±Π½Ρ‹Ρ… для программиста, Π½ΠΎ интСрСсных с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния Π΄ΠΈΠ·Π°ΠΉΠ½Π° β€” искусствСнныС. Π§Ρ‘Ρ‚ΠΊΡƒΡŽ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ провСсти Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ. Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ обсуТдСниС ΠΈ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠΈ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄ΡƒΠΌΠ°Π½Π½ΠΎΠ΅. ΠŸΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ, ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, ΠΎΠ±ΡΡƒΠΆΠ΄Π°Ρ‚ΡŒ, Π΄Π΅Π»Π°Ρ‚ΡŒ, ΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π˜Π½Π°Ρ‡Π΅ всё скатится ΠΊ ΡƒΠ½Ρ‹Π»Ρ‹ΠΌ шаблонам. Для части ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² это ОК. А для части β€” Π½Π΅Ρ‚. Π”Π΅Π»Π°Π΅Ρ‚Π΅ Π»ΠΈ Π²Ρ‹ Π² Π΄ΡƒΡ…Π΅ ΠΊΠΎΠ½Π²Π΅ΠΉΠ΅Ρ€Π° ΠΈΠ»ΠΈ Π΄Π΅Π»Π°Π΅Ρ‚Π΅ Ρ„Π΅ΡΡ‚ΠΈΠ²Π°Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π°Π±ΠΎΡ‚Ρ‹? ΠœΡ‹ писали ΠΏΡ€ΠΎ это ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ Π² Π±Π΅Π³ΡƒΠ½ΠΊΠ΅ крСативности».

ΠšΠΎΠΏΠΈΠΏΠ°ΡΡ‚ слоёв


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

ΠŸΡ€ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Π΅ Π½Π° вёрстку ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ ваши слои Π½Π°Π·Π²Π°Π½Ρ‹ ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½ΠΎ ΠΈ распрСдСлСны ΠΏΠΎ ΠΏΠ°ΠΏΠΊΠ°ΠΌ, исходя ΠΈΠ· Π»ΠΎΠ³ΠΈΠΊΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π°. И Π½Π΅ Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Π½Π΅Π½ΡƒΠΆΠ½Ρ‹Π΅ ΠΈΠ»ΠΈ хотя Π±Ρ‹ ΡΠΊΠ»Π΅ΠΈΡ‚ΡŒ слои с эффСктами ΠΌΠ΅ΠΆΠ΄Ρƒ собой (ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π½Π΅ всСгда ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ Π΄Π΅Π»Π°Ρ‚ΡŒ β€” Π½ΠΈΠΆΠ΅).

НСпонятныС отступы


Π’ идСальном ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ всС отступы ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Ρƒ Π±Π»ΠΎΠΊΠΎΠ² Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ½ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹. Π’Π°ΠΌ Π½Π° ΠΎΠ΄ΠΈΠ½ пиксСль большС, Ρ‚ΡƒΡ‚ β€” Π½Π° ΠΎΠ΄ΠΈΠ½ мСньшС, Π° Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΡƒ ΠΏΠΎΡ‚ΠΎΠΌ ΡΠΈΠ΄Π΅Ρ‚ΡŒ ΠΈ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, это Π½Π΅ слишком повлияСт Π½Π° внСшний Π²ΠΈΠ΄ страницы, хотя ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρ‹ Π±Ρ‹Π²Π°ΡŽΡ‚ Ρ€Π°Π·Π½Ρ‹Π΅: ΠΊΠΎΠΌΡƒ-Ρ‚ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ лишний пиксСль бросаСтся Π² Π³Π»Π°Π·Π°. А Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, тСстировщик Π½Π°Π»ΠΎΠΆΠΈΡ‚ Π³ΠΎΡ‚ΠΎΠ²ΡƒΡŽ вСрстку Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚-исходник Ρ‡Π΅Ρ€Π΅Π· ΠΏΠ»Π°Π³ΠΈΠ½ Pixel Perfect ΠΈ Π½Π°ΠΏΠΈΡˆΠ΅Ρ‚ список ΠΈΠ· ΠΌΠΈΠ»Π»ΠΈΠΎΠ½Π° Π±Π°Π³ΠΎΠ², сочтя Ρ‚Π°ΠΊΠΈΠ΅ нСсоотвСтствия ошибкой. ΠŸΡ€ΠΎΡΠ»Π΅Π΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ отступы ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π½ΠΎΠΉ области ΠΎΡ‚ шапки ΠΈ ΠΏΠΎΠ΄Π²Π°Π»Π° Π±Ρ‹Π»ΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌΠΈ Π½Π° всСх Π²Π°ΡˆΠΈΡ… страницах.

ΠžΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ Ρ‚ΠΎΠΆΠ΅ таят скрытыС опасности β€” ΠΈΠ½ΠΎΠ³Π΄Π° ΠΏΡ€ΠΈ создании Ρ„ΠΎΡ€ΠΌ Π² Π€ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ΅, Π΄Π°ΠΆΠ΅ Ссли Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ использовал сСтку, ΡΠ»ΡƒΡ‡Π°ΡŽΡ‚ΡΡ Π²ΠΎΡ‚ Ρ‚Π°ΠΊΠΈΠ΅ ΠΏΠΎΠ³Ρ€Π΅ΡˆΠ½ΠΎΡΡ‚ΠΈ:

Π’Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊ вряд Π»ΠΈ станСт ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ эти тонкости ΠΈ, скорСС всСго, ΠΎΠ±Ρ€Π΅ΠΆΠ΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‚ΠΎΡ‚ Ρ‚ΠΎΡ‡Π½ΠΎ вписался Π² сСтку. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ β€” Π’Π‘Π• ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ цСлочислСнныС Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, ΠΈΠ½Π°Ρ‡Π΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ ΠΎΡ‚Π»ΠΈΡ‡Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°.

Π¦Π²Π΅Ρ‚Π° Β«Π½Π° Π³Π»Π°Π·Β»


Π’ Ρ„ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ΅ Π΅ΡΡ‚ΡŒ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ инструмСнт β€” Β«ΠΏΠΈΠΏΠ΅Ρ‚ΠΊΠ°Β», ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ Π»ΡŽΠ±ΡΡ‚ ΠΈΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ β€” Ρ‚Ρ‹ΠΊΠ½ΡƒΠ», ΠΈ Π½Π΅ Π½Π°Π΄ΠΎ Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°Ρ‚ΡŒ Π½ΠΎΠΌΠ΅Ρ€ Ρ†Π²Π΅Ρ‚Π°. Но Ссли Ρ‚Ρ‹ΠΊΠ½ΡƒΡ‚ΡŒ Π² ΠΊΡ€Π°ΠΉ элСмСнта, Ρ†Π²Π΅Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΊΠ°Π·ΠΈΡ‚ΡŒΡΡ ΠΎΡ‚Ρ‚Π΅Π½ΠΊΠΎΠΌ Ρ„ΠΎΠ½Π°. Другая ΠΎΠΏΠ°ΡΠ½ΠΎΡΡ‚ΡŒ β€” Ссли радиус ΠΏΠΈΠΏΠ΅Ρ‚ΠΊΠΈ Π±ΠΎΠ»Π΅Π΅ 1 пиксСля, Π€ΠΎΡ‚ΠΎΡˆΠΎΠΏ ΠΏΠΎΠΊΠ°ΠΆΠ΅Ρ‚ срСднСС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρƒ сосСдними Ρ†Π²Π΅Ρ‚Π°ΠΌΠΈ.

АндрСй, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ

«ОсобСнно Ρ€Π°Π·Π΄Ρ€Π°ΠΆΠ°Π΅Ρ‚, ΠΊΠΎΠ³Π΄Π° Ρ†Π²Π΅Ρ‚Π° Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ опрСдСлял β€œΠ½Π° глаз”, Π° ΠΏΠΎΡ‚ΠΎΠΌ Ρ‚Ρ‹ сидишь с Π½Π°Π±ΠΎΡ€ΠΎΠΌ Ρ€Π°Π·Π½ΠΎΠΊΠ°Π»ΠΈΠ±Π΅Ρ€Π½Ρ‹Ρ… сСрых ΠΈ Π½Π΅ знаСшь, ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. Π­Ρ‚ΠΎ происходит ΠΈΠ·-Π·Π° Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π½Π΅Ρ‚ банальной ΠΊΠ°Ρ€Ρ‚Ρ‹ Ρ†Π²Π΅Ρ‚ΠΎΠ² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΠΎΠ³ Π±Ρ‹ ΠΎΠΏΠΈΡ€Π°Ρ‚ΡŒΡΡ ΠΈ сам Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ Π½Π°Π΄ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΌΠΈ страницами, ΠΈ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΒ».
НСгласноС ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ Π½Π΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‡Ρ‘Ρ€Π½Ρ‹ΠΉ ΠΏΠΎΠ΄ Π½ΠΎΠΌΠ΅Ρ€ΠΎΠΌ #000000 β€” ΠΎΠ½ слишком контрастный Π½Π° Ρ„ΠΎΠ½Π΅ Π±Π΅Π»ΠΎΠ³ΠΎ. ГлядитС Π½Π° Ρ€Π°Π·Π½ΠΈΡ†Ρƒ:

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

РастрированныС элСмСнты


ВСкст


Если Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ Π΄ΠΎ Π²Π΅Π±Π° ΠΊΠ°ΠΊΠΎΠ΅-Ρ‚ΠΎ врСмя Π΄Π΅Π»Π°Π» ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ для ΠΏΠ΅Ρ‡Π°Ρ‚ΠΈ Π² Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ, ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ Π³Ρ€Π΅ΡˆΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡ΠΊΠΎΠΉ Ρ€Π°ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ тСксты, Π½ΠΎ для Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ° это становится ΡΠ΅Ρ€ΡŒΡ‘Π·Π½ΠΎΠΉ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ: Ρ‚Π°ΠΊΠΎΠΉ тСкст Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ β€” ΠΌΠΎΠΆΠ½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π·Π°Π½ΠΎΠ²ΠΎ Π½Π°Π±Ρ€Π°Ρ‚ΡŒ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ. И это мСньшая ΠΈΠ· ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ: ΠΎΡ‚ΠΊΡƒΠ΄Π° Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΡƒ Π±Ρ€Π°Ρ‚ΡŒ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ Ρ†Π²Π΅Ρ‚ растрированного тСкста β€” Π²ΠΎΡ‚ это вопрос.

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


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

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

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ налоТСния


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


Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ налоТСния Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…

ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ со ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ


Π”Ρ€ΠΎΠ±Π½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹


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

ΠœΠ½ΠΎΠΆΠ΅ΡΡ‚Π²ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²


На вСсь ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ Π±ΠΎΠ»Π΅Π΅ 3-Ρ… Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠΉ β€” это ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΠΎΠ΄Π½ΠΎΠΉ Π³Π°Ρ€Π½ΠΈΡ‚ΡƒΡ€Ρ‹ (Light, Regular ΠΈ Bold) ΠΈΠ»ΠΈ Ρ€Π°Π·Π½Ρ‹Ρ…. Π­Ρ‚ΠΎ Π½Π΅ ТёсткоС ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ β€” всё зависит ΠΎΡ‚ Π·Π°Π΄Π°Ρ‡ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, Π½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹ΠΉ смысл Π² Π½Ρ‘ΠΌ Π΅ΡΡ‚ΡŒ: Ρ‡Π΅ΠΌ мСньшС Π²Π°Ρ€ΠΈΠ°Ρ†ΠΈΠΉ ΡˆΡ€ΠΈΡ„Ρ‚Π°, Ρ‚Π΅ΠΌ Π²Ρ‹ΡˆΠ΅ ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡Π΅Π½Π½ΠΎΡΡ‚ΡŒ Π½Π° тСкстС Ρƒ читатСля. БчитаСтся ΠΏΡ€Π°Π²ΠΈΠ»ΠΎΠΌ вмСстС с ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ Π³Π°Ρ€Π½ΠΈΡ‚ΡƒΡ€Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚Π°ΠΌ использовались, ΠΈΠ»ΠΈ хотя Π±Ρ‹ Π΄Π°Π²Π°Ρ‚ΡŒ ссылки Π½Π° Google Fonts.
АндрСй, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ:
«БСйчас Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΎΡ‚ΠΎΡˆΠ»ΠΈ ΠΎΡ‚ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ… TTF, OTF β€” ΠΈ Ссли Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… ΠΏΠΎ-старинкС, Π½Π΅ Π²Π΅Π·Π΄Π΅ ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ. ΠœΡ‹ Π² студии Π΄Π°Π²Π½ΠΎ ΠΏΠ΅Ρ€Π΅ΡˆΠ»ΠΈ Π½Π° Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ WOFF ΠΈΠ»ΠΈ WOFF2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ Π±Ρ‹Π»ΠΎ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ. ΠŸΠ΅Ρ€Π΅Π²Π΅ΡΡ‚ΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ Π² Π½Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ здСсь ΠΈΠ»ΠΈ здСсь».

ИспользованиС нСстандартных ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²


НСстандартныС ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΠΈ ΠΈΡ… начСртания Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΎΠ²Π΅Ρ€Π΅Π½Ρ‹ Π½Π° Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ Π²Π΅Π±-вСрсии. Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΈΠ΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π²Π»ΠΈΡΡŽΡ‚ Π½Π° ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы β€” для ΠΈΡ… отобраТСния Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ Π½ΡƒΠΆΠ½ΠΎ сначала ΠΈΡ… ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ, ΠΈ Π½Π° это ΡƒΠΉΠ΄Ρ‘Ρ‚ ΠΊΠ°ΠΊΠΎΠ΅-Ρ‚ΠΎ врСмя. По-Ρ…ΠΎΡ€ΠΎΡˆΠ΅ΠΌΡƒ вСс нСстандартного ΡˆΡ€ΠΈΡ„Ρ‚Π° Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°Ρ‚ΡŒ 1 ΠΌΠ΅Π³Π°Π±Π°ΠΉΡ‚. И Π»ΡƒΡ‡ΡˆΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‚Π°ΠΊΠΎΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ Π½Π° страницС Π±Ρ‹Π» Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½. Ну ΠΈ Π½Π΅ Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ стоят Π΄Π΅Π½Π΅Π³. Иногда β€” Π±ΠΎΠ»ΡŒΡˆΠΈΡ…. Π£ нас Π±Ρ‹Π»ΠΈ случаи, Π³Π΄Π΅ ΡˆΡ€ΠΈΡ„Ρ‚ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ дорабатывался ΠΏΠΎΠ΄ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ β€” Ρ‚Π° Π΅Ρ‰Ρ‘ Π·Π°Π΄Π°Ρ‡ΠΊΠ°.

ΠšΠΎΡ€ΡΠ²Π°Ρ Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠ°


Часто Π±Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ мСТстрочныС ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Ρ‹ ΠΈ отступы ΠΌΠ΅ΠΆΠ΄Ρƒ Π°Π±Π·Π°Ρ†Π°ΠΌΠΈ Π½Π΅ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡŽΡ‚ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π±Π»ΠΎΠΊΠΎΠ² Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ ΠΈ ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ ΠΎΡ‚ страницы ΠΊ страницС β€” прослСдитС Π·Π° ΠΈΡ… ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΡΡ‚ΡŒΡŽ. НС отдСляйтС Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΎΡ‚ Π°Π±Π·Π°Ρ†Π΅Π² Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ тСкстовыС Π±Π»ΠΎΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ отступ ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ β€” ΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ΡΡŒ настройками ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆΠ° ΠΈ Π°Π±Π·Π°Ρ†Π°ΠΌΠΈ.
Π•Π²Π³Π΅Π½ΠΈΠΉ, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ:
«По возмоТности Π½Π΅ стоит ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ слоТныС эффСкты Π½Π° Ρ‚ΠΈΠΏΠΎΠ²Ρ‹Ρ… тСкстовых страницах, Ссли прСдполагаСтся, Ρ‡Ρ‚ΠΎ Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊ сам смоТСт ΠΈΡ… ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈΠ· Π°Π΄ΠΌΠΈΠ½-ΠΏΠ°Π½Π΅Π»ΠΈ. Π‘ΠΊΠΎΡ€Π΅Π΅ всСго, Ρƒ Π½Π΅Π³ΠΎ получится Β«ΠΎΠ±Π΅Ρ€Π½ΡƒΡ‚ΡŒΒ» Ρ‚Π°ΠΊΠΈΠ΅ элСмСнты Π² div. Иногда это Ρ€Π΅ΡˆΠ°Π΅Ρ‚ΡΡ сниппСтами ΠΈΠ»ΠΈ ΠΈΠ½Ρ‹ΠΌΠΈ ΠΏΡ€ΠΈΠ΅ΠΌΠ°ΠΌΠΈ, Π½ΠΎ всё Ρ€Π°Π²Π½ΠΎ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΈ Π½Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌΒ».
ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ стоит ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„Π°, Π°Π±Π·Π°Ρ†Π°, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² 1-4 уровня (h2, h3, h4, h5), ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… ΠΈ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… списков. А Π΅Ρ‰Ρ‘ Π»ΡƒΡ‡ΡˆΠ΅ ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ всё это Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ β€” Π³Π°ΠΉΠ΄Π»Π°ΠΉΠ½ ΠΈΠ»ΠΈ UI-kit. Бюда ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ссылок (активная, ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, посСщСнная).


UI-kit для ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° «Бпасская башня»

НСпонятная анимация


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

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹, ΡƒΡ‡Π°ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Π² анимациях ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… взаимодСйствиях, Ρ€Π°Π·Π±ΠΈΡ‚Ρ‹ послойно. НапримСр: Π²ΠΈΠ΄ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ β€” ΠΎΠ΄ΠΈΠ½ слой, Π²ΠΈΠ΄ ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ ΠΏΠΎ Π½Π΅ΠΌΡƒ β€” Π΄Ρ€ΡƒΠ³ΠΎΠΉ, Π²ΠΈΠ΄ Π² статикС β€” Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ. Π’Π΅ ΠΆΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»Π° Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΠΈ для Π±Π°Π½Π½Π΅Ρ€ΠΎΠ².

Π–Π΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ слои с анимациями ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π°ΠΌΠΈ Ρ†Π²Π΅Ρ‚Π°ΠΌΠΈ ΠΈ ΡΠΎΠΏΡ€ΠΎΠ²ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΈΡ… коммСнтариями. Π’Π°ΠΊΠΆΠ΅ ΠΎΡ‡Π΅Π½ΡŒ ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π² коммСнтариях ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΈΠΌΠ΅Π½Π½ΠΎ это Π΄ΠΎΠ»ΠΆΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΈ привСсти ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹.

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

Иконки в PNG


Π’ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅, Π² зависимости ΠΎΡ‚ Π·Π°Π΄Π°Ρ‡, ΠΈΠΊΠΎΠ½ΠΊΠΈ Π±Ρ‹Π²Π°ΡŽΡ‚ Ρ€Π°Π·Π½Ρ‹Π΅: ΠΈΠ½ΠΎΠ³Π΄Π° Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ создаёт ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ собствСнноручно, ΠΈΠ½ΠΎΠ³Π΄Π° Π΅ΠΌΡƒ ΠΏΡ€ΠΎΡ‰Π΅ ΠΈ быстрСС Π½Π°ΠΉΡ‚ΠΈ Π½ΡƒΠΆΠ½ΡƒΡŽ ΠΈΠ· ΠΌΠΈΠ»Π»ΠΈΠΎΠ½Π° Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² Π³Π΄Π΅-Π½ΠΈΠ±ΡƒΠ΄ΡŒ здСсь ΠΈ Π΄ΠΎΡ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π΅Ρ‘ ΠΏΡ€ΠΈ нСобходимости.

Но Π±Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ PNG β€” Π² Π½Ρ‘ΠΌ ΠΏΡ€ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ Π½Π° экранах с большим Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ (Π° сСйчас Π΄Π°ΠΆΠ΅ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΠΊΠ°Ρ… ΠΏΠ»ΠΎΡ‚Π½ΠΎΡΡ‚ΡŒ пиксСлСй бСшСная) края изобраТСния Ρ€Π°ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‚ΡΡ. ΠžΡ‚ΡΡŽΠ΄Π° ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ: всС ΠΈΠΊΠΎΠ½ΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ SVG β€” Ρ‚Π°ΠΊ ΠΎΠ½ΠΈ ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ Ρ‡Ρ‘Ρ‚ΠΊΠΈΠΌΠΈ, ΠΊΠ°ΠΊΠΈΠΌ Π±Ρ‹ Π½ΠΈ Π±Ρ‹Π» ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€.

НСкоторыС Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΈ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π±Ρ‹Π»ΠΈ собраны Π² ΠΎΠ΄Π½ΠΎΠΌ мСстС β€” Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅ β€” ΠΈ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡ… названия Π±Ρ‹Π»ΠΈ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ‡Π½Ρ‹ слоям Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅. Π”Ρ€ΡƒΠ³ΠΈΠΌ ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ SVG-изобраТСния Π±Ρ‹Π»ΠΈ встроСны Π² основной Ρ„Π°ΠΉΠ», ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Ρ‚Π°ΠΊ Π³ΠΎΡ€Π°Π·Π΄ΠΎ ΠΏΡ€ΠΎΡ‰Π΅ ΠΈ быстрСС Π²Ρ‹Ρ€Π΅Π·Π°Ρ‚ΡŒ svg ΠΈΠ· ΠΌΠ°ΠΊΠ΅Ρ‚Π°, Ρ‡Π΅ΠΌ ΠΈΡΠΊΠ°Ρ‚ΡŒ Π½ΡƒΠΆΠ½ΡƒΡŽ ΠΈΠΊΠΎΠ½ΠΊΡƒ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅.

Π§Π΅ΠΊ-лист


Π’ творчСском ΠΏΠΎΡ€Ρ‹Π²Π΅ слоТно ΡƒΡΠ»Π΅Π΄ΠΈΡ‚ΡŒ Π·Π° Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ всё Π±Ρ‹Π»ΠΎ сдСлано ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ. Π’Π°ΠΌ слой скопировался ΠΈ остался Π±Π΅Π· названия, Ρ‚Π°ΠΌ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Π½Π΅ΠΌΠ½ΠΎΠΆΠΊΠΎ Π²Ρ‹Π»Π΅Π· Π·Π° ΠΊΡ€Π°ΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Ρ‚ΡƒΡ‚ ΡˆΡ€ΠΈΡ„Ρ‚ случайно «заТирнился» встроСнными Ρ„ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ½Ρ‹ΠΌΠΈ настройками вмСсто Π²Ρ‹Π±ΠΎΡ€Π° Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ начСртания β€” с ΠΊΠ΅ΠΌ Π½Π΅ Π±Ρ‹Π²Π°Π΅Ρ‚? А с Ρ‚Π΅ΠΌ, Ρƒ ΠΊΠΎΠ³ΠΎ Π΅ΡΡ‚ΡŒ наш Ρ‡Π΅ΠΊ-лист!

Π§Π΅ΠΊ-лист для ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΊΠΈ Photoshop-ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΊ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Π΅ Π½Π° вёрстку


  1. Если Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ использовал сСтку, всС Π±Π»ΠΎΠΊΠΈ Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ располоТСны строго ΠΏΠΎ Π½Π΅ΠΉ.
  2. Π£ всСх ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ цСлочислСнныС Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹.
  3. ΠŸΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΠ΅ΡΡ элСмСнты Π½Π° страницах всСгда ΠžΠ”Π˜ΠΠΠšΠžΠ’Π«Π•.
  4. ВсС слои сгруппированы ΠΏΠΎ ΠΏΠ°ΠΏΠΊΠ°ΠΌ ΠΈ распрСдСлСны ΠΏΠΎ Π»ΠΎΠ³ΠΈΠΊΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚Π°. Π›ΠΈΡˆΠ½ΠΈΠ΅ ΡƒΠ΄Π°Π»Π΅Π½Ρ‹, ΠΏΠΎΡ…ΠΎΠΆΠΈΠ΅ β€” ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½Π΅Π½Ρ‹.
  5. ΠžΡ‚ΡΡ‚ΡƒΠΏΡ‹ ΠΎΡ‚ элСмСнтов ΡƒΠ½ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹.
  6. Π¦Π²Π΅Ρ‚Π° Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡŽΡ‚ с основными Ρ†Π²Π΅Ρ‚Π°ΠΌΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.
  7. ВСкст ΠΊΠ°ΠΊ тСкст (Π½Π΅ растрирован).
  8. Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ налоТСния, Ρ‚Π΅Π½ΠΈ ΠΈ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹ Π½Π΅ растрированы.
  9. ИспользованиС эффСктов налоТСния цСлСсообразно.
  10. Π£ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π½Π΅Π΄Ρ€ΠΎΠ±Π½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹.
  11. Π¨Ρ€ΠΈΡ„Ρ‚Ρ‹, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅, собраны Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅.
  12. НСстандартныС ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΠΈ ΠΈΡ… начСртания ΠΏΡ€ΠΎΠ²Π΅Ρ€Π΅Π½Ρ‹ Π½Π° Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ Π²Π΅Π±-вСрсии. ВСс ΠΎΠ΄Π½ΠΎΠ³ΠΎ нСстандартного ΡˆΡ€ΠΈΡ„Ρ‚Π° Π½Π΅ ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°Π΅Ρ‚ 1 Мб.
  13. ΠœΠ΅ΠΆΡΡ‚Ρ€ΠΎΡ‡Π½Ρ‹Π΅ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Ρ‹ ΠΈ отступы Π² тСкстС ΡƒΠ½ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹.
  14. ВсС ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ SVG ΠΈ собраны Π² ΠΎΠ΄Π½ΠΎΠΌ мСстС. НаимСнования ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅ ΠΈ понятныС, ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡŽΡ‚ с Π½Π°ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ‡Π½Ρ‹Ρ… слоёв Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚Π΅.
  15. Для всСх Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… элСмСнтов Π΅ΡΡ‚ΡŒ слои с Ρ…ΠΎΠ²Π΅Ρ€Π°ΠΌΠΈ.
  16. ΠžΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹, ΡƒΡ‡Π°ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Π² Π² анимациях/ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… взаимодСйствиях, Ρ€Π°Π·Π±ΠΈΡ‚Ρ‹ послойно. Для Π±Π°Π½Π½Π΅Ρ€ΠΎΠ² β€” Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ.
  17. К анимациям ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ взаимодСйствиям прописаны ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ ΠΈ ΡƒΠΊΠ°Π·Π°Π½Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹, ΠΊΠ°ΠΊ это Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ.
  18. Для ΠΌΠ°ΠΊΠ΅Ρ‚Π° создан Π³Π°ΠΉΠ΄Π»Π°ΠΉΠ½ с ΠΏΠ°Π»ΠΈΡ‚Ρ€ΠΎΠΉ Ρ†Π²Π΅Ρ‚ΠΎΠ² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΈ стилями тСкста.

Π“ΠΎΡ‚ΠΎΠ²ΠΈΠΌ .psd для вСрстки / Π₯Π°Π±Ρ€

НС ΠΏΡ€Π΅Ρ‚Π΅Π½Π΄ΡƒΡŽ Π½Π° новаторство, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΡƒΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ всС Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ описано. Π­Ρ‚ΠΎΡ‚ Ρ‚ΠΎΠΏΠΈΠΊ скорСС ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΊ дискуссии ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρƒ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΊΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΊ вСрсткС. Π”ΡƒΠΌΠ°ΡŽ, ΠΎΠ±ΠΈΡ‚Π°Ρ‚Π΅Π»ΠΈ Ρ…Π°Π±Ρ€Π°, особСнно ΠΏΠΎΡΠ΅Ρ‰Π°ΡŽΡ‰ΠΈΠ΅ Π²Π΅Ρ‚ΠΊΡƒ Β«Π’Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Β», Π² основной массС Π·Π½Π°ΠΊΠΎΠΌΡ‹ с рСсурсом ilovepsd.ru. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ поТСлания с этого сайта, ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ, я ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡΠ»ΡΡ‚ΡŒ Π½Π΅ Π±ΡƒΠ΄Ρƒ. ΠšΡ‚ΠΎ заинтСрСсовался, ΠΏΡ€ΠΎΡˆΡƒ ΠΏΠΎΠ΄ Ρ…Π°Π±Ρ€Π°ΠΊΠ°Ρ‚.

Π—Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ, ΠΊΠΎΠ³Π΄Π° я ΠΎΡ‚Π΄Π°ΡŽ Ρ„Π°ΠΉΠ»Ρ‹ шаблонов Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊΡƒ, я Π³ΠΎΡ‚ΠΎΠ²Π»ΡŽ Π΄Π²Π΅ вСрсии. Одна полная, другая ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½Π° для вСрстки. ОбС, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, ΠΏΠΎΠΏΠ°Π΄Π°ΡŽΡ‚ ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΡƒ. ΠŸΠ΅Ρ€Π²Π°Ρ β€” Ρ‡Ρ‚ΠΎ Π±Ρ‹ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ всС Π±Ρ‹Π»ΠΎ ΠΏΠΎΠ΄ Ρ€ΡƒΠΊΠΎΠΉ Π³ΠΎΡ‚ΠΎΠ²ΠΎΠ΅ ΠΊ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ, Ссли Ρ‡Ρ‚ΠΎ. Вторая β€” Ρ‡Ρ‚ΠΎ Π±Ρ‹ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ.
Π‘ΠΊΠ»Π΅ΠΈΠ²Π°Π΅ΠΌ слои ΠΈ эффСкты

Допустим Ρƒ нас Π΅ΡΡ‚ΡŒ Ρ„ΠΎΠ½ ΠΏΠΎΠ΄ мСню. Бостоит ΠΎΠ½ ΠΈΠ· 4-Ρ… слоСв, ΠΊ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΈΠ· Π½ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Ρ‹ эффСкты. Π’ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΡƒ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Ρ€Π΅Π·Π°Ρ‚ΡŒ Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ Π² 1 пиксСл, Ρ‡Ρ‚ΠΎ Π±Ρ‹ Π·Π°Ρ‚Π΅ΠΌ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ Π΅Ρ‘ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ. ΠšΡ‚ΠΎ Π½Π΅ понял ΠΊ Ρ‡Π΅ΠΌΡƒ я клоню β€” это Π·Π½Π°Ρ‡ΠΈΡ‚ Ρ‡Ρ‚ΠΎ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΡƒ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ слои, Π½Π°ΠΆΠ°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΡ‹ΡˆΠΈ, Π½Π°ΠΉΡ‚ΠΈ ΠΏΡƒΠ½ΠΊΡ‚ Β«Merge layersΒ», ΠΊΠ»ΠΈΠΊΠ½ΡƒΡ‚ΡŒ. ΠœΠΈΠ½ΠΈΠΌΡƒΠΌ 3 дСйствия ΠΈ это ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ 3 дСйствия ΠΏΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠΌΡƒ ΡΠ»ΡƒΡ‡Π°ΡŽ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΌΡ‹ смоТСм ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΡƒ, ΠΏΡƒΡΡ‚ΡŒ ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ, Π½ΠΎ всС ΠΆΠ΅ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.

ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΡƒΠ΅ΠΌ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ

Π― Π½Π΅ Π±ΡƒΠ΄Ρƒ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒ Ρ…ΠΎΠ»ΠΈΠ²Π°Ρ€ ΠΎ Ρ‚ΠΎΠΌ, Π΄ΠΎΠ»ΠΆΠ΅Π½ Π»ΠΈ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΡƒΠΌΠ΅Ρ‚ΡŒ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ? Π― ΡΡ‡ΠΈΡ‚Π°ΡŽ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Ρ‚ΠΎΡ‡Π½ΠΎ обязан Π·Π½Π°Ρ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°Π΄Π°ΡŽΡ‚ΡΡ Π² CSS. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ, Π³Π΄Π΅ позволяСт ситуация, я ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽ Π½Π° CSS, Ρ‡Ρ‚ΠΎ происходит с элСмСнтом.

Π‘Π΅Ρ‚ΠΊΠ°

Π Π΅Ρ‡ΡŒ ΠΈΠ΄Π΅Ρ‚ ΠΎ Ρ€ΠΎΠ΄Π½ΠΎΠΉ сСткС photoshop’Π°. НС всСгда Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ, Π½ΠΎ Π·Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ сСтку ΠΏΠΎΠ΄ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΉ Π²Π°ΠΌΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€ΠΈΡ‚ΠΌ ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π±Π»ΠΈΠΆΠ΅ ΠΊ систСмС, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ расставляя всС Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚Π΅.
Часто отступы ΠΌΠ΅ΠΆΠ΄Ρƒ элСмСнтами Π±Ρ‹Π²Π°ΡŽΡ‚ ΠΊΡ€Π°Ρ‚Π½Ρ‹ 5 пиксСлам. Π’ Ρ‚Π°ΠΊΠΈΡ… случаях я Π²Ρ‹ΡΡ‚Π°Π²Π»ΡΡŽ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ сСтки, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ ΠΈ ΠΎΡΡ‚Π°Π²Π»ΡΡŽ памятку Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΡƒ, Ρ‡Ρ‚ΠΎ Π±Ρ‹ настроил ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΈ Π²ΠΊΠ»ΡŽΡ‡ΠΈΠ» сСтку. Π•Ρ‰Π΅ Ρ€Π°Π· Π³ΠΎΠ²ΠΎΡ€ΡŽ β€” это Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, настраивайтС Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ Π±Ρ‹ подошло Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΏΡ€ΠΈ вСрсткС, мСстами, становится Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π»Π΅Π³Ρ‡Π΅ ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ расстояния ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹.

Π’ΠΎΡ‚ ΠΈ всС. Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ, надСюсь Π²Ρ‹ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅. Π•Ρ‰Π΅ большС надСюсь, Ρ‡Ρ‚ΠΎ сами Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΈ ΠΎΡ‚ΠΏΠΈΡˆΡƒΡ‚ΡΡ ΠΎ ΠΌΠ΅Ρ‚ΠΎΠ΄Π°Ρ…, описанных Π²Ρ‹ΡˆΠ΅.

P.S. Если Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΈΠ· написанного, Π½Π° ваш взгляд, откровСнная Ρ‡ΡƒΡˆΡŒ β€” ΠΏΡ€ΠΎΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΠΎ, поТалуйста. Π­Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΠΌΠ½Π΅ Π½Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ…Π΅*Π½ΠΈ, Π·Π° Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄ΡƒΡ‚ Π±Π»Π°Π³ΠΎΠ΄Π°Ρ€Π½Ρ‹ люди, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ послС мСня ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Ρ€Π΅Π·Π°Ρ‚ΡŒ.

Π‘ΠΎΠ±Ρ€Π°Π½Π½Ρ‹Π΅ трСбования ΠΊ psd-ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ Π²Π΅Π±-сайта / Π₯Π°Π±Ρ€

ΠŸΡ€ΠΈΠ²Π΅Ρ‚, фрондэнд Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ!

ΠŸΡ€ΠΈ вСрсткС сайта с psd-ΠΌΠ°ΠΊΠ΅Ρ‚Π°, ΠΌΡ‹ постоянно сталкиваСмся с ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… элСмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ нарисовал Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€. Π‘ΡƒΠ΄ΡŒ Ρ‚ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ°, ΠΈΠ»ΠΈ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ Ρ…ΠΈΡ‚Ρ€Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚. Нам приходится Π»ΠΈΠ±ΠΎ ΠΈΠ·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ, тратя Π½Π° это своС Ρ€Π°Π±ΠΎΡ‡Π΅Π΅ врСмя ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΡΠΈΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° ΠΏΠ΅Ρ€Π΅Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ Π² ΠΊΡ€Π°ΠΉΠ½Π΅ΠΌ случаС Π·Π°Π±ΠΈΡ‚ΡŒ ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅-ΠΌΠ΅Π½Π΅Π΅ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΏΠΎΡ…ΠΎΠΆΠ΅Π΅.

Если наш Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊ ΠΆΡƒΡ‚ΠΊΠΎ Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ, Ρ‚ΠΎ часто принимая послСднСС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, Ρƒ нас Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡŽΡ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ нСсоотвСтствия Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ свСрстано Π² ΠΈΡ‚ΠΎΠ³Π΅, с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ нарисовал Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€. ВсС эти Ρ„Π°ΠΊΡ‚ΠΎΡ€Ρ‹ Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°ΡŽΡ‚ Π½Π° нас β€” Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Ρ‚Π΅ΠΌΠ½ΠΎΠ΅ пятно, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ» свою ΠΏΡ€Π΅ΠΌΠΈΡŽ ΠΈ ΡƒΠΆΠ΅ ΠΏΡŒΠ΅Ρ‚ ΠΊΠΎΠΊΡ‚Π΅Π»ΠΈ, Π² нас ΠΊΠΈΠ΄Π°ΡŽΡ‚ ΠΏΠΎΠΌΠΈΠ΄ΠΎΡ€Π°ΠΌΠΈ ΠΈ ΠΎΠ±Π²ΠΈΠ½ΡΡŽΡ‚ Π² нСкомпСтСнтности, хотя ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ Π² нас, Π° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΠΈΠ½ΠΎΠ³Π΄Π° Π½Π΅ Π·Π½Π°ΠΊΠΎΠΌ Π΄Π°ΠΆΠ΅ с основами вСрстки ΠΈ Π½Π΅ Π·Π½Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π΅Ρ‰ΠΈ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ нСльзя.

НСмного Π½Π°Π±Ρ€Π°Π» Π² вСсС ΠΌΠΎΠ·Π³Π° ΠΈ статуса Π² ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, Π² ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΌΠΎΠΌΠ΅Π½Ρ‚ я понял, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊ дальшС ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Ρ‚ΡŒΡΡ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈ Π½Π°Ρ‡Π°Π» ΡΠΎΠ±ΠΈΡ€Π°Ρ‚ΡŒ свои трСбования Π² psd ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌ.

Π§Π΅Ρ€Π΅Π· ΠΊΠ°ΠΊΠΎΠ΅-Ρ‚ΠΎ врСмя я смог ΠΎΡ†Π΅Π½ΠΈΡ‚ΡŒ вСсь profit ΠΎΡ‚ ввСдСния этих стандартов ΠΈ Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ:

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

β€” Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊ получая Β«ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉΒ» ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΡ‡Π½ΠΎ ΠΎΡ†Π΅Π½ΠΈΡ‚ΡŒ срок выполнСния, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Ρ‚ΠΎΡ‡Π½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π΅ΠΌΡƒ Π½Π΅ придСтся Π½ΠΈΠΊΡƒΠ΄Π° большС Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΈ ΠΏΡ€ΠΎΡΠΈΡ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΏΠ΅Ρ€Π΅Π΄Π΅Π»Ρ‹Π²Π°Ρ‚ΡŒ, Ρ‚Π°ΠΊΠΆΠ΅ сюда ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈ сокращСниС сроков выполнСния. Π’Π°ΠΊ ΠΊΠ°ΠΊ Π² случаС соблюдСния ΠΏΡ€Π°Π²ΠΈΠ», становится Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΡˆΡ‚ΡƒΠΊΠ°ΠΌΠΈ Ρ‚ΠΈΠΏΠ° csshat.com + lesshat.com

β€” Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π½Π° Π²Ρ‹Ρ…ΠΎΠ΄Π΅ получаСтся Π±ΠΎΠ»Π΅Π΅ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ‡Π½Ρ‹ΠΉ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ нарисовано, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ всС Ρ‡Ρ‚ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° Β«Π½Π°Ρ‚Π²ΠΎΡ€ΠΈΠ»Β» ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅.
Π˜Ρ‚ΠΎΠ³: Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ счастлив(Π½Π΅ Π½Π°Π΄ΠΎ Π½ΠΈΡ‡Π΅Π³ΠΎ ΠΏΠ΅Ρ€Π΅Π΄Π΅Π»Ρ‹Π²Π°Ρ‚ΡŒ), Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊ счастлив(всС Ρ…ΠΎΡ€ΠΎΡˆΠΎ вСрстаСтся ΠΈ тратится Π½ΠΎΡ‡ΡŒ Π½Π° Π΄ΠΎΠΏ.Ρ€Π°Π±ΠΎΡ‚Ρƒ, Ρ‡Ρ‚ΠΎΠ± ΡƒΡΠΏΠ΅Ρ‚ΡŒ ΠΈ Π½Π΅Ρ€Π²Ρ‹ впорядкС), Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊ (свСрстаный ΠΌΠ°ΠΊΠ΅Ρ‚ соотвСтствуСт ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½Π½ΠΎΠΌΡƒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ), Π² ΠΈΡ‚ΠΎΠ³Π΅ всС ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ Π² ΠΏΡ€ΠΎΡ„ΠΈΡ‚Π΅ ΠΎΡ‚ Π²Π²Π΅Π΄Π΅Π½ΠΈΠ΅ этих ΠΏΡ€Π°Π²ΠΈΠ».

НиТС ΠΏΡ€ΠΈΠ²ΠΎΠΆΡƒ список Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ:

1) БоблюдСниС сСтки Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅, Ссли знаСшь Ρ‡Ρ‚ΠΎ это Ρ‚Π°ΠΊΠΎΠ΅ ΠΈ ΠΊΠ°ΠΊ Π΅Π΅ Β«Π³ΠΎΡ‚ΠΎΠ²ΠΈΡ‚ΡŒΒ».
Π—Π°Ρ‡Π΅ΠΌ? ΠΎ_О:
β€” чисто эстСтичСскиС наслаТдСниС
β€” Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ быстро ΡΠΎΠ±ΠΈΡ€Π°Ρ‚ΡŒ каркас страницы ΠΈ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты Π½Π°
страницС Π² соотвСтствии с прСдставлСнном ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ вСрстка ΠΏΠΎΠ»ΡƒΡ‡Π°Π»Π°ΡΡŒ Π±ΠΎΠ»Π΅Π΅ чСстной ΠΏΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡŽ ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Ρ‚Ρ‹ нарисовал(Π°).

2) Если примСняСтся Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ ΠΊ слою, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ Ρ€Π΅ΠΆΠΈΠΌ налоТСния (blend Mode: normal) ΠΈ Π΅Π³ΠΎ Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚Π°.
НС Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… ΠΏΠΎΠ»ΡƒΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹Ρ… Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ² ΠΈ слоТных Ρ€Π΅ΠΆΠΈΠΌΠΎΠ² налоТСния Ρ‚ΠΈΠΏΠ° »multiply, screen, overlay, ΠΈ Ρ‚.Π΄.».
ΠŸΠ»ΠΎΡ…ΠΎ: joxi.ru/Md6l32D
Π₯ΠΎΡ€ΠΎΡˆΠΎ joxi.ru/M2w9Nwe ΠΈ Π΅Ρ‰Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ joxi.ru/11ndBHq

3) ΠΠ΅ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ «слой Π½Π° слоС» для созданиС Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… эффСктов, Ρ‚ΠΈΠΏΠ° Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°, слой Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½.
ΠŸΡ€ΠΈΠΌΠ΅Ρ€: joxi.ru/AGx4CQy

4) Никаких Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹Ρ… Π³Ρ€Π°Π½ΠΈΡ† (Π±ΠΎΡ€Π΄Π΅Ρ€ΠΎΠ², stroke).

5) ИспользованиС слоТных Ρ€Π΅ΠΆΠΈΠΌΠΎΠ² налоТСния (blend mode) касаСтся Π»ΡŽΠ±Ρ‹Ρ… свойств слоя (Ρ‚ΠΈΠΏΠ° inner shadow, drop shadow ΠΈ Ρ‚.Π΄.).

6) ΠžΠ‘Π―Π—ΠΠ’Π•Π›Π¬ΠΠž ΠΏΡ€ΠΈΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒ ΠΊ ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±Ρ‹Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Ρ‹ Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅, Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ TTF, OTF

7) По возмоТности β€” Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ большС 2-Ρ… Π½Π΅ стандартных ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², ΠΈΡ… ΠΊΠΎΠ»-Π²ΠΎ сильно влияСт Π½Π° Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ страницы Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Ρ‡Ρ‚ΠΎ Π½Π΅Π³Π°Ρ‚ΠΈΠ²Π½ΠΎ сказываСтся Π½Π° ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΊ сайту.

8) ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ прСдставлСно оформлСния стандартных элСмСнтов Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠΈ Π²Π΅Π±-страницы (Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„Ρ‹, Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, списки, Π±Π»ΠΎΠΊΠΈ Ρ†ΠΈΡ‚Π°Ρ‚Ρ‹) joxi.ru/MKnCZQM

9) Если нарисовали Ρ‚ΠΈΠΏΠΎΠ²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ, ссылку, элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ состояниС «навСдСния», наТатия β€” Π½Π΅ заставляйтС нас Π΄ΠΎΠ΄ΡƒΠΌΡ‹Π²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ это Π΄ΠΎΠ»ΠΆΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ. Если Π΅ΡΡ‚ΡŒ ссылка, ΠΏΠΎΠΊΠ°ΠΆΠΈΡ‚Π΅ Π΅Π΅ Ρ†Π²Π΅Ρ‚ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, Ссли Π΅ΡΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠ°, ΠΏΠΎΠΊΠ°ΠΆΠΈΡ‚Π΅ Π΅Π΅ внСшний Π²ΠΈΠ΄ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈΠ»ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΈ Π΅Π΅ состоянии «нСактивности». Π­Ρ‚ΠΎ касаСтся Π»ΡŽΠ±Ρ‹Ρ… ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Ρ… элСмСнтов, стрСлок Π² Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΈ Ρ‚.Π΄. ΠΈ Ρ‚.ΠΏ. joxi.ru/ZSmaLye

10) ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Π±Π»ΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ находится Π² своСй ΠΏΠ°ΠΏΠΊΠ΅ ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ΅ чСловСчСскоС Π½Π°Π·Π²Π°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ ΡΠΎΠ±ΠΈΡ€Π°Ρ‚ΡŒ части Π±Π»ΠΎΠΊΠ° ΠΏΠΎ всСму ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ. joxi.ru/Agsfo3L

11) Если Π΅ΡΡ‚ΡŒ скрытыС слои ΠΈΠ»ΠΈ ΠΏΠ°ΠΏΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΊΠ°ΠΊΠΈΠ΅-Ρ‚ΠΎ части сайта (ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π°, Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈ Ρ‚.Π΄.) β€” Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²Ρ‹Π΄Π΅Π»ΡΡ‚ΡŒ ΠΏΠ°ΠΏΠΊΡƒ / слой β€” Ρ†Π²Π΅Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΅Π³ΠΎ Π½Π΅ ΠΏΡ€ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ, Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅Ρ‚ΡŒ Π½Π°Π·Π²Π°Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±Π»ΠΈΠ·ΠΊΠΎ ΠΏΠΎ смыслу Π΅Π³ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. joxi.ru/G1h9LbN

Π’Ρ‹Π²ΠΎΠ΄: БоблюдСниС Π΄Π°Π½Π½Ρ‹Ρ… Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΉ, ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ этап создания ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° β€” вСрстка, максимально Ρ‚ΠΎΡ‡Π½ΠΎ ΠΊ созданому ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ ΠΈ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ:
β€” нСсоотвСтствиС ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΈ свСрстанного Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°;
β€” ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ с ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠ΅ΠΌ вСрстки;
β€” ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ с ΠΊΡ€ΠΎΡΡΠ±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½ΠΎΡΡ‚ΡŒ ΠΈ Ρ€Π°Π±ΠΎΡ‚Ρ‹ вСрстки Π² Ρ†Π΅Π»ΠΎΠΌ.

Бпасибо.

ВрСбования ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½-ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌ 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
  • Π¨Ρ€ΠΈΡ„Ρ‚Ρ‹
  • Π˜ΡΡ…ΠΎΠ΄Π½Ρ‹Π΅ изобраТСния

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

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

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

Auto Layout Guide: Π½Π΅ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹

НСоднозначныС ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡŽΡ‚, ΠΊΠΎΠ³Π΄Π° систСма ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Π²Π° ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ допустимых Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ. Π•ΡΡ‚ΡŒ Π΄Π²Π΅ основныС ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρ‹:

  • ΠœΠ°ΠΊΠ΅Ρ‚ нуТдаСтся Π² Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ограничСниях, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ ΠΈ мСстополоТСниС ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²ΠΈΠ΄Π°.

    ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚Π΅, ΠΊΠ°ΠΊΠΈΠ΅ Π²ΠΈΠ΄Ρ‹ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π½Π΅ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½Ρ‹ΠΌΠΈ, просто Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ограничСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΈ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ Π²ΠΈΠ΄Π°, ΠΈ Π΅Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€.

  • ΠœΠ°ΠΊΠ΅Ρ‚ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΊΠΎΠ½Ρ„Π»ΠΈΠΊΡ‚ΡƒΡŽΡ‰ΠΈΠ΅ Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ограничСния с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚ΠΎΠΌ, ΠΈ систСма Π½Π΅ Π·Π½Π°Π΅Ρ‚, ΠΊΠ°ΠΊΠΎΠ΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ ΠΎΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π½Π°Ρ€ΡƒΡˆΠΈΡ‚ΡŒ.

    Π—Π΄Π΅ΡΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ систСмС, ΠΊΠ°ΠΊΠΎΠ΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ ΠΎΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π½Π°Ρ€ΡƒΡˆΠΈΡ‚ΡŒ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ большС Π½Π΅ Π±Ρ‹Π»ΠΈ Ρ€Π°Π²Π½Ρ‹. БистСма Π½Π°Ρ€ΡƒΡˆΠ°Π΅Ρ‚ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅, ΠΈΠΌΠ΅ΡŽΡ‰Π΅Π΅ самый Π½ΠΈΠ·ΠΊΠΈΠΉ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚.

ΠžΠ±Π½Π°Ρ€ΡƒΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½Ρ‹Ρ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ²

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

Как ΠΈ Π² случаС Π½Π΅ΡƒΠ΄ΠΎΠ²Π»Π΅Ρ‚Π²ΠΎΡ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ², Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡΠ½Ρ‹ΠΉ Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΡ‚ΡŒ всС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ нСоднозначности. МногиС ошибки ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠ΅Π½Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡƒΡ‚Π΅ΠΌ тСстирования.

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

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅, Π½Π΅ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π·Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ слоТнСС ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΡ‚ΡŒ ΠΈ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‡Π΅ΠΌ Π½Π΅ΡƒΠ΄ΠΎΠ²Π»Π΅Ρ‚Π²ΠΎΡ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹. Π”Π°ΠΆΠ΅ Ссли Π½Π΅ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½Ρ‹ΠΉ Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΉ эффСкт, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, связана Π»ΠΈ ошибка с Π½Π΅ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½ΠΎΡΡ‚ΡŒΡŽ ΠΈΠ»ΠΈ с ошибкой Π² ​​логикС ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ.

К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, Π΅ΡΡ‚ΡŒ нСсколько ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π΅ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹. ВсС эти ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΎΡ‚Π»Π°Π΄ΠΊΠΈ. УстановитС Ρ‚ΠΎΡ‡ΠΊΡƒ останова Π³Π΄Π΅-Π½ΠΈΠ±ΡƒΠ΄ΡŒ, Π³Π΄Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ ΠΊ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΈ прСдставлСний, Π° Π·Π°Ρ‚Π΅ΠΌ Π²Ρ‹Π·ΠΎΠ²ΠΈΡ‚Π΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² ΠΈΠ· консоли:

  • ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½ΡƒΡŽ ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²ΠΊΡƒ .Доступно ΠΊΠ°ΠΊ для iOS, Ρ‚Π°ΠΊ ΠΈ для OS X. Π’Ρ‹Π·ΠΎΠ²ΠΈΡ‚Π΅ этот ΠΌΠ΅Ρ‚ΠΎΠ΄ Π² нСумСстном прСдставлСнии. Π’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ ДА истинно , Ссли структура прСдставлСния Π½Π΅ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½Π°. Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС возвращаСтся , NO , , false .

  • ΡƒΠΏΡ€Π°ΠΆΠ½Π΅Π½ΠΈΠ΅ Π½Π° Π½Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΡΡ‚ΡŒ Π² раскладС . Доступно ΠΊΠ°ΠΊ для iOS, Ρ‚Π°ΠΊ ΠΈ для OS X. Π’Ρ‹Π·ΠΎΠ²ΠΈΡ‚Π΅ этот ΠΌΠ΅Ρ‚ΠΎΠ΄ для прСдставлСния с Π½Π΅ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½Ρ‹ΠΌ располоТСниСм. Π­Ρ‚ΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ систСму ΠΌΠ΅ΠΆΠ΄Ρƒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ΠΌΠΈ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΠΌΠΈ.

  • ограничСния, Π²Π»ΠΈΡΡŽΡ‰ΠΈΠ΅ Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚ для оси: .Доступно для iOS. Π’Ρ‹Π·ΠΎΠ²ΠΈΡ‚Π΅ этот ΠΌΠ΅Ρ‚ΠΎΠ΄ Π² прСдставлСнии. Он Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ массив всСх ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ, Π²Π»ΠΈΡΡŽΡ‰ΠΈΡ… Π½Π° это прСдставлСниС вдоль ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ оси.

  • ограничСния, Π²Π»ΠΈΡΡŽΡ‰ΠΈΠ΅ Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚ для ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ: . Доступно для OS X. Π’Ρ‹Π·ΠΎΠ²ΠΈΡ‚Π΅ этот ΠΌΠ΅Ρ‚ΠΎΠ΄ Π² прСдставлСнии. Он Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ массив всСх ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ, Π²Π»ΠΈΡΡŽΡ‰ΠΈΡ… Π½Π° это прСдставлСниС вдоль ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ.

  • _autolayoutTrace . ДоступСн ΠΊΠ°ΠΊ частный ΠΌΠ΅Ρ‚ΠΎΠ΄ Π² iOS. Π’Ρ‹Π·ΠΎΠ²ΠΈΡ‚Π΅ этот ΠΌΠ΅Ρ‚ΠΎΠ΄ Π² прСдставлСнии. Он Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ строку с диагностичСской ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΎΠ±ΠΎ всСй ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΈ прСдставлСния, содСрТащСй это прСдставлСниС.ДвусмыслСнныС прСдставлСния ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹, Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ прСдставлСния, Ρƒ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ΠΈΡ‚ AutoSizeMaskIntoConstraints , установлСнный Π² ДА.

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Π°ΠΌ придСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ синтаксис Objective C ΠΏΡ€ΠΈ запускС этих ΠΊΠΎΠΌΠ°Π½Π΄ Π² консоли. НапримСр, послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Ρ‚ΠΎΡ‡ΠΊΠ° останова ΠΏΡ€Π΅Ρ€Π²Π΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅, Π²Π²Π΅Π΄ΠΈΡ‚Π΅ , Π²Ρ‹Π·Π²Π°Π² [self.myView exercAmbiguityInLayout] Π² ΠΎΠΊΠ½Π΅ консоли, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄ exercAmbiguityInLayout для ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° myView . Аналогично, Π²Π²Π΅Π΄ΠΈΡ‚Π΅ po [self.myView autolayoutTrace] для распСчатки диагностичСской ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎΠ± ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΈ прСдставлСний, содСрТащСй myView .

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

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

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ hasAmbiguousLayout Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ NO false . exercAmbiguityInLayout , ΠΏΠΎ-Π²ΠΈΠ΄ΠΈΠΌΠΎΠΌΡƒ, Π½Π΅ ΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ влияния, Π° ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ AffectingLayoutForAxis: ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π½Π΅ΠΎΠΆΠΈΠ΄Π°Π½Π½Ρ‹Π΅ ограничСния.

,Руководство ΠΏΠΎ автоматичСской Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅

: ПониманиС автоматичСской Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ

ПониманиС Auto Layout

Auto Layout динамичСски рассчитываСт Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ всСх прСдставлСний Π² ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΈ прСдставлСний Π½Π° основС ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ, Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π΅ΠΌΡ‹Ρ… Π½Π° эти прСдставлСния. НапримСр, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½Π° Π±Ρ‹Π»Π° Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π° ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ с прСдставлСниСм Β«Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅Β», ΠΈ Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΊΡ€Π°ΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ всСгда оставался Π½Π° 8 ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² Π½ΠΈΠΆΠ΅ Π½ΠΈΠΆΠ½Π΅ΠΉ части изобраТСния. Если Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈΠ»ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΈΠ΄Π° изобраТСния измСняСтся, ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ автоматичСски настраиваСтся Π² соотвСтствии.

Π­Ρ‚ΠΎΡ‚ основанный Π½Π° ограничСниях ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ интСрфСйсы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ динамичСски Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΡŽΡ‚ ΠΊΠ°ΠΊ Π½Π° Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅, Ρ‚Π°ΠΊ ΠΈ Π½Π° внСшниС измСнСния.

Π’Π½Π΅ΡˆΠ½ΠΈΠ΅ измСнСния

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

  • ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ измСняСт Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΎΠΊΠ½Π° (OS X).

  • ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π²Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΈΠ»ΠΈ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΈΠ· Split View Π½Π° iPad (iOS).

  • Устройство вращаСтся (iOS).

  • Π‘Π°Ρ€Ρ‹ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Ρ‹Π·ΠΎΠ²Π° ΠΈ записи Π·Π²ΡƒΠΊΠ° ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΈΠ»ΠΈ ΠΈΡΡ‡Π΅Π·Π°ΡŽΡ‚ (iOS).

  • Π’Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ классы Ρ€Π°Π·ΠΌΠ΅Ρ€Π°.

  • Π’Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ экрана.

Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΈΠ· этих ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΡ‚ΠΈ Π²ΠΎ врСмя выполнСния, ΠΈ ΠΎΠ½ΠΈ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ динамичСского ΠΎΡ‚Π²Π΅Ρ‚Π° ΠΎΡ‚ вашСго прилоТСния.Π”Ρ€ΡƒΠ³ΠΈΠ΅, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² экрана, ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΡƒΡŽΡ‰Π΅Π΅ΡΡ ΠΊ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌ срСдам. Π”Π°ΠΆΠ΅ Ссли Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π½Π΅ измСняСтся Π²ΠΎ врСмя выполнСния, созданиС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ интСрфСйса позволяСт Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡŽ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π° iPhone 4S, iPhone 6 Plus ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ iPad. АвтоматичСская Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° Ρ‚Π°ΠΊΠΆΠ΅ являСтся ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠΌ для ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ слайд-ΡˆΠΎΡƒ ΠΈ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… Π²ΠΈΠ΄ΠΎΠ² Π½Π° iPad.

Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ измСнСния

Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ измСнСния происходят ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° прСдставлСний ΠΈΠ»ΠΈ элСмСнтов управлСния Π² вашСм ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΌ интСрфСйсС.

Π’ΠΎΡ‚ нСсколько ΠΎΠ±Ρ‰ΠΈΡ… источников Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΡ… ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ:

  • Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, измСнится.

  • ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π°Ρ†ΠΈΠΎΠ½Π°Π»ΠΈΠ·Π°Ρ†ΠΈΡŽ.

  • ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Dynamic Type (iOS).

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

Π˜Π½Ρ‚Π΅Ρ€Π½Π°Ρ†ΠΈΠΎΠ½Π°Π»ΠΈΠ·Π°Ρ†ΠΈΡ — это процСсс Π°Π΄Π°ΠΏΡ‚Π°Ρ†ΠΈΠΈ вашСго прилоТСния ΠΊ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌ языкам, Ρ€Π΅Π³ΠΈΠΎΠ½Π°ΠΌ ΠΈ ΠΊΡƒΠ»ΡŒΡ‚ΡƒΡ€Π°ΠΌ. ΠœΠ°ΠΊΠ΅Ρ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π°Ρ†ΠΈΠΎΠ½Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ прилоТСния Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ эти различия ΠΈ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π½Π° всСх языках ΠΈ Ρ€Π΅Π³ΠΈΠΎΠ½Π°Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.

Π˜Π½Ρ‚Π΅Ρ€Π½Π°Ρ†ΠΈΠΎΠ½Π°Π»ΠΈΠ·Π°Ρ†ΠΈΡ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚Ρ€ΠΈ основных эффСкта Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚. Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ΠΈΡ‚Π΅ свой ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ язык, ΠΌΠ΅Ρ‚ΠΊΠΈ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎ пространства.НСмСцкий, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ большС мСста, Ρ‡Π΅ΠΌ английский. Японский часто Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ Π³ΠΎΡ€Π°Π·Π΄ΠΎ мСньшС.

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

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

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

АвтоматичСская ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ°

Π² сравнСнии с Ρ€Π°ΠΌΠΎΡ‡Π½ΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΎΠΉ

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

Π’Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎ прилоТСния Ρ€Π°Π·ΠΌΠ΅Ρ‡Π°Π»ΠΈ свой ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс, ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎ устанавливая Ρ„Ρ€Π΅ΠΉΠΌ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ прСдставлСния Π² ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΈ прСдставлСний.Π Π°ΠΌΠΊΠ° опрСдСляла происхоТдСниС, высоту ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π²ΠΈΠ΄Π° Π² систСмС ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ супСрпрСдставлСния.

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свой ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Ρ€Π°ΡΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ прСдставлСния Π² ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΈ прСдставлСний. Π—Π°Ρ‚Π΅ΠΌ, Ссли ΠΏΡ€ΠΎΠΈΠ·ΠΎΡˆΠ»ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅, Π²Π°ΠΌ ΠΏΡ€ΠΈΡˆΠ»ΠΎΡΡŒ ΠΏΠ΅Ρ€Π΅ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ Ρ„Ρ€Π΅ΠΉΠΌ для всСх задСйствованных Π²ΠΈΠ΄ΠΎΠ².

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

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

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

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

Auto Layout опрСдСляСт ваш ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ряд ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ. ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΡ, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρƒ двумя прСдставлСниями. Π—Π°Ρ‚Π΅ΠΌ Auto Layout рассчитываСт Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ мСстополоТСниС ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²ΠΈΠ΄Π° Π½Π° основС этих ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ. Π­Ρ‚ΠΎ создаСт ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ динамичСски Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΡŽΡ‚ ΠΊΠ°ΠΊ Π½Π° Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅, Ρ‚Π°ΠΊ ΠΈ Π½Π° внСшниС измСнСния.

Π›ΠΎΠ³ΠΈΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠ°Ρ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π½Π°Π±ΠΎΡ€Π° ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ для создания ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠΉ, ΠΎΡ‡Π΅Π½ΡŒ отличаСтся ΠΎΡ‚ Π»ΠΎΠ³ΠΈΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠΉ для написания ΠΏΡ€ΠΎΡ†Π΅Π΄ΡƒΡ€Π½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½ΠΎ-ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°.К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, освоСниС Auto Layout Π½ΠΈΡ‡Π΅ΠΌ Π½Π΅ отличаСтся ΠΎΡ‚ освоСния любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π·Π°Π΄Π°Ρ‡ΠΈ программирования. Π•ΡΡ‚ΡŒ Π΄Π²Π° основных шага: сначала Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ Π»ΠΎΠ³ΠΈΠΊΡƒ, Π»Π΅ΠΆΠ°Ρ‰ΡƒΡŽ Π² основС ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π½Π° основС ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ, Π° Π·Π°Ρ‚Π΅ΠΌ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ API. Π’Ρ‹ ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΠ»ΠΈ эти шаги ΠΏΡ€ΠΈ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π·Π°Π΄Π°Ρ‡ программирования. Авто ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π΅ являСтся ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ.

ΠžΡΡ‚Π°Π»ΡŒΠ½Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ этого руководства ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π° для облСгчСния вашСго ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° ΠΊ автоматичСской ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ΅. Π“Π»Π°Π²Π° «АвтоматичСскоС располоТСниС Π±Π΅Π· ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉΒ» описываСт Π²Ρ‹ΡΠΎΠΊΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΡƒΡŽ Π°Π±ΡΡ‚Ρ€Π°ΠΊΡ†ΠΈΡŽ, которая ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ созданиС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов с ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ автоматичСского размСщСния.Π“Π»Π°Π²Π° «Анатомия ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉΒ» содСрТит Π±Π°Π·ΠΎΠ²ΡƒΡŽ Ρ‚Π΅ΠΎΡ€ΠΈΡŽ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ с Auto Layout ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ. Π Π°Π±ΠΎΡ‚Π° с ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΡΠΌΠΈ Π² Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡΠ½ΠΎΠΌ Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ΅ описываСт инструмСнты для проСктирования АвтоматичСской Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ, ΠΈ Π³Π»Π°Π²Ρ‹ ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎ Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ ΠΈ АвтоматичСской Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΏΠΎΠ²Π°Ρ€Π΅Π½Π½ΠΎΠΉ ΠΊΠ½ΠΈΠ³ΠΈ ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ API ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ. НаконСц, Auto Layout Cookbook прСдставляСт ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ спСктр Ρ‚ΠΈΠΏΠΎΠ²Ρ‹Ρ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Ρ€Π°Π·Π½ΠΎΠ³ΠΎ уровня слоТности, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΡƒΡ‡Π°Ρ‚ΡŒ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² своих собствСнных ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ…, Π° Debugging Auto Layout ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ совСты ΠΈ инструмСнты для исправлСния ошибок, Ссли Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΏΠΎΠΉΠ΄Π΅Ρ‚ Π½Π΅ Ρ‚Π°ΠΊ.

АвтоматичСская ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ° Π±Π΅Π· ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ

Copyright Β© 2018 Apple Inc. ВсС ΠΏΡ€Π°Π²Π° Π·Π°Ρ‰ΠΈΡ‰Π΅Π½Ρ‹. Условия использования | ΠŸΠΎΠ»ΠΈΡ‚ΠΈΠΊΠ° ΠΊΠΎΠ½Ρ„ΠΈΠ΄Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ | ОбновлСно: 2016-03-21

,
Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ConstraintLayout для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π²Π°ΡˆΠΈΡ… просмотров Android

Π’ этом ΠΊΠΎΠ΄Π΅ Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Android Studio с ConstraintLayout — Π½ΠΎΠ²Ρ‹ΠΌ, Π³ΠΈΠ±ΠΊΠΈΠΌ ΠΈ эффСктивным ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ, доступным Π² Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Android. Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ConstraintLayout для опрСдСлСния полоТСния элСмСнта ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса. ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ прСдставляСт собой соСдинСниС ΠΈΠ»ΠΈ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ с Π΄Ρ€ΡƒΠ³ΠΈΠΌ Π²ΠΈΠ΄ΠΎΠΌ, Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ ΠΈΠ»ΠΈ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ руководством.

Π’Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² основном с Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² для этой ΠΊΠΎΠ΄ΠΎΠ²ΠΎΠΉ ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΈ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚Π΅ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ XML ΠΈΠ»ΠΈ Java.К ΠΊΠΎΠ½Ρ†Ρƒ этой ΠΊΠΎΠ΄ΠΎΠ²ΠΎΠΉ ΠΌΠ΅Ρ‚ΠΊΠΈ Ρƒ вас Π±ΡƒΠ΄Π΅Ρ‚ достаточно ΠΎΠΏΡ‹Ρ‚Π° Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π² Android Studio, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ слоТный ΠΌΠ°ΠΊΠ΅Ρ‚, Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½ΠΈΠΆΠ΅.

ΠŸΡ€Π΅Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚Ρ‹

  • ΠžΠΏΡ‹Ρ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ для Android
  • ΠΎΠΏΡ‹Ρ‚Π° с Android Studio

Π§Ρ‚ΠΎ Ρ‚Ρ‹ Π±ΡƒΠ΄Π΅ΡˆΡŒ Π΄Π΅Π»Π°Ρ‚ΡŒ

  • Π£Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ автоматичСски ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒ элСмСнты ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅.
  • Как Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ элСмСнтов Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅.
  • Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ограничСния для размСщСния ΠΈ выравнивания элСмСнтов с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ элСмСнтами.
  • Как Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΈ поля ΠΌΠ°ΠΊΠ΅Ρ‚Π° элСмСнта.
  • ΠΠ°ΡƒΡ‡ΠΈΡ‚Π΅ΡΡŒ автоматичСски Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ΡŒ ограничСния для ΠΌΠ°ΠΊΠ΅Ρ‚Π°.
  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π±Π°Ρ€ΡŒΠ΅Ρ€Ρ‹ для выравнивания элСмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ динамичСски ΠΈΠ·ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ.
  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠΈ для позиционирования Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… элСмСнтов.

Π§Ρ‚ΠΎ Π²Π°ΠΌ понадобится

Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΎΠ±Ρ€Π°Π·Π΅Ρ† прилоТСния, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅:

Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ZIP

.. ΠΈΠ»ΠΈ ΠΊΠ»ΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ GitHub-Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΉ ΠΈΠ· ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ строки с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹:

 $ git clone https://github.com/googlecodelabs/constraint-layout.git 

Π₯Ρ€Π°Π½ΠΈΠ»ΠΈΡ‰Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ содСрТит ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ прилоТСния:

  • constraint-layout-start — ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, содСрТащий ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π² этом ΠΊΠΎΠ΄Π΅.

Часто Π·Π°Π΄Π°Π²Π°Π΅ΠΌΡ‹Π΅ вопросы

Π‘Π½Π°Ρ‡Π°Π»Π° Π΄Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, ΠΊΠ°ΠΊ выглядит Π³ΠΎΡ‚ΠΎΠ²ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅-ΠΎΠ±Ρ€Π°Π·Π΅Ρ†.Π‘Π»Π΅Π΄ΡƒΠΉΡ‚Π΅ этим инструкциям, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Π·Π΅Ρ† прилоТСния Π² Android Studio.

  1. Если Π²Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΠ»ΠΈ Ρ„Π°ΠΉΠ» ΠΏΠΎΡ‡Ρ‚ΠΎΠ²ΠΎΠ³ΠΎ индСкса Restric-layout-master , распакуйтС Π΅Π³ΠΎ.
  2. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ ΠΏΠ°ΠΏΠΊΡƒ constraint-layout-master , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΏΠ°ΠΏΠΊΡƒ constraint-layout-start .
  3. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅-ΠΌΠ°ΠΊΠ΅Ρ‚-Π½Π°Ρ‡Π°Π»ΠΎ Π² Android Studio.
  4. НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒ Run ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ эмулятор ΠΈΠ»ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ устройство Android, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ Android Lollipop (ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹ΠΉ SDK — 22).Π”ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΡΠ²ΠΈΡ‚ΡŒΡΡ экран ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ:

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ConstraintLayout, ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π° Π² Ρ„Π°ΠΉΠ» build.gradle (ΠœΠΎΠ΄ΡƒΠ»ΡŒ: ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅) Π² вашСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅. Π—Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ-ΠΌΠ°ΠΊΠ΅Ρ‚ прСдоставляСтся Π² Π²ΠΈΠ΄Π΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ, которая Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° всСх вСрсиях Android Π²ΠΏΠ»ΠΎΡ‚ΡŒ Π΄ΠΎ Android 2.3 (Gingerbread).

ΠΠ°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡƒΠΆΠ΅ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ Π² build.gradle. Π¨Π°Π±Π»ΠΎΠ½Ρ‹ Android Studio Ρ‚Π°ΠΊΠΆΠ΅ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ эту Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ для Π½ΠΎΠ²Ρ‹Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ².

ΠŸΡ€ΠΈ создании Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° прилоТСния всСгда ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΠΉΡ‚Π΅ build.gradle ΠΈ ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π² Π½Π΅Π³ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π° самая послСдняя вСрсия зависимости. Android Studio выдСляСт Π»ΡŽΠ±ΡƒΡŽ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ, которая Π½Π΅ являСтся самой послСднСй вСрсиСй. Если Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π°, Π½Π°Π²Π΅Π΄ΠΈΡ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€, ΠΈ Android Studio ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚ Π±ΠΎΠ»Π΅Π΅ Π½ΠΎΠ²ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ. Π—Π°ΠΌΠ΅Π½ΠΈΡ‚Π΅ x.x.x ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌΡ‹ΠΌ Π½ΠΎΠΌΠ΅Ρ€ΠΎΠΌ вСрсии.

 зависимостСй {
  ...
  compile 'com.android.support.constraint: ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅-располоТСниС: x.x.xΒ»
} 

Если Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ сообщСниС ΠΎΠ± ошибкС синхронизации Gradle, ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ для инструкции buildToolsVersion Π² build.gradle установлСно Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 25.0.3 ΠΈΠ»ΠΈ Π½ΠΎΠ²Π΅Π΅:

Π’ нашСм случаС buildToolsVersion "29.0.2"

Π‘ΠΎΠΎΠ±Ρ‰Π΅Π½ΠΈΠ΅ ΠΎΠ± ошибкС ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΠΌΠ΅Π΅Ρ‚ ссылку, которая ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π² Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ вСрсии инструмСнтов сборки.

Android Studio прСдоставляСт Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² для быстрого создания ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ². Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅Ρ‚Π°ΡΠΊΠΈΠ²Π°Ρ‚ΡŒ элСмСнты ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π² Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ Π²ΠΈΠ΄ Ρ‡Π΅Ρ€Ρ‚Π΅ΠΆΠ°, Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ элСмСнты Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅, Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ограничСния ΠΈ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹.Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим:

  1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ activity_main_done.xml Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ ΠŸΡ€ΠΎΠ΅ΠΊΡ‚. ΠžΡ‚ΠΊΡ€ΠΎΠ΅Ρ‚ΡΡ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ².
  2. БостояниС Design ΡƒΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹Π±Ρ€Π°Π½ΠΎ; Ссли Π½Π΅Ρ‚, Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ ΡΠΎΡΡ‚ΠΎΡΠ½ΠΈΡŽ Design Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ ΠΎΠΊΠ½Π° Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°.

  1. Если Π½Π΅Ρ‚ Ρ‡Π΅Ρ€Ρ‚Π΅ΠΆΠ°, Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡ΠΎΠΊ ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ‡Π΅Ρ€Ρ‚Π΅ΠΆ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов.

Π’Π°ΡˆΠ° панСль Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π΄ΠΎΠ»ΠΆΠ½Π° Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅.

На рисункС Π²Ρ‹ΡˆΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ²:

  1. ПанСль инструмСнтов
  2. ΠŸΠ°Π»ΠΈΡ‚Ρ€Π°
  3. ДизайнСрский Π²ΠΈΠ΄
  4. Blueprint view
  5. Π”Π΅Ρ€Π΅Π²ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒ Device in Editor Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов (ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° рисункС Π²Ρ‹ΡˆΠ΅), Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ устройства ΠΈ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ выглядит ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… экранах устройств.

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ XML-ΠΊΠΎΠ΄ ΠΌΠ°ΠΊΠ΅Ρ‚Π°, Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Text рядом с ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ Β«Π”ΠΈΠ·Π°ΠΉΠ½Β».Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ прСдставлСниС XML ΠΈ ΠΏΠΎΠ²Π΅Ρ€Ρ…Π½ΠΎΡΡ‚ΡŒ конструктора, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Split . Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ XML для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ элСмСнта Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅. НапримСр, Π½ΠΈΠΆΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ элСмСнт EditText с ограничСниями Π² прСдставлСнии конструктора ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈ ограничСния XML для Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ элСмСнта EditText , ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ ВСкст .

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ EditText Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ конструктора:

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ EditText Π² XML, ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ограничСния:

  

НапримСр, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ app: layout_constraintLeft_toLeftOf Π² ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²Ρ‹ΡˆΠ΅ XML-ΠΊΠΎΠ΄Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Π΅Ρ‚ Π»Π΅Π²ΡƒΡŽ сторону элСмСнта слСва ΠΎΡ‚ элСмСнта настроСк .

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

Autoconnect ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄Π²Π° ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ для элСмСнта ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса для Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°. ПослС пСрСтаскивания элСмСнта Π² ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΎΠ½ создаСт ограничСния Π½Π° основС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ элСмСнта.

  1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ activity_main_autoconnect.xml ΠΈΠ· ΠΏΠ°Π½Π΅Π»ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.
    Π’ΠΊΠ»Π°Π΄ΠΊΠ° Design ΡƒΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹Π±Ρ€Π°Π½Π°; Ссли Π½Π΅Ρ‚, Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ Π½Π΅ΠΌΡƒ.
  2. Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ инструмСнт автоматичСского ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ, располоТСнный Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов, Π²ΠΊΠ»ΡŽΡ‡Π΅Π½.
    ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
  3. Π’ Ρ‡Π΅Ρ€Ρ‚Π΅ΠΆΠ΅ ΠΈΠ»ΠΈ Π² ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΌ просмотрС Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅, Π·Π°Ρ‚Π΅ΠΌ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ ImageView ΠΊ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΌΠ°ΠΊΠ΅Ρ‚Π°, ΠΏΠΎΠΊΠ° Π½Π΅ появятся ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½Ρ‹Π΅ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅.
  4. ΠžΡ‚ΠΏΡƒΡΡ‚ΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΡ‹ΡˆΠΈ, ΠΊΠΎΠ³Π΄Π° ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅, ΠΈΠ΄ΡƒΡ‰ΠΈΠ΅ свСрху Π²Π½ΠΈΠ·, Π° Ρ‚Π°ΠΊΠΆΠ΅ слСва Π½Π°ΠΏΡ€Π°Π²ΠΎ.
    Π’Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ синиС Π·ΠΈΠ³Π·Π°Π³ΠΎΠΎΠ±Ρ€Π°Π·Π½Ρ‹Π΅ Π»ΠΈΠ½ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ограничСния, ΡΠΎΠ΅Π΄ΠΈΠ½ΡΡŽΡ‚ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ, Π»Π΅Π²Ρ‹ΠΉ, Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΈ ΠΏΡ€Π°Π²Ρ‹ΠΉ края прСдставлСния с краями Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ прСдставлСния, цСнтрируя ImageView Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌ рисункС Π½ΠΈΠΆΠ΅:

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

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° эти ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ Π² прСдставлСнии «План» ΠΈΠ»ΠΈ Β«Π”ΠΈΠ·Π°ΠΉΠ½Β» Π² ImageView:

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

ДСскриптор ограничСния : Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ дСскриптор ограничСния, ΠΏΠΎΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ Π² Π²ΠΈΠ΄Π΅ ΠΊΡ€ΡƒΠ³Π° Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ сторонС элСмСнта, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ Π΅Π³ΠΎ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ дСскриптор ограничСния ΠΈΠ»ΠΈ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΡƒΡŽ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅. ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ прСдставлСно Π·ΠΈΠ³Π·Π°Π³ΠΎΠΎΠ±Ρ€Π°Π·Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠ΅ΠΉ.

Π§Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ImageView ΠΏΠΎ Π²Π΅Ρ€Ρ…Ρƒ, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ImageView, Π½Π°Π²Π΅Π΄ΠΈΡ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° ниТнюю Ρ€ΡƒΡ‡ΠΊΡƒ ограничСния Π΄ΠΎ появлСния Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки, Π° Π·Π°Ρ‚Π΅ΠΌ Command ( Π² MacOS) ΠΈΠ»ΠΈ Control ( Ctrl Π² Windows) Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ Π½ΠΈΠΆΠ½Π΅ΠΉ части. дСскриптор ограничСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Π΅Π³ΠΎ:

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²ΠΈΠ΄ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½ ΠΊ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части ΠΌΠ°ΠΊΠ΅Ρ‚Π°, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ сущСствуСт Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ (Π²Π²Π΅Ρ€Ρ…Ρƒ).Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ ограничСния ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ Π²ΠΈΠ΄ Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅.

ΠŸΡ€ΠΈ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π½ΠΎΠΌ Autoconnect Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚ΡŒ любой элСмСнт (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠ½ΠΎΠΏΠΊΡƒ) Π² Π»ΡŽΠ±ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ограничСния для Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚:

  1. ΠŸΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΈΠ· Ρ€Π°Π·Π΄Π΅Π»Π° Β«Π’ΠΈΠ΄ΠΆΠ΅Ρ‚Ρ‹Β» ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹ Π² Π»ΡŽΠ±ΡƒΡŽ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΈ отпуститС ΠΊΠ½ΠΎΠΏΠΊΡƒ.

  1. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ ΠΈ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ Π΅Π΅ Π² ΠΏΡ€Π°Π²Ρ‹ΠΉ Π½ΠΈΠΆΠ½ΠΈΠΉ ΡƒΠ³ΠΎΠ», ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅ — , ΠΏΠΎΠΊΠ° Π½Π΅ появятся подсказки Π±ΠΎΠΊΠΎΠ²ΠΎΠ³ΠΎ ΠΈ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΏΠΎΠ»Π΅ΠΉ .Когда Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ указания Π² ΠΎΠ±ΠΎΠΈΡ… направлСниях, отпуститС ΠΊΠ½ΠΎΠΏΠΊΡƒ. Кнопка привязываСтся ΠΊ руководству автоматичСски.

Autoconnect Π·Π°Ρ‚Π΅ΠΌ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ ограничСния для Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°. Π”Π²Π° полоТСния автоматичСски Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π²Ρ‹ пСрСтаскивали ΠΊΠ½ΠΎΠΏΠΊΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€Ρ‹, Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя 16dp Π² качСствС ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ ΠΈ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΏΠΎΠ»Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‚ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠΌ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ:

Π’ этом ΡƒΠΏΡ€Π°ΠΆΠ½Π΅Π½ΠΈΠΈ Π²Ρ‹ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚ с нуля, добавляя ΠΈ измСняя Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ImageView .

  1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ activity_main_start.xml Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΈ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡƒ Design .
  2. ΠžΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ инструмСнт автоматичСского ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ (Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π΅Π³ΠΎ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π·, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ), Ρ‡Ρ‚ΠΎΠ±Ρ‹ ограничСния Π½Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΈΡΡŒ автоматичСски ΠΏΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ элСмСнта ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса.

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

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ImageView Π² ΠΌΠ°ΠΊΠ΅Ρ‚

  1. НайдитС ImageView Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ Β«Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡΒ» Π² ΠΏΠ°Π»ΠΈΡ‚Ρ€Π΅ ΠΈ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ Π΅Π³ΠΎ Π² любоС мСсто ΠΌΠ°ΠΊΠ΅Ρ‚Π°.

ΠžΡ‚ΠΊΡ€ΠΎΠ΅Ρ‚ΡΡ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Resources . ΠžΠ±Ρ€Π°Π·Π΅Ρ† Restric-layout-start ΡƒΠΆΠ΅ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ рСсурсы для ΠΊΠΎΠ΄ΠΎΠ²ΠΎΠΉ ΠΌΠ΅Ρ‚ΠΊΠΈ.

  1. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ рСсурс @ drawable / singapore ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ OK .

ImageView появляСтся Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅.

  1. ΠŸΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ элСмСнт Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΈ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ ΡƒΠ³Π»Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния. ИзмСняя Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния, ΡˆΠΈΡ€ΠΈΠ½Π° ΠΈ высота Ρ„ΠΈΠΊΡΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌ.

Π’Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ Component Tree . НаТмитС Π½Π° ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ большС ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ. ΠŸΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΡ ΠΈ ошибки Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Π² сСбя:

  • ΠžΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‚ ограничСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚Π΅ ΠΏΠΎΠ·ΠΆΠ΅ Π² этом Ρ€Π°Π·Π΄Π΅Π»Π΅.
  • ΠžΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΡƒΠ΅Ρ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ contentDescription для ImageView .

Атрибуты описания содСрТимого

Π²Π°ΠΆΠ½Ρ‹ для создания доступных ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡƒΠΆΠ΅ доступный рСсурс @ string / placeholder для Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°.

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ значСния Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ², ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ панСль «Атрибуты Β», которая открываСтся Π² ΠΏΡ€Π°Π²ΠΎΠΉ части Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ²:

  1. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ элСмСнт ImageView , Ссли ΠΎΠ½ Π΅Ρ‰Π΅ Π½Π΅ Π²Ρ‹Π±Ρ€Π°Π½.
  2. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ Атрибуты Π² ΠΏΡ€Π°Π²ΠΎΠΉ части ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов:

ΠžΡ‚ΠΊΡ€ΠΎΠ΅Ρ‚ΡΡ панСль Атрибуты , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ элСмСнта ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса.

  1. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ @ string / placeholder Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ contentDescription .
  2. На ΠΏΠ°Π½Π΅Π»ΠΈ Атрибуты Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ для ImageView . Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ centerCrop Π² Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡΡ мСню scaleType , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ scaleType .

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ограничСния Π² Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ рисунок дСмонстрируСт, ΠΊΠ°ΠΊ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ эти шаги:

  1. Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ ΠΊ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ ImageView , Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΈ ΡƒΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°ΠΉΡ‚Π΅ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ ограничСния ΠΈ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ линию ΠΊ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°.
  2. Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ края для ImageView , ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ограничСния ΠΊ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°.
  3. Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π²Π΅Ρ€Ρ…Π½Π΅Π΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ для ImageView , ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ограничСния Π² Π²Π΅Ρ€Ρ…Π½ΡŽΡŽ Ρ‡Π°ΡΡ‚ΡŒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°.
  4. Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½ΠΈΠΆΠ½Π΅Π΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ для ImageView , ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ курсор ΠΈΠ· ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° ограничСния Π² ниТнюю Ρ‡Π°ΡΡ‚ΡŒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°.

Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² автоматичСски Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ΠΏΠΎΠ»Π΅ ΠΏΠΎ 8 Π΄ΠΏ Π²ΠΎΠΊΡ€ΡƒΠ³ ImageView ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.Π Π°Π·ΠΌΠ΅Ρ€ поля отобраТаСтся Π½Π°Π΄ Π»ΠΈΠ½ΠΈΠ΅ΠΉ ограничСния:

Π’Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с полями Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ Ρ€Π°Π·Π΄Π΅Π»Π΅.

,
Руководство ΠΏΠΎ автоматичСской Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅: стСковыС Π²ΠΈΠ΄Ρ‹

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

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ исходный ΠΊΠΎΠ΄ этих Ρ€Π΅Ρ†Π΅ΠΏΡ‚ΠΎΠ², см. ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ Auto Layout Cookbook.

Simple Stack View

Π­Ρ‚ΠΎΡ‚ Ρ€Π΅Ρ†Π΅ΠΏΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΎΠ΄ΠΈΠ½ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π²ΠΈΠ΄ стСка для размСщСния ΠΌΠ΅Ρ‚ΠΊΠΈ, изобраТСния ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ.

взглядов ΠΈ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ

Π’ Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡΠ½ΠΎΠΌ Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ΅ Π½Π°Ρ‡Π½ΠΈΡ‚Π΅ с пСрСтаскивания Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ прСдставлСния стСка ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΌΠ΅Ρ‚ΠΊΡƒ Ρ†Π²Π΅Ρ‚ΠΎΠ², прСдставлСниС изобраТСния ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡƒ рСдактирования. Π—Π°Ρ‚Π΅ΠΌ установитС ограничСния, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ.

  1. Stack View.Leading = Superview.LeadingMargin

  2. Stack View.Trailing = Superview.TrailingMargin

  3. Stack View.Top = Top Layout Guide.Bottom + Standard

  4. Руководство ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅ Π΄Π½Π°. Π’Π΅Ρ€Ρ… = Π’ΠΈΠ΄ стСка. Низ + Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚

Атрибуты

Π’ инспСкторС Атрибутов установитС ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ стСкового прСдставлСния:

стСк

Ось

Ρ†Π΅Π½Ρ‚Ρ€ΠΎΠ²ΠΊΠ°

распрСдСлСниС

Разнос

Stack View

Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ

Π—Π°Π»ΠΈΠ²ΠΊΠ°

Π—Π°Π»ΠΈΠ²ΠΊΠ°

8

Π—Π°Ρ‚Π΅ΠΌ установитС ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Π² прСдставлСнии изобраТСния:

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

Атрибут

Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ изобраТСния

ΠžΠ±Ρ€Π°Π·

(я

.

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

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