Інструменти раскройка і виділення фрагмента в photoshop, пізнаємо захоплюючий світ photoshop і
Навчимося розрізати великі зображення на фрагменти для того, щоб вони швидше завантажувалися в інтернеті.
Отже, інструмент розкрою в Photoshop використовується для розрізання зображення на частини. Наприклад, веб-дизайнери використовують цей інструмент досить часто - вони розрізають зображення, щоб в подальшому воно швидше вантажилось в інтернеті.
Розглянемо роботу інструменту розкрою в Photoshop на прикладі мого сайту «Алабай Троян і мейн-куни».
Наше зображення-шапка буде завантажуватися в інтернеті дуже довго. Щоб завантаження нашого зображення відбувалася в інтернеті швидше, ми можемо за допомогою інструменту розкрою в Photoshop розрізати зображення на шматочки і зберегти кожен шматочок окремо. Після чого, при завантаженні, наша шапка буде моментально завантажуватися в інтернеті.
Беремо інструмент розкрою і, затиснувши ліву кнопку миші, розтягуємо на нашому зображенні виділення:
Після чого, відпускаємо ліву кнопку миші:
Ми бачимо, що наше зображення розділилося на три фрагменти (див. Малюнок вище). За допомогою цього інструменту, якщо нам це потрібно, можна виділити ще області і розділити шапку-зображення ще на кілька частин.
Якщо нам треба, то взявши інструментВИДЕЛЕНІЕ фрагменти і клацнувши по будь-якого фрагменту, ми можемо змінити його розмір, наприклад, розтягнути:
Виділений фрагмент в Photoshop має помаранчеву рамку.
Тепер нам потрібно зберегти цей файл для інтернету. Для цього переходимо в МЕНЮ-ЗБЕРЕГТИ ДЛЯ WEB І ПРИСТРОЇВ. Вибравши даний зберегти у нас відкривається вікно оптимізації. У лівій частині вікна ми вибираємо фрагмент, який нам потрібно налаштувати (клацаємо по ньому мишкою, роблячи активним):
А в правій частині вікна ми по черзі можемо задати параметри для кожного нашого фрагмента зображення:
Припустимо, в першому фрагметов у нас присутній який-небудь текст і немає фотографії. Ми вже вивчали в статті формати збереження файлів у Photoshop. що різні схеми, тексти, де немає плавних переходів кольорів найкраще зберігати в .gif - вони будуть займати менше місця.
А в правій частині вікна (см.рисунок вище) ми задаємо формат .gif (в червоній рамочці) і підбираємо якість зображення (у синій рамочці).
Якщо ми подивимося в самий низ лівої частини вікна, то побачимо формат збереження і підсумковий розмір фрагмента зображення.
Після того, як ми налаштували кожен з фрагментів зображення, натискаємо кнопку ЗБЕРЕГТИ. У вікні вибираємо папку для збереження нашого зображення.
Вибравши папку, встановлюємо тип файлу (див. Малюнок) - HTML і зображення.
Якщо ми зайдемо в папку на своєму комп'ютері, куди зберегли зображення, то побачимо, що в ній знаходиться файлик html. де наші зображення записані у вигляді коду і папка images:
В папці images збережені фрагменти зображення з вибраними нами настройками (див. Малюнок нижче):
Давайте подивимося наш html файлик за допомогою блокнота / Як це зробити? Клацаємо правою кнопкою миші по файлу html і вибираємо ВІДКРИТИ ЗА ДОПОМОГОЮ - БЛОКНОТ:
На малюнку вище ми бачимо, що наші фрагменти (знаходяться в червоних рамочках) закодувалися.
Зображення прописано у вигляді таблички. Давайте, наприклад, поставимо для border (що означає товщина рамки) замість 0 значення рівне одиниці (показано у синій рамочці на малюнку вище) і збережемо измения. Потім перейдемо в папку, куди ми спочатку все зберігали і ще раз клацнемо правою кнопкою миші по файлу html і виберемо ВІДКРИТИ ЗА ДОПОМОГОЮ - вибираємо браузер, в якому працюємо (Opera, Firefox і т.п.):
На малюнку вище ми бачимо, що наше зображення-шапка збереглося у вигляді шматочків, на які ми його розбивали раніше. Виходить, що коли ми розмістимо це зображення в інтернеті, то фрагменти один за одним будуть миттєво довантажуватися.
Якщо ми повернемо значення 0 для border (товщина рамки), то ці рамочки зникнуть.