Пара уроків для початківця Web-майстри, Web Design, Інтернет-технології, статті

Роман Соболенко
Комп'ютерна газета

Останнім часом з'явилася ще одна категорія користувачів, що звертаються до графічним редакторам. Це ті, хто в силу службових обов'язків або просто заради свого задоволення виготовляє Web-сторінки.

І якщо у нас ще не виглядає білою вороною фірма, прайс-лист якої не рясніє картинками, то Web-сторінка, на якій немає графіки, безсумнівно, викликає непідробне здивування. Справді, в Web без картинок не обійтися. А серед тих, хто їх виготовляє, не так вже й багато професійних художників і навіть просто людей, що володіють хорошим досвідом роботи з графікою на комп'ютері.

Зрозуміло, проблему не вирішити парочкою публікацій. Комп'ютерна графіка взагалі нескінченна тема, а стосовно Web вона обростає масою додаткових тонкощів, з якими не стикаються, наприклад, дизайнери з реклами. Було б непростимо пройти мимо таких насущних і цікавих речей. Ось я і вирішив для початку поговорити про двох прийомах, важливих з точки зору прикраси Web-сторінок.

За допомогою растрової графіки автори Web-документів не тільки доповнюють їх текст ілюстраціями, а й додають привабливість самому "бланку" сторінки. Графічно виконуються логотипи, що розділяють текст лінійки і маркіровані списки, назви і заголовки, а також елементи керування, що дозволяють переходити з однієї сторінки на іншу, – кнопки, меню і карти переходів.

Глибока інтеграція графічних елементів у текст передбачає використання більш виразних форм, ніж прямокутні. Звичайно, на "технологічному" рівні всі картинки в Web-документі займають прямокутні області, але читач цього зазвичай не бачить. Ефект досягається за рахунок або абсолютного збігу фону картинки і Web-сторінки, або створення в зображенні прозорих ділянок. На цьому я і хочу зупинитися.

У Web-документи сьогодні вбудовуються растрові картинки в основному двох форматів – GIF і JPEG. В обох випадках використовуються ефективні алгоритми стиснення, що і забезпечує їм широке поширення з урахуванням невисокої швидкості передачі даних через Інтернет. Причому якщо формат JPEG відрізняється сильним стисненням і вигідний для розміщення в Web великих ілюстрацій, то GIF надає багатші образотворчі можливості, включаючи прозорість і навіть анімацію.

У моєму улюбленому графічному редакторі Adobe Photoshop є засоби для запису як JPEG-, так і GIF-файлів. А з урахуванням його найбагатших можливостей і зручності роботи він цілком може претендувати на роль основного графічного інструменту Web-майстра. Щоб ви самі переконалися в цьому, пропоную подивитися, як можна в Adobe Photoshop створити картинки з прозорими ділянками.

Напівпрозорість і м'які контури

Цей ефект може здатися вам складним в реалізації, але зате він більш виразний, так як допомагає надати Web-сторінці обсяг. Для прикладу створення м'якої тіні я вирішив підготувати простеньку Web-сторінку, присвячену метеликам. Природно, що на ній буде зображено це красиве комаха, причому варто спробувати створити ілюзію об'єму. Нехай метелик присяде на сторінку, як в сонячний день на стіну будинку, готова зірватися і полетіти при першій же небезпеці.

Як уже неодноразово говорилося, обсяг плоскою сторінці можна додати тільки за допомогою тіней. Думаю, що немає необхідності приділяти багато уваги процесу створення реалістичної тіні засобами Photoshop, так як питання це виникало вже не раз і ви, сподіваюся, знаєте, як використовувати для цього шари, фільтри розмивання і можливість зміни прозорості. Втім, по ходу справи у вас буде можливість не лише згадати, як будуються тіні, а й познайомитися з ще одним, раніше мною не порушеним, потужним способом побудови масок.

У мене під рукою опинилася фотографія метелика з компакт-диска конкурує з Adobe компанії Corel. Зрозуміло, метелик знята на тлі зеленої трави. Для використання цієї картинки на Web-сторінці трава не потрібна, тому варто почати з її видалення. Щоб видалити частину зображення, необхідно побудувати маску, яка захистить від видалення корисні частини картинки, або, що те ж саме, виділити (select) непотрібне.

У минулих номерах "КГ" проблема швидкого і зручного побудови маски складної форми розглядалася неодноразово. Але в даному випадку ті рішення не є найзручнішими. Побудувати маску на основі одного з колірних каналів можна, але її доведеться дуже довго доводити вручну. В принципі, маску можна просто намалювати в режимі Quick Mask, але це ще більш трудомісткий процес.

Полегшити побудову маски для такої картинки, як вибрана для прикладу, можна, якщо використовувати той факт, що на фотографії метелик, на крилах якої переважають жовті та червоні тони, сидить на зеленій траві. Істотна різниця в кольорах корисної і непотрібної частин знімка підштовхує до думки про вибір частини зображення по колірному ключу – функції Select / Color Range.

У вікні вибору за кольором пропонується маніпулювати піпетками (задає вихідний колір, додає і віднімає кольору) і регулятором розкиду Fuzziness, який визначає діапазон включаються в маску відтінків вибраного піпеткою кольору. Врахуйте, що дія команди Color Range поширюється на всю картинку, тобто в маску включається помічений піпеткою колір зі всього зображення, а не тільки в тому місці, де ви нею ткнули. Крім того, у створенні маски беруть участь всі видимі зараз шари, тобто колір збирається з тієї картинки, що ви бачите у вікні редактора, а не тільки з активного шару.

Ці особливості Color Range часто ставлять у глухий кут новачків, які ніяк не можуть відокремити, клацаючи піпетками, непотрібну частину зображення, оскільки весь час зачіпають і корисні піксели. Нагадаю, що маска, якщо ми не хочемо отримати напівпрозорі області, повинна складатися тільки з білого і чорного кольорів. А у вікні перегляду весь час присутній сірий. Тим часом якщо застосування вибору за кольором виправдано, тобто кольори в відрізуваної частини картинки сильно відрізняються від тих, які залишаться, можна без особливих проблем отримати ідеальну маску.

Щоб вибрати на фотографії з метеликом фон, належить збирати піпеткою зелені тони. Спочатку треба задати солідний розкид відтінків, приблизно 100 з 200 можливих. Взявши в ліву з трьох піпеток середній по інтенсивності зелений колір з фотографії, перемикаємося на додає піпетку (середня, помічена плюсом) і вводимо в маску ще один колір. Колір зручніше брати не з фотографії, а у вікні перегляду. Якщо білий колір з фону перекинеться на метелика, пора зменшити розкид рази в два-три і продовжити додавання квітів. Послідовно зменшуючи розкид (аж до нуля), отримуємо практично ідеальну маску.

Зауважу, що моя фотографія метелика не найлегший для Color Range випадок. Справа в тому, що як на траві є близькі до жовтого тони, так і на крилах метелика можна знайти майже зелені відтінки.

Після натискання кнопки "ОК" у вікні редактора з'являються виділені ділянки. Зрозуміло, маска не ідеальна і її доведеться підправити. Переходимо в режим Quick Mask, натиснувши клавішу [Q], беремо з палітри інструментів олівець. Білим прибираємо пропущені піксели фону і чорним домальовували краї крил метелика, її вусики і ті місця на крилах, які все-таки виявилися включеними в кольоровій ключ. Підправивши маску, повертаємося в звичайний режим редагування, знову натиснувши клавішу [Q].

Тепер треба перейменувати шар Background. Оскільки фотографія була взята мною з файлу формату TIFF, який не передбачає шарів, в палітрі Layers присутній тільки шар Background, можливості роботи з яким обмежені. Двічі клацнувши мишкою в палітрі шарів по шару Background, даю йому нове ім'я – Butterfly.

Щоб залишилася одна метелик, а інша частина зображення стала прозорою, треба просто видалити виділені пікселі, тривіально натиснувши клавішу [Del]. Розмітка нам більше не потрібна, так що її можна скинути клавішами [Ctrl] + [D]. Звільнену від трави метелика скопіюємо на новий шар, перетягнувши мишкою в палітрі Layers шар Butterfly на кнопку створення нового шару. Нижній з двох одержані верств знадобиться для тіні.

Найлегше зафарбувати метелика чорним кольором, якщо скористатися для цього чорним олівцем великого розміру. Щоб не пошкодити прозору частину шару, на час зафарбовування треба встановити в палітрі Layers прапорець Preserve Transparency. У цьому режимі Photoshop не дасть модифіковані прозорі пікселі активного шару.

Щоб чорний відбиток метелика на нижньому шарі перетворити на схожу на справжню тінь, треба розмити його контур. Скористаємося для цього фільтром Gaussian Blur, радіус розтушовування треба підбирати, виходячи з дозволу картинки. У випадку з метеликом бажано залишити помітною тінь від її вусиків. Зазвичай, до речі, орієнтуватися при розтушовуванні тіні стоїть саме на тонкі деталі зображення, стежачи, щоб вони не пропали.

Не дивуйтеся, якщо фільтр Gaussian Blur ніяк не діє на картинку. Це означає, що ви просто-напросто забули вимкнути режим Preserve Transparency.

Розтушовані тінь слід зрушити щодо зображення метелика на верхньому шарі (Butterfly copy) вниз і трішки вправо. Щоб було легше орієнтуватися, дозволите видимість верхнього шару. Не відсувайте тінь занадто сильно, адже метелик у нас сидить на сторінці, а не відлітає з неї. Остання операція при створенні тіні – підбір її щільності регулятором Opacity в палітрі Layers.

Картинка для Web-сторінки готова, пора записати її в форматі GIF, зберігаючи прозорість.

У меню File вибираємо команду Export/GIF89a Export. На екрані з'явиться вікно під назвою GIF89a Export Options. У ньому обов'язково треба вказати колір фону розробляється Web-сторінки. Чому? Справа в тому, що формат GIF не передбачає напівпрозорість пікселів. Пікселі можуть бути або зовсім прозорими, або непрозорими. Photoshop імітує м'які контури тіні, підкладаючи під неї фон задається користувачем кольору. Якщо ви ще не визначилися остаточно з кольором фону Web-сторінки, рекомендую зберегти картинку у форматі Photoshop, тоді ви згодом зможете експортувати її в GIF ще раз.

Задавши колір фону, подивіться на результати роботи. Натисніть для цього кнопку Preview. Якщо все гаразд, записуйте GIF-файл і підключайте його до Web-документу.

Повна прозорість і чіткі контури

Одна з особливостей формату GIF полягає в тому, що він розрахований на глибину кольору до 8 біт, тобто всього на 256 квітів у палітрі. До речі, чим менше квітів виявиться у вашій картинці і, відповідно, в поданій до неї палітрі, тим компактніший буде файл і тим швидше буде завантажуватися в Web-браузер.

Колірна модель, яка містить до 256 кольорів, у Photoshop, як і в інших професійних графічних редакторах, називається індексованої (Index), оскільки кожен колір в ній задається порядковим номером в палітрі. У другому прикладі ми скористаємося зображенням саме такого типу, щоб подивитися, як в ньому можна задати прозорість.

Для сторінки про метеликів у нас поки немає красивого заголовка. Припустимо, що його вдалося знайти в якомусь журналі і зісканувати. З таким же успіхом заголовок можна побудувати і в самому Photoshop, але розповідь про роботу в ньому з текстом і шрифтами загрожує відвести далеко від основної теми, так що хай назва сторінки потрапить до нас у вже готовому вигляді.

Однак у зісканувати картинці немає прозорості, адже сканери її не розуміють. Зате є фон, припустимо чорний. Таким чином, нам треба для розміщення цієї картинки на Web-сторінці зробити чорний фон прозорим. Завдання виключно проста.

Відкривши файл із словом "метелики" в Photoshop, візьмемо з палітри інструментів чарівну паличку і виділимо з її допомогою ті області в ньому, які повинні будуть стати прозорими. Якщо фон у нас рівний, в палітрі Magic Wand Options можна встановити мінімальний допуск (Tolerance), тобто рівний нулю. Тоді виділена область не зачепить краю букв.

Виділену область доведеться збирати по частинах. Спочатку вкажемо чарівною паличкою на фон навколо тексту, а потім, утримуючи клавішу [Shift], будемо додавати до неї ділянки фону усередині букв, не розмічені відразу.

Хочете дізнатися, чому не можна скористатися тією ж функцією побудови маски по колірному ключу, що в минулому прикладі? Здається, що випадок більш ніж відповідний? Зовсім не так. Зверніть увагу, що чорний колір крім фону присутній і в самих буквах. Тому і пропоную при розмітці букв скористатися чарівною паличкою. До речі, мною вибраний типовий випадок, так що при роботі з текстами в растровій графіці вам найчастіше доведеться працювати саме цим інструментом.

Разметив весь фон, інвертуйте обрану область. У файлі GIF повинні будуть залишитися букви, а не фон, тому і маска зобов'язана виділяти їх. Щоб інвертувати маску, можна викликати через меню команду Select / Inverse або натиснути на клавіатурі комбінацію [Ctrl] + [Shift] + [I].

Думаю, що ви запам'ятаєте ці клавіші, так як до інвертування маски доводиться вдаватися дуже часто.

Далі маску треба записати в новий канал. Це команда Save Selection з меню Select. Користуватися нею просто – у вікні діалогу треба залишити все, як є, і просто натиснути кнопку "ОК". Канал, в який буде записана маска, отримає ім'я # 2.

Після збереження маску можна скинути клавішами [Ctrl] + [D]. Вона більше не знадобиться, буде тільки заважати. Перед тим як приступити до запису картинки в файл формату GIF, варто ще раз переконатися, що він перетворений до колірної індексованої моделі. Так, все в порядку.

Через меню File викликаємо команду Export/GIF89a Export. Перед нами інший сценарій діалогу. У першому випадку ми мали справу з файлом колірної RGB-моделі, в якому прозорість була задана справді прозорими пікселями. Тоді Photoshop запропонував підказати тільки колір майбутнього фону для напівпрозорих пікселів. І все. Тепер доведеться мати справу і з іншими параметрами.

Прозорість в картинці можна задати по колірному ключу, приблизно як у функції Color Range. Тільки колір вибирається без допуску. Робиться це піпеткою; плюс поруч з нею вказує, що йде підсумовування квітів, які стануть прозорими.

На першій картинці з вікном GIF89a Export Options ви бачите, що було б, якщо зробити чорний колір прозорим (прозорі області помічені сірим). Усередині букв пропала б чорна окантовка.

Але ми підемо іншим шляхом. У списку Transparency From вибираємо доданий раніше канал з маскою для напису, тобто канал # 2. Тепер інша справа. Чорний фон навколо букв помічений як прозора область, але самі букви залишилися без змін. Можна записувати заголовок в GIF-файл.

Як виглядає Web-сторінка з тільки що створеними картинками з прозорими і напівпрозорими ділянками, показано на останньому екрані. По-моєму, все як і планувалося.

Звичайно, розробка графіки для Web – процес складніший. Я сьогодні розглянув лише два випадки, що стосуються базових операцій з прозорістю при створенні в Photoshop картинок для Web-документів. І справа не тільки в дизайні і розробці стилю. Це само собою. Але є ще маса специфічних тонкощів, з якими доводиться стикатися саме при роботі з графікою на Web-сторінках.

Це і оптимізація обсягів файлів при мінімальних втратах в якості, і підбір палітр, які будуть правильно відтворені на будь-якому комп'ютері, і робота з картинками дуже малого розміру, коли доводиться маніпулювати мало не окремими пікселами …

Втім, залишимо все це на потім, буде про що поговорити.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*