Rheinwerk Design Adobe Photoshop CS4 - Додаткові методи - 11
11.2 Процедури та техніка складання
У галузі веб-дизайну Photoshop може використовувати величезні можливості своїх творчих можливостей. Тут, зокрема, його окремі сфери застосування багато в чому поєднуються. Процедури та методи, що використовуються, можна в основному перенести на подібні завдання при розробці екрану, незалежно від того, чи є це користувальницький інтерфейс для CD-ROM або дизайн меню для відео DVD. Існують лише відмінності у форматах зображення для вихідних даних (див. Розділ 11.3).
11.2.1 Підготовка до роботи: Визначте розмір зображення
Таблиця 11.1 Розподіл розмірів екрану та найважливіших браузерів (статус 04/2009, джерело: marketshare.hitslink.com)
Що стосується друку, це відносно просто: аркуш А4 має розмір 297 х 210 мм і все. При розробці екрану для компакт-диска зазвичай розмір зображення становить 1024 x 768 або 800 x 600 пікселів. Справа також зрозуміла для оформлення меню DVD: 720 x 576 пікселів для європейської системи PAL або 720 x 480 пікселів для американської телевізійної системи NTSC.
У веб-дизайні ця тема далеко не зрозуміла. Звичайно, загальновизнані розміри моніторів спочатку визначають, що взагалі можливо і корисно. Розподіл цих розмірів також важливий (див. Таблицю 11.1).
Однак набагато складніше оцінити фактичну "корисну площу" веб-сайту. Практично всі браузери мають різні значення тут, оскільки смуги прокрутки, рядки стану, меню та рядки заголовків потребують свого місця. Цей розмір також залежить від конфігурації користувача, а також будь-яких встановлених додаткових панелей інструментів або "Теми" (власні шаблони інтерфейсу користувача, наприклад для Firefox). Якби це було зібрано для майже десятка сучасних браузерів для Mac і Windows та різних розмірів екрану, була б необхідна більша таблиця.
Рисунок 11.1 Стандартні розміри веб-сайту від Adobe Dreamweaver (вгорі) та власні розміри файлів у Photoshop для файлу • Новий (внизу)
Adobe люб’язно включив деякі стандартні розміри веб-сайтів для попереднього перегляду документа у нижній частині вікна редактора Dream-weaver, що, як показав досвід, було дуже корисним. На основі цих цифр ви можете створити власні розміри за замовчуванням у Photoshop для діалогового вікна вибору команди Файл • Нова.
11.2.2 Робота зі скріншотом
Знімок екрана цього вікна корисний для того, щоб скласти реалістичне враження не тільки про доступний розмір, але і про те, як веб-сайт буде виглядати пізніше у вікні браузера більшості глядачів.
Знімок екрана (ключ) потрапляє в буфер обміну і звільняється від вмісту вікна у Photoshop, щоб він міг надати основу для подальшої роботи у файлі дизайну екрану на верхньому рівні (виправити за допомогою «замка»!). Оскільки Internet Explorer все ще досить поширений, може служити орієнтиром для подальшої роботи, особливо тому, що він є "найгіршим випадком" майже у всіх відношеннях, коли йдеться про розміри елементів поверхні. Навряд чи будь-який браузер в даний час залишає менше місця для веб-сайтів у стандартній конфігурації.
Малюнок 11.2 Знімок екрана Microsoft Internet Explorer 6.0 у Windows XP без вмісту вікна (1 024 768 пікселів)
Вікно браузера як частина дизайну екрану також має ту перевагу для презентацій, що замовник може краще уявити майбутню сторінку з цим фреймом, поки немає реальних веб-сторінок, які можна побачити. Що стосується остаточного виробництва, ви можете видалити рамку браузера за допомогою інструмента обрізання.
11.2.3 Інструменти складання у Photoshop
Тим часом набір інструментів, який доступний дизайнерам екранів загалом та веб-дизайнерам, зокрема, для їх монтажних робіт у Photoshop, є дуже привабливим. Це не зовсім полегшує огляд, але відкриває різноманітні можливості.
Якщо з введенням шарів зображення існували лише ці шари та їх режими, тепер ви можете використовувати шари налаштування та заповнення як елементи зображення, які залишаються редагованими. Вони більше не є важливими з точки зору розміру файлу, оскільки вони не містять жодних пікселів зображення. Застосування маскування у вигляді масок шару, вектора та відсікання розширює можливості без видалення оригінальних ілюстрацій. Крім того, існують групи та, нарешті, але не менш важливе, розумні об’єкти та розумні фільтри.
Розумні об'єкти | Інтелектуальні об’єкти, представлені в Photoshop CS2, стали дуже важливим інструментом для складання завдань, особливо для дизайну екрану. Неруйнівна інтеграція різноманітного іміджевого матеріалу призводить до набагато більшої творчої свободи, ніж раніше. При використанні цього типу шару слід враховувати багато тонкощів, оскільки вони не завжди поводяться так, як можна було б очікувати від подібних функцій в інших програмах (у тому числі від Adobe). Ці примхи та декілька хитрощів щодо того, як з ними поводитися, наведені нижче:
За допомогою Photoshop CS4 ви нарешті можете вирішити, чи хочете ви пов’язати маску шару із шаром зображення та перемістити його з ним чи ні.
Векторні фігури, будь то площини фігур, векторні маски або контури, мають вищу точність позиціонування, ніж пікселі. Те саме стосується керівних принципів. Це може дуже дратувати, особливо якщо це стосується завдань веб-дизайну, оскільки пізніше вони будуть вирізані по допоміжних лініях з точністю до пікселів. Тому у веб-дизайні вам слід завжди утримувати клавішу, розміщуючи напрямні лінії так, щоб вони закріплювались на цілих пікселях.
Як дуже ефективний наочний посібник для позиціонування, Adobe представила так звані "розумні напрямні" (магнітні вказівки) з версії CS2, які з'являються лише при переміщенні і дозволяють зосередитись на декількох, справді важливих Може обмежувати допоміжні лінії.
11.2.4 Зображення та HTML
Тривалий час результат базувався на табличній структурі. Таблиці, однак, досить ненадійні для відображення і ніколи не бувають справді стабільними, просто тому, що вони ніколи не були призначені для цієї мети. Тим часом каскадні таблиці стилів (CSS) нарешті відіграють все більшу роль у веб-дизайні. Тут можливе точне позиціонування кадрів у пікселях та набагато краща типографіка з більш тонким кодом. Тим часом - після жорстких технологічних та політичних сутичок між різними компаніями, що займаються програмним забезпеченням, і водночас із W3C - у дисплеї є щось на зразок певної надійності у безлічі браузерів та операційних систем. Photoshop враховує це, пропонуючи вихід на основі таблиці та CSS. Це особливо цікаво для користувачів Photoshop, оскільки багато з них також корисні для наступних кроків у веб-дизайні, наприклад B. з редакторами веб-сайтів, такими як Dreamweaver, компетентні. Завдяки меншому і чіткішому коду ви і, звичайно, ті, хто пише код (все ще чи знову) від руки, відчуваєте полегшення.
Для виведення розробленого графічного матеріалу в Інтернеті потрібно частково залишити світ чистих форматів зображень та мати справу зі змішаними технологіями, такими як включення зображень у мову опису сторінки. Хоча багато користувачів Photoshop будуть знати основи Інтернету та HTML, ось короткий підсумок.
Грамотні художники-техніки першими почали "зловживати" синтаксичними елементами, наданими HTML "веб-мовою" для цілей дизайну. HTML - це мова розмітки, яка повинна відображати ієрархію вмісту. Крім того, він пропонує мінімальні дизайнерські ресурси, що повинно лише гарантувати якнайменше обмежену читабельність на багатьох технічних платформах. Є сім рівнів заголовків, деякі спеціальні формати, жирний шрифт, курсив, підкреслений текст, прості таблиці, можливість інтеграції зображень та носіїв за допомогою посилань та ще кілька функцій. Але це було все: HTML не є сумісною з макетом мовою опису сторінок, як PostScript, орієнтуючись на точну фреймворкову архітектуру.
Тільки таблиці в HTML - це наполовину корисний спосіб отримати своєрідний макет на основі кадру. Перші веб-дизайнери почали з цих мізерних ресурсів. Довгий час на цій основі веб-дизайну мало що змінилося, що становить найбільшу частину дизайну екрану. Під час розробки інструменту обробки зображень Photoshop дедалі частіше стає інструментом дизайну для цієї молодої дисципліни. З часом це дуже сильно відбилося на особливостях програми.
11.2.5 Інтернет-шрифти
Рисунок 11.3 Вибір піксельних шрифтів для Інтернету
Майже немає дизайну екрану, який не містив би хоча б мінімальних друкарських елементів. Без письма майже нічого не працює. На відміну від друку, коли шрифт може виявити всі свої графічні деталі, коли шрифт надходить на друкарську пластину із зазвичай не менше 2400 dpi набору зображень, в дизайні екрану ми завжди маємо справу з роздільною здатністю екрана, тобто порівняно мізерні 72 ppi. Очевидно, що більш делікатні шрифти тут втрачають свої особливості.
Що стосується дизайну екрану, потрібні чіткі, безглузді шрифти, швидше шрифти без засічок, ніж із. Особливо якщо мова йде про менші розміри шрифту, не тільки якість шрифтів швидко знижується, але й розбірливість. Решта виконується згладжуванням шрифту, згладжуванням, яке в малих шрифтах призводить до чогось змитого замість букви. Як засіб для вирішення цього питання є так звані піксельні шрифти. Усі ці обставини детальніше обговорюються в розділі 9.7 та проілюстровані на прикладах.
11.2.6 Кольори для Інтернету
Для програм дизайну екрану також існують інші правила щодо кольорів, ніж, наприклад, Б. у поліграфії. Особливо це стосується Інтернету, оскільки створений вміст відображається на іноді величезній кількості різних екранів, кольорова поведінка яких, як правило, настільки жорстока, як і непередбачувана. Такі стратегії, як управління кольором, лише зароджуються у веб-секторі, і реальних поліпшень не видно. Ці рамкові умови вимагають роботи з чіткими, добре відокремленими кольоровими схемами для дизайну екрану. Тонкі нюанси та контрасти досить недоречні в секторі ткацтва, коли справа стосується чіткої впізнаваності. Інформацію про розробку кольорових схем та відповідних інструментів, що стосується веб-дизайну, можна знайти в Розділі 5.8.
Малюнок 11.4 Попередній перегляд колірної схеми як веб-макета в Колірній схемі