Будь-яка стаття або навіть просто новина, які містить цей сайт, досить погано виглядають без ілюстрації. Причому ілюстрація далеко не завжди може нести якусь явну смислове навантаження - тобто ілюструвати текст, а може просто виступати в якості елемента дизайну, тобто якогось колірного плями. Тому нерідко дизайни інформаційних і новинних контент-видань створюють в розрахунку на "кольорові плями" ілюстрацій до статей і новин. У цій статті ми не будемо аналізувати правильність або неправильність такого підходу (хоча що тут неправильного?), А поговоримо про чистою техніці - про те, яким чином слід підбирати, створювати і обробляти ілюстрації до статей (новин). Також ця стаття стане в нагоді тим користувачам, які не знають, яким чином легко і просто обробити свою фотографію для розміщення її в Інтернеті.

Як правило, ілюстрації діляться на кілька основних категорій:

• власні малюнки або фотографії

• колажі

• зображення (шматочки зображень), взяті з Мережі

• скріншоти

За рідкісними винятками, основними джерелами ілюстрацій до статей є зображення (малюнки, картинки і фотографії), знайдені в Мережі за допомогою пошукових систем, або скріншоти сайтів або програм. Давайте розглянемо ці два процеси.

Пошук зображень в Мережі

У Мережі будь-які зображення найпростіше шукати за допомогою спеціального сервісу пошуку і відбору картинок Яндекса або Google .

Пряме посилання пошуку картинок на Яндексі виглядає так - images.yandex.ru

Пряме посилання пошуку картинок на Google - images.google.com

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

Перед пошуком, щоб якомога швидше знайти підходящі варіанти, рекомендується задати деякі стартові параметри. Наприклад, якщо ви шукаєте велику ілюстрацію, в якій повинні відрізнятися деталі, тоді вкажіть критерій розміру "Великий" або "Величезний" (в Яндексі і Google розміри вказуються майже однаково).

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

Після того як ви вибрали зображення, його потрібно або зберегти в окремий файл, або відразу вставити в графічний редактор для подальшої обробки. В MSIE для обох цих дій потрібно поставити курсор миші на зображення і клікнути на праву кнопку. Перед вами з'явиться контекстне меню, в якому слід вибрати "Зберегти малюнок як" - для збереження зображення на диск, або "Копіювати" - для копіювання зображення в буфер обміну. Щоб потім отримати зображення з буфера обміну в Photoshop'е, потрібно перейти в цей графічний редактор і зробити наступні дії: File-New, потім ОК - створиться новий файл з розмірами зображення з буфера. Після цього залишається тільки вставити зображення з буфера - Ctrl + V або Shift + Ins. (У багатьох інших графічних редакторах є опція "створити файл з буфера". Втім, в Photoshop'е ці кілька дій також можна повісити на одну комбінацію клавіш.)

Якщо мова йде про скріншоті ( "знімку" вмісту екрану або активного вікна), то вам потрібно просто натиснути клавішу PrintScreen (скопіювати весь екран) або Alt + PrintScreen (скопіювати активне вікно). При цьому скріншот потрапляє в буфер обміну, і ви його потім вставляєте в графічний редактор для подальшої обробки.

Важливо! По можливості намагайтеся зменшувати вікно програми або сайту перед створенням скріншота. Тому що далі вам доведеться значно зменшувати розміри вже самого скриншота, а це призводить до сильної втрати якості. Ось, наприклад, скріншот сайту, отриманий з повного вікна:

Як бачите, якість тексту - огидне. А ось скріншот, отриманий по Alt + PrintScreen з заздалегідь зменшеного вікна:

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

Обробка зображення для статті

Припустимо, що ви вже отримали картинку або скріншот в Photoshop'е. Тепер перед нами стоять такі основні завдання:
а) Привести картинку до потрібного розміру;
б) Опрацювати картинку (подконтрастіть, підвищити різкість);
в) Зберегти її в потрібному форматі.

Наводимо картинку до потрібного розміру

Це робиться досить просто. Вибираємо пункт меню Image-Size і задаємо потрібні параметри по ширині. Простежте за тим, щоб висота була задана автоматично (знизу повинна бути відзначена настройка Constrain Proportions), інакше картинка буде сильно спотворена. Після натискання на "ОК", ви отримаєте картинку потрібного розміру. Якщо висота картинки вийшла більше, ніж потрібно, ви завжди її можете підрізати. Для цього обов'язково включите зображення вимірювальних лінійок, якщо вони не включені (Ctrl + R), і відзначте по лінійці горизонтальну лінію відрізу (натискаєте мишкою ліву кнопку на горизонтальній лінійці і, не відпускаючи кнопку, тягніть курсор мишки вниз: при цьому на зображенні з'явиться дорожня лінія, яку потрібно поставити там, де буде обрізатися картинка). Далі прямокутним маркером відзначте зону зображення, яку потрібно залишити, після чого викличте пункт меню Image-Crop (при цьому картинка обрізане по маркеру). Ще обрізання картинки до потрібного розміру можна виробляти інструментом Crop Tool.

Найпростіша обробка картинки

Складна обробка графіки виходить за рамки даної статті, тому ми поговоримо тільки про просту обробці. Зазвичай для поліпшення скриншота або картинки має сенс спробувати зробити "Автоконтраст" (Image - Ajustments - Auto Contrast) - якщо результат не вразить, то його спокійно можна скасувати, - а потім ще можна спробувати збільшити різкість (особливо це корисно для скріншотів). Різкість збільшується через Filter - Sharpen - Sharpen (або Unsharp Mask, в якому можна погратися параметрами).

збереження

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

Тепер він же, який було збережено так, як треба

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

Так у що зберігати скріншоти (картинки, фотографії)? Для інтернету їх зберігають в двох форматах: GIF або JPG (JPEG). У Photoshop'а є навіть спеціальний пункт меню - Save for web, де можна не тільки вибрати потрібний формат, а й побачити, як картинка буде виглядати після збереження.

Я не буду читати довгі лекції про те, чим саме відрізняється формат JPG від GIF'а, скажу тільки, що для скріншотів і малюнків (там, де багато областей одного кольору і багато вертикальних і горизонтальних ліній) є найбільш оптимальним формат GIF (а точніше, GIF 64 або GIF 128). Для фотографій, особливо великих, більш відповідним є формат JPG з середнім рівнем стиснення (в Photoshop'е він називається JPEG Medium).

Так що скріншоти зберігаємо в GIF 64, а фотографії - в JPEG Medium. При цьому Photoshop буде робити попередній зображення, яке повинно вийти в результаті, в залежності від обраного формату.

Також зліва знизу буде показаний розмір зображення. Якщо ви спробуєте вибирати різні установки, то по передпереглядом відразу зрозумієте, в яких випадках який формат найкраще вибирати. Однак якщо користуватися цією нескладною рекомендацією - скріншоти зберігати в GIF 64, а фотографії в JPEG Medium, - то можна навіть не експериментувати з форматами.

І ще кілька рекомендацій

1. Якщо ви виготовляєте скріншоти, які повинні служити ілюстрацією до статті, тоді намагайтеся їх робити максимально помітними (великими). Нічого страшного не буде, якщо скріншоти, як в моїй статті, будуть на всю ширину колонки без обтікання текстом. Нехай на всю ширину, нехай без обтікання - але зате хоч щось буде видно. Тому що немає гірше скріншотів в 150-200 пікселів по ширині, з яких читач ще щось повинен зрозуміти. Одна справа, коли скріншот дається, так би мовити, в чисто оформлювальних цілях - тоді його можна зробити в 200-300 пікселів по ширині і поставити зліва чи справа в тексті (як скріншот до даного абзацу). Але інше - якщо читач на скріншоті повинен щось прочитати: в цьому випадку робіть його максимального розміру для даної колонки (як в скріншоті нижче):

2. Якщо зображення ставиться з обтіканням текстом і ви його ставите в якомусь html-редакторі, не забувайте про параметр Horizontal Spacing (hspace). Його потрібно зробити 6-8 одиниць, щоб текст не притискався до картинки.

3. Якщо ви готуєте фотографію для подальшого розміщення її в Інтернеті, тоді найбільш оптимальний формат зображення: приблизно 500 точок по ширині, якщо фотографія альбомна, і приблизно 370-400 точок по ширині - якщо фотографія портретна. Зберігайте фото в JPEG Medium. Розмір отриманого зображення залежить від самої фотографії (чим більше однотипних областей, тим краще буде стискатися), проте в будь-якому випадку вона буде "важити" від 20 до 50 кілобайт, що для розміщення в Інтернеті цілком прийнятно.