У вас є такий сайт, але тільки з перламутровими кнопочками? Ні? Ну, тоді будемо шукати. Щоб не ходити і не шукати в мережі вже «поношений» портал, замовте собі його «на пошиття». Але спочатку потрібно створити макет сайту.
Що ще за макет сайту?
Сайти, як автомобілі та будівлі, спочатку відображають у макетах, і лише потім верстають за допомогою html. Якщо говорити про багатосторінкових порталах, то макет ресурсу буде складатися з макетів всіх його сторінок.
У більшості випадків основні елементи управління, їх дизайн і стиль однакові на всіх сторінках. Але в основі всієї стилістики лежить дизайн основної сторінки сайту. Тому найчастіше мається на увазі розробка макета головної сторінки сайту. Саме її стиль і елементи дизайну успадковують всі інші розділи порталу.
Крім головної сторінки розробляється кілька варіантів дизайну всіх другорядних. Після цього відбувається розгляд та затвердження одного з них спочатку менеджером проекту, а потім і замовником.
У великих студіях в процесі створення і затвердження макета бере участь також художник. Терміни розробки варіантів ескізів і їх кількість обумовлюються керівником проекту з клієнтом на перших етапах розробки.
Готовий і затверджений варіант макета передається верстальщику. На його основі html -верстальщік «розрізає» ескіз на частини і виробляє верстку його деталей за допомогою тегів мови гіпертексту.
Після настільки докладного викладу хочеться швидше взятися за самостійне створення макета сайту в Photoshop. Але перш варто розглянути звід правил, яким повинен відповідати майбутній графічний макет.
Ознаки справжнього макета інтернет-порталу
Графічний ескіз мережевого ресурсу повинен мати наступні властивості:
5) Не можна використовувати як підкладку громіздкі фонові зображення - вони сильно збільшують вагу всієї сторінки, і збільшує час її завантаження.
6) Вирівнювати положення всіх верств слід здійснювати тільки за допомогою спеціальних напрямних.
7) При нанесенні написів в макеті сайту в Фотошопі потрібно користуватися стандартними наборами шрифтів. Для ефектів спотворення тексту слід використовувати окремі зображення.
8) При відображенні елементів форм потрібно намагатися дотримуватися їх стандартних пропорцій.
9) Велика кількість елементів «фурнітури» вікна (кнопки, іконки) розміщують в окремому файлі, прикріпленому до макету.
10) Розсуваються і випадають списки і меню повинні бути представлені в двох станах (закритому і відкритому).
Тепер, коли ознайомилися з тим, як повинен виглядати справжній psd макет сайту, візьмемося за справу.
Приклад створення макета сайту
Спочатку потрібно визначитися з варіантом розміщення основних блоків сторінки. До них відносяться:
- Шапка - знаходиться зверху. Найчастіше на ній розміщуються логотип і назва сайту;
- Меню - включає в себе кілька активних пунктів або кнопок для переходу між сторінками сайту;
- Ліва і права колонки;
- Підвал - знаходиться внизу макета сторінки сайту.
Існує безліч варіацій розміщення цих блоків відносно один одного. У прикладі буде використаний класичний варіант їх поєднання:
Також важливо правильно визначитися з розмірами макета сайту в Фотошопі.
Наприклад, в технічному завданні зазначено, що це буде портал з фіксованою шириною посередині і гумовими боками. Виходячи з мінімального показника дозволу екрану (1024 на 768 пікселів), ширину макета робимо в 1003 пікселя. Решта (21 піксель) підуть на область прокрутки (скролінгу). На гумові боковини відводиться по 100 пікселів. Висота макета залежить від заданих розмірів елементів дизайну. Середній показник довжини становить 500-600 пікселів.
А тепер починається найцікавіше:
1. Створюємо новий файл і ставимо розміри майбутнього макета. Для цього заходимо через меню «Файл» - «Новий». У вікні задаємо розміри і ім'я файлу:
2. Потім створюємо фон макета сайту. В панелі інструментів вибираємо інструмент «Градієнт». У верхній панелі встановлюємо його тип і колір, і проводимо градієнтом по поверхні. Ось що вийшло:
3. Розмічаємо поверхню макета за допомогою напрямних. Спочатку робимо розмітку основних елементів макета (шапки, підвалу, меню і боковин):
4. Оформлення psd макета сайту починаємо з шапки.
- Виділяємо область під назвою сайту за допомогою інструменту «Прямокутна область»;
- Потім робимо заливку обмеженого ділянки градієнтом;
- Інструментом «Текст» наносимо назва сайту:
Ось зображення закінченого дизайну шапки макета. Для швидкого редагування будь-якого з елементів важливо дотримуватися ієрархію вкладеності шарів. Також важливо давати осмислені імена кожному з шарів.
Щоб групувати шари, потрібно створити папку для їх розміщення. Для цього слід натиснути на іконку папки внизу панелі «Шари». Угруповання елементів відбувається шляхом перетягування шарів в потрібну папку:
5. Створення макета сайту продовжимо оформленням панелі меню, розташованої відразу під шапкою.
- Створюємо заготовку кнопки меню в окремому файлі. Зберігаємо її в форматі psd. Вона стане в нагоді в подальшому:
Обидві боковини матимуть однаковий колір і малюнок. Вони наносяться за допомогою інструменту «Прямокутне виділення» і градієнтом. Для кожної з боковин, як і для кожного елемента, створюємо свій шар:
7. Тепер займемося нижньою частиною psd макета сайту. На відміну від бічних панелей зробимо її за допомогою інструменту "Заливка", а потім доведемо будь-яким з фільтрів (пункт головного меню «Фільтр»):
8. Щоб макет виглядав більш правдоподібно, в області відображення контенту розмістимо який-небудь текст з картинкою. Його можна взяти з іншого зображення шляхом перетягування шару. А ось остаточний варіант макета сайту:
Звичайно, даний приклад не претендує на звання кращого.
Крім гармонійного поєднання колірної гами в цей макет сайту можна додати ще кілька елементів і написів. Але все це робиться так само, як описано вище.
Що далі відбувається з макетом сайту
А далі з цього графічного представлення дизайну верстальник робить макет сайту html. При цьому зберігаються всі пропорції елементів і частин сайту.
Ті елементи дизайну, які не можна відобразити за допомогою тегів html. вирізаються з графічного макету і потім використовуються в якості фонових зображень. У випадку з нашим прикладом до таких елементів відносяться малюнки основного фону і всіх складових частин. Назва сайту і його логотип вирізаються і вставляються в код html окремо.
Деякі елементи управління, які мають складний дизайн, теж вирізаються і використовуються як фонові зображення. У нашому прикладі до таких частин відносяться кнопки.
А може відразу html?
Верстка макета сайту відразу в html є неефективною. Багато з елементів дизайну можна відобразити за допомогою мови гіпертексту. До того ж редагування і розробка візуального представлення відбувається набагато простіше і швидше.