Чому незаміжнім дівчатам не можна спати навпроти дзеркала. Чому не можна спати навпроти дзеркал: страшні причини

1 голос

Доброго часу доби, шановні розробники сайтів. Нарешті, я переходжу до розповідей про те, які методи використовувати для створення крутих сайтів. Сьогодні я розповім як за кілька хвилин обробити фотографію і тим самим зробити портал красивішим, а тривалість відвідувань значно більша. Не вірите? А даремно…

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

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

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

Сьогодні ви дізнаєтеся про всі методи, як у фотошопі закруглити кути. Якщо ви думаєте про те, щоб утримати увагу і привернути до себе, то використовуйте обтічні форми, а якщо робите серйозний портал і хочете створити між собою і читачем якийсь бар'єр, то краще використовувати прямокутні зображення: «Ми серйозні хлопці, хочете якість – до нас".

Швидкий спосіб закруглити фотку

Отже, працюватимемо у фотошопі. Відкриваємо зображення.

Знаходимо інструмент «Прямокутник із заокругленими кутами».

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

Не важливо який колір ви оберете. Тягніть об'єкт по картинці, щоб потрібна вам область була всередині фігури.

Зверніть увагу до властивості. Можете пограти з показниками, вказаними на картинці, і загнути краю сильніше. Введіть число і натисніть клавішу enter, щоб побачити результат. Коли він вас задовольнить, натисніть клавішу enter повторно.

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

Тепер прибираємо видимість. Для цього клацніть по «очі» поруч із шаром.

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

Готово. Якщо ви збираєтеся виставляти картинку на сайт, то її можна зберегти, головне не помилитеся з форматом.

Вам потрібний саме png.

У цьому випадку краї із шашкою будуть прозорими. Виберіть jpeg та їх замінить неприваблива біла рамка.

Ви також можете додати цю картинку на фото. У цьому випадку зберігати та відкривати заново не обов'язково.

Просто виділяєте її (Ctrl+A), потім копіюєте (Ctrl+C) і вставляєте в інше зображення (Ctrl+V).

Заокруглення для дизайнерів, прискорюємо процес роботи над проектом

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

Ось подивіться мій приклад. До речі, якщо хочете, то можете завантажити цей psd-файл, відкрити його фотошопом і попрактикуватися ( завантажити ).

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

Насамперед ставимо галочку навпаки «застосувати ефект на кордонах». Потім ставимо радіус.

На жаль, доведеться обирати на око. Тут зазвичай ставлять 15. Це стандарт, але, як ви розумієте, від нього можна відходити.

Підбираємо ідеальний варіант.

Потім у вкладці "Виділення" знаходимо "Інверсія".

Натискаємо кнопку «del» на клавіатурі і готово.

Щоб прибрати мурах, що повзають, по краях потрібно натиснути одночасно Ctrl і D.

Якщо вам сподобалися ці уроки, можете знайти ще. Для цього не обов'язково шукати по Youtube, що на думку спаде. Можна вивчити усі фішки «від А до Я» з відео уроків. Отримайте безкоштовну презентацію останньої версії курсу на російському фотошопі. В цьому випадку ви не тільки зможете робити елементарні речі, але й навчитеся виконувати складну роботу, побачите, як застосовують прості навички справжні фахівці та що з цього виходить.

Дивіться, наприклад, те, чого ви навчилися сьогодні, можна застосувати не тільки для обрізання кутів.

Ви вже знаєте, як зробити картинку у трикутниках. Чи не розумієте? Все дуже просто.

Берете за основу перший спосіб обрізання цієї статті, але замість роботи з прямокутником вибираєте багатокутник.

Не забудьте виставити «три сторони» на панелі зверху, щоб не морочити голову з перетворенням фігури.

І, якщо не хочете, щоб кути були такі ж гострі, як у мене, просто виставте згладжування в налаштуваннях.

Цей малюнок у psd форматі ви можете завантажити прямо з мого блогу та попрацювати з ним ( завантажити ). Думаю, що покращити його не проблема.

Якщо ця стаття була корисною, підписуйтесь на розсилку мого блогу. На вас чекає ще купа цікавих речей! І насамкінець відео про те, як за допомогою фотошопу дівчину можна перетворити на піцу. Дивіться до кінця, це кумедно.

Закруглені кути на фотографії виглядають досить цікаво та привабливо. Найчастіше такі зображення застосовуються при складанні колажів або створення презентацій. Також картинки із закругленими кутами можна використовувати як мініатюри до постів на сайті. Варіантів використання багато, а спосіб (правильний) отримати таке фото лише один. У цьому уроці ми покажемо, як заокруглити кути у Фотошопі.

Заокруглення кутів у 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 замість інструменту прямокутник зі округлими кутамиВибираємо інструмент "еліпс", "багатокутник" або "довільну фігуру". Далі всі дії проробляємо ті ж, що ми проробляли, щоб отримати заокруглення кутів.

Усі сучасні браузери підтримують стандарти гіпертекстової розмітки 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 обробки зображень і показати як це просто.

Традиційні прямокутні куточки у дизайні сайтів давно вже всім набридли. У моді заокруглені куточки, які робляться не за допомогою зображень, а через стилі, для чого використовується властивість border-radius. Ця властивість може мати одне, два, три або чотири значення розділених пробілом, які визначають радіус всіх куточків або кожного окремо.

У табл. 1 наведено різну кількість значень та вид блоку, який виходить у цьому випадку.

Код	Опис	Вид
div ( border-radius: 10px; )	Радіус заокруглення для всіх куточків відразу.
div ( border-radius: 0 10px; )	Перше значення встановлює радіус лівого верхнього та правого нижнього куточка, друге значення – для правого верхнього та лівого нижнього.
div ( border-radius: 20px 10px 0; )	Перше значення задає радіус лівого верхнього куточка, друге - одночасно правого верхнього та лівого нижнього, а третє значення - правого нижнього.
div ( border-radius: 20px 10px 5px 0; )	Послідовно встановлює радіус лівого верхнього куточка, правого верхнього, правого нижнього та лівого нижнього.

У прикладі 1 показано створення блоку із заокругленими кутками.

Приклад 1. Кутки біля блоку

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Радіус

Мене - суплетивна форма знахідного відмінка від я.

Результат цього прикладу показано на рис. 1.

Мал. 1. Блок із заокругленими кутками

Цікавий ефект можна отримати, якщо задати радіус заокруглення більше половини висоти та ширини елемента. У такому разі вийде коло. У прикладі 2 показано створення круглої кнопки із малюнком.

Приклад 2. Кругла кнопка

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Кнопка

Результат цього прикладу показано на рис. 2.

Мал. 2. Кругла кнопка

У браузері Opera заокруглення до