З моменту появи версії CS6 Adobe впровадила у Photoshop дуже корисний варіант розмітки та розробки веб-дизайну. Операція є дуже легко і, особливо, швидко. За допомогою програми ми зможемо створювати каскадні таблиці стилів, беручи в якості посилання наші шари форми та тексту. Процедура проста, як розробка нашого макету, копіювання кодової версії наших елементів та вставка на наш аркуш.
Це дуже хороший варіант, особливо тому, що він дозволяє нам бачити еволюцію нашого дизайну у візуальному плані та в реальному часі. Ось декілька порад щодо використання цієї опції та отримання максимальна продуктивність:
Намагайся бути точним
Для отримання професійного результату рекомендується врахувати виміри та пропорції вашого сайту. Встановіть значення ширини та висоти шаблону, який ви розробляєте, і застосуйте їх до макету. Коли ви копіюєте CSS-код, ми розмістимо кожен елемент, приймаючи за посилання відстань у пікселях між кожним елементом та краями полотна. Також враховуйте розміри та ієрархічні причини, які ви збираєтеся включати у свій дизайн, включаючи вирівнювання кожного елемента та відстань між кожним з них, щоб забезпечити максимальну читабельність для ваших користувачів.
Використання керівництв та правил інтерфейсу допоможе вам створити акуратний, чистий шаблон з усіма його елементами, ідеально вирівняними.
Налаштуйте всі характеристики кожного елемента
Можливість копіювання коду CSS дає нам можливість з великою точністю розробити наш сайт з використанням шарів форми та тексту. Вміст кожного шару буде скопійовано в буфер обміну, і ми можемо швидко вставити його в нашу таблицю стилів. З шарів фігури захопіть значення таких параметрів:
- Tamano
- Положення
- Колір обведення
- Колір заливки (включаючи градієнти)
- Тінь
З текстових шарів ми можемо отримати наступні значення:
- Сімейство шрифтів
- Розмір шрифту
- Товщина шрифту
- Висота лінії
- Підкреслено
- Проривчастий
- Надрядковий
- Підрядковий знак
- Вирівнювання тексту
Майте це на увазі і встановіть кожне з цих значень, щоб забезпечити стиль, який ви шукаєте.
Робота з групами шарів
Ця функція перекладає нашу роботу, організовану двома типами класів, по одному для кожної групи, що об’єднує шари фігур або тексту та клас для кожного шару одного з цих типів. Кожен груповий клас буде представляти батьківський елемент div, який буде містити дочірні елементи div і відповідатиме шарам, вставленим у кожну групу. Таким чином, верхнє та ліве значення дочірніх контейнерів будуть встановлені, посилаючись на батьківський контейнер. Слід пам’ятати, що ця опція недоступна для розумних об’єктів, і вона не застосовуватиметься одночасно до більш ніж одного шару, якщо вони не згруповані.
Кроки для перетворення
Після того, як ви зробили макет, ви персоналізували кожен елемент і згрупували їх за групами, вам потрібно буде лише виконати такі дії:
- Перейдіть на панель шарів і виберіть один із цих двох варіантів:
- Клацніть правою кнопкою миші на фігурі або текстовому шарі або групі шарів і виберіть Скопіюйте CSS у контекстному меню.
- Виберіть шар фігури або тексту або групу шарів, а потім виберіть варіант Скопіюйте CSS у меню панелі "Шари".
-
Вставте код у документ таблиці стилів та застосуйте його до своїх сторінок за допомогою html5.
