Як зробити сайт - ріжемо шаблон в photoshop

Отже, ви вмієте малювати в програмі Adobe Photoshop і намалювали собі шаблон сайту, але не знаєте, що ж робити далі, як зробити сайт з шаблону?
Сучасні технології створення сайту вимагають мінімальної ваги сторінки і тому частина зображень вставляється в шаблон сайту окремо, частина малюнка вирізається і вставляється як елемент фону.
Дана стаття присвячена тому, як вирізати частини зображення інструментом Slice Tool (K).

Спроба не катування?
Зберігаємо копію вашого файлу з шаблоном і починаємо його розрізати.

Відео: Дизайн сайту в Фотошопі за правилами США # Від Профі | Заробіток від $ 500 - 1000 на місяць

Послідовність дій

1. Відкривши малюнок в програмі Adobe Photoshop, вибираємо інструмент Slice Tool (K) або просто натискаємо на англійську букву K.
Зверніть увагу, що ви повинні представити свій малюнок у вигляді таблиці, з вставленими в її осередки малюнками.

Розрізаємо фрагмент шаблону в Photoshop

Відео: Малюємо сайт в Photoshop. Урок 0 - Налаштування

(малюнок 1)

2. Виділяємо інструментом Slice Tool (K) частини малюнка.
Зверніть увагу, що перший фрагмент у мене виділено одним блоком - це логотип (1), я ще не зберігаю сторінку, а буду виділяти і далі.
Там де буде заливка виділяйте шматочок малюнка шириною 1 піксель (2) і він став фоном елементи таблиці або блоку div дасть нам той же вид, що і великий фрагмент.

Зверніть увагу на пункт (3) - це куточок горизонтального меню, його ми розріжемо окремо, інші пункти меню (4) ми можемо зробити малюнками, а можемо зробити текстовими, а малюнок шириною 1 піксель, буде фоном.
Так само наші осередки повинні бути на одному рівні, щоб потім було легше все редагувати самим.
Звертаю також увагу на пункт (5) - це ваша майбутня осередок яка буде розтягуватися, адже фрагмент де знаходиться банер (банер) матиме постійну ширину і висоту, а фрагмент текст може через велику кількість тексту розтягувати осередок вниз, значить будуть тягнутися і інші осередки і будуть утворюватися білі смужки. Щоб цього не було відразу передбачайте осередки по горизонталі висота яких буде визначатися вмістом осередки з текстом.

Новачкам краще розрізати великими блоками

(Рисунок 2)

3. Коли ви розріжете весь свій шаблон, то можна приступити до збереження.
Переходимо «File» - «Save for Web Devices »або натискаємо Alt + Sift + Ctrl + S

Переходимо «File» - «Save for Web Devices »

(Рисунок 3)

4. Перевіряємо налаштування, дивимося, щоб якість була 100% і зберігаємо,

5. Тепер перевіряємо, що у нас в папці збереженим шаблоном.
В папці з вашим майбутнім сайтом буде папка images - в якій знаходяться ті самі шматочки малюнків.

В папці з вашим майбутнім сайтом буде папка images

(Рисунок 4)

Ось ви і отримали свою веб сторінку з малюнка. Тепер необхідно редагувати.
Наприклад, якщо ви відразу почнете додавати текст, то ваш малюнок, що знаходиться в цьому осередку буде рухатися, а разом з ним будуть з`являтися прогалини, колишні смуги - доведеться робити малюнок фоном осередки (прочитайте тему про таблиці і про вставці малюнків в клітинку і фоном осередки ). Так само можливі проблеми через об`єднання вами декількох осередків - доведеться все міняти в рядках, тобто вказувати, на скільки повинна розтягуватися осередок, якщо дві нижні об`єдналися в одну - тому краще відразу малювати шаблон простіше, розрізати на меншу кількість блоків, а текст додавати такими порціями, щоб нічого не тягнулося.
Вирішувати вам, проте легко зробити не вийде, якщо вже взялися за цю справу розбирайтеся і тоді ви дійсно станете розуміти і робити нормальні сайти.
Іншим пряма дорога до використання готових шаблонів.

Дякуємо за увагу.
Автор: Титов Сергій.