Методичні рекомендації з дисципліни "Комп'ютерна графіка" Горлач Д.А. by Department of multimedia technologies and mediadesign

ГОРЛАЧ ДМИТРО

Комп'ютерна графіка методичні рекомендації до практичным занять студентам Інституту журналістики

КИЇВ 2020

Рецензенти: Ситник О.В. кандидат наук із соціальних комунікацій, доцент кафедри мультимедійних технологій і медіадизайну Інституту журналістики Київського національного університету імені Тараса Шевченка Грозна О.О. асистент кафедри мультимедійних технологій і медіадизайну Інституту журналістики Київського національного університету імені Тараса Шевченка

Рекомендовано до друку на засіданні кафедри мультимедійних технологій і медіадизайну Інституту журналістики Київського національного університету імені Тараса Шевченка (протокол № 10 від 13 травня 2020 р.)

ЗМІСТ

Вступ

Практична робота 1. Основи комп’ютерної графіки. Види графіки.

Практична робота 2. Підготовка растрових зображень для різних платформ. Колірні схеми.

Практична робота 3. Adobe Photoshop як інструмент для роботи з растровою графікою. Основні можливості.

Практичні завдання

Рекомендовані джерела

Вступ Мета дисципліни – освоєння студентами комплексу практичних знань з комп’ютерного опрацювання векторних і растрових зображальних оригіналів, застосування умінь для підготовки мультимедійного контенту використовуючи функціональний потенціал настільних видавничих програмних пакетів. Акцент зроблено на базові знання, які є необхідною передумовою для визначення правильного і ефективного вектору в подальшому поглибленному засвоєнні інструментарію графічних редакторів і загалом професійному зростанні в сфері створення і візуалізації інформації. Методичні рекомендації Комп'ютерна графіка передусімспрямовані на допомогу в засвоєнні матеріалу практичних занять дисципліни «Комп'ютерна графіка, аудіо- та відеомонтаж», що є нормативною складовою освітньо-професійної підготовки фахівців за освітньо-кваліфікаційним рівнем «Бакалавр» галузі знань 061 «Журналістика» напряму

підготовки «Видавнича діяльність і медіаредагування» і викладається в обсязі 180 годин. Дисципліна передбачає вивчення теоретичного і практичного базису для роботи з векторною та растровою графікою, аудіо- та відеоконтентом, засвоєння необхідних навичок для розробки і інтеграції в друковані і цифрові проекти. Також методичні рекомендації будуть корисні під час вивчення всіх тих дисциплін, де передбачено практичний блок по створенню дизайн-контенту і рекламних матеріалів, зокрема на дисципліні "Іміджеологія", тощо. Завдання (навчальні цілі):вивчення основ растрової і вектороної графіки; засвоєння інструментарію програм Adobe Photoshop, Adobe Illustrator, набуття навичок системного підходу до розробки дизайнерських рішень, вміння застосовувати знання з дизайну в мультимедійних проектах, програмах. В результаті вивчення дисципліни студенти формують і демонструють наступні знання і вміння: знання теоретичних аспектів застосування векторної та растрової графіки; цифрові кольорові моделі, растрові і векторні формати; основи кольористики і типографіки;базову логіку роботи графічних редакторів і основні інструменти; вміють створювати і редагувати векторні примітиви, форми і ілюстрації інструментами Adobe Illustrator; розробити і підготувати макет друкованої продукції засобами Adobe Illustrator; підготувати макет для різноманітних цифрових платформ засобами Adobe Illustrator і Adobe Photoshop; підготувати растрове зображення для різноманітних цифрових і друкованих проектів інструментами Adobe Photoshop.

практична робота 1

Основи комп’ютерної графіки. Види графіки.

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

елементом САПР (систем автоматизації проектування). Засобами конструкторської графіки можна отримувати як плоскі зображення (проекції), так і просторові тривимірні зображення. Ілюстративна графіка – це вироби, вільне малювання і креслення на екрані комп’ютера. Пакети ілюстративної графіки відносяться до прикладного програмного забезпечення. Найпростіші програмні засоби ілюстративної графіки називаються графічними редакторами. Художня і рекламна графіка стала популярною багато в чому завдяки телебаченню. За допомогою комп’ютера створюються рекламні ролики, мультфільми, комп’ютерні ігри, відеоуроки, відеопрезентації. Графічні пакети для цих цілей вимагають великих ресурсів комп’ютера. Особливістю цих графічних пакетів є можливість створення реалістичних зображень і «рухомих картинок». Отримання малюнків тривимірних об’єктів, їх повороти, наближення, видалення, деформації пов’язані з великим обсягом обчислень. Передача

освітленості об’єкта в залежності від положення джерела світла, від розташування тіней, від фактури поверхні вимагає розрахунків, які враховують закони оптики. Комп’ютерна анімація – це отримання рухомих зображень на екрані дисплея. Художник створює на екрані малюнок початкового і кінцевого положення рухомих об’єктів, всі проміжні стани розраховує і зображує комп’ютер, виконуючи розрахунки, що спираються на математичний опис даного виду руху. Отримані малюнки, що виводяться послідовно на екран з певною частотою, створюють ілюзію руху. Мультимедіа – це об’єднання високоякісного зображення на екрані комп’ютера зі звуковим супроводом. Найбільшого поширення системи мультимедіа отримали в області навчання, реклами, сфері розваг. Графіка для Інтернету. Все більше вдосконалюються способи передачі візуальної інформації, розробляються досконаліші графічні формати, активно використовується тривимірна графіка, анімація, весь спектр мультімедіа.

VR, AR, MR технології віртуальної і доповненої реальності з ефектом заглиблення вимагають специфічного і комплексного підходу до моделювання дійсності і графіки, яка поєднує в собі всі найсучасніші інструменти

Розрізняють два основних типи комп'ютерної гоафіки за моделлю формування : растрову і векторну. Вони відрізняються принципами формування зображення при відображенні на екрані монітора або при друці.

мал. а1. приклад растрового зображення

мал. а2.

приклад векторного зображення

Знання про природні відмінності векторної і растрової графіки, їх взаємодію є основою професійної роботи. У растровій графіці зображення складається з найдрібніших точок-пікселів (pixel, скорочено px). Будь-яке растрове зображення має фіксовану кількість пікселів. Якщо ви збільшите фотографію, то побачите ці самі пікселі – різнокольорові квадрати, зазубрені деталі (мал. а1). При цьому те, що зображено на фотографії, буде важко зрозуміти. Якість растрових зображень залежить від дозволу. При масштабуванні, в силу своєї піксельної природи, растрові зображення завжди втрачають в якості. Прикладом растрового зображення може служити будьяка фотографія, відсканована або отримана шляхом цифрової зйомки. Adobe Photoshop - найкраща програма для обробки растрових зображень. Векторна графіка складається з ліній і кривих, заданих векторами, математичними об'єктами, які описують зображення відповідно до його геометричними характеристик. У векторній графіці якість зображення не залежить від роздільної здатності, векторні об'єкти описуються математичними рівняннями, тому при масштабуванні вони не втрачають в якості (мал. а2). Але рівняння самі по собі нічого не означають, якщо не можна побачити їх результат. Векторні об'єкти растрируются на пристроях виведення, таких як монітор або принтер. Векторні зображення можна трансформувати без втрати деталізації і чіткості, оскільки такі зображення не залежать від роздільної здатності. Їх контури залишаються чіткими при зміні розміру, друку на принтері PostScript, збереженні в PDF файле, а також під час імпорту в додаток для роботи з векторною графікою.

Таким чином, векторні зображення – це найкращий вибір для ілюстрацій, виведених на різні носії і розмір яких доводиться часто змінювати, наприклад логотипи. Adobe Illustrator - програма того ж розробника для обробки і побудови векторних зображень. Розмір векторного файлу залежить від кількості об'єктів, що входять до його складу.

Контрольні питання 1. Що таке комп'ютерна графіка? 2. Який механізм розпізнавання образів зображень? 3. Які завдання вирішує комп'ютерна анімація? 4. Що є кінцевим продуктом комп’ютерної графіки? 5. Що розуміють під векторною графікою? 6. Чим викликаний інтерес до використання комп’ютерної графіки в різних професійних сферах? 7. Що таке роздільна здатність зображення? 8. Які принципи формування зображення при растровому методі обробки? Практичне завдання 1 виконати

практична робота 2

Підготовка растрових зображень для різних платформ. Колірні схеми.

ід час роботи з макетом в графічних редакторах треба враховувати особливості растрової графіки при відтворенні зображень, функціональну специфіку форматів і їх застосування, а також дуже важливою складовою, а можливо і найважливішою є механізм представлення кольорової палітри в комп'ютерній графіці. Основними характеристиками растрового зображення є висота і ширина, що задаються в момент його створення, які можна змінити в процесі роботи. Залежно від подальшого використання вибирають різні одиниці виміру: якщо ви хочете використовувати його в поліграфії (друкований відбиток на папері, фотографія великого розміру) – сантиметри (см); якщо для Webграфікі–пікселі (px). Піксель (від англ. picture element – елемент картинки) це найменший неподільний компонент растрового зображення, з яким здійснюється робота. Він має дві характеристики: стан і колір. Існує також величина, яка визначає якість растрового зображення, – роздільна здатність.

мал. Б1.

роздільна здатність 72 ppi

Роздільна здатність – це кількість пікселів (точок) на одиницю довжини. Зазвичай його вимірюють в dpi (dots per inch, точок на дюйм) або в ppi (pixel per inch,пікселах на дюйм). Дані терміни в певному сенсі синоніми, тільки ppi відноситься до зображень, а dpi – до пристроїв виведення. термін dpi ви зустрінете в описі моніторів, цифрових фотоапаратів тощо. Дюйм дорівнює 2,54 см.

мал. Б2. роздільна здатність 16 ppi

мал. Б3.

роздільна здатність 8 ppi

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

браження. Основним критерієм для Інтернету є швидкість завантаження зображень, а не їх висока якість, тому обираються відповідні формати збереження файлів, де якість не найголовніше. Якщо ви захочете надрукувати фото на папері, то роздільна здатність має бути 300 ppi. До речі, це основна вимога для фототіпографій, що друкують журнали, каталоги для малоформатної продукції (Буклети, флаєри, рекламні листівки). Найнебезпечніше, що на моніторі для фото з роздільною здатністю 72 ppi не помітна майбутня її погана якість після друку (мал. б1). Різні значення роздільної здатності впливають на якість Зображення на моніторі буде в чотири рази більше, ніж насправді. У журналі фотографії з роздільною здатністю 72 ppi будуть нечіткими, розмитими як на малюнку нижче. Згладжування (anti–alias)

мал Б4 згладжування діагональної лінії

Криві і діагональні лінії зображення важко передати на моніторі, тому що монітор може відображати тільки прямокутні елементи. Для збереження плавного виду країв існує механізм згладжування (anti-alias). для різних інструментів і команд в програмі існує опція anti-alias, яка по замовчуванню активна Згладжування – механізм переміщення пікселів різного ступеня прозорості уздовж країв "проблемних ділянок" кривих і діагональних ліній.

мал Б5 згладжування кола

На мал. Б4. показані дві діагональні лінії, у лівої згладжування активне, на краях помітні пікселі різної прозорості, які заповнюють простір між різкими краями. Праворуч показана ступінчаста лінія з різкими краями (опція antialias була вимкнена). На мал. Б5. показано збільшене зображення круглої форми зі згладжуванням і без нього. Згладжування круглої форми потрібного відтінку пікселя для зафарбовування края кривої або діагональної лінії.

Колірні моделі

Модель RGB. Перш за все, необхідно усвідомити, що розпізнання кольорів людиною є результат роботи мозку. Відчуття кольору створюється електромагнітними коливаннями з довжинами хвиль від 380 до 750 нм, що потрапляють в око людини. Експериментально (в 1852 р) було встановлено, що будь-який колір може бути отриманий поєднанням трьох світлових потоків: червоного (R) довжина хвилі ~ 630 нм, зеленого (G)~ 528 нм і синього (B) ~ 457 нм.

Саме на цьому принципі засноване створення кольорового зображення на екрані монітора. Поверхня монітора складається з найдрібніших точок (пікселів) червоного, зеленого і синього кольорів (тріада люмінофорів), форма цихпікселів залежить від типу електронно-променевої трубки. мал. Б6. модель RGB

мал. Б7. модель CMYC

При потраплянні електронного променя на піксель, він забарвлюється в певний відтінок свого кольору, в залежності від сили сигналу. Оскільки пікселі маленькі, то навіть з невеликої відстані вони стають невиразними і створюють три світлові потоки, які при потраплянні в око сприймаються нами як колір. Цей колір може бути описаний за допомогою трьох складових: R, G і B. Ця колірна модель отримала назву RGB і була прийнята в 1931 р. Відповідно до цієї моделі суміш червоного і зеленого дає жовтий колір (Yellow), червоного і синього - пурпурний (Magenta), синього і зеленого - блакитний (Cyan), а червоного, зеленого і синього - білий.

В системі RGB кожен колір на екрані монітора має 256 градацій яскравості (Від 0 до 255). Таким чином, на екрані монітора може бути відображено більш ніж 16 мільйонів відтінків. Коли ми бачимо кольорове зображення в журналі, то до очей надходить світловий потік, відбитий від паперу,що покритий фарбою. Якщо ми бачимо червоний аркуш паперу при денному світлі, то це означає, що фарба поглинає всі світлові потоки і відображає тільки червоний. Освітіть цей же аркуш паперу синім кольором, і він стане чорним, тому що фарба не відображає синій колір. Модель CMYK. Трьома основними кольорами в живописі здавна були синій, червоний і жовтий. Змішуючи їх, художники отримували різні кольори на своїх полотнах. Спадкоємцями цієї тріади кольорів при друку стали блакитний (Cyan), пурпурний (Magenta) і жовтий (Yellow). Однак якщо теоретично при змішуванні цих кольорів виходить чорний колір, то практично цей колір має корич-

невий відтінок. Це пов'язано з тим, що ідеальних фарб не існує. Тому при друку додають як мінімум ще одну фарбу - чорну. Подібна колірна модель називається CMYK. На відміну від RGB кількість кожного кольору задається у відсотках від 0 до 100. Перетворення зображення з моделі RGB в модель CMYK виконуєся командою Image › Mode › CMYK.

Важливо знати, що діапазон відтінків CMYK значно менший, ніж RGB, і коли ви переглядаєте на екрані зображення в режимі CMYK, це лише імітація на екрані друкованих кольорів. Не всі кольори CMYK можна відтворити на моніторі і не всі кольори RGB можна відтворити в CMYK! Модель HSB. (від англ. Hue, Saturation, Brightness - відтінок, насиченість, яскравість)є нелінійним перетворенням моделі RGB і вважається найбільш зрозумілою, тому, що в ній присутня координата Hue (Тон). Ви можете

легко зрозуміти, про який колір іде мова, якщо у вас перед очима, а краще в голові, знаходиться кольорове коло с координатами.

мал. Б8. модель HSB

Контрольні питання 1. У чому полягає різниця між апаратно залежною і перцептивною моделями кольору? 2. З яких причин в якості базових компонентів адитивної моделі обрані червоний, зелений і синій? 3. У чому полягають принципові переваги і недоліки моделі кольору RGB? 4. Чим відрізняються колірні простору RGB і CMYK? 5. Які значення інтенсивностей колірних компонентів в кольоровій моделі CMYK відповідають білому кольору? 6. Що таке кольоровий режим? 7. Коли застовують модель CMYK? Практичне завдання 2-3 виконати

практична робота 3

Adobe Photoshop як інструмент для роботи з растровою графікою. Основні можливості.

рограмне забезпечення AdobePhotoshop є потужним інструментом для роботи з растровою графікою. Перш за все це просунута обрабка зображень усіх форматів, але не тільки. Функціонал сучасного пакету дуже широкий і здатен закрити завдання від анімації до дизайну інтерфейсів. Як вибрати колір в Photoshop? Діалогове вікно Color Picker. В панелі інструментів задаються Foreground Color (Основний колір) і Background Color (Фоновий колір) Foreground Color (колір переднього плану, або основний) в Photoshop використовується для малювання, заливки документа або виділеної області і в якості початкового кольору інструменту Gradient (Градієнт). Background Color (колір заднього плану, або фоновий) з'являється при видаленні пікселів при відсутності прозорості, а також завершує градієнт. Клацанням по піктограмі Foreground або Background викликається діалогове вікно Color Picker (мал. B1.) У діалоговому вікні можна задавати колір, клацаючи мишею в великому квадраті, а також вводячи в поля відповідні значення. Праворуч від квадрата підбору кольору знаходитьсяшкала параметрів. Включений відповідний перемикач. Встановивши повзунок шкали активного параметра на позицію 220 градусів, ви вибрали синій колір.

мал В1. Color Picker. палітра кольорів

Палітра Swatches (Зразки) Мал. В2. Палітра Swatches (Зразки) вже містить стандартний набір кольорів (рис. В10). Клацаючи по зразком, ви вибираєте колір. При виборі кольору в палітрі Swatches (Зразки) колір переноситься в усі колірні завдання програми. просто введіть їх у відповідне поле.

мал В2. Swatches. палітра зразків

Інтерфейс. Оптимізація процесів. Розглянемо робочий простір програми з відкритими файлами (мал. В.3). Рядок заголовка показує назву і значок програми Adobe Photoshop. кнопки управління в правій частині рядка використовуються для згортання / розгортання, зміни розмірів і закриття вікна програми.

Мал. В3. Вікно програми Photoshop

Головне меню містить основні команди управління, об'єднані за загальним призначенням. Містить наступні розділи. File (Файл). Операції з файлами, такі як відкриття і закриття, імпорт і експорт. Тут же знаходяться команди для пакетної автоматичної обробки файлів, отримання зображень з пристроїв введення, виведення документа на друк. Edit (Редагування). Команди редагування - скасування та повернення дій, операції з буфером обміну, команди заливки і обведення, трансформації, завдання для пензлів, візерунків і т. д., а також установки програми. Image (Зображення). Команди, призначені для зміни зображення колірної моделі, розміру, а також команди колірної і тонової корекції. Layer (Шар). Управління роботою з шарами. Type (Шрифт). Команди роботи з текстом. Select (Виділення). Команди створення, модифікації, збереження, зміни виділення. Filter (Фільтр). Різні фільтри програми або підключення дод ні кові. View (Перегляд). Тут зосереджено все, що ви можете бачити на екрані. команди по зміні масштабу перегляду документа, а також відображення різних допоміжних елементів інтерфейсу. Window (Вікно). Команди організації робочого простору, відображення палітр і вікон документів. Help (Довідка). Виклик довідкової інформації і допомоги. Панель параметрів активного інструменту (Options). Вміст даної панелі залежить від обраного інструменту в палітрі інструментів.

Робота з швидкими (гарячими) клавішами.

Photoshop спочатку розроблявся як програма, для роботи в якій потрібні обидві руки – одна працює з клавіатурою, інша – з мишею. Використання комбінацій клавіш і швидких клавіш значно прискорює доступ до різних команд, дає можливість працювати більш ефективно. Знання комбінацій клавіш дозволяє зосередитися на зображенні і отримати набагато кращі результати, крім цього, набагато збільшує швидкість роботи. Найбільш часто використовувані команди головного меню, інструменти, палітри викликаються швидкими клавішами. Наприклад, команда головного меню File| New (Файл | створити) може бути викликана клавішами <Ctrl> + <N>, для скасування останньої дії (Команда Edit| Undo (Редагування | Скасувати)) необхідно натиснути комбінацію клавіш <Ctrl> + <Z>. Якщо під час малювання вам потрібно отримати доступ до

інструменту Brush (Пензлик), збільшити його розмір, а також задати непрозорість рівною 50%. При роботі з мишею вам необхідно спочатку клацнути на значку інструмента Brush, перетягнути повзунок для зміни розміру кисті, потім в поле параметра Opacity (непрозр.) І ввести значення 50. При використанні швидких клавіш для виконання цього ж завдання потрібно натиснути клавішу <B>, потім клавішу <]> для збільшення розміру пензля, після чого ввести потрібне значення за допомогою цифрової клавіатури. Це більш швидкий спосіб отримання тих же самих результатів. Вивчення доступних швидких клавіш дозволить вам працювати з зображенням, а не загубитися в нетрях налаштувань і параметрів інструментів. Photoshop пропонує неймовірну кількість методів переміщення по зображенню, а також масу документованих і недокументованих швидких клавіш. Якщо ви використовуєте який-небудь інструмент або команду кілька разів протягом години, вивчення швидких клавіш дійсно має сенс.

• Натисніть Tab, щоб приховати панель інструментів і палітри, Shift + Tab приховає тільки палітри. • Shift + клік по синій верхній смузі біля панелі інструментів або палітрах, перемістить їх до бічної межі вікна. • Подвійний клік по верхній синій смузі, в будь-кому вікні палітри, зверне її. • Подвійний клік по сірому фону відкриє діалогове вікно для відкриття файлу, Shift + подвійний клік відкриє браузер Adobe Bridge. • Втомилися від сірого тла навколо зображення? Візьміть інструмент Paint Bucket Tool (Відро), затисніть Shift + клік по сірому фону і він зміниться будь-яким кольором, який Ви вибрали в якості кольору переднього плану. • Щоб вибрати всі шари натисніть Alt + Ctrl + A. • Caps Lock змінить Ваш курсор на більш чіткий хрестик. • Натисніть F, і Ви зможете вибрати один з 3-х різних режимів екрану, що дозволить зробити робочу область більше. • Щоб намалювати пряму лінію за допомогою кисті або олівця, зробіть один клік в точці початку, потім затисніть Shift + клік в точці кінця. • Натискання Ctrl перетворить будь-який інструмент в Move Tool (Переміщення), поки утримуєте його. • Ctrl + Alt + клік створить копію зображення і перемістить його по ходу руху мишки.

• Натискання Space (Пропуск) перетворить будь-який інструмент в Hand Tool (Рука), поки утримуєте його. • Ctrl + Space + клік збільшить масштаб зображення, Alt + Space + клік - зменшить. • Натиснувши Ctrl і "+" або "-" змінить масштаб зображення у відсотках. • Якщо використовувати Eyedropper Tool (Піпетка) з натиснутою Alt - це дозволить взяти зразок кольору для кольору фону. • Інстрмент Measure Tool (Лінійка), зробіть лінію, а потім затисніть Alt і створіть іншу лінію з кінця першої - то Ви визначите кут між ними. • Ctrl + Alt + Z і Ctrl + Shift + Z слід використовувати для відміни і повернення низки дій. • Alt + Backspace і Ctrl + Backspace заллє зображення кольором переднього плану та фону відповідно. Shift + Backspace викличе діалогове вікно для заливки зображення. Alt + Shift + Backspace і Ctrl + Shift + Backspace заллє зображення кольором переднього плану та фону відповідно, але залишивши при цьому прозорі місця прозорими. • Ctrl + Shift + T повторить будь-які останні трансформації. • Розмір полотна легко можна збільшити використовуючи інструмент Crop Tool, розтягніть його за межі полотна та натисніть Ок. • Ctrl + J створить копію поточного шару. • Ctrl + Shift + E зіллє всі видимі шари в один, Ctrl + Shift + Alt + E зіллє копію видимих шарів в один новий шар.

• При використанні Marquee Tool (Виділення), затисніть Alt, щоб зробити стартову точку центром виділеної області. • Ctrl + D для зняття виділення, Ctrl + Shift + D для повернення виділення. • Коли Ви створюєте виділення за допомогою інструментів Marquee Tool, затисніть Space, щоб перемістити виділення, відпустіть - щоб продовжити виділяти. • Натиснувши Shift і "+" або "-" змінить режим накладення шару на: Normal, Dissolve, Multiply, Screen, Overlay • Якщо вибраний інструмент Brush або будь-який інший, прозорість шару можна змінювати натисканням на відповідну цифру на клавіатурі: • - при натисканні на одну цифру [4 = 40%] • - для завдання більш точного % прозорості [затисніть 7 а потім 2 дасть в результаті 72%]. • Затисніть Alt і зробіть клік по значку очі поряд зі значком шару на палітрі шарів, щоб приховати всі інші шари, крім поточного. • Зразок кольору можна взяти не тільки з зображення в Photoshop, а й за межами програми. Уменьште вікно фотошопа так, щоб бачити зображення, на якому хочете визначити колір, візміть інструмент Eyedropper Tool (Піпетка), зробіть клік всередині фотошопа і не відпускаючи Виведіть її за межі вікна. • Виберіть шар, затисніть Alt і зробіть клік на кордоні між верхнім і поточним шаром, щоб створити Cliping Mask, таким чином верхній шар буде видно в рамках нижнього.

• Утримуючи Alt натисніть на кнопку створення нового шару "Create a new layer" на палітрі шарів, щоб з'явилося діалогове вікно з настройками для нового шару. • Виберіть шар і утримуючи Alt зробіть клік по Корзині на палітрі шарів, таким чином шар віддалиться без зайвого питання. Зробіть виділення для прозорості де Ви хочете, перейдіть на вкладку Channels і натисніть Ctrl + клік по кнопці "Create new channel", таким чином створите альфа-канал тільки для виділених областей. • File> Automate> Contact Sheet II - створить невеликі превьюшки для кожного файлу, у відкритих в даний момент в фотошопі, в окремому документі в ряд і підпише їх. • У інструменту Move Tool в настройках доступна опція автовиділення шару "Auto Select Layer" залежно від місця кліка. • Працюючи з інструментом Move Tool, натиснувши Alt + Shift + клік правою кнопкою миші по різних об'єктах зображення, розташованих на різних шарах, дозволить виділити всі ці шари. • Працюючи з сіткою Grid, потягніть за верхній лівий кут, де розташовані шкали для Grid, і початок відліку для них стане в тому місці, де Ви відпустіте кнопку миші. • Створивши шлях за допомогою інструменту Pen Tool можна сховати / показати його знову за допомогою комбінації Ctrl + Shift + H. • Управління навігацією за допомогою клавіш може бути часто ефективніше мишки • Home = перегорнути в верхній лівий кут

• End = перегорнути в правий нижній кут • PageUp = перегорнути вгору на одну сторінку • PageDown = перегорнути вниз на одну сторінку • Ctrl + PageUp = перегорнути вліво на одну сторінку • Ctrl + PageDown = перегорнути вправо на одну сторінку • Shift + PageUp = перегорнути вгору на 10 pixel • Shift + PageDown = перегорнути вниз на 10 pixel • Ctrl + Shift + PageUp = перегорнути вліво на 10 pixel • Ctrl + Shift + PageDown = перегорнути вправо на 10 pixel • Ctrl + Tab перемкне Вас між різними вікнами з зображеннями. • F12 поверне стан зображення, яке було при останньому збереженні. • Утримуючи Ctrl Ви можете на палітрі Navigator розтягнути червоний прямокутник, масштабується тим самим зображення. • Затисніть Alt і зробіть клік на будь-якому етапі в історії, таким чином крок скопіюється. • Натисніть Alt і потягніть за крок з одного Action в інший, отримаєте копію дії.

• У фільтрі Lens Flare (Filter> Render> Lens Flare) задати точні координати можна зажав Alt + клікнувши по віконцю попереднього перегляду. • Утримуючи Shift + Alt трансформація об'єкта буде здійснюватися пропорційно, з центру. • Якщо у Вас обраний інструмент Move Tool і Ви хочете щось скопіювати, просто затисніть Alt і потягніть за зображення. Утримуючи Shift + Alt об'єкт легко перемістити уздовж направляючої Grid. • Якщо Ви хочете вирівняти горизонт або нерівні краї після сканування, то візьміть інструмент Measure Tool (Лінійка), проведіть лінію вздовж Вашої кривої, потім йдемо в Image> Rotate Canvas> Arbitrary, значення кута повороту фотошоп підставить сам, залишилося натиснути Ок і зображення повернуто. • Якщо Ви створюєте щось в Illustrator'е, скопріюйте і вставте в Photoshop, він запитає у якому виді вставляти: піксельній або в Shape. • Щоб відобразити панель Rules, натисніть Ctrl + R. • Щоб зображення було чітко по центру: Ctrl + A, Ctrl + X, Ctrl + V. • Ctr + E зіллє поточний шар з нижнім. • Якщо вибраний інструмент Brush Tool, керувати діаметром кисті можна по засобах кнопок [і]. • Подвійний клік по інструменті Zoom Tool поверне масштаб зображення в 100%, а по інструменту Hand Tool розтягне зображення на область екрану.

• Робота з текстом: Ctrl + H приховає виділення виділених символів. Якщо у Вас виділені символи, зробіть клік в рядку вибору типу шрифту і Ви зможете використовувати стрілки на клавіатурі для вибору типу шрифту. Alt + стрілка вліво або вправо змінить відступ між символами на 10. Ctrl + Alt + стрілка вліво або вправо змінить відступ між сиволов на 100. • Ctrl + Alt + T створить копію об'єкта, який Ви хочете трансформувати. • Ctrl + Alt + стрілка вправо, вліво, вгору або вниз скопіює поточний шар і зрушить на 1px. • Змініть активний шар за допомогою Alt + ]. • Перемістіть активний шар вгору або вниз за допомогою Ctrl + [. • Щоб приховати направляючі Grid, натисніть Ctrl +. • Ctrl + "+" збільшить масштаб зображення, Ctrl + "-" зменшить. Ctrl + Alt + "+" збільшить масштаб і розмір вікна, те ж саме для Ctrl + Alt + "-". • Використовуючи інструмент Polygonal Lasso Tool, натисніть Backspace, щоб скасувати останній крок. • Натисніть X для переключення кольору переднього плану і фону місцями. • Натисніть D щоб скинути налаштування кольорів для переднього плану і фону в кольори за замовчуванням: чорний і білий. • Щоб відобразити палітру з настройками Brushes, натисніть F5.

• Щоб відобразити палітру Layers, натисніть F7. • Ctrl + клік по іконці шару на палітрі шарів створить виділення вмісту шару. • Якщо хочете побачити вміст маски шару, то затисніть Alt і зробіть клік по масці шару. • Alt + клік по іконці створення маски для шару створить чорну маску. • Коли використовуєте Polygonal Lasso Tool, затисніть Shift, щоб створити прямі під кутом з кроком в 45 градусів. • Для кращої організації шарів - згрупуйте виділені, натиснувши Ctrl + G. • Ctrl + Shift + N створить новий файл, з висновком діалогового вікна; Ctrl + Shift + Alt + N створить новий шар в робочому файлі. • Повернемося до пензлика, клавіші [і] зменшують і збільшують діаметр кисті, а Shift + [або] змінять жорсткість кисті. • Натисніть Alt, щоб Burning Tool став виконувати функцію Dodge Tool, і навпаки. • Stamp Tool клонує ділянки зображення (Alt + клік - для визначення ділянки для копіювання). Це також працює, якщо в фотошоп відкрито кілька зображень і Ви можете також клонувати будь-які ділянки з інших зображень, достатньо лише розташувати зображення в межах видимості

•

Ctrl + клік по іконці шару створює виділення об'єкта на цьому шарі. Якщо необхідно виділити понад 1 об'єкт на декількох шарах, утримуйте додатково ще і Shift.

• Щоб об'єднати палітри в одній, потягніть за ярлик будь-якої вкладки на іншу палітру до іншого ярлика і вона переміститься. • Коли створюєте текст, натискання на Enter створює новий рядок, щоб закінчити писати нажміть Ctrl + Enter або Enter на цифровій клавіатурі. • Ви можете перемістити шар на будь-яке інше відкрите зображення в фотошоп, таким чином створиться копія шару. Утримуйте під час перетягування Shift і вміст шару вставиться чітко по центру. • Працюючи з інстрмуентом Move Tool Ви можете вибрати будь-який шар клікнув по частині об'єкта з натиснутим Ctrl. • Як вибрати групу шарів не використовуючи палітру шарів? Як виділити один шар ми знаємо з пункту 81, а додати ще один шар в групу можна затиснувши Ctrl + Shift і зробивши клік по частині об'єкта, розтвшованому на іншому шарі. • Видалити відразу кілька шарів можна простим перетаскуванням групи шарів на іконку кошика на палітрі шарів, як вибрати групу знаємо з пункту 82. • Видалити поточний шар можна затиснувши Alt і натиснувши 3 рази L. • Після застосування фільтра, його дію можна пом'якшити за допомогою функції Fade, нажав Shift + Ctrl + F.

• Скопіювати маску шару можна перетягнувши її з натиснутим Alt на другий шар. • З вертикальної направляючої Grid легко можна отримати горизонтальну, вибравши інструмент Move Tool, затиснути Alt і клікнути по самій направляючій. І навпаки. • Зберігаючи документ за допомогою Save for Web інформація про документ втрачається, щоб зберегти інформацію використовуйте Save As.

Контрольні питання 1. Що є основою растрового представлення графіки? 2. Для чого використовується растрове представлення даних? 3. Що запам'ятовується в файлах растрових форматів? 4. Які переваги растрової графіки? 5. Що відносять до недоліків растрової графіки? 6. Які графічні растрові редактори ви знаєте? 7. Як здійснюється обробка растрового зображення? 8. Яке призначення панелі інструментів для обробки зображення?

Практичне завдання 4 виконати

Практичне завдання 1 Завантажте програму AdobePhotoshop. Додайте фото. Змініть роздільну здатність на 300 ppi

Збережіть фото в форматі PNG Завантажте програму AdobeIllustrator. Додайте збережене фото в програму попередньо створивши документ.

Виконайте автоматичне трасування фото з такими налаштуваннями як на малюнку нижче

Пі сля цього зробіть колаж, поєднавши растрове і векторне зображення. Документ збережіть в форматі EPS

Практичне завдання 2 Створіть рекламний білборд. Для цього створіть нове зображення, виконавши команду Файл У вікні задайте ім'я нового файлу та його розміри

помістіть на полотно зображення, які будуть лежати в основі композиції вашого рекламного щита; додайте на полотно рекламний слоган. Зробіть п'ять варіантів рекламного щита. Збережіть в форматі PDF

Практичне завдання 3 Знайомство з можливостями PhotoShop по роботі з шарами.

редактора

Adobe

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

Відкрийте картинку куди збираєтесь встроїти зображення Змініть масштаб, щоб вони коректно вигладали на фотографії, для цього виконайте трансформацію зображені – зменшіть фігури за допомогою елемента меню Редагування - Вільне трансформування або Редагування - Трансформування - Масштабування. Для завершення трансформації натисніть клавішу Enter. Виконайте злиття шарів, виконавши команду Шари - CTR+SHIFT+E

Практичне завдання 4 Відновіть реалістичність пейзажу, на якому через дефекти плівки або неправильне сканування практично відсутнє зображення неба. Для цього скористайтеся буд-якою готовою фотографією з контрасним неба. Завантажте фотографію, на якій відсутня частина зображення (небо). Виділіть інструментом чарівна паличка біле небо і видаліть його (натиснувши Delete) Клацніть мишею по прозорій ділянці і виконайте команду виділення – інверсія. Виконайте команду редагування - копіювати. Завантажте фотографію неба і виконайте команду редагування – вставити. Використовуючи інструмент Переміщення, Вирів-няйте фотографію. Виконайте злиття видимих шарів. Налаштуйте яскравість, контраст і баланс кольорів в меню зображення - корекція - яскравість / контрастність і зображення - корекція - колірний баланс. Збережіть зображення.

Рекомендовані джерела: Основна: Буковецкая О. А. Дизайн текста: Шрифт, эффекты, цвет. — 2-е изд., испр. — М. : ДМК, 2000. — 304 с. Ванжа Л. І., Ломонос І. М. Технології верстки матеріалів: для студентів денної і заочної форм навчання спеціальності 122 Комп’ютерні науки ОП «Розробкапрограмного забезпечення та комп’ютерна графіка» Л. І. Ванжа,І. М. Ломонос. – Вінниця : ДонНУ імені Василя Стуса, 2019. – 24 c. Григорьева, И.В. Компьютерная графика [Электронный ресурс] учеб. пособие / И.В. Григорьева. – М. : МПГУ : Прометей, 2012. – 298 c. Джеймс Феличи. Типографика: шрифт, верстка, дизайн. -Петербург, 2004 Комолова Н. Компьютерная верстка и дизайн. – Спб: BHV, 2003. – 500 c.. Смикиклас М. Инфографика. Коммуникация и влияние при помощи изображений // Марк Смикиклас. – СПб: Питер, 2013. Уильямс Р. Недизайнерская книга о дизайне. — Спб. : ИДВесь, 2002. — 128 с. Пічугін М.Ф., Канкін І. О., Воротніков В. В.: Комп'ютерна графіка. Навчальний посібник/ К.: Центр учбової літератури, 2013. - 346 с. Шевченко В. Е. Основи дизайн-композиції рекламної продукції: текст лекції / В. Шевченко. – К.: Інститут журналістики, 2010. – 48 с.

Яцюк О.Г. Компьютерные технологии в дизайне. Логотипы, упаковка, буклеты. – С-Пб., 2002. – 464 с.

Додаткова: Адамов Е. Б. Ритмическая структура книги. — М. : Книга, 1974. – 96 с. Боумен У. Графическое представление информации. – М, 1971. – 227 с. Валуенко Б. В. Архітектура книги. — К. : Мистецтво, 1976. — 212 с. Георгиев Д. Режиссура газеты / Пер. с болг. Э. М. Дурыгиной. – М. : Мысль, 1979. — 260 с. Голубева О. Л. Основы композиции. Москва: Издательский дом «Искусство», 2004. - 120 с. http://www.newsman.tsu. ru/wp-content/uploads/library/photojourn/golubeva.pdf Законы композиции на єкране // http://v-montaj.narod.ru/ publik/St-15.html Капр А. Эстетика искусства шрифта. Тезисы и маргиналии со 152 иллюстрациями / Пер. с нем. В. П. Милютина. — М. : Книга, 1979. — 123 с. Кибрик Е. Объективные законы композиции в изобразительном искусстве // «Вопросы философии» 1967. № 106. http://www.e-reading.link/bookreader.php/149085/Kibrik_-_ Obektivnye_zakony_kompozicii_v_izobrazitel%27nom_ iskusstve.html