06.02.10

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

У цьому уроці Photoshop ми побачимо як просто закруглити кути малюнка на прикладі аватарки, не обмежуючись додаванням простий рамки товщиною в 1px:

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

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

1. Відкриваємо Фотошоп. В уроці використовується моя улюблена версія Adobe Photoshop CS3, але підійде і будь-яка інша версія, встановлена на вашому комп'ютері.

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

3. Натискаємо на клавіатурі Ctrl + A щоб виділити весь малюнок, потім натискаємо Ctrl + C, щоб його скопіювати. Відкриваємо нове вікно в Фотошопі (Ctrl + N) і вставляємо в нього скопійований малюнок (Ctrl + V). При цьому фон в новому вікні повинен бути або прозорим , Або того кольору, який повинен оточувати малюнок із закругленими краями на сайті.

4. Створюємо новий шар (Ctrl + Shift + N). І в цьому новому шарі за допомогою інструменту Rounded Rectangle Tool (U) малюємо квадрат або прямокутник потрібного розміру:

5. Колір фону намальованого прямокутника не має значення. Параметр Radius, що характеризує ступінь заокругленості кута, для цього уроку дорівнює 8, але ви можете змінити його на свій розсуд:

6. Намальовану в новому шарі фігуру можна рухати за допомогою стрілок на клавіатурі. Її форму можна змінювати, натиснувши на клавіатурі комбінацію гарячих клавіш Photoshop Ctrl + T і розтягуючи потім фігуру за допомогою миші. Якщо тягнути за кут, утримуючи клавішу Shift, розмір фігури буде змінюватися пропорційно. В результаті всіх цих дій ми доб'ємося того, що фігура з заокругленими краями буде такого розміру і форми, які нам потрібні:

7. Утримуючи клавішу Ctrl натискаємо по превью шару в панелі шарів Layers (у нас це червоний квадрат). Це дозволить нам виділити червоний прямокутник із закругленими кутами, про що свідчить з'явилася пунктирна лінія по його межі:

8. У панелі шарів Layers переходимо на нижній шар з основним зображенням і натискаємо комбінацію Ctrl + Shift + I (або Select -> Inverse в головному меню Photoshop). Це дозволить виділити область, яка лежить за межами червоного квадрата із закругленими кутами.

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

10. Малюнок без гострих кутів готовий. Можна, можливо зберігати його в потрібному форматі і використовувати як аватарку або ілюстрацію на сайті.

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

Якщо потрібно закруглити тільки один кут малюнка, а решта при цьому повинні залишитися гострими, вищеописана інструкція теж відмінно підійде для використання. Для цього досить зробити за допомогою комбінації Ctrl + T розміри червоного прямокутника більше, ніж редагована картинка. При цьому краю червоного квадрата будуть закінчуватися за межами полотна і такий прямокутник можна накласти на малюнок так, щоб тільки один кут накладався на видиму область малюнка, а решта залишилися за його межами. За допомогою інвертування і видалення виділеної частини малюнка ми закруглити тільки один потрібний кут картинки, а інші кути залишаться гострими. Аналогічно можна швидко і просто закруглити будь-яку кількість кутів будь-якого зображення.

Також для створення картинки з нерівними краями або будь-якими іншими подібними ефектами можна використовувати картинку з такими нерівними краями або закругленими кутами, завантажену з якогось сайту. При цьому потрібно видалити фон, який не належить до картинки, наприклад, за допомогою інструменту Magic Wand Tool (W).

Дізнатися більше про просування мобільних додатків ви можете на сайті advertmobile.net. Цей сервіс пропонує мотивовані установки у великих обсягах для розробленого вами додатки, а також їх грамотну розкрутку в App Store і Google Play.