Основи web-дизайну. Ескізи. Розробка ескізу
- Попередній матеріал - Основи web-дизайну. Ескізи. Що потрібно дізнатися до початку роботи над сайтом?
З чого почати малювання ескізу?
Почати потрібно з припущення, що замовник може відкинути ваш малюнок без пояснення причин. Ну, не подобається йому, і все! Взагалі кажучи, за статистикою тільки 6 відсотків дорослого населення здатні виразно і аргументовано пояснити свої уподобання і антипатії. Замовник може просто не переносити зелений колір, і ви з цим нічого не поробите. Краще, правда, якщо ви дізнаєтеся про це заздалегідь.
Саме тому ескіз може бути єдиним тільки в тому випадку, якщо ви працюєте на себе, коханого. Найкраще намалювати три варіанти, що відрізняються, компонуванням матеріалу і кольоровою гамою. Вчинивши так, ви дасте можливість клієнту вибір: «колір, як на першому ескізі, текст трохи крупніше, ніж на другому, але тим же шрифтом, і треба кудись приліпити ось ту красиву картиночку з третього». Принісши єдиний ескіз, ви ризикуєте нарватися на «немає, що щось не те. не знаю, що саме, але мені не подобається! », і все можна починати спочатку.
Припустимо, що сайт, який вам належить побудувати, повинен містити багато текстової інформації. На першій сторінці клієнт бажає розмістити «щось особливе». Що це нам дає?
Так як досвіду у нас з вами поки що кіт наплакав, спробуємо піти по шляху найменшого опору. Подивіться на наведений нижче малюнок.
Нічого оригінального, правда? І тим не менше з таких начерків теж можна зробити цукерку. Давайте зупинимося на цьому малюнку детальніше: уявіть собі, що це реальні ескізи, зменшені настільки, що всіх деталей просто не видно.
Тепер перейдемо до частини «b», прототипу сторінок другого рівня. Оскільки текст є головною частиною змісту таких сторінок, смуга з ним повинна бути в центрі композиції. Зліва може розміститися панель навігації, зверху і знизу, наприклад, банери. Права частина залишається незадіяною, її побачать тільки власники моніторів з великою роздільною здатністю. І знову - навіть якщо залишатися в рамках зображеної схеми - є можливість вибору: квітів, виду кнопок, оформлення ілюстрацій, якщо такі є, роздільників блоків тексту і чого завгодно ще.
Приступивши до ескізу, не захоплюйтеся деталізацією: нехай перший начерк (бажано на папері, а не в Фотошопі) буде не більше тих, які намалював я. Надзвичайно важливо побачити всю композицію цілком, і тоді прийде розуміння того, які кольори краще підібрати, якими зробити контури елементів, потрібна симетрія і геометричність.
Не стану приховувати, опис одного з можливих підходів вийшло досить-таки убогим, але інакше і не могло бути: людину можна навчити переганяти з місце на місце пікселі в Фотошопі, але навіть найперший крок у дизайні він може зробити тільки сам, і перший же самостійно зроблений ескіз дасть вам відчуття впевненості в своїх силах. Але не розслабляйтеся: немає гарантії, що перший же ваш шедевр вдасться перевести в HTML. ;-)
Техніка виконання ескізу
Створюючи в Фотошопі новий файл для ескізу, правильно виберіть параметри цього файлу, змінити їх пізніше буде значно важче або просто неможливо за умови збереження якості картинки.
До початку роботи загляньте в пункт меню File | Preferences. У розділі Display Cursors встановіть тип курсора Brush Size для Painting Cursors і Precise для Other Cursors. Якщо цього не зробити, з функціями на зразок Crop буде важко працювати.
Встановіть дозвіл 72 точки на дюйм, цей параметр є стандартним для веб-графіки. Якщо ви захочете створити ескіз з дозволом 600-800 крапок на дюйм (такий підхід часто зустрічається у дизайнерів, які звикли працювати з печаткою) і перед збереженням його в потрібному форматі зменшити дозвіл до необхідного, майте на увазі, що з цього нічого не вийде: якість картинки буде безповоротно втрачено. Фотографічні зображення після цієї процедури можуть зберегти прийнятну якість, але все побудови, засновані на графічних примітивах, загинуть.
Кілька слів про формати графічних файлів. Зображення, що складаються з граф. примітивів і використовують обмежену палітру, потрібно зберігати в форматі GIF. що дозволяє вручну визначити кількість квітів. Те саме можна сказати до прозорих картинок: пункт меню File | Export дозволяє домогтися потрібного ефекту за умови використання формату GIF89A. Фотографічні зображення зазвичай зберігають в форматі JPEG (для цього зручно користуватися функцією File | Save for Web). Якщо ваш ескіз включає в себе обидва типи графіки, картинку завжди можна розрізати на кілька частин, зберегти їх в різних форматах і потім об'єднати в одне зображення в HTML-файл за допомогою табличній верстки.
Залишилося сказати кілька слів про текст.
На жаль, далеко не всі початківці дизайнери в процесі розробки ескізу звертають увагу на текст, який передбачається розмістити на моделюється веб-сторінці. Проте, текст - найважливіша частина дизайну. Запам'ятайте чотири правила роботи з текстом:
Правило перше:
Чорні літери на білому фоні - це нормально. Темні букви на світлому фоні - це прийнятно. Світлі букви на темному тлі - ваша концепція дизайну повинна бути дуже цінною, щоб вимагати такого поєднання кольорів! Білі / сині / зелені / червоні літери на чорному тлі - спроба не зарахована, спробуйте ще раз.
Правило друге:
Правило третє:
Кожен параграф тексту повинен бути відділений від інших елементів сторінки полями кольору фону. Текст, «наїжджає» на межі колонки, в якій він розташований, не читається.
Правило четверта:
Можливо, ви будете розчаровані, але я не буду пояснювати, як правильно працювати в Фотошопі або як домогтися того чи іншого візуального ефекту. Всьому цьому вам доведеться навчитися самостійно. в Інтернет достатньо відповідних ресурсів, та й паперових книг цього предмету присвячено чимало. Дерзайте!
Якщо вам все-таки ніяк не вдається уявити собі, як ваш ескіз буде виглядати в Інтернет, зробіть скріншот вікна браузера, виріжте з нього сторінку і збережіть цей файл на диск. Тепер ви зможете «розмістити» в ньому будь-який з ваших ескізов.нужно просто залити відповідні області сторінки картинкою, що дає при багаторазовому повторенні сірі горизонтальні смуги
Відповідно навпаки, якщо ви хочете подивитися, як виглядали ескізи того чи іншого вподобаного вам сайту, Ви можете це зробити скріншот, обріжте краю і подивіться, що вийде. Дуже корисне заняття, смію вас запевнити!
Як з'явився на світ цей сайт
Лінії синього кольору показують, як ескіз був розрізаний для виготовлення HTML-сторінки. Сіра область - порожнє місце, тут на реальній сторінці знаходиться текст. Ескіз складався з двох шарів: на верхньому є тільки синя точка, яка пересувається по змісту слідом за курсором миші, на нижньому - все інше.
До речі, зараз графічна частина сайту організована трохи інакше: замість того, щоб «нарізати» зміст на багато маленьких картинок, я зберіг його як один GIF-файл, використавши для розстановки силок технологію Image Map. про яку ми поговоримо в одному з уроків, присвячених HTML.
А ось ескіз сторінок другого рівня:
Схема та ж: синій колір показує лінії розрізу, два шари, один з яких містить тільки синю точку. Поки що абсолютно незрозуміло, чому все саме так, а не інакше, правда? Це нічого: все встане на свої місця, коли ми з вами будемо освоювати табличну верстку. або коли ви спробуєте самостійно «зібрати» більш-менш складну сторінку.
Останній крок - смугастий фон. Для того, щоб домогтися потрібного ефекту, потрібно просто залити відповідні області сторінки картинкою, що дає при багаторазовому повторенні сірі горизонтальні смуги. Ось так вона виглядає при шістнадцятикратний збільшенні (GIF. Два кольори, 536 байт, реальний розмір - 10х9 пікселів):
На цьому я хочу закінчити обговорення Фотошопа, ескізів та різного роду графіки. Наступного разу ми з вами напишемо код найпростішої веб-сторінки і постараємося в ньому розібратися, а до вправ з графікою для веб повернемося трохи пізніше і вже на іншому рівні. Успіхів!
- Попередній матеріал - Основи web-дизайну. Ескізи. Що потрібно дізнатися до початку роботи над сайтом?