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

И сегодня я покажу и вам, как сделать размытые края в фотошопе. И экспериментировать я буду над стариной Человеком-Пауком из одноименного фильма. Можно конечно выбрать инструмент «Размытие» и просто закрашивать им края изображения. Но как по мне этот способ не очень, поэтому я буду использовать другие.

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

Совет: На самом деле можно не делать два выделения с помощью зажатого Альта. Можно сделать одно выделение только в том месте, до куда будет идти размытие. А уже после этого нужно инвертировать выделение. Для этого нажмите комбинацию клавиш SHIFT+CTRL+I или выберете меню «Выделение» — «Инверсия» . Тогда у вас автоматически создастся выделенная рамка.

Плавное размытие

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

Обратите внимание ! Величина радиуса размытия по Гауссу и растушевки зависит от размера самого изображения. Здесь я ориентировался на конкретно этот размер. Экспериментируйте.

Другие способы размытия

Вам необязательно использовать фильтр по Гауссу, ведь есть и много других фильтров рaзмытия. Давайте я вам покажу на примере еще одного, а дальше вы уже попробуйте всё сами.

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

Ну вот вроде и всё, что я хотел вам рассказать об этом. Да. Такой вот небольшой и несложный урок). Но если вы хотите освоить фотошоп полностью, то настоятельно рекомендую вам полностью изучить один классный видеокурс . Благодаря ему вы сможете изучить фотошоп в кратчайшие сроки, если конечно не будете лениться.

Ну а я на сегодня заканчиваю. Жду от вас комментариев по теме. И кстати обязательно подпишитесь на обновления блога, тогда вы всегда будете знать о выходе новых статей по нужной вам тематике. Также советую погулять по блогу, так как статей много и наверняка вы найдете для себя что-нибудь интересное. Удачи вам. Пока-пока!

С уважением, Дмитрий Костин.

Существует много плагинов к Photoshop для создания всевозможных рамок, от самых простых до супернавороченных, мне же нравится делать рамки самому. Размытую рамку я увидел у кого-то на фотографии, но как сделать ее не нашел. Пришлось немного подумать и вот что у меня получилось.

Шаг 1.

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

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

Шаг 2.

Выбираем все изображение (CTRL+A ) и копируем в буфер обмена (CTRL+C ). Теперь увеличиваем размер исходного изображения на ширину рамки умноженную на 2 . Поясню. Если рамка должна быть шириной 10 пикселей, то высоту и ширину изображения надо увеличить на 20. Image->Image Size и вводим новые размеры.


Учитывая исходные размеры 700×525 получаем изображение 720×545. При этом опция Constrain Proportions должна быть отключена !

Шаг 3 .

На полученное изображение накладываем фильтр Gaussian Blur (Filter->Blur->Gaussian Blur) с радиусом в 5 пикселей.

Шаг 4.

На втором этапе мы копировали оригинальное изображение в буфер обмена. Теперь самое время вставить его как новый слой. Нажимаем CTRL+V .

Шаг 5.

Почти готово. Осталось сделать маленькую окантовку новому слою. Не знаю, какой версией Фотошопа пользуетесь вы, но в последних версиях появилась такая замечательная возможность, как Layer Styles. Поэтому выбираем наш новый слой, потом идем в меню Layer->Layer Style->Stroke . Задаём ширину окантовки в 1 пиксель, а цвет… Цвет исключительно на ваш вкус. Я использую черный цвет (#000000 ) для светлых фотографий, либо серый (#CCCCCC ) для темных.


Используя различные установки Blend Mode можно добиться изменения отображения окантовки, опять таки это дело вкуса. Я обычно довольствуюсь режимом Normal.

В результате получаем изображение с такой вот рамочкой:

Если такая рамочка понравится, то можно облегчить себе жизнь записав последовательность действий в Action. Хотите попробовать — можно использовать мои, которые я создал для изображений с размерами 700×525 и 525×700. Загрузить файл с actions можно отсюда.

Влад Мержевич

С помощью CSS можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border , как наиболее универсальное, а также outline и, как ни удивительно, box-shadow , основная задача которого - создание тени. Далее рассмотрим эти методы и их различия между собой.

Свойство outline

Самое простое свойство для создания рамок. Имеет те же параметры, что и border , но существенно отличается от него некоторыми деталями:

• outline выводится вокруг элемента (border внутри);
• outline не влияет на размеры элемента (border добавляется к ширине и высоте элемента);
• outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах (border можно использовать для любой стороны или всех сразу);
• на outline не действует радиус скругления, заданный свойством border-radius (на border действует).

Возникает вопрос - в каких случаях нужен outline , когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border ? Ситуаций не так и много, но они встречаются:

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

Разноцветные рамки

Надо понимать, что outline ни в коей мере не заменяет border и вполне может существовать вместе с ним, как показано в примере 1.

Пример 1. Создание рамки

В данном примере вокруг элемента добавляется чёрная рамка, которая отделена от фона белой каймой (рис. 1).

Рис. 1. Рамка вокруг элемента

Рамка при использовании:hover

При добавлении рамки через border происходит увеличение ширины элемента, что довольно заметно при сочетании border и псевдокласса :hover . Есть два способа, как это «победить». Самое простое - заменить border на outline , которое, как мы знаем, не оказывает влияния на размеры элемента (пример 2).

Пример 2. Рамка при наведении

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

Пример 3. Рамка при наведении

Рамка вокруг полей формы

В некоторых браузерах (Chrome, Safari, последние версии Opera) вокруг полей формы при получении ими фокуса отображается небольшая цветная рамка (рис. 2). Чтобы её убрать, достаточно в стилях добавить к свойству outline значение none , как показано в примере 4.

Рис. 2. Рамка вокруг полей

Пример 4. Убираем рамку

Рамки через box-shadow

Хотя свойство box-shadow предназначено для добавления тени вокруг элемента, с его помощью можно и создавать рамки, причём такие, которые невозможно сделать через border или outline . Всё благодаря тому, что число теней может быть неограниченным, параметры которых перечисляются через запятую.

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

В примере 4 показано добавление двух рамок и одной границы справа с помощью одного свойства box-shadow .

Пример 4. Использование box-shadow

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

Рис. 3. Рамки, созданные свойством box-shadow

Размытая рамка по бокам фото как в инстаграме – это довольно стильное решение для любого профиля. Всем снимкам она придает особый лоск и оригинальность. Так как можно сделать размытую рамку на фото?

InstaSize

Есть несколько программ, которые позволяют сделать такой эффект. Но для вас мы собрали самые лучшие и популярные. Размытая рамка по бокам легко делается в приложении под названием InstaSize . Бесплатную программу можно скачать в официальном магазине AppStore и Google Play.

Как сделать эффект размытой рамки:

1. Открыть приложение InstaSize.
2. Нажать на плюсик, который находится внизу программы.
3. Далее выбрать вкладку «Фото».
4. Из фотопленки выбрать нужный снимок.
5. Откроется редактор, и внизу будет набор инструментов.
6. Тапнуть на квадратик в квадрате.
7. Далее нужно выбрать то фото, которое будет с размытым бэкграундом.
8. Появятся две вкладки на выбор: «Фото» и «Размытие». Если вы хотите обычные рамки, то выбирать нужно 1 вариант, а если с эффектом блёра, то 2 вариант.
9. Из фотопленки выбирать точно такое же фото (или любое другое).
10. Важный момент: если ваше фото вертикальное или горизонтальное, то размытая рамка по бокам появится сразу. А вот если фото квадратное, тогда необходимо пальцами зажать и немного сдвинуть фото.
11. Сохранить получившийся результат. Вы великолепны!

No crop

Еще один редактор фото, который сделает оригинальные размытые рамки по бокам, – это No Crop . Приложение доступно для скачки, и оно абсолютно бесплатное.

Как сделать размытую рамку с помощью приложения:

1. Открыть приложение No Crop.
2. Перед нами сразу откроется галерея телефона. Выбрать нужное фото.
3. Внизу программы располагаются разные квадратики, которые помогают сделать размытые рамки по бокам, а также можно выбрать для них белый или черный цвет.
4. Шкала с ползунком по фото позволяет настроить резкость размытости рамки.
5. Далее нужно только сохранить понравившееся фото.

InShot

Рамка с размытыми краями получается и в приложении InShot. С помощью него рамку можно делать эффект блера и для видеороликов. Оно абсолютно бесплатное, и его можно найти в магазине AppStore или Google Play.

Размытая рамка для фото пошаговая инструкция:

1. Открыть программу InShot.
2. После запуска приложения появятся 3 кружочка: «Видео», «Фото», «Коллаж». Нужно выбрать фото или видео.
3. Приложение автоматически размывает рамку по бокам.
4. Вам останется только немного отредактировать снимок по вашему вкусу.
5. Сохранить снимок.

PhotoGrid

Еще одно приложение с размытыми рамками имеет название PhotoGrid . Приложение абсолютно бесплатное и доступно для скачивания в любой момент.

Как сделать размытую рамку как в инстаграме:

1. Запустить приложение PhotoGrid.
2. Нажать вкладку «Изменить», и откроется фотопленка телефона.
3. Выбрать нужное фото.
4. Программа автоматически вставит размытую рамку по бокам.
5. Отредактировать фото по своему вкусу и сохранить его.

Будьте самыми стильными! Используйте супер эффекты.