Оцилиндрованный сруб: Доступ с вашего IP-адреса временно ограничен — Авито

О срубе из оцилиндрованного бревна

Вступление

Сруб из оцилиндрованного бревна, несомненно, имеет привлекательный внешний вид не требующей наружной отделки. А на самом деле, не скрывается ли за привлекательной внешностью, целый ряд проблем, связанных с эксплуатацией и уходом за оцилиндрованными бревнами этого сруба. Разберем этот вопрос в этой статье.

О срубе из оцилиндрованного бревна

1.Сруб из оцилиндрованного бревна экологически чист, современен и всегда в моде

Сруб из оцилиндрованного бревна заготовленного в северных районах страны экологически чист. По определению, в современном мире, все экологически чистые товары и строения модны и находятся в тренде. Конечно, срубы из обработанных бревен нельзя отнести к тенденциозным постройкам современных дизайнеров. Такой сруб это классика сруба, сочетающего современную технологию и изящество деревянного, загородного строения.

2.Оцилиндрованное бревно почти не гнется

Основной древесиной для производства оцилиндрованных бревен является древесина хвойных пород. Смолистость хвойных пород дерева, априори снижает гниение древесины. Кроме этого предварительная окорка бревен и снятие части верхнего слоя бревна при его  обработке на станке, практически полностью убирает из бревна грибковые и другие «формы жизни», что сводит процессы гниения, образования плесени и появления грибков на нет.

3.Оцилиндрованный сруб предназначен для зимнего проживания

Основным условием зимнего проживания в загородном доме, является наличие отопления в доме и высокая характеристика дома по удержанию тепла. Оцилиндрованные бревна 22-28 см, собранные на утеплителе и дополнительно конопаченные натуральными утеплителями, прекрасно держат тепло без дополнительного утепления, за исключением фундаментов. Ленточные фундаменты нужно утеплять снаружи. Если дом построен на свайном фундаменте, то утепляется пол первого этажа.

4.Сруб из оцилиндрованного бревна быстро собирается

Заводская подготовка бревен сруба и завоз уже готовых для сборки бревен, пронумерованных в соответствии с проектом, позволяют быстро собрать дом из оцилиндрованного бревна. При наличие фундамента и крана на объекте, сруб собирается за несколько дней.

5.Любой сруб из бревен дает усадку

Бревна оцилиндрованного сруба имеют нормальную влажность и, как и любой бревенчатый сруб, сруб из оцилиндрованных бревен дает усадку. Через год он осядет на 1/25 высоты. Эта важная причина, чтобы не делать внутренние работы, в том числе пол и потолок в течение года.

6.Сруб из оцилиндрованного бревна не требует внешней отделки

Оцилиндрованные бревна имеют не только одинаковый диаметр, но и привлекательный внешний вид. В отличие от рубленого сруба, оцилиндрованные сруб и без отделки выглядит очень аккуратно.

7.Оцилиндрованное бревно чаще оставляют без внутренней отделки (обшивки)

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

8.Оцилиндрованное бревно требует ухода

Да, оцилиндрованное бревно требует ухода. Если сруб оставить без пропитки защитными материалами, то в кротчайшие сроки он потеряет привлекательный внешний вид, а от осадков начнет подгнивать. После сборки сруба его стены нужно обработать специальными пропитывающими составами, можно с изменением цвета фактуры.

9.Стоимость сруба из оцилиндрованных бревен на 40-50% больше сруба рубленного

Это истина, сруб из оцилиндрованных бревен стоит дороже рубленого сруба. Однако экономия на сборке и на отделке частично компенсирует затраты.

10. Для сруба подходит любой фундамент (ленточный, свайный, свайно-винтовой, УШП, РПП) за исключением столбчатого

Фундамент делается для сруба заранее и для оцилиндрованного сруба подойдут все основные фундаменты для домов среднего и большого веса, а именно:

• Ленточный фундамент;
• Свайный фундамент с забивкой свай на глубину промерзания;
• Винтовой фундамент из специальных ввинчивающихся свай многоразового использования;
• Фундамент УШП: утепленная шведская плита;
• РПП фундамент;
• Бутовый фундамент.

Важно! Не рекомендовано ставить сруб дома, на столбчатый фундамент. Однако столбчатого бетонного фундамента будет достаточно для сруба небольшой бани.

На этом все!

©DomiTy.ru

Другие статьи раздела: Срубы домов

Стоимость на оцилиндрованное бревно 1 сорта, цены на сруб дома из бревна

Прайс от 01 июня 2021 года

Примечание:

Все цены указаны с раскроем материалов «Под проект».
Бревно отборное, отсортировано по породе: сосна / ель.
Вся продукция произведена на оборудовании Round Tec (Tommi Laine Trading-Финляндия) токарного типа.

Формирование цены на бревно

Оцилиндрованное бревно — экологически чистый, природный материал, который успешно применяется в строительстве зданий. Это наиболее доступный и практичный строительный материал. К тому же он очень удобен в сборке.

Основные факторы влияющие на цену бревна

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

1. Удаленность региона произрастания дерева (расходы на транспортировку сырья).
2. Плотность древесины.
3. Длина бревна.
4. Сорт древесного материала.
5. Порода дерева.

Конечная цена включает и диаметр бревна, и его монтаж. В строительстве домов из оцилиндрованного бревна мы используем древесину только 1 сорта.

Технология подготовки древесины

На стоимость материала непосредственное влияние оказывают и технологии производства. Только на современном оборудовании из сырья можно изготовить идеальный материал для строительства. С данной задачей справится профессиональная производственная база по деревообработке.

При подготовке оцб дерево проходит следующие этапы:

1. Отбор материала и сортировка по породам.
2. Прогон бревна через оборудование токарного типа, для достижения одинакового диаметра бревна по всей длине (процесс оцилиндровки).
3. Вырубка паза в нижней части бревна и угловой чаши, для лучшего прилегания бревен.
4. Обработка специальными антисептическими составами.
5. Сушка — завершающий этап в производстве.

Оцилиндрованное бревно, которое используется при строительстве, по всей длине имеет одинаковый диаметр. Это позволяет более плотно укладывать бревна при возведении стен. За счет тесного прилегания друг к другу бревна лучше сохраняют тепло в доме, и сокращается расход материала для герметизации межбревенных швов. При покупке бревна обязательно нужно учесть, что, чем больше диаметр бревна, тем лучше оно сохраняет тепло. Поэтому, строить дома для постоянного проживания, мы рекомендуем из бревен диаметром от 260 мм.

Мы строим дома под ключ от создания проекта, до сдачи объекта с готовыми инженерными системами и ландшафтным дизайном. Закажите дом своей мечты у профессионалов!

Сруб из оцилиндрованного бревна в Перми. Дома из оцилиндрованного бревна

Сруб из оцилиндрованного бревна в Перми

Компания «Три топора» осуществляет строительство домов из оцилиндрованного бревна. Мы оказываем услуги жителям Перми и проводим полный цикл работ — от разработки проектного решения до отделки. Для строительства используются пиломатериалы собственного производства, что позволяет гарантировать заказчикам безупречное качество.

Какими преимуществами обладает оцилиндрованное бревно?

Оцилиндрованным называется фрезерованное бревно, прошедшее обработку и имеющее одинаковый диаметр по всей длине. В процессе производства материала задействуется специализированное оборудование. На станках материалу задается профиль.

Оцилиндрованное бревно обладает следующими достоинствами:

• • экологическая чистота. Древесина является природным материалом, который лучше всего подходит для индивидуального домостроения. Деревянные стены помогаю поддерживать внутри дома здоровый, оптимальный для человека микроклимат. Бревна хорошо пропускают воздух, за счет чего осуществляется естественная регуляция температуры и влажности;
• • привлекательный внешний вид. Для производства оцилиндрованных бревен используется массив древесины. Из него вытачивается безупречно гладкие бревна. Они выглядят максимально эстетично, за счет чего экстерьер и интерьер дома выглядит оригинально. Готовой постройке не понадобится дорогостоящая внешняя и внутренняя отделка;
• • прекрасная теплоизоляция. Теплопроводность у бревен низкая. Это позволяет задерживать тепло внутри дома. Благодаря этому постройке не нужно дополнительное утепление, а в холодное время года можно экономить на отоплении;
• • долговечность. В процессе производства бревна проходят обработку антисептиками и антипиренами. Это позволяет защитить древесину от гниения, повреждения огнем и насекомыми. Материал прекрасно переносит температурные перепады, высокую влажность, воздействие ветра и ультрафиолета. Дом из оцилиндрованных бревен простоит десятки лет;
• • быстрое строительство. На строительную площадку доставляется уже готовый сруб из оцилиндрованных бревен. Его остается просто собрать, будто конструктор, что требует минимальных временных затрат;
• • доступная стоимость. Древесина весит гораздо меньше, чем кирпич или пеноблоки. Благодаря этому для строительства дома можно использовать облегченные фундаменты. Стоимость их обустройства невысокая, да и непосредственно само оцилиндрованное бревно стоит недорого.

Выбрать для строительства частного дома оцилиндрованное бревно — это практичное решение, которое принесет сплошные преимущества! Главное — найти надежную компанию, которая возьмет на себя строительство. Вы не ошибетесь, если обратитесь в «Три топора».

Почему стоит доверить строительство нам?

Наша компания располагает собственной производственной базой. Мы можем быть полностью уверены в качестве оцилиндрованного бревна, которое используется для возведения сруба. И это далеко не все. Мы также можем предложить вам такие преимущества:

• • комплексные строительные работы. Компания «Три топора» строит дома «под кровлю» и «под ключ». Это позволяет нам оптимизировать затраты заказчика и выполнять работы в сжатые сроки;
• • качество строительства. Работы ведутся строго по СНиП и ГОСТ. Помимо этого, в нашей компании имеется собственный технический регламент. Работы выполняют опытные профессионалы различных специализаций;
• • строительство согласно проекту. Наш архитектурный отдел разработал уже десятки типовых решений — заказчику остается только выбрать подходящий вариант совместно с нашими специалистами. При необходимости мы всегда создадим для вас индивидуальный проект.

Как строится дом из оцилиндрованного бревна?

Компания «Три топора» подходит к строительству дома индивидуально. Мы учитываем все пожелания заказчика. Тем не менее работы проводятся по установленной схеме.

На первом этапе выбирается проект. Мы можем предложить проекты одно- и двухэтажных домов, домов с мансардами, банями и т.д. Выбор очень широкий — вы обязательно найдете подходящий вариант.

Затем рассчитывается стоимость строительства. Мы составляем смету. Это документ, в котором фиксируются цены. Заказчик может быть уверенным в том, что цены останутся неизменными.

Далее начинаются непосредственно строительные работы:

• • закладывается фундамент;
• • собирается сруб из оцилиндрованного бревна;
• • обустраивается крыша и кровля.

Это минимальный объем работ, который выполняется при оказании услуг «под кровлю». Если строительство ведется «под ключ», также осуществляется дальнейшая отделка постройки и устройство инженерных коммуникаций.

На каждом этапе вы можете получить фотоотчеты о ходе строительства. Готовый результат вас приятно удивит! Обращайтесь — мы построим для вас надежный и уютный дом!

Сруб из оцилиндрованного бревна или дом из бруса

Ваш выбор окончательный и бесповоротный – будете строить деревянный дом. Но ведь для его возведения можно использовать различные материалы: оцилиндрованное бревно (ОЦБ), цельный, профилированный и даже клееный брус и т.п. пиломатериалы. Как определиться с тем, что лучше – сруб или дом из бруса? Естественно, каждый решает данный вопрос исходя из собственных предпочтений. Мы же постараемся максимально объективно сравнить не только сами эти материалы, но и технологии, которые используются при строительстве домов.

Непростой выбор между брусом и оцилиндрованным бревном

Если сравнивать обычный брус и бревно, то получится, что технология их производства практически ничем не отличается. Достоинства и недостатки домов, построенных из них, практически одни и те же. Различие лишь состоит в угловых соединениях: в «срубах» из ОЦБ их устраивают при помощи специальных пропилов в массиве древесины — чашек. При работе с цельным брусом, учитывая геометрию материала, соединение в углах устроено проще. И оцилиндрованное бревно, и обычный брус чаще всего продают естественной влажности, с расчетом, что дом со временем высохнет, даст усадку. Вот только изменение влажности в чашках ОЦБ может привести к образованию существенных щелей, законопатить которые будет весьма проблематично. Еще одна тонкость кроется в геометрии бревна. Дело в том, что при расчете толщины придется ориентироваться не на диаметр ОЦБ, а на толщину межвенцового стыка, который существенно меньше диаметра. А это дополнительные затраты на утепление, которых можно избежать, разве что только при эксплуатации «сруба» в теплую пору года.

В целом же, при выборе того или иного решения важно определиться:

• нужен ли нам дом, похожий на классический сруб – так ли важна эстетика? Постройка из ОЦБ красивая, зато из бруса более практичная;
• планируется сезонное или постоянное проживание;
• как быстро мы хотим построить деревянный дом;
• оценить бюджет, выделенный на строительство

Клееный и профилированный брус против оцилиндрованного бревна

А вот если вы выбираете между профилированным брусом и оцилиндрованным бревном, то здесь единственным достоинством последнего может выступать, разве что, оригинальный внешний вид и сопоставимо низкая стоимость. По всем остальным показателям профилированный, а тем более клееный, брус превосходит ОЦБ. Если мы имеем дело с высушенным стройматериалом, то не потребуется ждать усадки: отметить новоселье можно уже спустя несколько месяцев после начала возведения дома из профилированного бруса.

Как видите, уместно сравнивать только цельный брус и оцилиндрованное бревно. Профилированный и клееный материал превосходят по большинству параметров ОЦБ, уступая только в одном – они дороже. Выбор, как всегда, за вами!

Загрузка…

Выбираем что лучше: сруб ручной рубки или из оцилиндрованного бревна?

Многие люди интересуются при выборе деревянного дома: что лучше оцилиндрованное бревно или же сруб ручной рубки? Давайте проясним этот вопрос.

Вы представляете, как изготавливается оцилиндрованное бревно? У любого бревна имеется комель и макушка. Естественно макушка гораздо тоньше, чем комель. Поэтому, что получить его идеально ровным по всей длине ножны станка устанавливают в макушке, и они направляются в сторону комля, устраняя все неровности на своем пути. Вследствие чего, у нижней части срезается весь защитный слой, что является причиной раннего гниения древесины и построенных из неё срубов. Неудивительно, ведь у макушки срезается только 1.5 см, а у комля – 5 см и более. Словом, из бревна сделали оцилиндрованную доску, которая долго не простоит под атмосферными осадками.

Конечно, такие срубы выглядят «как с картинки», но крайне ненадежны и не долговечны. А если необходимо сделать оцилиндрованное бревно, например, 25 см в диаметре? Представьте, какой толщины должен быть комель у этого дерева. Скорей всего, кроме трухи и мягкой сердцевины там ничего не останется. Тем более что материал такого диаметра стоит очень дорого.

А вот сруб ручной рубки может быть диаметром и 25, и даже 28 см. Безусловно, оцилиндрованное бревно дешевле, чем ручной сруб, поэтому многие выбирают именно его. Даже несмотря на все недостатки и недолговечность такого строения!

Вывод простой: срубы из оцилиндрованного бревна подкупают своим видом – все бревнышки единого размера, диаметра, а дом такой чистенький и беленький.

Если Вы задумались о недостатках, но хотите отличный рубленный деревянный дом, то можно сделать его из калиброванного бревна, обработать рубанком или под скобель. Это конечно дороже, но красота и долговечность такого сруба побьёт все рекорды.

Выбор естественно за Вами, но помните, что ни одна компания, строящая срубы из оцилиндрованного бревна, не скажет о недостатках этих сооружений.

Мы сделали свой выбор и знаем, что лучше сруба из остроганных под рубанок бревен диаметром 24-28 см просто не бывает.

Что лучше, сруб из оцилиндрованного или строганного вручную бревна?

Многие клиенты из Москвы часто спрашивают нас, что лучше — сруб из оцилиндрованного или строганного вручную бревна? Абсолютное большинство при этом полагает, что сруб ручной рубки надежнее, долговечнее и прочнее. Так ли это? Давайте разберемся.

Прежде всего стоит сказать, что дерево состоит из кроны, ствола и корневой системы. Корни и кроны нам неинтересны, а вот ствол — да, ведь именно из него изготавливаются как оцилиндрованные, так и вырубленные вручную срубы.

Если взглянуть на фото разрезанного поперек ствола, станет видна структура дерева. В самом центре находится темная и мягкая сердцевина диаметром около 2–5 мм, которую со всех сторон обступает древесина, состоящая из ядра (ближе к центру) и заболони (ближе к коре). Снаружи от внешних воздействий дерево оберегает жесткая кора. Между корой и древесиной можно приметить еще один тонкий слой: это камбий, способствующий нарастанию коры и древесины.

У некоторых деревьев — например, у лиственницы, тиса, сосны, кедра — древесина двухцветная, темнее у сердцевины и светлее у коры: это ядровые породы. Помимо них существуют безъядровые спелодревесные породы, у которых древесина имеет сплошной светлый оттенок. К ним относятся пихта, ель, бук и другие.

Фактически, ядра имеют все породы деревьев, однако темную окраску приобретают лишь некоторые из них. Чем это обусловлено? Образование ядра — это отмирание древесины, в ходе которого водоотводящие пути закупориваются, появляются отложения углекислого кальция и смолы. Такое ядро становится не только темнее за счет пропитки красящими веществами, но и значительно прочнее, устойчивее к гниению. Воздух и вода туда практически не проникают — они идут в дерево по заболони, более мягкой части древесины, которая с возрастом нарастает.

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

Некоторые считают, что при оцилиндровке удаляется большая часть заболони или она вся. В принципе, в этом нет ничего критичного, поскольку нетронутым остается ядро — наиболее прочная, надежная и устойчивая к разрушению часть дерева.

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

Так что же лучше — рубленный или оцилиндрованный сруб? Однозначного ответа мы дать не можем, ведь по составу материалы совершенно одинаковые. Если подойти к проекту грамотно, потратиться на отделку и качественные дополнительные материалы, то они прослужат одинаково долго без необходимости в капитальном ремонте. При выборе конкретного варианта следует опираться на другие факторы, к которым относятся цена, легкость ухода, сроки и личные предпочтения.

Наше дело — помочь Вам с проектированием и строительством деревянных домов в Московской области и Москве и, может быть, дать полезный совет, а уж выбор тут — целиком за Вами.

Материалы позаимствованы с сайта «Википедия» или других открытых источников информации.

Оцилиндрованное бревно из Архангельска | ООО «Янтарный Город»

Оцилиндрованное бревно под проект изготавливается из свежевырубленной древесины, так называемой естественной влажности (ядро 80%, заболонь 120%, влажность дерева измеряется как отношение к абсолютно сухому).

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

Эти негативные влияния можно уменьшить разными путями: камерной сушкой или складированием бревен на вентилируемых прокладках в темном хорошо проветриваемом месте.

Но камерная сушка бревен — дорогой и достаточно длительный технологический процесс.

При сушке на воздухе (атмосферной), даже под теневым навесом из-за влажности при обильном испарении может возникнуть эффект парника, так называемая — паровая ванна, тогда синевы тоже не удасться избежать.

А синева (деревоокрашивающие грибки), хоть и не влияет на физико-механические свойства деревянного дома из оцилиндрованного бревна, но это первый признак к благоприятному развить уже дереворазрушающих грибков.

В нашей компании «Янтарный Город» проблема возникновения деревоокрашивающих грибов достаточно изучена, а также достаточно хорошо изучены способы борьбы с этим, поэтому делаем сами и рекомендуем другим сразу на производстве проводить обработку специальным составом, который обеспечит достаточно хороший эстетический вид и сохранит дерево как во время транспортировки, так и во время эксплуатации.

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

Обработка произведенного под проект оцилиндрованного бревна позволяет создать водоотталкивающую защиту, преграду в волокнах дерева, сможет препятствовать всасыванию избыточной влаги из атмосферы и увлажнению с торцов.


Препараты образуют тонкослойное бартерное покрытие, обладающее высокой проницаемость пара и стойкостью к воде, что позволяет бревнам «дышать», сохраняя её природную естественную структуру.

Создание закругленных углов фотографии в Photoshop

Автор Стив Паттерсон.

В этом уроке Photoshop мы рассмотрим, как легко создать закругленных углов . Как и в большинстве других вещей в Photoshop, существует около 17 различных способов создания закругленных углов, но мы собираемся сделать вещи интересными, рассмотрев способ сделать это с помощью чего-то в Photoshop, о котором многие люди даже не знают — векторных масок. ! Что такое векторная маска? Что ж, если вы думаете, что маски слоев — это весело (вы действительно думаете, что маски слоев — это весело, не так ли?), Вам понравятся векторные маски!

Любой графический дизайнер знает, что один из способов заставить людей чувствовать себя определенным образом, когда они смотрят на дизайн, — это использование форм.Различные формы по-разному влияют на нас. Одни фигуры кажутся теплыми, дружелюбными и веселыми, другие — холодными, жесткими и серьезными. Вам не нужно быть экспертом в области дизайна, чтобы убедиться в этом на себе. Просто возьмите карандаш и лист бумаги, нарисуйте квадрат, затем круг и спросите себя, какой из них вам больше нравится. Скорее всего, если вы не из тех людей, которым нравится проводить субботние вечера, перестраивая свой картотечный шкаф (хотя в этом нет ничего плохого), вы выберете круг.Люди любят круги. Это «теплые, дружелюбные и веселые» формы. Фактически, это даже не обязательно должен быть полный круг. Вы можете взять квадрат или прямоугольник с его резкими, прямыми углами, что обычно нам совсем не кажется забавным, вместо этого придать ему закругленные углы, и внезапно это станет похоже на жизнь вечеринки!

Хорошо, возможно, это немного преувеличивает, но закругленные углы определенно выглядят для нас более привлекательно, чем острые прямые. Немного прискорбно, что каждый раз, когда мы делаем снимок, даже если это фотография детского дня рождения с воздушными шарами и праздничными шляпами, фотография все равно заканчивается острыми углами.Это может быть хорошо, если мы просто распечатываем фотографии, но что, если мы хотим использовать фотографию в дизайне или коллаже? Как превратить эти острые углы в круглые?

Ответ? Очень просто, особенно когда мы используем векторную маску! Фактически, мы можем не только придать фотографии
закругленные углы, но и полностью контролировать, насколько они закруглены!

Вот изображение, которое я буду использовать в этом уроке Photoshop:

Исходное изображение.

Давайте посмотрим, как легко закруглить эти углы!

Этот урок из нашей серии «Фотоэффекты».Давайте начнем!

Загрузите это руководство в виде готового к печати PDF-файла!

Шаг 1. Добавьте маску слоя

Я открыл новый пустой документ Photoshop
, заполнил слой Background черным, чтобы нам было легче увидеть, что происходит, а затем перетащил свою фотографию в новый документ. Здесь мы видим документ, показывающий фотографию на черном фоне:

Фотография на черном фоне.

И если мы посмотрим на палитру «Слои», то увидим фотографию, находящуюся на отдельном слое, «Слой 1», над слоем Background :

Палитра слоев в Photoshop показывает фотографию на «Слое 1» над фоновым слоем, заполненным черным цветом.

Выбрав «Слой 1» или другой слой, на котором находится ваша фотография, щелкните значок «Маска слоя» в нижней части палитры «Слои»:

Добавьте маску слоя к «Layer 1», щелкнув значок «Layer Mask».

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

После щелчка по значку «Маска слоя» на «Слое 1» появляется миниатюра маски слоя.

Мы не будем покрывать маски слоев в этом руководстве, поскольку мы не будем их использовать, но если вы хотите узнать больше о масках слоев, обязательно ознакомьтесь с нашим полным руководством «Понимание масок слоев» в разделе «Основы Photoshop».

Шаг 2. Добавьте векторную маску

Хорошо, если мы не собираемся использовать маску слоя, почему мы просто добавили ее? Что ж, мы собираемся сделать то, чего многие люди никогда не делают. Мы увидим то, чего многие люди никогда не увидят. Почему? Потому что нас не «много людей».Мы отличаемся от них. Эти люди щелкают значок один раз, смотрят, что он делает, а затем вздремнут. Им никогда не приходит в голову, что, может быть, просто возможно, если они нажмут на тот же самый значок секунду раз, что ж, есть хотя бы небольшая вероятность, что может произойти что-то или ! И для них это плохо, потому что в этом случае произойдет что-то еще !

Я знаю, это звучит безумно, но теперь, когда мы добавили нашу маску слоя, щелкните еще раз на том же самом значке маски слоя:

Щелкните второй раз значок «Маска слоя» в нижней части палитры «Слои».

Если в настройках Photoshop включен параметр «Показывать подсказки», возможно, вы уже заметили что-то немного другое, когда наводили указатель мыши на значок. Всплывающая подсказка больше не говорит «Добавить маску слоя», как обычно. Вместо этого теперь он говорит «Добавить векторную маску», и как только мы щелкаем по значку, если мы посмотрим на слой в палитре слоев, мы получим то, что кажется миниатюрой маски второго слоя справа от первого. . Разница в том, что это , а не — миниатюра маски второго слоя.Это миниатюра векторной маски:

Миниатюра «векторная маска» отображается справа от миниатюры маски слоя.

Миниатюра маски слоя слева и миниатюра векторной маски справа выглядят совершенно одинаково, но есть большая разница между маской слоя и векторной маской. Оба используются для отображения и скрытия различных частей слоя, но способ их выполнения совершенно разный. С помощью маски слоя мы рисуем на ней, обычно с помощью инструмента «Кисть», чтобы сделать разные части маски белыми, черными или промежуточными оттенками серого.Белый делает эту часть слоя видимой, черный ее скрывает, а серый делает эту область частично видимой в зависимости от того, насколько светлый или темный оттенок серого.

Векторные маски, с другой стороны, совсем не требуют рисования. Фактически, вы не можете рисовать на них , потому что Photoshop вам этого не позволит. Вместо этого мы используем фигуры, чтобы контролировать, какие части слоя видны или скрыты. Фактически, мы собираемся использовать форму прямо сейчас, чтобы создать наши закругленные углы!

Шаг 3. Выберите инструмент «Прямоугольник со скругленными углами»

Теперь, когда наша векторная маска добавлена, перейдите в палитру инструментов и выберите инструмент Rounded Rectangle Tool.По умолчанию он вложен в обычный инструмент «Прямоугольник», поэтому щелкните инструмент «Прямоугольник» и удерживайте кнопку мыши в течение секунды или двух. Вы увидите всплывающее меню. Выберите инструмент Прямоугольник со скругленными углами из списка:

Щелкните и удерживайте кнопку мыши на инструменте «Прямоугольник» в палитре «Инструменты», затем выберите «Инструмент прямоугольника со скругленными углами» во всплывающем меню.

Не путайте эти инструменты с инструментами выделения в верхней части палитры инструментов, такими как прямоугольная область или инструмент эллиптической области.Это инструменты выделения, и они используются для перетаскивания выделения. Инструменты, которые мы здесь выбираем, — это инструменты формы, и они используются для рисования фигур.

Выбрав инструмент «Прямоугольник со скругленными углами», перейдите на панель параметров вверху экрана. Вы увидите группу из трех значков слева. Эти три значка определяют, как будет работать наш инструмент Shape. Мы хотим рисовать фигуры с помощью инструмента Фигура (звучит довольно очевидно, не так ли?), Поэтому щелкните значок слева, который является значком слоев фигур:

Щелкните значок «Слои фигур» на панели параметров.

Затем, если вы двинетесь дальше вправо, вы перейдете к опции «Радиус». Этот параметр определяет, насколько скругленными будут наши углы. Чем выше число, тем округленнее они будут. Меньшее число, менее округленное. Все просто. Проблема в том, что вы никогда не узнаете наверняка, какое число ввести для значения радиуса, пока не попробуете одно, начнете рисовать форму, посмотрите, насколько скруглены углы, а затем решите, довольны ли вы результатом. или нужно ли более или менее закруглить угол.Обычно я начинаю со значения где-то между 10-20 пикселями, затем растягиваю форму и решаю, нравятся ли мне углы. Обычно я этого не сделаю, и вы, вероятно, тоже не сделаете этого с первой попытки, поэтому просто введите значение для начала, растяните форму и, если вас не устраивает округлость углов, просто нажмите Ctrl + Z (Победа) / Command + Z (Mac), чтобы отменить фигуру, затем введите другое значение в параметр Радиус и повторите попытку.

Я уже экспериментировал с этим несколько раз и знаю, что значение радиуса около 30 пикселей даст мне нужные углы, поэтому я собираюсь ввести «30 пикселей» («пикселей» стоит для «пикселей») в параметр «Радиус»:

Введите значение в поле «Радиус», чтобы определить, насколько скругленными будут углы.

Шаг 4: Выберите эскиз векторной маски на палитре слоев

У нас выбран инструмент «Прямоугольник со скругленными углами», мы выбрали опцию «Слои формы» в палитре «Слои» и ввели значение «Радиус», которое определит, насколько скругленными будут наши углы. Мы готовы растянуть нашу форму. Однако сначала нам нужно убедиться, что векторная маска выбрана, поэтому вернувшись в палитру слоев, щелкните миниатюру векторной маски, чтобы выбрать ее. Вы увидите белое поле выделения вокруг миниатюры, которое даст нам знать, что векторная маска выбрана:

Щелкните миниатюру векторной маски в палитре слоев, чтобы выбрать ее.Вокруг миниатюры появится белая рамка выделения.

Шаг 5: растяните фигуру

Все, что нам нужно сделать, это растянуть нашу фигуру. Несмотря на то, что нам будет казаться, что мы рисуем фигуру на самом изображении, на самом деле мы рисуем ее на векторной маске, и когда мы закончим, останется единственная часть нашей фотографии. видимая область внутри фигуры. Все, что находится за пределами формы, будет скрыто. Идите вперед и растяните свой скругленный прямоугольник.Если вы хотите сохранить все на фотографии и просто скруглить углы, начните с верхнего левого угла фотографии и перетащите указатель мыши вниз в нижний правый. Если вы предпочитаете использовать форму, чтобы обрезать часть фотографии, а также придать ей закругленные углы, просто перетащите фигуру вокруг области, которую вы хотите сохранить.

Если вам нужно изменить положение фигуры при перетаскивании, удерживая нажатой клавишу пробела, перетащите фигуру на новое место. Отпустите пробел, когда закончите, и продолжайте вытягивать фигуру.

Здесь я растянул свой закругленный прямоугольник по краям фотографии. Вы можете увидеть закругленные углы фигуры, которые через мгновение станут закругленными углами самой фотографии:

Щелкните и растяните фигуру прямоугольника со скругленными углами внутри документа. Любые области фотографии, выходящие за пределы формы, будут скрыты от просмотра векторной маской.

Отпустите кнопку мыши, когда вы довольны своей формой, и ваша фотография мгновенно «замаскируется» под форму благодаря векторной маске, а углы фотографии теперь закруглены:

Фотография теперь маскируется формой прямоугольника со скругленными углами благодаря векторной маске, а углы фотографии теперь выглядят закругленными.

Давайте закончим, добавив границу к нашей фигуре.

Шаг 6. Добавьте белую обводку для создания границы фотографии

То, что углы нашей фотографии теперь закруглены, не означает, что мы все еще не можем добавить к ней рамку. Это просто означает, что углы границы тоже будут закруглены! Чтобы добавить границу, щелкните значок «Стили слоя» в нижней части палитры «Слои»:

Щелкните значок «Стили слоя» в нижней части палитры слоев.

Затем выберите «Обводка» в нижней части появившегося списка стилей слоев:

Выберите «Обводка» из списка стилей слоя.

Это вызовет диалоговое окно «Стиль слоя» Photoshop, в котором в среднем столбце установлены параметры «Обводка». Я собираюсь увеличить размер обводки примерно до 16 пикселей. Вы можете установить другое значение в зависимости от размера и разрешения вашего изображения. Я собираюсь оставить для параметра «Положение» значение «Снаружи», при котором обводка будет полностью размещена на внешней стороне краев фигуры. Наконец, я собираюсь щелкнуть образец цвета для параметра «Цвет» внизу, который по умолчанию установлен на красный (потому что Adobe считает, что всем, естественно, будет нужен красный цвет в качестве цвета обводки), и в появившемся палитре цветов Я собираюсь выбрать белый цвет в качестве цвета обводки.Нажмите OK, чтобы выйти из палитры цветов, как только вы выбрали белый цвет:

.

Измените параметры обводки, обведенные красным выше.

Когда вы закончите, нажмите OK, чтобы выйти из диалогового окна Layer Style и применить обводку! Вот мой окончательный результат после применения обводки для создания границы фотографии:

Окончательный результат «закругленных углов».

И вот оно! Вот как невероятно просто придать фотографии закругленные углы в Photoshop, используя векторную маску и инструмент Rounded Rectangle Tool! Посетите наш раздел «Фотоэффекты», чтобы получить больше уроков по эффектам Photoshop!

закругленных углов и почему они здесь, чтобы остаться

Ресурсы Кейт Брайант • 6 июня 2016 г. • 6 минут ПРОЧИТАТЬ

В наши дни вы видите их почти повсюду.Их сложно рассматривать как тенденцию, поскольку они, по сути, стали отраслевым стандартом. Мы видим их в оборудовании, в пользовательских интерфейсах и в Интернете. Закругленные углы никуда не денутся, и не только потому, что они красивы. В них больше, чем кажется на первый взгляд. Почему же тогда нам нравятся закругленные углы?

Закругленные углы легки для глаз (и для мозга)

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

Прямоугольник с острыми краями действительно требует немного больше когнитивных видимых усилий, чем, например, эллипс того же размера.Наш «фовеа-глаз» еще быстрее записывает круг. Края включают дополнительные инструменты нейронного изображения. Поэтому процесс замедляется.

Острые углы прерывают мысль. Чтобы визуализировать остроугольную форму, мозг обрабатывает точку A в точку B, делает небольшую паузу, а затем переходит от точки B к C и так далее, пока не завершит кругооборот. В случае прямоугольника вашему мозгу требуется 4 вычисления, чтобы его распознать. С закругленными углами резкой паузы никогда не бывает, и ваш мозг выполняет только одно вычисление, пока ваши глаза плавно просматривают его края.

Какой из них приятнее для глаз?

Конструктор электронных писем

С Postcards вы можете создавать и редактировать шаблоны электронных писем онлайн без каких-либо навыков программирования! Включает более 100 компонентов, которые помогут вам создавать собственные шаблоны электронных писем быстрее, чем когда-либо прежде.

Попробуйте бесплатноДругие продукты

Нас учили доверять закругленным углам

Шел 1981 год, а Macintosh все еще находился в начальной стадии разработки.Постоянному мастеру графики Биллу Аткинсону только что удалось заставить свою ОС рисовать круги и эллипсы, и он гордился этим. Однако у Стива Джобса, отца Macintosh, была другая, более насущная просьба: прямоугольников со скругленными углами .

Для Джобса закругленные прямоугольники были удобными, и он настаивал на том, что закругленные углы уже есть повсюду. Джобс взял Аткинсона на прогулку, чтобы показать, что его просьба не была простой эстетической прихотью. Несколько закругленных предметов и знак «Парковка запрещена», позже, Аткинсон был убежден.

Аткинсону удалось разработать код, необходимый для визуализации прямоугольников с закругленными углами с молниеносной скоростью. Кнопки и окошки стали закругленными. Это помогло определить «безопасный» интерфейс Macintosh. Для клиентов Mac был более мягким и приветливым, что контрастировало с пугающей аурой продуктов IBM и Microsoft.

Наследие Apple с закругленными углами выходит за рамки программного обеспечения. На момент своего появления iPhone был «карманный» , чем другие телефоны того времени.Точно так же iMac не был таким устрашающим, как стандартный «персональный компьютер» того времени: Mac казался непринужденным другом; ПК, человек в темном костюме.

Джобс понял. Apple это понимает. Мы запрограммированы избегать острых предметов и не любить их.

Кого бы вы позволили своему 4-летнему ребенку потрогать?

Острые углы говорят: «Уходи», «Не трогай меня» или «Я тебя поцарапаю» ; закругленные углы говорят: «Меня можно держать». В детстве нас учили держаться подальше от ножей и острых предметов, потому что они могут причинить нам вред.

Нейробиологи называют наше отвращение к острым углам «реакцией избегания», или «смещением контура». Мы склонны развивать негативное предубеждение к визуальному объекту на основе его семантического значения (например, «используется для резки») и эмоций, которые он вызывает (например, угроза, боль, страх) . Нашему современному мозгу тысячи лет, но мы все еще не переросли эту изначальную реакцию.

Закругленные углы и когда их использовать

Перенасыщать дизайн закругленными углами — не лучшая идея, если только вы не разрабатываете дизайн для очень молодого поколения. Когда использовать закругленные углы, зависит от эмоций, которые вы хотите, чтобы ваши пользователи испытали, и индивидуальности, которую вы хотите представить.

Закругленные углы вызывают тепло и доверие. По этой причине многие называют их «дружественными прямоугольниками» . Именно поэтому многие кнопки с призывом к действию (также известные как кнопки покупки или подписки) сконструированы таким образом.Это заставляет клиентов чувствовать себя в безопасности при ведении бизнеса с брендом.

На удобной домашней странице Wufoo вы сможете уверенно вести с ними дела.

Закругленные углы более эффективны для карт и диаграмм, что упрощает их отслеживание. Как упоминалось ранее, естественное движение наших глаз привыкло к кривым. Острые углы резко сбивают ваше внимание с дороги, когда она меняет направление.

Кодирование закругленных углов: CSS3

Многие дизайнеры избегают использования CSS3 из-за его ограниченной совместимости с браузером, особенно с IE.Тем не менее, есть основные свойства CSS3, которые уже работают во всех современных браузерах, включая IE 9 и выше. Один из них — это border-radius , который позволяет нам добавлять закругленные углы к элементу, просто указав радиус.

Border-radius — одно из основных свойств CSS3, которое сегодня поддерживается большинством браузеров.

HTML

Разметка блока состоит из одного блока div и двух классов. Коробка Класс определяет размеры коробки, а класс с закругленными углами имеет дело с углами.

& lt; div class = "прямоугольник с закругленными углами" & gt;
   & lt; p & gt; Позвольте мне не допускать препятствий для брака истинных умов & lt; / p & gt;
& lt; / div & gt;
 

CSS

Мы собираемся стилизовать оба этих класса, чтобы создать округлую рамку.

.коробка {
ширина: 200 пикселей;
высота: 150 пикселей;
цвет фона: # FC5D8A;
цвет: #fff;
маржа: 3em auto;
}

.ounded {
-webkit-border-radius: 10 пикселей;
-moz-border-radius: 10 пикселей;
радиус границы: 10 пикселей;
}
 

По сути, используя border-radius , например, наложение четырех кругов с радиусом 10 пикселей по углам поля и вырезание области переполнения, как показано на изображении ниже (щелкните по нему, чтобы просмотреть демонстрацию) .

Поскольку браузеры постепенно развертывают совместимость с CSS3, некоторые из них предоставляют только экспериментальную поддержку, которая может быть реализована с использованием префиксов поставщиков . В нашем случае мы использовали -webkit для Safari и Chrome и -moz для Firefox. IE использует стандартное свойство без префикса.

Порядок имеет значение. Всегда помещайте фактическое свойство CSS без префикса в последнюю очередь. Это гарантирует, что ваш код будет работать в будущем, когда браузеры, наконец, реализуют официальную поддержку свойства.Реальное свойство, как только браузер поддерживает его, переопределит экспериментальные объявления над ним.

Кодирование закругленных углов: старый путь ниндзя

До появления CSS3 были повороты карате. Дизайнер Кайл Шеффер популяризировал эту технику, в которой используется только одно изображение PNG без скриптов.

Образ

Для этой демонстрации мы создадим оранжевый прямоугольник с закругленными углами. Чтобы создать закругленные углы размером 10 пикселей, нам нужно создать изображение круга диаметром 20 пикселей.Круг должен иметь тот же цвет, что и фон контейнера, например:

HTML

Код HTML сложнее, чем его эквивалент в CSS3, но все же достаточно прост. Здесь у нас есть внешний div для представления самого блока и еще 4 внутри него для представления углов. Пятый div служит оболочкой для текста.

& lt; div class = "закругленный прямоугольник" & gt;
    & lt; div class = "corner NW" & gt; & lt; / div & gt;
    & lt; div class = "угловой NE" & gt; & lt; / div & gt;
    & lt; div class = "угловой SW" & gt; & lt; / div & gt;
    & lt; div class = "угол SE" & gt; & lt; / div & gt;
    & lt; div class = "содержимое-округлой рамки" & gt;
        & lt; p & gt; Любовь - это не любовь, которая меняется, когда ее находят.& lt; / p & gt;
    & lt; / div & gt;
& lt; / div & gt;
 

Класс NW представляет верхний левый угол поля, NE представляет верхний правый угол и так далее для SW и SE . Мы будем использовать CSS, чтобы расположить классы в каждом из углов контейнера.

CSS

.ounded-box {
положение: относительное;
фон: # FC5D8A;
ширина: 100%;
}

.угол {
позиция: абсолютная;
ширина: 10 пикселей;
высота: 10 пикселей;
фон: url ('corners.gif ') без повтора;
размер шрифта: 0%;
}

.ounded-box-content {
отступ: 10 пикселей;
}

.NW {
верх: 0;
слева: 0;
background-position: 0 0;
}
.NE {
верх: 0;
справа: 0;
background-position: -10px 0;
}
.SW {
внизу: 0;
слева: 0;
background-position: 0-10 пикселей;
}
.SE {
внизу: 0;
справа: 0;
фоновая позиция: -10px -10px;
}
 

При желании вы можете добавить несколько дополнительных стилей для настройки текста.Вот результат, аналогичный тому, что мы достигли с помощью CSS3 (нажмите на изображение ниже, чтобы увидеть живую демонстрацию):

Ограничение этого метода, однако, состоит в том, что внешние части вашего углового изображения должны соответствовать любому фоновому содержимому, появляющемуся за прямоугольником. Если это пустая белая страница (как в демонстрации), это не проблема. Если у вас есть изображение, узор или какой-либо другой более сложный дизайн в фоновом режиме, это может стать очень сложным, если не невозможным.Вот почему метод CSS3 является предпочтительным.

Заключение

Я надеюсь, что эта статья помогла вам понять, почему закругленные углы — это нечто большее, чем прихоть, почему они нравятся нам на очень низком психологическом уровне и как их следует использовать при разработке веб-контента. Вы должны быть осторожны, чтобы не переусердствовать, но взвешенное использование прямоугольников с закругленными углами в вашем дизайне позволит посетителям чувствовать себя более комфортно и безопасно на вашем сайте, и им не придется так усердно работать, чтобы обрабатывать представленную визуальную информацию.

Нравится то, что вы читаете? Подпишитесь на наши главные новости.

Почему скругленные углы проще для глаз

Дизайнеры сегодня так часто используют закругленные углы, что они являются скорее отраслевым стандартом, чем дизайнерской тенденцией. Они встречаются не только в программных пользовательских интерфейсах, но и в конструкциях аппаратных продуктов. Так что же такого особенного в закругленных углах, что делает их такими популярными? Действительно, они выглядят привлекательно, но это еще не все.

Закругленные углы кажутся менее яркими

Любой может оценить эстетическую красоту закругленных углов, но не каждый может объяснить, откуда именно эта красота.Ответ на этот вопрос буквально у вас на глазах.

Некоторые эксперты говорят, что прямоугольники с закругленными углами легче воспринимаются глазами, чем прямоугольники с острыми краями, поскольку для их визуальной обработки требуется меньше когнитивных усилий. Фовеа быстрее всего обрабатывается кругами. Края обработки задействуют больше «инструментов нейронных изображений» в мозгу [1]. Таким образом, прямоугольники со скругленными углами проще обрабатывать, потому что они выглядят ближе к кругу, чем к обычному прямоугольнику.

Научное исследование углов, проведенное Неврологическим институтом Барроу, показало, что «воспринимаемая заметность угла линейно зависит от угла.Острые углы создавали более сильную иллюзорную заметность, чем пологие углы »[2]. Другими словами, чем острее угол, тем он ярче. И чем ярче появляется угол, тем труднее на него смотреть.

На какой объект легче смотреть?

Мы подготовлены к закругленным углам

Еще одно объяснение того, почему мы следим за закругленными углами, заключается в том, что они более органичны по сравнению с тем, как мы используем повседневные предметы в физическом мире [3]. Закругленные углы везде.В детстве мы быстро понимаем, что острые углы — это больно, а закругленные углы безопаснее. Вот почему, когда ребенок играет с мячом, большинство родителей не пугаются.

Но если бы ребенок играл с вилкой, родители забирали вилку, опасаясь, что ребенок поранится. Это вызывает то, что нейробиология называет «реакцией избегания» с острыми гранями. Таким образом, мы стараемся «избегать острых углов, потому что в природе они могут представлять угрозу» [4].

Какой объект вы бы доверили своему ребенку?

Закругленные углы упрощают обработку информации

Закругленные углы более эффективны для карт и диаграмм, поскольку они позволяют нашим глазам легко следить за линиями, «поскольку это лучше соответствует естественному движению головы и глаз соответственно» [5].Острые углы отвлекают внимание от траектории линии, поэтому вы в конечном итоге испытываете резкие паузы, когда линия меняет направление. Но с закругленными углами линия ведет взгляд по каждому углу, плавно продолжая путь.

Какая диаграмма легче для глаз?

Закругленные углы также делают эффективные контейнеры для содержимого. Это потому, что закругленные углы направлены внутрь к центру прямоугольника. Это позволяет сосредоточить внимание на содержимом прямоугольника.Это также позволяет легко увидеть, какая сторона принадлежит какому прямоугольнику, когда два прямоугольника расположены рядом друг с другом.

Острые углы направлены наружу, меньше внимания уделяя содержимому внутри прямоугольника. Они также затрудняют определение того, какая из двух сторон принадлежит какому прямоугольнику, когда два прямоугольника находятся рядом друг с другом. Это потому, что каждая сторона прямоугольника представляет собой прямую линию. Стороны прямоугольника с закругленными углами уникальны, потому что линии изгибаются по направлению к прямоугольнику, которому он принадлежит.

Заключительные мысли

Закругленные углы — это нечто большее, чем кажется на первый взгляд. Закругленные углы не только легче воспринимаются нашим глазом, но и упрощают обработку информации. Нет сомнений в том, что закругленные углы привлекательны. Но эти дополнительные причины делают их еще более привлекательными. Когда вы разговариваете с клиентом о закругленных углах, вам будет что сказать больше, чем это просто хорошо выглядит.

Ссылки

[1] Реализации скругленных прямоугольников

[2] Выступление углов линейно зависит от угла при увеличении контрастности

[3] Почему мы любим скругленные углы?

[4] Исследование NeuroFocus показывает, что пошло не так с новым логотипом бренда Gap

[5] Рекомендации FMC по визуализации

Филиалы

Закругленные углы | HTML Собака

Закругленные углы раньше использовались для сужения сплошных фоновых изображений или, для гибких рамок, множества фоновых изображений, по одному на каждый угол, наложенных на несколько вложенных элементов div .Ах, некрасиво. Ну, больше нет. Теперь, с помощью простого CSS, вы можете украсить свой дизайн большим количеством кривых, чем Мэрилин Монро.

Радиус границы?

Ага. Радиус границы. Но не бойтесь — вам не обязательно иметь границы. Свойство border-radius можно использовать для добавления угла к каждому углу блока.

 
#maryn {
    фон: #fff;
    ширина: 100 пикселей;
    высота: 100 пикселей;
      радиус границы: 20 пикселей; 
}
  

Вот и все.Закругленные углы, понимаете? Хорошо, если у вас есть разумный браузер (см. Примечание ниже).

Углы вырезаются вокруг соответствующих четвертей круга (или эллипса) с заданным радиусом.

Конечно, если вам нужна граница …

 
#ok_a_border_then {
    граница: 5px solid # 8b2;
    ширина: 100 пикселей;
    высота: 100 пикселей;
      радиус границы: 5 пикселей; 
}
  

Woop.

Ссылка на нас!
Если вы нашли HTML Dog полезным, рассмотрите возможность ссылки на нас.

Несколько значений

border-top-left-radius , border-top-right-radius , border-bottom-right-radius и border-bottom-left-radius также можно использовать для нацеливания на определенные углы.

Когда-либо менее ужасно многословный, вы также можете определить все угловые радиусы (какое замечательное слово) индивидуально с помощью списка значений, разделенных пробелами, работая по часовой стрелке от верхнего левого угла, как и другие сокращенные свойства:

 
#monroe {
    фон: #fff;
    ширина: 100 пикселей;
    высота: 100 пикселей;
      border-radius: 6px 12px 18px 24px; 
}
  

Граничный радиус с несколькими значениями.

Фигуристая.

Используя два значения вместо четырех, вы нацеливаете верхний левый и нижний правый на первую длину (или процент) и верхний правый + нижний левый на второй. Три ценности? Верхний левый, затем верхний правый + нижний левый, затем нижний правый. Разрушение.

Гах! Просто должны быть проблемы с браузером, не так ли? Будь вы прокляты, браузеры.

Internet Explorer версии 8 и ниже не поддерживает border-radius . Единственный способ справиться с этим — либо довольствоваться дизайном в тех браузерах, у которого нет закругленных углов (большинство людей могут с этим смириться), либо вернуться к старым фоновым изображениям.

Вы также можете наткнуться на аналогичные проприетарные свойства, такие как -webkit-border-radius и -moz-border-radius , которые предназначены для более старых, мало используемых версий Safari и Firefox соответственно. Наш тщательно сформулированный профессиональный совет? К черту их.

Эллипсы

Круги для вас слишком квадратные? Вы можете указать разные радиусы по горизонтали и вертикали, разделив значения знаком «/».

 
#nanoo {
        фон: #fff;
        ширина: 100 пикселей;
        высота: 150 пикселей;
          радиус границы: 50 пикселей / 100 пикселей; 
        граница-нижний-левый-радиус: 50 пикселей;
        граница-нижний-правый-радиус: 50 пикселей;
}
  

Наноо.

Border Radius — Tailwind CSS

Применение закругленных углов к представлению UIKit или SwiftUI

Закругленные прямоугольники были основной частью общего дизайна пользовательского интерфейса Apple в течение многих лет, поэтому при создании приложений с использованием таких фреймворков, как UIKit или SwiftUI, невероятно часто возникает желание применить некоторые форма радиуса угла для некоторых видов, которые мы создадим. Давайте кратко рассмотрим основные API, которые позволяют нам это делать.

RevenueCat: С легкостью создавайте покупки в приложениях для iOS и Android и управляйте ими. С помощью всего нескольких строк кода RevenueCat обеспечивает инфраструктуру IAP, аналитику клиентов, интеграцию данных и дает вам время на то, чтобы избавиться от крайних случаев и обновлений на всех платформах.

Хотя сам UIKit не включает каких-либо API-интерфейсов для изменения радиуса угла данного вида, тот факт, что каждый UIView поддерживается базовым CALayer , позволяет нам использовать Core Animation для выполнения таких настроек.

В качестве примера предположим, что мы создаем кнопку, которая позволяет пользователю перейти к следующему шагу в данном потоке, который в настоящее время настроен следующим образом:

  let button = UIButton (type: .custom)
button.setTitle ("Далее", для: .normal)
button.setTitleColor (.white, для: .normal)
button.backgroundColor =. синий
button.contentEdgeInsets = UIEdgeInsets (
    верх: 4,
    осталось: 6,
    низ: 4,
    справа: 6
)  

Если бы мы затем захотели применить стандартный угловой радиус к каждому из углов вышеуказанной кнопки, мы могли бы сделать это, изменив свойство cornerRadius его нижележащего слоя :

  кнопки.layer.cornerRadius = 10  

💡 Совет: вы можете использовать кнопку PREVIEW , чтобы увидеть результат вышеуказанного изменения.

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

Например, при применении несколько большего радиуса угла к данному виду использование настроек по умолчанию может привести к тому, что углы, возможно, будут не такими гладкими, как мы ожидали.Чтобы продемонстрировать, давайте увеличим и размер шрифта, и радиус угла нашей кнопки, и если вы используете кнопку PREVIEW ниже, вы увидите, что наши углы теперь имеют довольно четкий вид :

 . titleLabel? .font = .systemFont (ofSize: 80)
button.layer.cornerRadius = 30  

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

  button.Layer.cornerCurve = .continuous  

Другой вариант настройки, который может быть действительно полезен, — это свойство maskedCorners , которое позволяет нам контролировать, какой из четырех углов нашей кнопки должен быть скруглен. Например, если мы хотим разместить нашу кнопку в правом нижнем углу экрана, то мы можем захотеть скруглить только верхний левый угол нашей кнопки, что можно сделать следующим образом:

  button.layer. maskedCorners = [.layerMinXMinYCorner]  

Используя вышеупомянутый набор свойств, мы можем получить довольно подробный контроль над тем, как мы хотим, чтобы углы данного вида были скруглены, и поскольку Core Animation — это то, что поддерживает все UIKit (и значительную часть AppKit), они могут быть полезны в самых разных ситуациях.

SwiftUI может не давать нам прямого доступа к слоям, используемым для рендеринга его представлений, но он имеет специальный модификатор, который позволяет нам применять заданное значение радиуса угла к любому виду — который можно использовать следующим образом:

  Button ("Следующий") {
    ...
}
.foregroundColor (.white)
.padding (.horizontal, 4)
.padding (.vertical, 6)
.background (Цвет. синий)
.cornerRadius (10)  

Однако указанный выше API не позволяет нам настраивать какие-либо другие параметры, к которым Core Animation дает нам доступ, а это означает, что нам придется переключиться на другую стратегию, если мы ищем больше возможностей настройки.

Например, один из способов использования непрерывного стиля для закругления углов вида — использовать форму RoundedRectangle в качестве фона вместо использования цвета в сочетании с модификатором cornerRadius :

  Кнопка ("Следующий") {
    ...
}
.foregroundColor (.white)
.padding (.horizontal, 4)
.padding (.vertical, 6)
.фон(
    Прямоугольник с закругленными углами(
        уголРадиус: 10,
        стиль:. непрерывный
    )
    .fill (Color.blue).
)  

Приведенное выше даст нам тот же результат, что и при назначении .непрерывная угловая кривая к CALayer нашей кнопки UIKit.

К сожалению, SwiftUI не включает в себя какой-либо встроенный способ закругления только определенных углов, но мы всегда можем добиться этого, реализовав пользовательскую форму Shape или UIView , который использует API-интерфейс основной анимации maskedCorners , который мы смотрели ранее. Затем мы могли бы использовать любую из этих реализаций в качестве фона нашего представления (при переходе по маршруту UIKit нам нужно сначала обернуть это представление, используя UIViewRepresentable ), точно так же, как мы использовали RoundedRectangle выше.

RevenueCat: С легкостью создавайте покупки в приложениях для iOS и Android и управляйте ими. С помощью всего нескольких строк кода RevenueCat обеспечивает инфраструктуру IAP, аналитику клиентов, интеграцию данных и дает вам время на то, чтобы избавиться от крайних случаев и обновлений на всех платформах.

Я надеюсь, что эта короткая статья дала вам несколько идей о том, как визуализировать различные виды закругленных углов при использовании UIKit или SwiftUI. Если у вас есть какие-либо вопросы, комментарии или отзывы, не стесняйтесь обращаться к ним через Twitter или по электронной почте.

Спасибо за чтение!

Как нарисовать границу с закругленными углами

С SwiftUI вы можете легко нарисовать границу вокруг кнопки или текста (и это действительно работает для всех представлений), используя модификатор border . Скажем, например, вы хотите создать такую ​​кнопку:

Примечание редактора : Это руководство было протестировано на Xcode 11 beta 6.

Мы можем применить модификатор border к объекту кнопки, чтобы создать кнопку с цветной рамкой:

Кнопка (действие: {
print («Привет, кнопка нажата!»)
}) {
Текст («Привет, мир»)
.fontWeight (жирный шрифт)
.font (.title)
.foregroundColor (.purple)
.padding ()
.border (Color.purple, ширина: 5)
}

Но что, если ваш дизайнер хочет, чтобы вы создали такую ​​кнопку с закругленными краями? Как ты можешь это сделать?

Перед выпуском Xcode 11 beta 6 вы можете использовать модификатор border и передать его с радиусом угла:

.граница (Color.purple, width: 5, cornerRadius: 20)

Однако в последней бета-версии Xcode 11 вызов функции устарел. Чтобы создать границу с закругленными углами, вы можете нарисовать прямоугольник с закругленными углами и наложить его на кнопку следующим образом:

Кнопка (действие: {
print («Привет, кнопка нажата!»)
}) {
Текст («Привет, мир»)
.fontWeight (.bold)
.шрифт (.title)
.foregroundColor (.purple)
.padding ()
.overlay (
ОкруглыйПрямоугольник (Радиус угла: 20)
.stroke (Color.purple, lineWidth: 5)
)
}

В коде мы используем RoundedRectangle и его модификатор stroke для создания закругленной границы. Вы можете изменить цвет и ширину линии, чтобы настроить ее внешний вид.

Чтобы создать кнопку с разными стилями, вы можете просто использовать другой объект формы для рисования границы.Скажем, вы можете заменить RoundedRectangle на Capsule , чтобы создать такую ​​границу:

Указав свой собственный стиль StrokeStyle , вы сможете создать кнопку с границей тире:

Кнопка (действие: {
print («Привет, кнопка нажата!»)
}) {
Текст («Привет, мир»)
.fontWeight (.bold)
.font (.title)
.foregroundColor (.purple)
.padding ()
.overlay (
Капсула (стиль: непрерывный)
.штрих (Color.purple, style: StrokeStyle (lineWidth: 5, тире: [10]))
)
}

Если вы хотите узнать больше о кнопках SwiftUI, ознакомьтесь с нашим руководством для начинающих здесь.

Основатель AppCoda. Автор нескольких книг по программированию для iOS, включая «Начало программирования на iOS с помощью Swift» и «Освоение SwiftUI». Разработчик приложений для iOS и Blogger.