Как сделать рамку вокруг картинки
Как сделать рамку в Adobe Photoshop?
Довольно часто возникает необходимость визуально отделить изображение от окружающего его текста на сайте, украсить свадебные фотографии.
На просторах интернета есть множество приложений для создания рамок, однако сделать её можно и в практически любом графическом редакторе. Как сделать рамку в фотошопе?
Рассмотрим несколько простейших способов.
Способы создания рамки в Photoshop
Способ №1: обводка
Откройте в фотошопе фотографию и выделите изображение с помощью комбинации клавиш ctrl+a или инструментами выделения, перейдя в меню « Редактирование » и кликнув по пункту « Выполнить обводку »:
Выберите цвет, толщину и расположение обводки:
Если выбрано наружное расположение обводки, размер картинки можно уменьшить с помощью команды « Свободное трансформирование », перемещая пунктирную линию, или увеличить размер вашего холста на нужную величину.
Способ №2: рамка вокруг картинки как эффект фона
Предположим, что нужная нам рамка имеет толщину 2 пикселя. Если у открытой в Photoshop картинки имеется всего один слой, то он же и является фоновым.
Способ №3: использование кисти
Для того чтобы сделать произвольную рамку для рисунка или отдельной его части, можно воспользоваться кистью. Выберите с помощью горячей клавиши B кисть и укажите её толщину:
Цветом рамки будет активный в данный момент цвет. Кликните кистью в том месте, откуда вы будете начинать рисование обводки, зажмите клавишу shift и, не отпуская кнопку, нарисуйте прямую линию.
Способ №4: прозрачная рамка
Находясь на первом слое, выберите « Фильтр », « Размытие » и « Размытие по Гауссу » и размойте изображение:
Затем в окне « Фильтр » кликните на « Шум » — « Добавить шум ». В параметрах наложения слоёв слоя 2 уже знакомым способом выполните одно пиксельную черную или белую обводку.
Включите видимость всех слоёв и слой 2, применив свободное трансформирование, уменьшите по контуру на необходимую величину.
Получится такая рамка:
Экспериментируя с наложением слоёв и размытием, можно создать красивую и эффектную рамку для фото. Однако, иногда необходимо, чтобы фотография имела более сложную или тематическую рамку.
Как вставить фотографию в готовую рамку?
Шаг №1
Откройте загруженную рамку и фотографию в одном проекте Adobe Photoshop :
Шаг №2
Шаг №3
В окне « Слои » поместите слой с рамкой выше, чем слой с фотографией, как показано на рисунке:
Теперь фотография находится под рамкой.
Шаг №4
Для создания дополнительного эффекта объёмности вы можете воспользоваться « Параметрами наложения » слоя с рамкой. Для этого кликните правой кнопкой мыши и выберите соответствующий пункт:
В разделе « Тиснение » поставьте галочки, руководствуясь своим вкусом и предпочтениями:
В результате у вас получится объёмное и реалистичное изображение в рамке.
Надеемся, что данный урок стал для вас полезен!
Рамки html свойство border
Рамка — самый популярный и легко создаваемый элемент оформления контента с большим потенциалом преображения дизайна. В этом уроке будем использовать только HTML.
Рамку можно создать для любого html элемента, будь то
Разница между рамками блочных и встраиваемых элементов состоит в том, что у блочных рамка образуется на всю ширину блока, но её можно ограничивать.
Рамка же встроенного создаётся непосредственно вокруг элемента, заключённого в тег.
Для создания рамки применяется стилевое свойство border которому задаются три значения по порядку
Так как руководство это практическое, то перейдём непосредственно к примерам.
Толщина и размер рамки
Для примера возьмём тег
и создадим ему простую рамку толщиной 3 px
текст текст текст текст
Как видите — рамка заняла всё пространство, которое занимает тег.
Так ведёт себя рамка созданная для блочных элементов, таких как
Чтоб рамка была только вокруг текста, в значение вводится ширина, которую можно задать в любых доступных в веб единицах размеров.
текст текст текст текст
Если задать меньшую ширину, то слова в рамке будут размещаться в несколько строк, то есть автоматически будет увеличиваться высота.
текст текст текст текст
Бла-бла-бла Бла-бла-бла текст текст текст текст Бла-бла-бла Бла-бла-бла
Можно изменить вид рамки, для этого в значении меняется её название.
текст текст текст текст
текст текст текст текст
текст текст текст текст
текст текст текст текст
текст текст текст текст
Для рельефной рамки нужно задавать толщину побольше, иначе она будет смотреться как сплошная.
текст текст текст текст
Выравнивание и отступы рамки
left — выравнивание по левому краю (по умолчанию)
center — выравнивание по центру
right — выравнивание по правому краю
текст текст текст текст
Можно задать для рамки отступы от текста.
первая цифра — отступ сверху;
вторая цифра — отступ справа;
третья цифра — отступ снизу;
четвёртая цифра — отступ слева.
Отступы задаются в любых доступных в веб единицах размеров.
Если в свойстве padding указать одно значение, то отступы со всех сторон будут одинаковыми.
Если указать два значения, то первая цифра укажет отступы сверху и снизу, а вторая — справа и слева.
текст текст текст текст
Можно задать отступ от предметов находящихся снаружи рамки.
Сделаем отступы слева, сверху и снизу
текст текст текст текст
Можно внутри рамки сделать фоновый цвет.
текст текст текст текст
Текст текст текст
А если задать ширину рамки ridge пикселей в 15-20, то есть в свойстве border вместо 3px задать 15px, то получится багет.
Текст текст текст
Так же в дизайне рамки можно использовать стилевые свойства border-radius — закругление и box-shadow — тень.
Как оформляются рамки в CSS и как делается тень, читайте в статьях Рамки CSS и Как сделать тень для блока.
Желаю творческих успехов.
Как в Фотошопе вставить фото в рамку: пять простых инструкций
Рамка вокруг картинки помогает сделать изображение более «нарядным» и торжественным, а если вы создаете открытку, стильное обрамление придаст ей завершенный вид. В этой инструкции мы покажем, как сделать рамки в фотошопе несколькими способами. Также мы расскажем о более простом и доступном варианте оформления фотографий, который подойдет начинающим пользователям.
Хотите красиво оформить фотографию, но Photoshop слишком сложный и дорогостоящий?
Скачайте фоторедактор с готовыми рамками ФотоМАСТЕР!
Как сделать рамку в фотошопе вокруг фотографии: три способа
Photoshop не включает в себя готовую коллекцию рамок, зато софт позволяет работать со слоями и детально настраивать параметры изображения. Далее мы рассмотрим, как нарисовать рамку в Photoshop, используя встроенные инструменты.
Как сделать рамку в Photoshop в виде прямоугольника
Прямоугольная или квадратная рамка – наиболее стандартный вариант оформления картинок. Нарисовать простую обводку внутри фотографии не так уж и сложно, а займет это у вас практически несколько минут.
1. Откройте снимок и разблокируйте его, кликнув по иконке в виде замочка в списке слоев.
2. Под миниатюрой картинки в перечне слоев найдите кнопку с буквами FX. Кликните по ней и отыщите пункт «Обводка».
3. В окне с параметрами отображения установите толщину рамки в пикселях, двигая ползунок или указав цифру вручную.
4. Оставьте пункты «Положение», «Режим наложения» и «Непрозрачность» по умолчанию.
5. Тип обводки также оставьте значением «Цвет» и подберите нужный оттенок на ваш вкус, кликнув на черный квадратик.
6. Нажмите ОК и экспортируйте измененное изображение через пункты меню «Файл» – и далее нажмите «Сохранить как».
Этот вариант – наиболее простой способ, как сделать рамку на фото в фотошопе. Таким образом вы можете создавать цветную, черную или белую рамку, делать объемное или тонкое обрамление и даже применять градиент.
Также таким образом можно устанавливать границу вокруг текста, в этом случае примените точно те же настройки к нужному слою.
Закругленные углы
Картинка с закругленными углами выглядит более стильно, чем стандартное прямоугольное обрамление. Этого достаточно, чтобы фотография привлекала внимание, даже если вы не будете использовать другие элементы оформления. Чтобы понять, как добавить рамку в фотошопе со скруглением краев, потребуется некоторое время.
1. Импортируйте изображение и снимите с него блокировку. В боковой колонке с инструментами отыщите функцию «Прямоугольник». Также его можно вызвать при помощи клавиши с буквой U.
2. В верхней панели с настройками выберите тип фигуры «Контур» и установите скругление.
3. Зажмите левую кнопку мыши и нарисуйте новый объект поверх фотографии.
4. Щелкните правой кнопкой мыши внутри нового элемента и нажмите «Выделить область».
5. В параметре «Радиус растушевки» установите значение 0 и сохраните правки.
6. Синяя рамка превратится в прерывистую линию. Инвертируйте созданное выделение клавишами Ctrl + Shift + I. Либо раскройте пункт меню «Выделение» и нажмите «Инверсия».
7. По краям снимка появилась едва заметная рамка. Создайте на ее основе новый слой сочетанием кнопок Shift + Ctrl + N.
8. В столбце с инструментами найдите функцию «Заливка» (горячая клавиша G). Во вкладке «Цвет» справа подберите подходящий оттенок и кликните по рамке с выделением.
9. Теперь можно снять выделение через пункты меню «Выделение» – «Отменить» или нажав сочетание клавиш Ctrl + D.
В итоге мы получили красочную рамку со скругленными краями, которая ненавязчиво, но стильно подчеркивает выбранный кадр.
Рваные края
Этот стиль выглядит необычно и встречается довольно редко, поэтому новичкам кажется, что создать такой эффект могут только профессиональные фотомонтажеры. Такая рамка в фотошопе действительно отнимает достаточно много сил, но все же сделать ее возможно даже без особых навыков.
1. Откройте и разблокируйте фотографию, затем создайте выделение клавишами Сtrl + A.
2. Раскройте пункт «Выделение» и отыщите группу «Модификация». В подменю вариантов выберите функцию «Граница».
3. Укажите желаемую толщину будущей рамки и примените изменения кнопкой ОК.
4. Нажмите на клавиатуре кнопку Q, чтобы активировать быструю маску. Фотография окрасится в полупрозрачный красный цвет.
5. Раскройте меню «Фильтр» и выберите пункт «Галерея фильтров». Раскройте категорию «Штрихи» и выделите пресет «Аэрограф». Установите параметры по своему усмотрению.
6. Нажмите ОК и уберите быструю маску, снова нажав букву Q. Вокруг фото станет заметна мерцающая прозрачная рамочка.
7. Создайте новый слой через пункты «Слои» – «Новый» – «Слой» и при помощи инструмента заливки окрасьте рамку в подходящий цвет.
8. Снимите выделение и экспортируйте обработанное фото на жесткий диск.
В итоге у вас получится фото с интересными узорными краями, которое будет выглядеть особенно эффектно, если вы окрасите рамку в белый цвет и разместите на белой странице. Кстати, кроме обводки можно еще удалить и заменить фон на снимке в Фотошопе.
Как сделать красивую рамку в Photoshop: два варианта
Если оформление картинок стандартными средствами Фотошоп для вас кажется слишком скучным, украсить фото можно при помощи готовых рамок. Скачать подобные файлы можно совершенно бесплатно в интернете: для этого введите в поиск фразу «скачать рамки для Photoshop на прозрачном фоне». В целом разобраться в том, как вставить рамку в фотошопе, будет для вас достаточно просто.
1. Загрузите снимок, который вы хотите обработать, в фоторедактор. После этого импортируйте в программу файл рамки. Она откроется в новой вкладке.
2. Выделите рамку сочетанием Ctrl + A и скопируйте, нажав Ctrl + C. Перейдите на вкладку с основной фотографией. Выделите ее и вставьте рамку сочетанием клавиш Ctrl + V.
3. В нашем случае картинка оказалась слишком маленькой. Чтобы растянуть ее, раскройте пункт меню «Редактирование» и кликните «Свободное трансформирование».
4. Захватите границы рамки и растяните так, чтобы она соответствовала основной фотографии. Если файл меняет размер строго по квадрату, а вам нужно растянуть ее в стороны, зажмите параллельно клавишу Ctrl.
В этом случае мы наложили готовую фоторамку. Однако еще один способ создать красивое обрамление вокруг фото в ФШ – использовать стили. Их часто применяют в качестве украшения для текста, но также их можно использовать для создания рамок.
Рассмотрим, как сделать рамку в фотошопе по контуру с применением встроенных стилей.
1. Создайте дополнительный слой и откройте панель «Стили» через пункт меню «Окно».
2. Нажмите на подходящий стиль. Проследите, чтобы при этом был выделен новый прозрачный слой, а не главное фото.
3. Активируйте инструмент «Заливка» и кликните по дополнительному слою. Поверх снимка будет наложена цветная область.
4. Выберите инструмент «Овальная область», установите тип фигуры «Контур» и нарисуйте на верхнем цветном фоне овал. Также вы можете применить прямоугольную область, это зависит только от ваших предпочтений.
5. Нажмите Del, чтобы удалить выделенный фрагмент по контуру. Это откроет участок основного фото, скрытого за цветным слоем.
Для более эффектного результата можно настраивать растушевку краев выделенной области.
Добавляем рамку к фото в 2 клика: альтернатива Фотошопу
Итак, мы рассмотрели основной функционал Photoshop и как сделать рамку вокруг фото без особых технических навыков. Но даже наиболее простые способы отнимают много времени и требуют особого внимания. К тому же Photoshop дает сильную нагрузку на процессор, так что даже не пытайтесь запускать его на слабом ноутбуке.
Если вы ищете альтернативу, которая поможет добиться нужного результата с минимумом усилий, выбирайте ФотоМАСТЕР. В нем уже есть коллекция рамок, которые можно быстро наложить на снимок. Софт включает в себя помощь для новичков, а простое управление поможет быстро освоиться с функционалом.
1. Скачайте ФотоМАСТЕР и установите его на свой компьютер. Запустите фоторедактор и импортируйте картинку кнопкой «Открыть фото».
2. В верхней панели программы нажмите по вкладке «Текст и рамки». В правой колонке с функциями найдите пункт «Добавить рамку».
3. Отрегулируйте толщину границы и выберите нужный вам цвет. Прокрутите список вариантов и нажмите на подходящий пресет.
4. Сохраните изменения кнопкой «Применить» и экспортируйте картинку на жесткий диск, открыв пункт меню «Файл».
Подробнее об этом можно посмотреть в специальном уроке:
Если у вас есть готовая фоторамка в графическом формате, которую вы хотите наложить на кадр, это также возможно, так как софт поддерживает добавление любого количества слоев.
1. Откройте вкладку «Инструменты» и найдите функцию «Вставка картинки».
2. Кликните по кнопке и выберите «Наложить изображение из файла». Загрузите вашу рамочку.
3. Захватите границы нового объекта и растяните его так, чтобы он соответствовал по размеру основной фотографии.
Как видите, даже самый сложный вариант в этом фоторедакторе намного проще и быстрее, чем создать рамку в фотошопе. К тому же, программа не предъявляет высоких требований к системе и почти не нагружает процессор, так что она станет хорошей альтернативой для тех, кто работает на ноутбуках или на слабых ПК.
Заключение
Из этой статьи вы узнали, как сделать рамочку в фотошопе сразу несколькими способами. Этот художественный прием поможет вам создавать фотоконтент, который будет выделяться среди конкурентов, а также сверстать красивые поздравительные открытки. А если вы ищете более простой и удобный вариант, советуем остановить внимание на ФотоМАСТЕР. Он легок в освоении и уже включает в себя библиотеку готовых материалов, благодаря чему вся работа сводится к нескольким кликам мыши.
Как сделать рамку в Photoshop вокруг фотографии?
Доброго всем времени на fast-wolker.ru! Сегодня в обзоре возможностей такого замечательного редактора, как фотошоп, мы будем учиться делать на наших картинках рамку.
Поскольку мы все так или иначе находимся в различных социальных сетях, где размещаем свои фотографии, то прежде чем выставить фото, его иногда хочется каким-либо образом украсить. А что может быть лучше рамки, когда хочется иметь портрет?
Сделать рамку вокруг картинки можно двумя способами. Первый – скачать готовые рамки и вставлять в них в программе свои фотографии. Второй вариант – нарисовать эту самую рамку средствами программы. Это посложней, но и интереснее.
Делаем рамку в Photoshop вокруг фотографии
Первый вариант самый простой. Рамок в интернете существует множество, скачиваем нужную, загружаем в программу и ставим в нее фото. Всё.
Что касается использования средств программы, то здесь имеется несколько способов. Один из них достаточно простой и позволяет сделать рамку за считанные минуты. Способ этот подразумевает использование «обводки«.
Итак, открываем программу, загружаем фото и дублируем слой. Работать будем именно с копией слоя. Дважды щелкаем по слою, откроется «окно свойств» слоя. Здесь выделяем пункт «обводка«.
Далее необходимо выбрать цвет. Он может быть как однотонным, так и с использованием градиента. По градиенту рамка получится красивее. Этот выбор делаем в пункте «тип обводки«.
Если выбрали просто цвет, то рамка будет однотонная и иметь тот оттенок, какой выберете. Что же касается градиента, то здесь можно подобрать любой интересное сочетание.
Выбрали цвет, устанавливаем сперва положение рамки «внутри«, а затем и «размер рамки» в пикселях. Когда начнем двигать ползунок размера рамки, вокруг картинки начнет появляться рамка, выбираем нужный размер.
Пробуем остальные параметры. Когда вы достигнете нужного результата жмем ОК и получаем готовую рамку вокруг нашей картинки.
Все очень просто и быстро.
Рамки могут быть не только прямоугольные, но и иметь иную фигуру, например круглую или овальную. Начинаем с того, что открываем наше фото в программе, затем выбираем «овальное выделение» и с зажатой клавишей Shift делаем выделение вокруг нужного объекта.
Далее, необходимо инвертировать выделение. Для этого идем в меню «выделение«-«инверсия«.
На следующем шаге нажимаем клавишу Delete. В результате этот слой очиститься. На иконке слоя в палитре слоев увидим, что она стала белой, а в середине осталась картинка, которую выделяли.
Затем снова инвертируем выделение и отключаем фоновый слой. Должно получиться так:
Теперь снимаем выделение: жмем при активном инструменте «выделение» в любом месте документа и оно исчезнет. Дважды кликаем по слою с круглым фрагментом и в открывшемся окне отмечаем флагами пункты «тиснение» и «контур«.
Здесь видим много различных параметров. Начинаем с цвета, который будет обозначать цвет рамки. Затем работаем с другими параметрами, изменяя их. По ходу работы увидим, как наша картинка тоже меняется. Поэтому редактировать будет несложно. Когда все будет готово, жмем ОК и включаем нижний слой.
В результате получим следующую картинку:
В программе можно так же просто создать круглую рамку, которую использовать для вставки в любое фото. Для этого создаем новый документ с прозрачным фоном.
Затем выбираем инструмент «выделение» и рисуем круг или овал.
Далее, наводим курсор в центр выделения и нажимаем правую кнопку мыши. В открывшемся окне выбираем «выполнить обводку«.
В открывшемся окне устанавливаем цвет, размер. Расположение ставим по центру.
Жмем ОК и получаем результат.
На этом можно и остановиться, но рамку такую можно сделать еще интереснее. Для этого нажимаем два раза по слою с рамкой. Откроется окно настроек. Первым делом выбираем пункт «наложение градиента». Это если нас не устраивает однотонный цвет. Здесь подбираем нужный градиент.
В интернете можно найти и скачать дополнительные наборы градиентов для фотошопа, так как типовые наборы не всегда устраивают пользователей.
Далее экспериментируем по всем остальным пунктам, в результате получим нечто подобное:
Сохраняем рамку. Поскольку она сделана на прозрачном фоне, то в нее очень хорошо встанет любая фотография.
Вставляем прозрачную рамку в фотошопе снаружи фотографии
Этот вариант рамки и прост, и в то же время интересен тем, что представляет собой рамку сделанную из той же самой фотографии. Создаем копию слоя и отключаем его видимость. Для первого слоя в главном меню выбираем «фильтр» — «размытие по гауссу«.
Значение здесь большой роли не играет, ставим любое.
После этого добавляем еще немного шума из меню «фильтр«. Впрочем, шум можно и не ставить, но с ним рамка будет немного интереснее выглядеть.
Значение здесь так же ставим любое. Теперь включаем первый слой и из меню «редактирование«-«выполнить обводку«, создаем обводку этого слоя.
Теперь выбираем цвет белый, ставим размер в 2 пикселя, расположение по центру. В результате получим такой тонкий контур:
Далее, для нашего слоя выбираем «редактирование«-«трансформирование«-«масштабирование«, уменьшаем размер картинки и получаем такое фото с наружней рамкой:
Если поэкспериментировать с нижним слоем, можно границу создать еще интересней. Но, подобную рамку можно делать и проще. Выбираем «прямоугольное выделение» и рисуем на картинке необходимый размер.
Далее, правой кнопкой кликаем по рисунку и выбираем в открывшемся меню «выполнить обводку«:
В открывшемся окне выбираем необходимые параметры, о них говорилось выше; жмем ОК. В результате получаем рамку внутри фотографии.
Делаем в фотошопе размытую рамку вокруг фотографии
Еще один вариант создания красивой рамки. Некоторые особенности аналогичны предыдущим вариантам. Открываем фото. Выделим всё изображение, нажав Ctrl+A. Затем в меню «выделение» выбираем «модификация» — «граница» и ставим ширину в 40 пикселей.
Впрочем, ширину можно выбирать любую. Дальше применяем «размытие по гауссу» в пределах 30 пикселей. После инвертируем выделение выбрав «выделение» — «инверсия«. Сейчас давайте создадим новый слой:
Затем, нажав комбинацию клавиш Alt+Delete, заливаем выделение белым цветом.
После этого, нажатием клавиши Delete убираем белый цвет, а щелкнув курсором мышки в любом месте рабочего стола, снимаем и выделение. Получаем такую картинку:
В принципе это все, но если щелкнуть два раза на новом слое с рамкой, то появится окно свойств слоя, где можно подобрать различные параметры и сделать, в результате, рамку еще красивее, по вкусу.
Как в Photoshop сделать белую рамку вокруг фото без срезанных уголков
Белая рамка в программе фотошоп делается при помощи обводки. Об этом рассказывалось в предыдущих разделах. В двух словах – вы делаете обводку. Применив белый цвет. В результате получится рамка белого цвета.
Более наглядно о создании белой рамки можно посмотреть в приведенном ниже видеоуроке.
А на этом пока все, успехов в освоении фотошоп!