Як округлити краї у фотошопі біля прямокутника. Як згладити кути у фігур у фотошопі. Закруглення кутів у картинок
Даний урок досить простий, але результат радуватиме око – акуратні. закруглені кутиваші фотографії. А досягти цього дуже просто, маючи в арсеналі Adobe Photoshopбудь-якої версії, та знімок, який необхідно обробити.
Закруглення кутів знімка відбувається у кілька етапів:
1. Відкрийте зображення у Photoshop. Для цього натисніть "Файл" та "Відкрити" або поєднання клавіш на клавіатурі Ctrl+O. 
2. Створіть новий шар, натиснувши «Шари», а потім «Новий шар». 
3. У лівій частині програми знаходиться вертикальна панель інструментів. У ній ви знайдете інструмент "Прямокутник". В даний момент не він нам потрібен, тому клацаємо по ньому правою кнопкою миші та вибираємо інструмент «Прямокутник із заокругленими кутами». 
4. У верхній частині програми з'явиться панель налаштувань даного інструменту. Тут можна задати бажаний радіус заокруглення кутів, тобто. можна посилити чи зменшити округлення. За замовчуванням параметр має значення 10 пікселів. Зверніть увагу, що для роботи з інструментом у вас повинен бути активований параметр «Контури», який також знаходиться на панелі налаштувань. 
5. Виділіть усі зображення, починаючи з верхнього лівого кута до правого нижнього. 
6. Клацніть правою кнопкою миші на зображенні та виберіть «Утворити виділену область». З'явиться пунктир виділення. 
7. Тепер перейдіть до горизонтальної панелі інструментів і відкрийте вкладку «Виділення», а потім виберіть «Інверсія». 
8. Тепер все навпаки – виділено не саме зображення, а непотрібні кути. Щоб прибрати їх, просто натисніть на клавіатурі клавіші Ctrl+Delete. 
9. Тепер зніміть виділення, натиснувши Ctrl+D. Насолоджуйтесь результатом! 
Не забудьте зберегти готову фотографію на комп'ютері.
Доброго часу доби, шановні розробники сайтів. Нарешті, я переходжу до розповідей про те, які методи використовувати для створення крутих сайтів. Сьогодні я розповім як за кілька хвилин обробити фотографію і тим самим зробити портал красивішим, а тривалість відвідувань значно більша. Не вірите? А даремно…
З моменту появи сайтів, що продають, великі компанії впритул почали вивчення смаків аудиторії. Якісь свої відкриття вони старанно приховують, тому що прийоми працюють занадто добре, а інші приховати досить складно, використовуються вони занадто часто.
До рівних, прямокутних фотографій усі вже давно звикли. Вони використовуються, коли мова йдепро серйозний бізнес, який займається відповідальними справами.
Коли компанія чи послуга простіша, то й картинки з плавними переходами можна побачити набагато частіше. Ви можете переконатися в цьому на будь-якій хорошій сторінці, яка буде являти собою зібрання кращих прийомів журналістики, маркетингу і психологи.
Сьогодні ви дізнаєтеся про всі методи, як у фотошопі закруглити кути. Якщо ви думаєте про те, щоб утримати увагу і привернути до себе, то використовуйте обтічні форми, а якщо робите серйозний портал і хочете створити між собою і читачем якийсь бар'єр, то краще використовувати прямокутні зображення: «Ми серйозні хлопці, хочете якість – до нас".
Швидкий спосіб закруглити фотку
Отже, працюватимемо у фотошопі. Відкриваємо зображення.
Знаходимо інструмент «Прямокутник із заокругленими кутами».
Якщо не можете його знайти, то утримуйте кілька секунд ліву клавішу миші на кнопках меню, щоб у вас відкрилися додаткові опції.
Не важливо який колір ви оберете. Тягніть об'єкт по картинці, щоб потрібна вам область була всередині фігури.
Зверніть увагу до властивості. Можете пограти з показниками, вказаними на картинці, і загнути краю сильніше. Введіть число і натисніть клавішу enter, щоб побачити результат. Коли він вас задовольнить, натисніть клавішу enter повторно.
Тепер, утримуючи кнопку CTRL, клацніть по центру шару, в якому знаходиться щойно намальований вами прямокутник. Будьте уважні, якщо тиркнете по тексту, нічого не станеться. Натискати потрібно саме у центр іконки із мініатюрним зображенням.
Тепер прибираємо видимість. Для цього клацніть по «очі» поруч із шаром.
Переходимо до роботи із шаром, виділіть його: натисніть мишкою хоч по тексту, хоч по іконці. Неважливо. Не пропустіть цей крок, інакше чаклунства не відбудеться.
Готово. Якщо ви збираєтеся виставляти картинку на сайт, то можна її зберегти, головне не помилитеся з форматом.
Вам потрібний саме png.
У цьому випадку краї із шашкою будуть прозорими. Виберіть jpeg та їх замінить неприваблива біла рамка.
Ви також можете додати цю картинку на фото. У цьому випадку зберігати та відкривати заново не обов'язково.
Просто виділяєте її (Ctrl+A), потім копіюєте (Ctrl+C) і вставляєте в інше зображення (Ctrl+V).
Заокруглення для дизайнерів, прискорюємо процес роботи над проектом
Допустимо, ви працюєте над якимось важливим крутим проектом. Все вже майже готове і ви хочете подивитися, як воно виглядатиме із округленими кутами. Не обов'язково відкривати сто тисяч вкладок: обрізати — вставляти і так далі. Все можна зробити набагато швидше та простіше.
Ось подивіться мій приклад. До речі, якщо хочете, то можете завантажити цей psd-файлвідкрити його фотошопом і попрактикуватися ( завантажити ).
Виділяємо потрібний шар. Я збираюся працювати з великим зображенням сови. Тому затискаю Ctrl і натискаю на центрі мініатюрного зображення цього шару. Не за текстом чи оком. По картинці з картинкою. Вибачте за тавтологію.
Насамперед ставимо галочку навпаки «застосувати ефект на кордонах». Потім ставимо радіус.
На жаль, доведеться обирати на око. Тут зазвичай ставлять 15. Це стандарт, але, як ви розумієте, від нього можна відходити.
Підбираємо ідеальний варіант.
Потім у вкладці "Виділення" знаходимо "Інверсія".
Натискаємо кнопку del на клавіатурі і готово.
Щоб прибрати мурах, що повзають, по краях потрібно натиснути одночасно Ctrl і D.
Якщо вам сподобалися ці уроки, можете знайти ще. Для цього не обов'язково шукати по Youtube, що на думку спаде. Можна вивчити усі фішки «від А до Я» з відео уроків. Отримайте безкоштовну презентацію останньої версіїкурсу російською фотошопі. В цьому випадку ви не тільки зможете робити елементарні речі, але й навчитеся виконувати складну роботу, побачите, як застосовують прості навички справжні фахівці та що з цього виходить.
Дивіться, наприклад, те, чого ви навчилися сьогодні, можна застосувати не тільки для обрізання кутів.
Ви вже знаєте, як зробити картинку у трикутниках. Чи не розумієте? Все дуже просто.
Берете за основу перший спосіб обрізання цієї статті, але замість роботи з прямокутником вибираєте багатокутник.
Не забудьте виставити «три сторони» на панелі зверху, щоб не морочити голову з перетворенням фігури.
І, якщо не хочете, щоб кути були такі ж гострі, як у мене, просто виставте згладжування в налаштуваннях.
Цей малюнок у psd форматі ви можете завантажити прямо з мого блогу та попрацювати з ним ( завантажити ). Думаю, що покращити його не проблема.
Якщо ця стаття була корисною, підписуйтесь на розсилку мого блогу. На вас чекає ще купа цікавих речей! І насамкінець відео про те, як за допомогою фотошопу дівчину можна перетворити на піцу. Дивіться до кінця, це кумедно.
Усе сучасні браузерипідтримують стандарти гіпертекстової розмітки HTML5 та стилі оформлення CCS3. І якщо ваш сайт (шаблон) підтримує сучасні стандарти, ви можете вносити зміни в оформлення, таке як заокруглення кутів, тіні, градієнтна заливка, не вдаючись до допомоги графічних редакторів.
Вебмайстри повсюдно використовують кути, що округляють, у блоків і рамок на сайтах. Я в цій статті розповім як закруглити кути у картинок і фотографій на сайті без використання сторонніх програм, тільки за допомогою CSS.
Щоб наведені приклади у статті коректно відображалися у вас на екрані, ви повинні використовувати самі свіжі версіїбраузерів, FireFox, Chrome і ті, що зроблені на основі їх: Яндекс.Браузер, Аміго і так далі.
Закруглення кутів у блоків DIV
За стандартом CSS3 щоб блок DIVмав заокруглені кути, йому необхідно надати стиль border-radius, наприклад так:
Border-radius: 10px;
Для наочності намалюємо два блоки з прямими та округленими кутами:
Блок із прямими кутами
Блок із закругленими кутами
Закруглення кутів у картинок
За аналогією з прикладом вище можна закруглити кути і картинок на сайті, наприклад фотографій. Для наочності закруглимо кути для фотографії зі сторінки
Ось зображення без CSS обробки
А тепер із завантаженими кутами:
Border-radius: 10px;
Щоб стало зовсім «красиво» з початку додамо окантовку.
Border-radius: 10px; border: 5px #ccc solid;
а потім і тіні:
Border-radius: 10px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;
Варіант нижче (закруглені кути з тінню без бордюру) дуже схожий на килимок для миші:
Border-radius: 10px; box-shadow: 0 0 10px #444;
І насамкінець повний знущання над зображенням
Border-radius: 50%; border: 5px #cfc solid; box-shadow: 0 0 10px #444;
Якщо ви відкриєте зображенні в новому вікні, то побачите, що воно (зображення) у незмінному вигляді, а всі кути, тіні і так далі - лише результат обробки CSSстилів вашим браузером.
Маленький ліричний відступ
Стиль borderзбільшує розмір зображення на величину окантування. Якщо вказано значення border: 5px, То підсумкове зображення стане ширше і вище на 10 пікселів. Зважайте на це, в деяких випадках може «поїхати» верстка сайту.
А стиль box-shadowне впливає розмір картинки, тінь як би наїжджає на сусідні елементи. При його використанні верстка сайту не страждає.
Як закруглити кути картинок на WordPress
У всіх наведених прикладах вище я прописував стилі прямо в тегах html коду. Наприклад, останній виглядає так:
Це добре, коли потрібно переоформити одну картинку або фотографію. А якщо ви захочете змінити все? Ну не будете ви лазити по всьому своєму сайту, щоб підредагувати відображення кожної. В більшості випадків WordPress тегу IMGвизначає кілька класів стилів. Один за унікальним ім'ям файлу із зображенням, інший за розміром, і ще за вирівнюю. Ви можете доповнити один із них вищезазначеними параметрами.
Наприклад, для всіх зображень, для яких не вказано вирівнювання, у файлі style.cssвашої теми WordPress пропишіть таке:
Alignnone ( border-radius: 10px; border: 5px #cfc solid; box-shadow: 0 0 10px #444; )
Або найжорсткіший метод для всіх картиною на сайті. Перевизначимо стиль для всіх тегів IMG:
Img ( border-radius: 10px; border: 5px #cfc solid; box-shadow: 0 0 10px #444; )
Останній варіант підійде не лише для WordPress, а й для будь-якої CMS. І навіть для простої HTMLсторінки у разі коли під час виведення зображень тегу IMGне присвоюються жодних класів стилів. Але будьте уважні. Якщо ви перевизначите параметри відображення тега IMGви зміните зовнішній виглядВСІХ картинок на сайті!
Замість ув'язнення
Всі приклади в статті умовні і покликані лише продемонструвати деякі можливості CSS обробки зображень і показати як це просто.
25.07.2016 27.01.2018
У цьому уроці ви дізнаєтеся, як у фотошоп згладити гострі кути фігур.
Для початку, давайте створимо фігуру. Зробити це можна, вибравши в панелі інструментів інструмент Довільна фігура (Custom Shape Tool). Гаряча клавішавиклик підміню інструментів для створення векторних фігур - U.
Для того, щоб цей інструмент став активним, є два способи:
1. З натиснутою клавішею Shift клацнути по групі інструментів і відкриється підменю для вибору потрібного інструмента;
2. Довге натискання лівої кнопки миші по групі інструментів також відкриє підменю.
Завантажуємо у фотошоп усі наявні фігури (клацаємо по мініатюрі фігури у верхній панелі та натискаємо на «шестерню» праворуч для відкриття додаткових налаштувань):
З списку вибираємо фігуру з гострими куточками, наприклад, таку зірочку з 10 кутами:
При створенні фігури не забуваємо утримувати клавішуShift- Це допоможе зберегти пропорції.
Тепер необхідно раструвати фігуру - клацання правою клавішею миші по шару з фігурою-Раструвати шар.
Радіус підбираємо залежно від розміру полотна та бажаного результату, я вибрала 6 пікселів.
Тепер нам потрібно завантажити виділення шару з фігурою, для цього із затиснутою клавішеюCtrlклацніть по мініатюрі шаруз фігурою на панелі шарів.
При активному виділенні натискаємо кнопку "Уточнити край" (Refine Edge):
Відкриється меню налаштувань, у якому нам потрібний параметр Розтушовка (Feather)залишити на 0 , а параметр Контрастність (Contrast)збільшити максимально, до 100%. Параметр Згладити (Smooth)налаштовуємо на свій смак, саме він допоможе заокруглити кути фігури. У випадку з 10-гранною зіркою я його виставила на максимум, у вас можуть бути зовсім інші налаштування.
У параметрі Висновок у …залишаємо налаштування, встановлене за замовчуванням - виділення.
Натискаємо клавішу Enter для застосування налаштувань. Створюємо новий шар і за допомогою інструменту Заливка (Paint Bucket Tool)або перейшовши в меню Редагування-Виконати заливкузаливаємо виділення потрібним кольором, наприклад, чорнимяк на вихідній фігурі. Відключаємо видимість вихідного шару з фігурою і отримуємо ось таку фігуру із закругленими кутами:
От і все. У цьому уроці ми навчилися заокруглювати кути біля фігур у фотошоп. Сподіваюся, урок був вам корисним.
Я довго шукав як можна закруглити кути за допомогою Adobe Photoshop, але скрізь не дописують, або написано неправильно. Як виявилося закруглити кути у будь-якої картинки займе не більше 30 секунд, звичайно після того, як ви навчитеся це робити.
І так щоб виконати таку нескладну операцію необхідно запустити додаток і закинути потрібну нам картинку всередину програми, або скористатися Меню->Файл->Відкрити->Потрібна картинка.jpg.Я використовуватиму звичайне зображення природи.
Зверніть увагу на правий нижній кут, у "Шарах" з'явилося фонове зображення, його треба перетворити на шар. Для цього тиснемо правою кнопкою миші по фону і вибираємо "Шар із заднього фону".
В результаті цієї дії, наш фон перетворюється на шар.
Створюємо дублікат картинки, для цього тиснемо правою кнопкою миші на шар 0 і вибираємо "Створити дублікат шару".
Малюнок2
Приховуємо із робочої області "Шар 0". Щоб приховати шар, необхідно натиснути іконку ОЧІ поруч із назвою шару.
Виділяємо потрібну частину зображення.
Як тільки ви відзначили прямокутником потрібну частину картинки, натисніть правою кнопкою миші всередині виділіть і виберіть пункт "Утворити виділену область".
У діалоговому вікні тиснемо кнопочку ОК, розтушовування не чіпаємо.
Дуже важливий момент! Виділяємо шар 0 (Копія), потім натискаємо кнопку DELETE на клавіатурі. Шар 0 (копія) має бути виділено звичайним клацанням миші.
Якщо все зроблено правильно, у Фотошопі ви побачите приблизно таку картину. Тепер можна зберегти зображення наприклад у форматі png, і радіти твору мистецтва.
Є ще один момент, якщо вирізаний шматок в два або 3 рази менше оригінального зображення, у нього залишиться велика порожня область, її треба видалити. Для цього вибираємо інструмент розкрійки, і виділяємо область зображення без порожньої області.
Потім заходимо в меню Редагувати->Скопіювати.
Заходимо в меню Файл->Створити і просто натискаємо ОК. Програма автоматично підганяє ширину та висоту полотна виділеної ділянки зображення.
У новому проекті "Без імені 1", а ми автоматично опинимося саме в ньому, заходимо в меню Редагувати->Вставити.
Зберігати картинку найкраще за допомогою пункту "Зберегти для Web". По-перше можна вручну вибрати якість зображення у відсотках, по-друге розмір зображення буде в кілька разів меншим, ніж якщо зберігати звичайним способом.
І що в нас вийшло на виході.
Для тих кому не зрозуміло як мені вдалося закруглити кути, я спеціально записав відео, яке допоможе вам у цій нескладній задачі.