Як створити сайт підготовка ескізу сайту в photoshop
Як створити сайт. Підготовка ескізу сайту в Photoshop
Нарізка ескізу сайту.
Робота з інструментом "Slice" (фрагмент) і "Select Slice"
Безліч різнорідних графічних елементів Web-сторінки можуть зажадати для оптимізації різних параметрів, або навіть форматів. У таких випадках велике зображення можна розрізати на фрагменти і задати для кожного фрагмента індивідуальні параметри.
Не варто захоплюватися різкою зображення на безліч дрібних картинок. Чим більше графічних фрагментів на сайті, тим тривалішим буде час запитів до сервера, на якому знаходиться сайт і тим довше буде завантажуватися сайт. Це особливо помітно, якщо сайт знаходиться на закордонних серверах.
Визначення фрагментів в Photoshop
- Відкрийте зображення, ескіз сайту в форматі .psd
- Увімкніть режим відображення фрагментів натисненням кнопки інструменту Slice (Фрагмент) на панелі інструментів. Як бачите, навіть якщо зображення не розрізано, Photoshop вважає його розрізаним, правда на єдиний "шматок". Про це говорить оздоблює його рамка з порядковим номером фрагмента і спеціальної піктограмою.
- Робота з інструментом Slice (Фрагмент) схожа на роботу з інструментом Crop (Обрізка): спочатку ви будуєте рамку, а потім уточнюєте її розміри і положення за допомогою маніпуляторів.
- Помістіть курсор інструменту Slice (Фрагмент) в лівий верхній кут зображення; Натисніть ліву кнопку миші і переміщайте курсор вправо і вниз до тих пір, поки всередині рамки не виявиться потрібний Вам фрагмент. Потім відпустіть кнопку миші.
автоматичні фрагменти
Ви визначили фрагмент, який хотіли б мати у вигляді окремого зображення (і файлу). Оскільки фрагменти можуть бути тільки прямокутної форми, програма автоматично створила ще два фрагмента.
Призначені для користувача (створені користувачем) і автоматичні фрагменти мають для Photoshop різні властивості.
Для перших програма не може змінити розташування і розмір, а за розміром і розміщенням автофрагментів вона стежить сама. Якщо ви поміняєте розмір призначеного для користувача фрагмента, то всі сусідні автоматичні фрагменти самі зміняться таким чином, щоб не виникало "дірок" і перекривання.
Автоматичні фрагменти мають в лівому верхньому кутку піктограми сірого кольору, а призначені для користувача - інших кольорів. Відображаються автоматичні фрагменти більш приглушеними кольорами, ніж призначені для користувача.
- Виберіть на палітрі інструментів інструмент Slice Select (Виділення фрагмента). Він застосовується для уточнення розмірів і положення фрагментів.
- Клацніть курсором миші в межах створеного вами фрагмента, щоб виділити його. Зображення всередині виділеного фрагмента, будь він автоматичним або призначеним для користувача, завжди показується в оригінальній колірній гамі. Його рамка придбала вісім маніпуляторів, які служать для масштабування.
- Перетягніть правий боковий маніпулятор рамки трохи вправо. Фрагмент збільшився по горизонталі. Автоматичний фрагмент праворуч став більш вузьким, а фрагмент знизу - ширше. Photoshop самостійно змінив їх розміри так, щоб кількість фрагментів залишалася незмінною. Поверніть призначеному для користувача фрагменту початковий розмір. Програма знову скоректує автоматичні фрагменти.
- Клацніть курсором миші в межах правого автоматичного фрагмента. Зображення всередині фрагмента стало яскравим, фрагмент виділений. Зверніть увагу, що рамка автоматичного фрагмента не має маніпуляторів, оскільки його розмір встановлюється програмою.
- У Photoshop автоматичний фрагмент можна легко перетворити в призначений для користувача. Виберіть команду Promote to User-slice (Перетворити фрагмент в призначений для користувача) з меню Slices (Фрагменти) або контекстного меню, що відкривається клацанням правої кнопки миші в межах автоматичного фрагмента.
Фрагмент придбав маніпулятори масштабування, і піктограми в його лівому верхньому кутку перефарбувалися в синій колір.
Примітка
Призначені для користувача фрагменти можуть розташовуватися не тільки встик, а й накладатися один на одного. Який з фрагментів виявиться вище, задається командами, які перебувають в списку Arrange (Монтаж) меню Slices (Фрагменти).
Команди Bring to Front (Самий верхній) і Send to Back (Найнижчий) поміщають фрагмент поверх інших або нижче всіх відповідно. Команди Bring Forward (Зрушити вперед) і Send Backward (Зрушити назад) мають сенс, тільки якщо перекриваються більше двох фрагментів. У цьому випадку вони мають у своєму розпорядженні виділений фрагмент вище або нижче поточного становища. Ці команди доступні також з меню палітри Slice (Фрагмент) і на панелі властивостей інструменту Slice Select (Виділення фрагмента).
Карінцев Олексій Иннокентьевич
(Арт-директор компанії Edgestile)