Як нарізати сайт

Як нарізати сайт

Створення власного інтернет-сайту завжди починається з розробки ескізу і майбутнього дизайну, а також невід’ємною частиною цієї розробки є візуалізація оформлення сайту в Фотошопі і розрізання готового оформлення на блоки для подальшої верстки. Уміння правильно нарізати картинку оформлення сайту безпосередньо впливає на подальший успіх верстки і на коректність розміщення графічних файлів на сервері.

Інструкція

  1. Відкрийте в Фотошопі створений дизайн-макет, який представляє собою цільне зображення потрібного дозволу. На панелі інструментів в Фотошопі виберіть інструмент розкрою (Slice). Тимчасово вимкніть видимість всіх текстових шарів, полів введення, іконок і подібних елементів.
  2. Проведіть з допомогою обраного інструменту напрямні лінії, за якими Ви розріжете сайт — ці лінії на зображенні будуть зеленого кольору. Акуратно розділіть цілісний макет на структурні елементи потрібного розміру і кількості.
  3. Продумайте, як ви будете нарізати зображення — у ньому не повинно бути занадто великої кількості окремих елементів. Для створення направляючих ліній наведіть курсор на верхню лінійку на зображення натисніть лівою кнопкою миші і протягніть вниз напрямну. Відпустіть кнопку миші.
  4. Після того як всі напрямні будуть встановлені (як вертикальні, так і горизонтальні), переходьте до нарізки макета.
  5. За допомогою обраного вище інструмента розкрою наріжте макет, клікаючи лівою клавішею миші на початку кожної направляючої і розтягуючи з’явилося поле до розміру потрібного об’єкта, який ви хочете вирізати. Відпустіть ліву кнопку миші, щоб у лівому кутку вирізаного фрагмента з’явився порядковий номер.
  6. Відкоригуйте кордону фрагментів, розтягуючи їх вручну. Для того щоб зберегти нарізані частини загального зображення, клікніть в меню File опцію «Зберегти для Web-сторінок» і виберіть формат JPEG. У вікні збереження вкажіть «Всі фрагменти».
  7. Після збереження вирізаних фрагментів зображення окремо збережете всі візуальні елементи оформлення сторінки — текстові блоки, кнопки, лінії й так далі.