<div class="xblock xblock-public_view xblock-public_view-vertical" data-course-id="course-v1:Profosvita+CS-007-EDUP+2025" data-init="VerticalStudentView" data-runtime-class="LmsRuntime" data-runtime-version="1" data-block-type="vertical" data-usage-id="block-v1:Profosvita+CS-007-EDUP+2025+type@vertical+block@1b74c4ca44d6443599e44e93a2b81932" data-request-token="2b1859f850dc11f09360d6010a8bf5d1" data-graded="False" data-has-score="False">
<div class="vert-mod">
<div class="vert vert-0" data-id="block-v1:Profosvita+CS-007-EDUP+2025+type@html+block@3ac72bb8949b45b48919ce3c188b8f10">
<div class="xblock xblock-public_view xblock-public_view-html xmodule_display xmodule_HtmlBlock" data-course-id="course-v1:Profosvita+CS-007-EDUP+2025" data-init="XBlockToXModuleShim" data-runtime-class="LmsRuntime" data-runtime-version="1" data-block-type="html" data-usage-id="block-v1:Profosvita+CS-007-EDUP+2025+type@html+block@3ac72bb8949b45b48919ce3c188b8f10" data-request-token="2b1859f850dc11f09360d6010a8bf5d1" data-graded="False" data-has-score="False">
<script type="json/xblock-args" class="xblock-json-init-args">
{"xmodule-type": "HTMLModule"}
</script>
<p style="text-align: center;"><img height="auto" width="100%" src="/assets/courseware/v1/ece7c6869826b6c5ec1cfb8412e658c6/asset-v1:Profosvita+CS-007-EDUP+2025+type@asset+block/m2_t6_Grafika_img1_header.png" alt="picture1" /></p>
<p></p>
<p></p>
<div style="border: 2px solid #253777; box-shadow: 4px 0px 8px #C3CAD3; padding: 16px; margin-bottom: 16px; border-radius: 8px; background-color: #b1d5e4;">
<p><b>Зображе́ння</b> — картина, малюнок, відбиток, фотографія. </p>
<p>Іншими словами, зображення — це універсальний засіб візуальної репрезентації, який може передавати інформацію та емоції.</p>
</div>
<h3 style="padding-top: 24px;"><span style="color: #004984; font-weight: bold; font-size: 110%;"> Основні характеристики зображень:</span></h3>
<p></p>
<h4 style="padding-top: 16px;"><span style="color: #156082; font-weight: bold;">1. Роздільна здатність (Resolution)</span></h4>
<p>Вимірюється у пікселях (px) або точках на дюйм (DPI – dots per inch). Висока роздільна здатність забезпечує чіткість зображення, особливо при збільшенні або друці.</p>
<ul>
<ul>
<li><em><strong>Для вебу:</strong></em> зазвичай достатньо 72-96 DPI.</li>
<li><em><strong>Для друку:</strong></em> рекомендується 300 DPI або більше.</li>
</ul>
</ul>
<h4 style="padding-top: 16px;"><span style="color: #156082; font-weight: bold;">2. Розміри зображення (Dimensions)</span></h4>
<p>Вимірюється у пікселях (pixel), що складається з кольорових точок.</p>
<p>Коли ми говоримо про "розміри в пікселях", ми маємо на увазі кількість пікселів по горизонталі (ширина) і по вертикалі (висота) зображення. Наприклад : 1920 x 1080 пікселів (px) - Full HD, стандартний розмір відео або презентацій ; 3840 x 2160 пікселів (px) - 4K Ultra HD.</p>
<h4 style="padding-top: 16px;"><span style="color: #156082; font-weight: bold;">3. Розмір файлу</span> </h4>
<p>Зображення без стиснення із високою якістю 50-80 Мб. Файли, що використовуються для створення навчальних матеріалів 3-10 Мб.</p>
<h4 style="padding-top: 16px;"><span style="color: #156082; font-weight: bold;">3. Глибина кольору (Color Depth)</span></h4>
<p>Кількість бітів на піксель (8-bit, 16-bit, 24-bit, 32-bit, 48-bit). Чим більша глибина кольору, тим більше відтінків і кольорів може відображати та зберігати зображення. Найпоширеніший 24-бітний колір зображення (16,7 млн кольорів)</p>
<h4 style="padding-top: 16px;"><span style="color: #156082; font-weight: bold;">4. Формати файлів</span></h4>
<p>Ключовий фактор для забезпечення оптимальної якості, розміру файлу та сумісності з різними програмами та пристроями</p>
<ul>
<ul>
<li><strong>JPEG/JPG:</strong> Популярний для фотографій. Використовує стиснення з втратами, що дозволяє зменшити розмір файлу, але погіршує якість при сильному стисненні</li>
<li><strong>PNG:</strong> Ідеальний для веб-графіки, ілюстрацій, логотипів. Підтримує прозорість та стиснення без втрат, зберігаючи якість. Оптимальний вибір</li>
<li><strong>GIF:</strong> Використовується для анімованих зображень та простих графічних елементів з обмеженою палітрою кольорів (8-bit або 256 кольорів)</li>
<li><strong>SVG:</strong> Векторний формат. Зображення зберігаються як математичні об'єкти, що дозволяє масштабувати їх без втрати якості. Ідеально для логотипів, іконок.</li>
<li><strong>RAW:</strong> Формат без оброблення ("Сирий"), що зберігає всі дані з сенсора камери. Використовується професійними фотографами для максимального контролю над обробкою.</li>
</ul>
</ul>
<p></p>
<p></p>
<p></p>
</div>
</div>
<div class="vert vert-1" data-id="block-v1:Profosvita+CS-007-EDUP+2025+type@html+block@146f3be0b4ea427f83eb039a4eaafe66">
<div class="xblock xblock-public_view xblock-public_view-html xmodule_display xmodule_HtmlBlock" data-course-id="course-v1:Profosvita+CS-007-EDUP+2025" data-init="XBlockToXModuleShim" data-runtime-class="LmsRuntime" data-runtime-version="1" data-block-type="html" data-usage-id="block-v1:Profosvita+CS-007-EDUP+2025+type@html+block@146f3be0b4ea427f83eb039a4eaafe66" data-request-token="2b1859f850dc11f09360d6010a8bf5d1" data-graded="False" data-has-score="False">
<script type="json/xblock-args" class="xblock-json-init-args">
{"xmodule-type": "HTMLModule"}
</script>
<div style="border: solid 1px #c8c8c8; border-radius: 5px; background: #fbffed; padding: 20px; margin: 15px 0 15px 0;">
<p><span style="color: #156082; font-size: 110%; font-weight: bold;"> Рекомендація для освітніх потреб: </span></p>
<ul>
<ul>
<li><strong>Формат: </strong> JPEG (для фото), PNG (для зображень з прозорим фоном), SVG (для схем) </li>
<li><strong>Розмір:</strong> до 10 Mb</li>
<li><strong>Розширення: </strong> не вище 3000x3000 пікселів</li>
<li><strong>Якість:</strong> чітке, контрастне, без розмиття та шуму</li>
<li><strong>Правильне освітлення:</strong> уникайте темних або занадто світлих ділянок, що зливаються</li>
<li><strong>Уніфікація стилю:</strong> зображення, що належать до одного логічного ряду, мають бути одного стилю та розміру.</li>
</ul>
</ul>
</div>
<p></p>
<p></p>
</div>
</div>
</div>
<script type="text/javascript">
(function (require) {
require(['/static/js/dateutil_factory.762fd6ff462b.js?raw'], function () {
require(['js/dateutil_factory'], function (DateUtilFactory) {
DateUtilFactory.transform('.localized-datetime');
});
});
}).call(this, require || RequireJS.require);
</script>
<script>
function emit_event(message) {
parent.postMessage(message, '*');
}
</script>
</div>
<div class="xblock xblock-public_view xblock-public_view-vertical" data-course-id="course-v1:Profosvita+CS-007-EDUP+2025" data-init="VerticalStudentView" data-runtime-class="LmsRuntime" data-runtime-version="1" data-block-type="vertical" data-usage-id="block-v1:Profosvita+CS-007-EDUP+2025+type@vertical+block@3a5e88edc9054bad9c978d4d6490d010" data-request-token="2b1859f850dc11f09360d6010a8bf5d1" data-graded="False" data-has-score="False">
<div class="vert-mod">
<div class="vert vert-0" data-id="block-v1:Profosvita+CS-007-EDUP+2025+type@html+block@966863b4cf934c55819d94e8912d302e">
<div class="xblock xblock-public_view xblock-public_view-html xmodule_display xmodule_HtmlBlock" data-course-id="course-v1:Profosvita+CS-007-EDUP+2025" data-init="XBlockToXModuleShim" data-runtime-class="LmsRuntime" data-runtime-version="1" data-block-type="html" data-usage-id="block-v1:Profosvita+CS-007-EDUP+2025+type@html+block@966863b4cf934c55819d94e8912d302e" data-request-token="2b1859f850dc11f09360d6010a8bf5d1" data-graded="False" data-has-score="False">
<script type="json/xblock-args" class="xblock-json-init-args">
{"xmodule-type": "HTMLModule"}
</script>
<p style="text-align: center;"><img height="auto" width="100%" src="/assets/courseware/v1/a9e29e0057efded390547c88571a0bc8/asset-v1:Profosvita+CS-007-EDUP+2025+type@asset+block/m2_t6_Grafika_img2_GIMP.png" alt="picture1" /></p>
<div style="border: 2px solid #253777; box-shadow: 0px 0px 10px #C3CAD3; padding: 16px; margin-bottom: 16px; border-radius: 8px; background-color: #b1d5e4;">
<ul>
<ul>
<li><b>Ресурс:</b> <strong><a href="https://www.gimp.org" target="[object Object]">https://www.gimp.org</a></strong></li>
<li><b>Платформа: </b>Windows, macOS, Linux</li>
<li><b>Особливості: </b>Безкоштовний photoshop (відкриває psd), багато плагінів, українська мова інтерфейсу</li>
<li><b>Ліцензія: </b>Повністю безкоштовна (open-source)</li>
</ul>
</ul>
</div>
<p>GIMP — це гнучкий графічний редактор для редагування зображень, створення ілюстрацій і дизайну. Він підтримує роботу з шарами, масками, фільтрами та багатьма форматами зображень, включно з PSD. Підходить для освітніх, творчих і професійних задач.</p>
<p></p>
<h3 style="text-align: left;"><span style="color: #004984; font-weight: bold;"> Можливості:</span></h3>
<ul class="i-featuresList i-featuresList">
<li class="ifl-feature">
<div class="ifl-description">Очистити зображення від шуму чи фону</div>
<div class="ifl-nbr">✓</div>
<div class="ifl-nbr-shadow"></div>
</li>
<li class="ifl-feature">
<div class="ifl-description">Намалювати інфографіку або діаграму</div>
<div class="ifl-nbr">✓</div>
<div class="ifl-nbr-shadow"></div>
</li>
<li class="ifl-feature">
<div class="ifl-description">Вирізати або змінити фон або об'єкт </div>
<div class="ifl-nbr">✓</div>
<div class="ifl-nbr-shadow"></div>
</li>
<li class="ifl-feature">
<div class="ifl-description"> Створити банер, наклейку, текст, зображення</div>
<div class="ifl-nbr">✓</div>
<div class="ifl-nbr-shadow"></div>
</li>
<li class="ifl-feature">
<div class="ifl-description">Обробка фото (маски, шари, криві, ретуш)</div>
<div class="ifl-nbr">✓</div>
<div class="ifl-nbr-shadow"></div>
</li>
<li class="ifl-feature">
<div class="ifl-description">Підготувати зображення для сайту або презентації</div>
<div class="ifl-nbr">✓</div>
<div class="ifl-nbr-shadow"></div>
</li>
</ul>
<p></p>
<style><!--
.i-featuresList .ifl-feature {
/* edit size here */
height: 80px;
width: 760px;
border: 1.5px solid #156082;
}
.i-featuresList .ifl-feature {
margin: 15px;
position: relative;
font-size: 14px;
background-color: transparent;
display: flex;
align-items: center;
}
.i-featuresList {
display: flex;
flex-wrap: wrap;
align-items: stretch;
margin: 0 auto !important;
padding-left: 0;
max-width: 1120px;
}
.i-featuresList li::before {
content: none !important;
}
.i-featuresList .ifl-feature .ifl-nbr {
color: #156082;
font-size: 2em;
font-weight: bold;
position: absolute;
top: -10px;
left: -10px;
width: 70px;
height: 64px;
text-align: center;
line-height: 65px;
background-color: white;
border: 1.5px solid #156082;
}
.ifl-nbr-shadow {
position: absolute;
top: 55px;
left: -3px;
width: 0;
height: 0;
border-left: 0px solid transparent;
border-right: 65px solid transparent;
border-top: 20px solid #156082;
}
.i-featuresList .ifl-description {
font-size: 15px;
padding: 5px 10px 5px 75px;
line-height: 1.3em;
color: #0D181C;
}
.i-featuresList .ifl-feature h4,
.i-featuresList .ifl-feature h3 {
margin: 0;
padding: 5px 10px 0px 75px;
color: #fff;
}
--></style>
<p></p>
<div style="display: flex; align-items: center; margin-right: 16px; margin-left: 16px; margin-bottom: 24px; border-radius: 8px; padding: 16px;"><img src="/assets/courseware/v1/a8e78237e0ee63609bb77a09c07e3656/asset-v1:Profosvita+CS-007-EDUP+2025+type@asset+block/icon_link.png" alt="picture" style="width: 100px; margin-bottom: 10px;" />
<div style="padding-left: 30px; text-align: justify;">
<p><em><b>Додатковий матеріал</b> – <a href="https://www.youtube.com/watch?v=CprU55GCM4E&t=8s" target="[object Object]">Розбираємось, як працювати у GIMP. Основні робочі інструменти GIMP на прикладах</a></em></p>
</div>
</div>
<p><iframe width="100%" height="550" src="https://www.youtube.com/embed/CprU55GCM4E?si=rblrietis93fEHV0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe></p>
<p></p>
<div style="display: flex; align-items: center; border: 2px solid #253777; margin-right: 16px; box-shadow: 0px 0px 10px #C3CAD3; margin-left: 16px; margin-bottom: 24px; border-radius: 8px; padding: 16px;"><img src="/assets/courseware/v1/861758067a09fb8d8634937d7dc515c9/asset-v1:Profosvita+CS-007-EDUP+2025+type@asset+block/icon_note.png" alt="picture" style="width: 100px; margin-bottom: 10px;" />
<div style="padding-left: 30px; text-align: justify;">
<p style="padding-top: 8px;"><span style="color: #004984; font-size: 110%; font-weight: bold;"> Варті уваги: </span></p>
<p><a href="https://www.getpaint.net" target="[object Object]">Paint.NET</a> — простота, мінімум навантаження</p>
<p><a href="https://krita.org/uk/" target="[object Object]">Krita</a> — професійна ВІЛЬНА програма з відкритим кодом для малювання</p>
</div>
</div>
<p></p>
<div id="gtx-trans" style="position: absolute; left: 242px; top: 2579.88px;">
<div class="gtx-trans-icon"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
(function (require) {
require(['/static/js/dateutil_factory.762fd6ff462b.js?raw'], function () {
require(['js/dateutil_factory'], function (DateUtilFactory) {
DateUtilFactory.transform('.localized-datetime');
});
});
}).call(this, require || RequireJS.require);
</script>
<script>
function emit_event(message) {
parent.postMessage(message, '*');
}
</script>
</div>
Завершення тесту
У вас залишилися невиконані завдання. Ви впевнені, що хочете завершити тест?
Тестування завершено.
Ви завершили тестування з розділу
"Модуль 2. Інструменти розробки навчальних матеріалів"
© Всі права захищено