Закруглені кути на фотографії виглядають досить цікаво та привабливо. Найчастіше такі зображення застосовуються при складанні колажів або створення презентацій. Також картинки зі округлими кутамиможна використовувати як мініатюри до постів на сайті. Варіантів використання багато, а спосіб (правильний) отримати таке фото лише один. У цьому уроці ми покажемо, як заокруглити кути у Фотошопі.
Заокруглення кутів у Photoshop
Для досягнення результату ми використовуємо один із інструментів групи «Фігури»а потім просто видалимо все зайве.
- Відкриваємо у Фотошопі фотографію, яку збираємося редагувати.
- Потім створюємо копію шару з водоспадом під назвою "Фон". Для економії часу скористаємося гарячими клавішами CTRL+J. Копія створюється для того, щоб залишити незайманим вихідне зображення. Якщо раптом щось піде не так, можна буде видалити невдалі шари і почати заново.
- Йдемо далі. А далі нам знадобиться інструмент «Прямокутник із округленими кутами».
В даному випадку з налаштувань нас цікавить лише одна – радіус заокруглення. Значення цього параметра залежить від розміру зображення та потреб. Ми задамо значення 30 пікселів, так буде краще видно результат.
- Далі малюємо на полотні прямокутник будь-якого розміру (ми його потім масштабуватимемо).
- Тепер потрібно розтягнути отриману фігуру на все полотно. Викликаємо функцію « Вільне трансформування»
гарячими клавішами CTRL+T. На малюнку з'явиться рамка, за допомогою якої можна переміщати, обертати та змінювати розмір об'єкта.
- Нас цікавить масштабування. Розтягуємо фігуру за допомогою маркерів, вказаних на скріншоті. Після завершення масштабування натискаємо ENTER.
Порада:для того, щоб здійснити масштабування максимально точно, тобто не вийшовши за межі полотна, необхідно включити так звану «Прив'язку». Подивіться скріншот, там вказано, де дана функціязнаходиться. Вона змушує об'єкти автоматично «прилипати» до допоміжних елементів та меж полотна.
- Далі нам потрібно виділити отриману фігуру. Для цього затискаємо клавішу CTRLі клацаємо по мініатюрі шару з прямокутником.
- Як бачимо, довкола фігури утворилося виділення. Тепер переходимо на шар-копію, а з шару з фігурою знімаємо видимість (див. скріншот).
- Тепер шар із водоспадом активний і готовий до редагування. Редагування полягає у видаленні зайвого з кутів картинки. Інвертуємо виділення гарячими кнопками CTRL+SHIFT+I. Тепер виділення залишилося лише на кутах.
У цьому розділі я вирішив розмістити уроки фотошоп, які можуть стати Вам у нагоді при створенні дизайну сайту. Думаю, не зайвим буде, з мого боку, перед початком навчання фотошопу представити Вам гарячі клавіші фотошоп. Використовуючи гарячі клавіші фотошоп, ви полегшите собі роботу та заощадите час. .
Перший мій урок Photoshopрозповість Вам про те, як закруглити кутифото.
При виготовленні сайтів часто доводиться стикатися з проблемою, як закруглити кути малюнка, або як закруглити кутифото. У цьому уроці Фотошопя навчу Вас як закруглити кутималюнку в фотошоп. Так само цей урок Фотошопдозволить Вам закруглити кутифотографії. Сподіваюся, це вам і так зрозуміло. Адже для Фотошопі картинка і фотографія все одно. У своїй роботі я користуюсь Adobe Photoshop SC5, російська версія. Ну не сильний я в мовах.
Сьогоднішній мій урок присвячений закругленню кутів фото у фотошоп. Давайте разом зробимо фотографію із закругленими кутами, як у мене на картинці.
1. Щоб здійснити закруглення кутів у Фотошопі, відкриємо за допомогою Фотошоппотрібну нам картинку (фотографію). Наприклад, я взяв одну з фотографій свого фото архіву.
2. Наводимо розміри малюнка до потрібних параметрів. Для цього натискаємо ALT+CTRL+I. Відкриється вікно "Розмір зображення". Задаємо необхідні нам розміри. Можна просто обрізати картинку до потрібного розміру.
3. Виділяємо малюнок (CTRL+A) (з'явиться пунктирна лінія по периметру) та копіюємо його (CTRL+C); Копіюємо фото для того, щоб вихідне зображення залишилося без змін, після того, як ми здійснимо закруглення кутів у Фотошопі. Хоча можна працювати і на оригіналі, але тоді коли закруглені кути будуть готові, ми просто збережемо фото як інше зображення.
4. Відкриваємо нове вікно (CTRL+N), задаємо потрібні розміри зображення та натискаємо "ОК". Прошу звернути увагу, що я поставив фон - "прозорий". Ви можете відразу встановити фон, необхідного Вам кольору;
5. Вставляємо у нове вікно скопійований малюнок (CTRL+V) та створюємо новий шар (CTRL+SHIFT+N). У цьому шарі за допомогою інструмента "прямокутник з округлими кутамиКолір прямокутника значення не має. Вибір інструмента здійснюється шляхом натискання на праву кнопку миші. Або простим натисканням клавіші (U). Радіус закруглення встановлюємо на власний розсуд (див. малюнок нижче);
При необхідності можна перемістити намальовану фігуру за допомогою стрілок на клавіатурі або за допомогою миші, утримуючи натиснутою ліву клавішу. Попередньо не забудьте активувати на панелі інструментів переміщення (верхня кнопка). Також Ви можете змінити розмірфігури. Для цього натисніть (Ctrl+T) і розтягніть фігуру до потрібних розмірів за допомогою миші, утримуючи ліву клавішу. Якщо Ви хочете змінити розмір зі збереженням пропорцій, Вам необхідно утримувати SHIFT та розтягувати за кут фігури.
6. Переходимо в панель шарів. Утримуючи CTRL, клацаємо лівою клавішею миші по превью (картинці) шару прямокутника. З'явиться пунктирне обведення фігури.
7. Переходимо на нижній шар. Для цього в панелі шарів клацаємо праворуч від картинки. У нашому випадку – шар 1. Виділення блакитним кольором перейде на шар 1.
8. Натискаємо CTRL+SHIFT+I. З'явиться пунктирне виділення по межі тієї частини картинки, яка знаходиться за межами прямокутника, що має закруглені кути.
9. Натискаємо на клавіатурі DEL. Частина зображення, що знаходиться за межами прямокутника, буде видалена.
10. Знову активуємо шар із прямокутником. Видаляємо його, натиснувши на іконку кошика.
11. Натискаємо клавішу "М" і натискаємо лівою клавішею миші в будь-яке місце зображення. Виділення прибрано. готові. Можна зберігати зображення, яке ми отримали здійснивши& закруглення кутів у Фотошопі, у потрібному нам форматі.
Якщо таке зображення буде використано для створення дизайну сайту, зберігайте його для Web та пристроїв (ALT+SHIFT+CTRL+S).
12. Увага! Якщо у Вас по краях зображення зі округлими кутамизалишилися прозорі пікселі, Вам необхідно виконати тримінг. Для цього натисніть "Зображення", виберіть "Триммінг", у вікні встановіть налаштування як у мене на картинці і натисніть "Ok". Розмір полотна набуде розміру зображення, а всі зайві прозорі пікселі будуть видалені.
Даний урок фотошопможна використовувати і для одержання овальних фотографій, і для отримання фігурних фотографій. Для цього в п.5 замість інструменту прямокутник зі округлими кутами" вибираємо інструмент "еліпс", "багатокутник" або " довільну фігуруДалі всі дії проробляємо ті ж, що ми проробляли, щоб отримати заокруглення кутів.
Прямі кути зображень подобаються всім. Але все-таки трапляються випадки, коли ці самі кути потрібно закруглити. Тоді Вам на допомогу знову прийде програмафотошоп. У цій статті розберемо один із багатьох способів, як це можна зробити. Майте на увазі, мій спосіб передбачає також і невелике відсікання зображення по краях, це свого роду жертвопринесення в ім'я округлих кутів.
Для тих, хто любить більше наочності, я записав відеоурок, який можна подивитися наприкінці цього уроку. Отже, почнемо закруглювати кути зображення:
Крок 1
За замовчуванням усі зображення, що відкриваються у фотошопі, стають фоновим зображенням. Фотошоп називає такий шар як Фон, а також блокує його від зайвого редагування. Про це нам сигналізує маленька замочка іконка.
Щоб розблокувати такий шар, потрібно двічі клацнути по ньому. Відобразиться діалогове вікно «Новий шар». Нічого не змінюйте, просто натисніть кнопку ОК. Тепер замочок має зникнути.
Крок 5
На панелі шарів клацніть на перший шар з нашим вихідним зображенням і натисніть клавіші Ctrl+Shift+I . У результаті маємо виділитися вся область поза межами нашого квадрата. Це називається . Придивіться уважніше, що змінилося:
Крок 6
Тепер натисніть клавіші Ctrl+X (редагування - вирізати) для видалення виділеної області. Виділення має зникнути, а там, де колись було зображення, з'явиться шахове тло (прозорість).
Крок 7
Тепер зробимо невидимим наш шар із фігурою. Для цього на панелі шарів натисніть на значок ока навпроти шару з квадратом. Ось і з'явилося вихідне зображення із закругленими кутами.
Крок 8
Виконайте команду Зображення, щоб фотошоп видалив весь зайвий простір навколо зображення. У результаті режим прозорості має бути видно лише у кутах.
Надалі, щоб використовувати таке зображення, його необхідно зберегти в формат PNG! В цьому випадку кути так і залишаться прозорими. Інакше, якщо зберегти, наприклад, у форматі JPG, кути автоматично стануть із білим тлом.
Отже, все готове. Зображення із закругленими кутами виглядатиме так:
А як зробити лише, наприклад, один закруглений кут?
Дуже просто. Повернімося до того етапу, коли ми малювали фігуру. Розтягніть її так, щоб було видно лише один закруглений кут, а три інших були б приховані за межами полотна. Ось, а далі слідуйте за описаною вище інструкцією. Все аналогічно.
Сподіваюся, інструкція вам допомогла і ви зможете зробити щось класне! Успіхів.
Помітили помилку в тексті - виділіть її та натисніть Ctrl+Enter. Дякую!
Зверніть увагу, що стилі CSSдля цієї фігури заносяться у файл один раз, а HTML-тег можна розміщувати на сайті необмежену кількість разів.
В результаті видачі отримуємо такий прямокутник з рамкою.
Як зробити закруглені кути в CSS
Для закруглення кутів використовується атрибут border-radius.
Ми могли б додати лише цей атрибут. Він нормально відображає результат закруглення в нових версіях браузерів, але багато користувачів ще залишилися старі версії, де цей атрибут працює некоректно. Тому для сумісності ми додамо ще кілька описів цього атрибуту, прив'язаного безпосередньо до певних браузерів, до нашого блоку у файлі Style.css, отримавши наступний код:
HTML-тег div видасть нам прямокутник у рамці із закругленимта кутами:
а HTML-тег для видачі тексту виглядатиме так:
|
pib9.ru
|
Отримуємо прямокутник із закругленими кутамита текстом: 
Якщо з коду видалити атрибути опису розмірів прямокутника widthі height, то можна отримати такі форми із закругленими кутами:
1. Без тексту
У цьому випадку форми набувають розмірів середовища: довжина відповідає ширині поля, а висота змінюється в міру наповнення форми вмістом.
Заокруглення вибраних кутів
В описі стилів параметр 10px в атрибуті border-radiusпоказує радіус заокруглення, що можна змінювати, підбираючи потрібний. Якщо встановити 0, то закруглення не відбудеться. Цією властивістю можна скористатися, коли необхідно зробити заокруглення вибраних кутів.
Розпишемо значення радіуса закруглення для кожного кута, вказуючи нулі там, де скасовуємо закруглення. Наприклад, скасуємо закруглення у третьому та четвертому кутах. Наш код набуде такого вигляду:
1. Лівий верхній кут.
2. Правий верхній кут.
3. Правий нижній кут.
4. Лівий нижній кут.
Таким виходить прямокутник із вибраними закругленнями лише у верхніх кутах.
Відлік кутів ведеться за годинниковою стрілкою, починаючи з верхнього лівого кута: 
2. Закруглення кутів за допомогою HTML коду без запису до файлу стилів
Розглянемо другий спосіб отримання прямокутника із закругленими кутами з допомогою HTMLкоду без запису до файлу стилів.
HTML закруглені кути
Є одна невелика фішка, яка ще більше спрощує весь процес – це HTML закруглені кути. Вона полягає у формуванні HTML коду, в якому прописуються ті ж стилі, що й у кодах CSS. При цьому використовуються самі атрибути, що і в блоці CSS і відпадає необхідність запису блоку у файл Style.css. Одним словом – повністю замінюємо кодом HTML код CSS.
Замість нашого блоку CSS отримуємо HTML скрипт, який вставляємо в те місце, де має видаватися прямокутник із закругленими кутами:
Перший спосіб закруглення кутів можна застосовувати, коли та сама форма, не змінюючи стилі, використовується більше одного разу. Другий спосіб використовується для форм, стилі яких використовуються один раз.
3. Картинки із закругленими кутами. Рамка навколо зображення HTML
Ще хочу подарувати Вам корисну інформацію. Часто, використовуючи картинки для оформлення сайту, дуже хочеться зробити їх ще красивішими, змінюючи їх форму, обрамляючи рамкою красивого кольору та різної ширини. У цьому виникає запитання: “ Як закруглити кути картинки?”.
Це робиться дуже просто, і зараз ми цього навчимося.
Розташуємо картинку на сайті, зробивши її тлом для самої себе як фон тега div. Отримуємо такий код та картинку:
Закруглюємо кути картинки з додаванням рамки
Закруглення кутів картинок CSS і HTML і додавання рамки можна виконати одним з двох способів, описаних вище.
Використовуючи перший спосіб цієї статті, коди картинок для файлу стилів і тега div HTML-коду виглядатимуть так:
Зверніть увагу, що частина атрибутів можна заносити до файлу стилів, а частина – у тег div. У разі розміри картинки width і height вставлені в HTML-код.
Код HTML другого способу без використання файлу стилів, описаного в цій статті, має такий вигляд:
В результаті роботи кодів кожного з двох способів отримуємо той самий результат – картинку із закругленими кутами:
Доброго всім ранку, дня, вечора чи ночі. З вами знову і знову Дмитро Костін. Якось я переглядав різні картинкиі тут мені сподобалися деякі з них. А сподобалися вони тим, що в них були закруглені краї. Одразу якось цікавіше виглядає. Ви не бачите? І тому в сьогоднішньому уроці я хотів би вам розповісти, як закруглити кути у фотошопі, щоб фото виглядало цікавіше.
Ось чим я люблю фотошоп, так це тим, що в багатьох випадках одну і ту ж справу можна зробити кількома способами. Так і тут. Давайте приступимо до нашого фотошопства.
Просте згладжування
Згладжування з використанням кордонів
Цей спосіб схожий на попередній, але все ж таки сильно відрізняється. Робити все будемо з тим самим зображенням.
За допомогою створення фігури
Ось третій спосіб кардинально відрізняється від двох попередніх. Так що перепочніть пару секунд і їдемо далі. Зображення міняти не буду і знову завантажу цю машину у фотошоп.
Ви бачите, що у вас у результаті вийшло? Картинка стала із забрудненими краями, а все через те, що вона відображається тільки так, де стоїть наш намальований закруглений прямокутник. Але тепер ви можете обрізати зайве фо за допомогою інструмента "Рамка", або відразу зберегти картинку і у вас вже буде окреме зображення із закругленими кутами.
Спробуйте зробити все самі, а заразом і скажете, який з представлених способів більш бажаний вам.
І до речі, якщо у вас є прогалини у фотошопі або ви просто хочете повністю вивчити в найкоротші терміни, то дуже рекомендую вам подивитися один чудовий курс з фотошопа для початківців. Курс добре зроблений, розказано і показано все просто чудово і кожен матеріал розуміється дуже докладно.
Ну а сьогодні я свій урок закінчую. Не забудьте підписатися на нові статті та поділіться цим зі своїми друзями. Радий був вам на моєму блозі. Чекаю на вас знову. Бувай.
З повагою, Дмитро Костін
