Рваная рамка png. Рваные края в фотошопе. С помощью psd-файла

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

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

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

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

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

Так как многие из нас «визуалы», необычные картинки с драными, рваными, резаными краями привлекают наш взгляд и невольно мы задерживается на сайте дольше, пусть даже на короткое время.
Способов сделать рваные края у фотографий, картинок несколько. Первый способ, на мой взгляд, самый простой - с помощью программы Fast Stone Capture. Более подробно об этой программе я рассказала в статье « »

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

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

2. Выбираем инструмент «прямоугольник» и делаем скриншот необходимой нам области.

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

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

Рваные края в программе Фотошоп

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

Сейчас мы выполним три простых шага.

1шаг. Открываем фотографию и инструментом лассо делаем произвольную обводку по самому краю.

2. Копируем выделение на новый слой комбинацией клавиш Ctrl+J. Вот такое изображение с неровными краями у меня получилось.

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

С помощью psd-файла

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

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

Открываем и нашу картинку, которую мы решили отредактировать. Чтобы ее открыть в программе PhotoShop, переходим по вкладке «Файл — Открыть» и находим на компьютере ту фотографию, на которой мы будем проводить эксперименты.

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

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

Теперь нажимаем на треугольник, чтобы отобразить видимость всех слоев из группы №4.

Чтобы удалить связь маски со слоем, кликните по значку на который я указала стрелкой (смотрите скриншот).

Привет всем!

Сегодня четвертый урок и я научу вас делать, так называемые «рваные картинки «… Мы не будем для этого использовать какие-то спецпрограммы, а обратимся к нашему старому и доброму Фотошопу!

Разберем эффект рваных краев в фотошопе по пунктам и каждый в конце обретет новый навык!

Если честно, то я вот заметил, что все, кто пишет на данную тематику - не особо всё расписывают, или что-то объясняют… Такое чувство, что они пишут сами для себя (или для умельцев своего уровня ).

Их посты короткие и малоинформативные!

Я и сам не раз попадал на такие вот блоги… Да, вроде есть статья и результат на лицо! А как дойти этого результата - об этих подробностях они любят умалчивать…

Как сделать рваные края?

На самом деле здесь, как и в любом деле: если все разложить по полочкам и во всем разобраться - результат не заставит ждать!

Если вы мой постоянный читатель, то у вас уже наверняка есть сама программа и вы научились некоторым моментам работы в ней…

Поэтому, все эти мелочи сегодня затрагивать не будем!

Использование фильтров в фотошопе -именно благодаря этому способу, в данной статье, мы научимся делать эффект «рваные края» !

Есть еще масса способов, но сегодня мы о них вспоминать не будем…

Чего тянуть? Пора бы и к делу…

Открываем Фотошоп и с помощью меню Файл-Открыть… добавляем нашу экспериментальную картинку. Или смотрите рисунок:

P.S. Сэкономил немного на дисковом пространстве блога и взял картинку со старого поста…

Берем инструмент «Прямоугольная область » и с помощью него выделяем нужный участок на картинке:

P.S. Не обязательно брать для выделения прямоугольник! Вы можете взять и овал…

После выделения в панели инструментов нажимаем - Редактирование в режиме «Быстрая маска», или горячая клавиша Q:

Область картинки, которая пойдет под редактирование получит красный цвет (место, где и будут находится наши рваные края) :

Следующий этап: Инструмент «Фильтр» - Галерея фильтров…:

В итоге мы попадаем на вот такую страницу:

P.S.

Результат смотрите на окошке слева, если все нравится нажимаете «Ок «.

Также, можете поэкспериментировать и с другими фильтрами (там тоже есть эффекты рваных краев )…

И мы снова попадаем на главную страницу редактора Фотошопа и картинка приобретает уже вот такой вид:

Теперь, чтобы все окончательно закрепить и просмотреть финальный результат - выходим из инструмента «Быстрая маска»:

P.S. Кто не знает как отключить инструмент «Быстрая маска» - посмотрите выше как вы ее включили и просто сделайте по ней повторный клик…

Нажимаем на клавиатуре клавиши Ctrl+C (копировать) и Ctrl+V (вставить) - так мы создали дополнительный уже обрезанный с использованием нашего фильтра слой…

P.S. Есть и более долгий способ создания слоя… Я думаю, это вам не к чему!

Первый слой можно скрыть (нажав на глаз, который указывает видимость слоя ), или удалить его (выделить и нажать Delete, или на небольшую корзинку ):

Как видите, результат на белом фоне незаметный…

Значит немного экспериментов не повредит!

Можно сделать заливку заднего фона, но здесь ей не место… А хотя, вроде неплохо получилось:

P.S. Выбор инструмента «Заливка» горячая клавиша - G…

Берем на вооружение другие методы: делаем клик правой кнопкой мыши по слою и выбираем - Параметры наложения…:

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

P.S. Сделайте клик по картинке и она откроется в новом окне!

После всех изменений нажимаете «Ок » и сохраняете картинку в формате PNG!(Файл - Сохранить как… )

А вот мой результат:

А теперь небольшой подарок!

Предлагаю вам установить специальный шрифт с рваными краями !

Что это такое? А вот смотрите:

Это шрифт под названием - 28 days later . Скачать его можете, кликнув по ссылке ниже:

28 days later скачать шрифт

Как правильно установить шрифты?

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

Итак, какие действия нужно произвести для добавления нового шрифта?

Заходим в системный диск нашего компьютера (зачастую это Локальный диск C ) - папка Windows - Fonts… (полный путь C:WindowsFonts )

В последнюю папку (Fonts ) перемещаем наш скачанный шрифт!

Примечания:

Шрифт применяется только для больших букв;

Все знаки препинания остаются без его внимания;

Поддерживает кириллицу;

Некорректное отображение (к примеру, буква «Д» на рисунку выше )

Немного новостей с жизни блога….

Инвентаризация идет… Правда не такими большими шагами, как я хотел, но идет…

На это все тоже есть свои причины… К примеру, я создавал блог под заказ и т.д.

Из-за таких длительных задержек, я все-таки решил писать статьи…

Как я уже говорил и снова скажу: «Обо всем поведаю в своем отчете!».

Подписывайтесь на мой блог, читайте, комментируйте - вместе веселее!

Всем пока!

С вами был ваш любознательный …

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

На инструментальной панели выберите инструмент "Кисть" (Brush Tool).

Идём во вкладку главного меню Окна --> Наборы кистей (Window --> Brush Presets) и выбираем последнюю кисть в списке, в наборе по умолчанию. В официальной русской версии эта кисть называется "Круглая с грубой щетиной, в английской - "Rough Round Bristle".

Примечание. Чтобы найти кисть по имени, нужно кликнуть по значку в правом верхнем углу диалогового окна "Набора кистей" и выбрать строку "Большие миниатюры и имена" (Large list).

Теперь нам нужно сделать основным чёрный цвет, для этого нажмите клавишу D. затем X.

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

Таким образом мажем кистью по всем краям фотографии. Собственно, вот и всё, края готовы:

И для завершения эффекта к верхнему слою применим стиль слоя "Тень" (Drop Shadow) .

Вот как выглядит готовое изображение:

Примечание 2. В данном уроке я залил слой под фото белым цветом (средний в панели слоёв), но эффектнее будет смотреться не обязательно белый цвет, а цвет фона, на котором будет размещена фото. В примерах, показанных на странице, я залил этот слой цветом фона сайта.

Рваные края в фотошопе

1 способ — как сделать рваные края в фотошопе:

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

Откроем фото, которому мы хотим придать рваные края в фотошопе:

Нажав клавишу «D», выставим основной цвет и цвет фона по умолчанию:

Перейдем у меню Image (Изображение) :=> Canvas Size (Размер холста) и увеличим размер холста примерно на 50-100 пикселей и по ширине и по высоте:

На вашей фотографии должна появиться белая рамка:

На панели инструментов выберите «Прямоугольную область-выделение» (Rectangular Marquee):

И с помощью него выделите изображение так, как показано ниже на фото, внутри фотографии:

Инвертируем это выделение , чтобы выделились наши края (Ctrl+Shift+I):

А теперь самое интересное! Перейдите в меню Filter (Фильтр) :=> Sketch (Эскиз) :=> Torn Edges (Рваные края) и в открывшемся диалоговом окне установите значения ползунков этого фильтра так, как показано ниже на рисунке:

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

2 способ — как сделать рваные края в фотошопе:

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

После этого вам осталось только выбрать основной цвет , каким будет рамка, например, бежевый, найти в наборе кистей при активации инструмента «Кисть» (Brush) загруженные кисти и, выбрав нужный размер, создать красивую рамку из них:

И так, выберите для каждой стороны подходящую кисть, и создайте рваные края в фотошопе ! Ниже представлен результат! Удачи в работе!

А вы знаете, как можно реалистично нарисовать оборванный край бумаги? Если нет, то читайте этот простой Фотошоп урок.

Создайте новый документ. Возьмите Лассо , от руки нарисуйте край бумаги и зациклите выделение через нижнюю часть документа.

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

Верните Лассо, клик правой кнопкой по выделению, выберите команду Образовать рабочий контур (Make Work Path). Значение допуска установите на 1px .

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

Нажмите F5 - появится окно редактирования кисти.

Перейдите в параметр Динамика формы (Shape Dynamics) и установите такие же параметры, как на изображении.

Возьмите инструмент Перо , клик правой кнопкой по контуру и выберите команду Выполнить обводку контура (Stroke Path).

Убедитесь, чтобы в появившемся окне была выбрана кисть, а опция Имитировать нажим (Simulate Pressure) была отключена.

При необходимости повторите обводку, чтобы добиться реалистичности эффекта.

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

Для создания такого эффекта создадим с помощью Лассо еще одно выделение. На новом слое (разместить этот слой нужно будет ниже красного) залейте выделение более светлым оттенком.

Снова превращаем выделение в контур.

Только что мы с вами сделали основную часть эффекта.

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

Скачать текстуру бумаги можно .

Переместите бумагу в документ. Обесцветим ее, для этого перейдите в меню Изображение - Коррекция - Обесцветить (Image > Adjustments > Desaturate).

Режим наложения измените на Умножение (Multiply)

Текстура очень плотная. Разрядим обстановку, применим команду Яркость и Контраст (Image > Adjustments > Brightness/Contrast).

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

Выделим светлый слой, Ctrl + клик по иконке слоя в палитре Слои.
Инвертируем выделение - Shift + Ctrl + I , перейдите на слой с бумагой и нажмите Delete.

Слейте все слои (Shift + Ctrl + E ) и добавьте еще один бумажный листик на фоне.

Посмотрите, как здорово ворсистые края и бумажная текстура создают иллюзию настоящего оборванного бумажного края.

Вот как этот эффект смотрится в действии.