Как называются картинки для фотошопа без фона: Почему картинки без фона называются PNG, ведь другие форматы тоже могут быть «прозрачными»? — DesignLessons – все о дизайне

Содержание

Gif, Png или Jpg — форматы растровой графики для веба, их плюсы и минусы при использовании на сайте

Главная / Как устроены сайты

19 января 2021

Растровая графика для веба в лице Гиф, Джейпег и Пнг
Формат Gif — элементы дизайна и анимация для сайта
1. Gif-анимация и ее использование
2. Поддержка прозрачного фона
3. Какую графику лучше сохранять в Гиф?
Jpg — полноцветные изображения с малым весом
1. Плюсы и минусы Джейпег
2. Какие изображения лучше сохранять в формате Jpg (JPEG)?
Png — замена Gif и Jpeg, а так же прозрачный фон
1. Png8 и Png24 — альтернатива Gif и Jpeg
2. Png 32 — полноценная прозрачность с альфа каналом

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня я хочу поговорить про форматы растровой графики, которые было уместно применять для картинок выводимых на сайте, да и вообще.

Мы рассмотрим Gif, который популярен сейчас именно из-за поддержки им гиф анимации, Jpg, который очень хорошо подходит для вставки полноцветных фотографий и, конечно же, Png, который позволяет создавать картинки с прозрачным фоном и может служить отличной заменой упомянутых ранее форматов. Так же можете почитать про наполовину графический, а наполовину текстовый формат djvu.

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

Растровая графика для веба в лице Гиф, Джейпег и Пнг

Сейчас очень трудно представить веб-сайты и отдельных веб-страниц совсем без наличия на них каких-либо фотографий, значков или картинок. Кстати, первым браузером, который мог показывать графику, стал Mosaic (мозаика), появившийся практически одновременно с появлением языка гипертекстовой разметки Html.

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

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

Размер картинки у них определяется таким понятием, как разрешение, которое представляет из себя размер изображения в пикселах по горизонтали и вертикали, например, 300 на 200. Иногда, правда, говорят об общем количестве пикселей в картинке, например, производители фотоаппаратов (12 Мега пикселей и т.п.).

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

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

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

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

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

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

Формат Gif — элементы дизайна и анимация для сайта

На данный момент практически все браузеры поддерживают три основных формата растровой графики используемых для веба — Gif, Png и Jpg. Исторически первым появился Гиф и именно с помощью него в первых браузерах можно было добавлять и отображать картинки и медийную информацию, которая в первую очередь выражалась в так называемой Гиф анимации.

Аббревиатура Gif расшифровывается, как Graphics Interchange Format — формат графического обмена. Произносится как гиф, но разработчики стандарта считали, что правильно его называть джиф, но прижилось другое название в русской интерпретации.

Т.к. он был разработан давно, а скорость интернета у большинства пользователей в то время была, ох какой малой, то и при его создании делали основной упор на максимальное уменьшение размера результирующей картинки (писал об этом в статье про программу для просмотра изображений от FastStone или от Гугла под названием Picasa).

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

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

Gif-анимация и ее использование в интернете

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

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

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

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

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

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

Гиф поддерживает прозрачный фон (почти)

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

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

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

А так этот же маркер будет выглядеть при замене серого фона на прозрачный цвет при сохранении в Гиф:

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

Цвет MATE подмешивается в те области Гифа, где вам требуется создать плавные края с падением прозрачности, но все это будет хорошо смотреться только для того фона веб страницы, который совпадает с указанным вами MATE. А вот поверх другого оттенка эта картинка будет выглядеть очень не здорово.

Для какой веб-графики имеет смысл использовать формат Gif?

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

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

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

Кроме этого, данный алгоритм сжатия был в свое время запатентован, и именно поэтому началась усиленная работа над альтернативным Png 8, но на данный момент сроки патентов Gif уже истекли. ПНГ получился в итоге на голову лучше Гифа и продолжает набирать популярность среди вебмастеров.

Jpg (JPEG) — полноцветные изображения с малым весом

Jpg был разработан для сжатия и хранения полноцветных фотографий. Он является собственностью ассоциации американских фотографов, о чем, собственно, и говорит аббревиатура Jpeg — Joint Photographic Experts Group. Хотя сама же эта ассоциация говорит, что это открытый формат.

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

Плюсы и минусы Джейпег

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

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

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

Вот пример такого издевательства (всего несколько повторных сохранений в формате Джепег и на картинку без слез не взглянешь):

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

Какие изображения лучше сохранять в формате Jpg?

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

Смотрите, как неприглядно выгладит скриншот текста в формате JPEG (хотя при таком же и даже меньшем весе в формате PNG картинку вообще было бы не отличить от оригинала):

У Jpg (JPEG), как я уже упоминал, есть возможность задать качество получаемого изображения, регулируя степень его сжатия. При сохранении фото, на которых, например, много неба, следует ставить качество (степень сжатия) Jpeg близкое к максимальному (минимальное сжатие) во избежании заметных артефактов на этом самом небе.

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

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

Png — замена Gif и Jpeg, а так же прозрачный фон в Png32

Изначально Png разрабатывался как альтернатива проприетарного в то время Gif (к его разработке не подпускали никого со стороны). Расшифровывается аббревиатура как «portable network graphics», изначально он был заточен именно для применения в вебе. Этот формат растровой графики полностью открытый и его описание есть на сайте консорциума W3C.

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

Png8 и Png24 — полноценная замена Gif и Jpeg

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

Png 8 — восьмерка обозначает битность цвета и говорит о том, что при сохранении фотографии в Пнг 8 будет использоваться только 256 цветов по аналогии с уже описанным чуть выше Gif.

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

Png 24 — цифра 24 означает, что на каждый пиксел фото в этом формате выделяется три цветовых канала по 8 бит каждый (по 1 байту), тем самым реализуется полноцветное формирование изображения. Т.о. с помощью Пнг 24 вы сможете передавать цвета без искажений. Даже Jpg не может этого сделать на все сто процентов.

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

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

Например, тот же самый скриншот с текстом, который чуть выше вы могли видеть сохраненным в Jpeg (правда с низким качеством, чтобы подчеркнуть возможные артефакты) в Png будет выглядеть так:

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

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

Png 32 — полноценная прозрачность с альфа каналом

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

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

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

или иконка RSS ленты:

Наверное, понятно, что Png 32 просто незаменим и не имеет аналогов по предоставляемых возможностям. Кстати говоря, альфа канал можно использовать так же и в Пнг 8, но, к сожалению, не все редакторы растровой графики позволят вам это сделать. Фотошоп, например, этого делать не умеет, но зато Fireworks или Gimp умеют.

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

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Использую для заработка

Как сделать клипарт или картинку без фона?

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

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

2. Мы уже зашли в онлайн фотошоп поэтому нажимаем на » Загрузить изображение с компьютера» и загружаем изображение сюда

3. Теперь находим в левой колонке иконку ластик и нажимаем на неё. После этого закрашиваем ластиком всю картинку кроме того кто изображен на этой картинке. Рекомендую вначале закрашивать близко к самому герою картинки , а потом уже все остальное.

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

Вот что должно у нас получиться потом:

Теперь наш клип — арт готов. Осталось сохранить его теперь щелкаем по крестику над изображением в правом верхнем углу. На заданный вопрос отвечаем » Да» и после этого даем название клип — арту и выбираем формат PNG после этого нажимаем на » Да» и сохраняем наш клип- арт.

И вот что получилось у меня в итоге:

Но это ещё не все. Помните я говорила что я ещё научу вас менять фон? Так вот теперь идем в » Аватан» и загружаем там наш клип — арт. После этого в верхнем меню находим слово » Фильтры» там мы ищем » Замена фона». После того как мы нашли это нажимаем на иконку и полностью закрашиваем изображение кисточкой.

Снизу от иконки » Замена фона» есть 2 надписи » Объект» и » Фон» так вот переходим в » Фон». Потом нажимаем на » Выбрать фон» и выбираем фон. После того как мы выбрали фон нажимаем на » Применить» и вверху находим » Сохранить» нажимаем туда и сохраняем изображение. Теперь наша картинка готова я решила выбрать фон на космическую тематику и у меня получилась мадагаскарская ушастая сова на фоне космоса

Теперь нам пора прощаться надеюсь мой урок тебе пригодился, а результат обрадовал тебя!

Как сделать картинку без фона в powerpoint?

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

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

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

Инструмент для удаления фона изображений в PowerPoint

Как удалить фон изображения в PowerPoint?

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

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

Щелкните два раза по изображению (или выделите его и перейдите на

вкладку «Формат») и обратите внимание на левую часть этой панели.

Здесь расположен инструмент «Удаление фона».

Все что выделено пурпурным цветом будет удалено. Хм, это не совсем то, на что я рассчитывал!

Давайте активируем его и посмотрим что получилось. Видите яркую пурпурную область появившуюся на изображении? Так PowerPoint пометил те части рисунка, которые программе удалось распознать как фоновое изображение. Иными словами — все что помечено пурпурным цветом после того как инструмент «Удаление фона» будет применен к рисунку, будет удалено, вернее эти части рисунка станут прозрачными.

Настройка прозрачного фона для изображения

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

Растягиваем область очистки фона на все изображение

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

Теперь самое интересное: на панели инструментов активируйте инструмент «Пометить области для удаления»

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

Инструмент для пометки областей на изображении, которые нужно удалить или наоборот оставить

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

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

Ну вот, теперь отмечены все фоновые элементы картинки. Можно резать.

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

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

Нажатие на кнопку «Очистить изменения» вернет картинку к первоначальному виду

Почему не получается удалить фон у изображения?

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

Попытка удалить фоновое изображение у сложного рисунка в PowerPoint. Вроде бы и получилось, но огрехи видны.

Чтобы успешно удалить фон и картинки, она должна соответствовать ряду требований:

Изображение должно быть достаточно большим, чтоб не были видны пиксели
Смысловая часть изображения (то что мы оставляем) должна контрастировать с фоном (то что мы удаляем), желательно отделена от него обводкой или цветами.
Сложные полноцветные рисунки и фотографии очень слабо подходят для обрезания фона в PowerPoint. За счет того, что цвета смысловой части и фона в фотографиях слабо контрастны между собой, края обработанных таким образом изображений будут смазанными и не четкими.

Если приемлемого качества удаления или прозрачности фона не удалось добиться с первого раза — не мучайте себя и PowerPoint, скорее всего в этом случае проще воспользоваться Photoshop’ом или поискать другую иллюстрацию.

Как ещё можно избавиться от фона изображения?

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

Ставим картинку на задний план слайда.

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

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

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

Автор: Александр «Мэлфис К.» ФРОЛОВ, для сайта bussoft.ru

Далеко не всегда в процессе работы с презентацией в PowerPoint все идет гладко. Могут случаться непредвиденные трудности. К примеру, очень часто можно столкнуться с тем, что растрированное фото имеет белый фон, который крайне мешает. Например, заслоняет важные объекты. В таком случае нужно поработать над этим недостатком.

Читайте также: Как сделать картинку прозрачной в MS Word

Инструмент для стирания фона

В более ранних версиях Microsoft PowerPoint присутствовал специальный инструмент для стирания белого фона у фотографий. Функция позволяла пользователю нажать на область фона, которую следует стереть. Это было крайне удобно, однако исполнение хромало.

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

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

Процесс удаления фона картинки

Чтобы сделать прозрачным рисунок в PowerPoint, потребуется войти в специальный режим обрезки фона.

Для начала нужно выбрать требуемое изображение, нажав на него.
В шапке программы появится новый раздел «Работа с изображениями», а в нем – вкладка «Формат».
Здесь нам потребуется функция, которая находится в самом начале панели инструментов слева. Она так и называется – «Удалить фон».
Откроется специальный режим работы с изображением, а само фото подсветится фиолетовым цветом.
Фиолетовый цвет обозначает все, что будет вырезано. Само собой, нам нужно из этого убрать то, что должно остаться в итоге. Для этого нужно нажать на кнопку «Пометить области для сохранения».
Курсор изменится на карандаш, которым потребуется отмечать нужные для сохранения области фото. Представленный на фото пример является идеальным, поскольку здесь все границы секторов легко определяются системой. В таком случае достаточно делать легкие штрихи или нажатия внутри обрамленных границами секторов. Они будут окрашиваться в родной для изображения цвет. В данном случае – в белый.
В итоге надо добиться того, чтобы фиолетовым остался окрашен только ненужный фон.
На панели инструментов также есть и другие кнопки. «Пометить область для удаления» оказывает обратный эффект – этот карандаш отмечает выделенные секторы фиолетовым. А «Удалить пометку» снимает ранее нарисованные отметки. Также присутствует кнопка «Отменить все изменения», она при нажатии откатывает все внесенные правки до исходного варианта.
После того, как выделение нужных зон для сохранения будет завершено, нужно нажать на кнопку «Сохранить изменения».
Инструментарий закроется, и если все сделано верно, фото больше не будет обладать фоном.
На более сложных изображениях с разными цветами могут возникнуть трудности с выделением тех или иных зон. В таких случаях следует отмечать длинными штрихами «Пометить области для сохранения» (или наоборот) наиболее проблемные зоны. Так фон будет удален не идеально, но хоть что-то.

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

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

Альтернативный способ

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

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

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

Заключение

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

Мы рады, что смогли помочь Вам в решении проблемы.

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

Помогла ли вам эта статья?

Да Нет

Зеленый фон, или Несколько ответов про хромакей

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

Почему хромакей – это зеленый фон?

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

Обязательно ли использовать зеленый фон?

Хромакейные фоны бывают разных цветов. Но в 90% случаев используют зеленый. Исключение, пожалуй, составляют задачи, при которых необходимо снять что-то по мотивам Питера Пена, когда он летает в сказочной стране в зеленом костюме. При таких условиях вам придется выбрать другой цвет фона для хромакея. Очевидно почему.

Следующие по популярности для съемки видео хромакеи синего и голубого оттенков, третий – ярко-рыжий.

Фотографы нередко для дальнейшей замены фона используют и обычный белый фон. Но фотографам все-таки проще – они могут над обработкой одного кадра посидеть подольше, не говоря уже о том, что даже блондинку в белом платье можно снять на белом фоне так, чтобы было легко разделить задний план от объекта съемки.

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

Любой зеленый фон – хромакей?

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

Надо ли подсвечивать хромакей?

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

Какой материал лучше?

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

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

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

Третий вариант – нетканый хромакей фон. Его главное достоинство – цена. Он не мятый, так как поставляется на картонной трубе (в магазине Фотогора мы не продаем нетканые фоны без труб именно из-за того, что их нельзя потом разглаживать).

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

У меня получаются зеленые рефлексы на лице, что делать?

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

Практика показала, что расстояние от фона до модели должно быть не меньше метра.

Какого размера нужен зеленый фон для технологии хромакей?

Всё просто считается – стандартный размер видео где-то 2:3. Если снимать видео горизонтальное, то есть когда ширина в 1,5 раза больше высоты, когда вы снимаете поясной портрет или так называемую говорящую голову без ног, то развер будет около метра плюс поля (оставить места для полей). Вам нужен фон 1,6 метра шириной минимум, а лучше 2 метра. Для полноростовой – 2,7–3 метра.

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

Удачи в нелегком труде и хороших эмоций в видеоблогах и фотографиях.

Как называется этот эффект и как я могу опубликовать фотографии, чтобы получить этот эффект?

Для бесплатной программы, которая преобразует любое изображение в многолистовое полутоновое изображение, см. Комментарий в конце.

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

Эффект представляет собой вариант «полутона».
Базовый процесс довольно хорошо объяснен здесь Создание полутоновых эффектов — он кратко объясняет свой «старый» метод и то, как это сделать быстрее в Photoshop CS3. GIMP будет иметь аналогичную встроенную возможность.

Сверху «старый путь»:

Раньше процесс создания полутона занимал много времени. Во-первых, я открывал изображение в Photoshop, преобразовывал его в оттенки серого, применял эффект полутонов, открывал его в Illustrator, отслеживал его, и если где-то не запутался, я использовал полутон в Illustrator.

С CS3 и выше

Поместите фотографию в документ, выбрав «Файл»> «Поместить» и выберите свою фотографию.
Как только фотография окажется в документе, вставьте ее, нажав кнопку «Вставить» на панели управления.
Затем перейдите в «Правка»> «Редактировать цвета»> «Преобразовать в оттенки серого».
Теперь вы можете применить те же настройки для эффекта полутонов и векторной трассировки, что и раньше. Опять же, вы всегда можете вернуться и изменить максимальный радиус, если точки слишком маленькие или слишком большие. Теперь по-настоящему легко оживить полутон цветом!

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

Расширение — Правый глаз (левый, как мы его видим).

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

Из Википедии (ссылка выше)

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

Rasterbator — бесплатная программа преобразования полутонов. — отлично.

Их сайт

Rasterbator — это бесплатная программа преобразования растров, которая выводит полутоновую версию входного изображения. Пользователь может контролировать количество листов в выходном изображении. размер точки и немного больше. Версия 1.21? доступно здесь

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

Предположительно, это ссылка на онлайн-версию, но я получаю «разрешение отказано».
Онлайн растербатор

Относящиеся «

Википедия плиточной печати

Блок-постеры (

Более быстрый плакат

Как вставить и отредактировать картинку в PowerPoint

Как добавить картинку в PowerPoint?

Как всегда, способов сделать это несколько, вы можете:

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

Как сделать скриншот в PowerPoint?

Здесь же, в группе «Изображения» есть и очень удобный инструмент для создания скриншотов – снимков экрана, он называется «Снимок». Откройте любое приложение, например, MS Word, затем переключитесь назад в PowerPoint, раскройте инструмент «Снимок» и увидите «фотографию» только что открытого Word. Теперь щелкните на неё и вуаля – она появится на вашем слайде.
Скриншот делается для любого другого окна или приложения открытого под текущим слайдшоу PowerPoint.

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

Видно что в окне просмотра автоматически сформированы скриншоты всех открытых в этот момент окон

Как повернуть или уменьшить/увеличить картинку в PowerPoint?

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

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

Все просто – выделил и перетаскивай в нужную сторону

Как обрезать картинку в PowerPoint?

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

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

Обрезка изображений в PowerPoint

Как редактировать изображение в PowerPoint?

На той же панели «Формат», слева, есть группа «Изменение». Здесь содержится набор интересных (хотя и весьма спорных) инструментов, которые помогут вам украсить вашу картинку или немного улучшить её качество.

Коррекция – поможет выправить баланс яркости, немного затемнить слишком светлый рисунок или осветлить темный.
Цвет – позволит выровнять цвета рисунка или даже полностью её перекрасить. В этой же группе (если развернуть её нажатием на правый уголок) есть инструмент, который можно назвать действительно полезным: «установить прозрачный цвет». Выбрав его и щелкнув на любом участке вашего изображения с однородным цветом, вы сделаете этот участок прозрачным. Элементы других цветов не пострадают.
Художественные эффекты – имитирует некоторые техники живописи, преображая вашу картинку до неузнаваемости. Собственно, «художественный эффект» этой группы инструментов весьма посредственный и применим скорее для развлечения.

Самое главное, что есть в группе «Изменения», это инструмент «Восстановить рисунок». Одно нажатие на него уберет все «красивости» с вашего изображение и вернет его к исходному виду. Будьте внимательны – инструмент удаляет только эффекты, если вы использовали обрезку, изображение восстановлено не будет.

Редактирование изображений в Powerpoint – для примера оригинал и его копия после простой цветовой коррекции

Как уменьшить размер презентации PowerPoint?

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

Пройдите по пути: «Файл» -> «Параметры» -> «Дополнительно», в открывшемся окне найдите строку «Удалить данные о редактировании» и поставьте галочку. Ниже этой строки в пункте «Качество вывода по умолчанию» поставьте 96 пикселей на дюйм. Примените изменения.

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

Защищаем текст и картинки на сайте от копирования

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

Содержание:

Защищаем текст от копирования

Добавляем скрипт, не позволяющий выделять и копировать текст
Предотвращаем копирование в CSS
Упоминаем себя в тексте
Создаём ссылочный анкор-лист
Ссылки на свой сайт
Ускоряем индексацию с помощью социальных сигналов
Пингуем веб-страницы
Кросспостинг
Указываем авторство в Google+
Оригинальные тексты «Яндекса»

Защищаем изображения от копирования

Отключение функции сохранения картинок
Нанесение «водяных знаков»

2.1. Image Watermark

2.2. NextGEN Gallery

2.3. Visual Watermark

Поиск ваших изображений на других сайтах

Вместо заключения

Защищаем текст от копирования

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

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

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

1. Добавляем скрипт, не позволяющий выделять и копировать текст

Этот метод достаточно простой. Всё, что от вас требуется – добавить специальный фрагмент js-кода в код страниц с вашими авторскими статьями. Выглядит он так:

<script type=»text/javascript»>

document.ondragstart = noselect;

document.onselectstart = noselect;

document.oncontextmenu = noselect;

function noselect() {return false;}

</script>

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

Подобный метод борьбы с копированием – не панацея от всех бед, он имеет и явные недостатки:

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

2. Предотвращаем копирование в CSS

Альтернатива предыдущему методу – присвоить контейнеру, в котором заключен ваш авторский текст, класс noselect. Сделать это можно с помощью следующего фрагмента кода:

<style type=»text/css»>

.noselect {

-moz-user-select: none;

-webkit-user-select: none;

-ms-user-select: none;

-o-user-select: none;

user-select: none;

}

</style>

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

3. Упоминаем себя в тексте

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

4. Создаём ссылочный анкор-лист

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

5. Ссылки на свой сайт

Этот метод эффективен для защиты материала от автоматического копирования всевозможными роботами. Скопированный текст со ссылками на ваш сайт позволит поисковикам определить в качестве первоисточника именно его. Одна из разновидностей этого способа защиты – перелинковка ресурса (проставление в статьях ссылок на другие статьи с того же сайта).

6. Ускоряем индексацию с помощью социальных сигналов

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

Такая защита фактически идеальна для защиты от копирования описаний товаров на страницах интернет-магазинов. Безусловный лидер в скорости индексирования – Twitter.

7. Пингуем веб-страницы

Пингование – один из методов значительно уменьшить время индексации веб-страницы. Суть метода заключается в моментальном уведомлении поисковиков о публикации нового текста.

По схожему принципу работает инструмент «проверка URL» в панели вебмастера «Яндекс». Однако он менее эффективен в сравнении со специальными «пингаторами». Один из лучших сервисов в этой категории – Feed Burner PingShot, сообщающий Google о выходе новых статей в RSS мгновенно. Правда, с его настройкой придётся повозиться.

Отметим, что для популярных CMS (WordPress, Joomla!, Drupal и т. д.) существует множество специальных плагинов или модулей, пингующих новые материалы.

8. Кросспостинг

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

9. Указываем авторство в Google+

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

Если вы планируете применить этот способ защиты, помните о следующих нюансах:

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

10. Оригинальные тексты «Яндекса»

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

Защищаем изображения от копирования

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

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

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

Теперь – подробней.

1. Отключение функции сохранения картинок

Для сохранения картинки с сайта подавляющее большинство пользователей кликают на неё правой кнопкой мышки и выбирают в выпадающем меню пункт «Сохранить» или копируют ссылку на неё для открытия в другом окне. Следовательно, если при нажатии на изображение правой кнопкой мышки контекстное меню не появится, 95% пользователей не смогут сохранить картинку.

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

Итак, отключить показ меню для всех графических файлов на вашем сайте можно с помощью плагина NoRightClickImagesPlugin или его аналогов.

Плагин Photo Protect работает по другому принципу. Он защищает ваши изображения «скрытым щитом». Этот «щит» незаметен, при этом он одинаково хорошо функционирует и на ПК, и на мобильных гаджетах. Контекстное меню при клике на картинке появится, однако сохранить её пользователь не сможет: вместо фотографии на жестком диске появится пустой файл. Сохранение защищенного изображения приводит к такому результату:

2. Нанесение «водяных знаков»

Добавление на фото видимых «водяных знаков» – продуктивный и простой метод борьбы с любителями использовать авторские изображения. Правильно проставленные водяные знаки непросто удалить со снимка.

Что именно указывать на водяном знаке – решать вам. Например, вы можете нанести на картинку краткую информацию с указанием авторства. Также это могут быть ваши фамилия и имя, логотип или адрес веб-ресурса. Жителям США в этом плане проще: авторские права на изображения с надписями типа © 2016 <Name Surname > там охраняются законодательством. Удаление же подобного водяного знака чревато серьёзным штрафом – по $2500 за каждую украденную картинку.

2.1. Image Watermark

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

Для начала работы Image Watermark нужно установить и активировать. Далее откройте меню «Параметры» и выберите пункт Watermark. Будут доступны разные варианты размера и размещения водяных знаков. Выберите оптимальный вариант.

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

Минусов у Image Watermark немного. Главный из них – плагин может генерировать водяные знаки только на основании уже существующих изображений. Это значит, что вам придётся самостоятельно создавать в Photoshop водяной знак с прозрачным фоном, сохранять его в формате PNG и загружать в программу.

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

2.2. NextGEN Gallery

Ещё один хороший плагин для нанесения водяных знаков – NextGEN Gallery. Лучшее свидетельство его популярности – 14 миллионов скачиваний: намного больше, чем у аналогичных программ. NextGEN Gallery может наносить на картинки и текстовые, и графические пометки и позволяет выбрать для них любое местоположение.

К сожалению, как и Image Watermark, этот плагин имеет существенный недостаток: откатить результат обработки не получится. При предварительном же просмотре водяные знаки часто выглядят более крупными, чем потом получаются. Помимо этого, NextGEN Gallery работает лишь с галереями снимков.

2.3. Visual Watermark

Считаете плагины для работы с водяными знаками не слишком удобными? Тогда можете установить на ПК приложение Visual Watermark. В этой программе есть десятки шаблонов водяных знаков (и текстовые, и графика), поддерживаются сотни разных шрифтов. Вы можете задавать какое угодно положение водяных знаков, просто перетаскивая их в желаемое место и даже поворачивая. Доступна регулировка прозрачности отпечатков. Программа может менять размеры картинок и переименовывать их в одиночном или пакетном режимах.

3. Поиск ваших изображений на других сайтах

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

Как узнать, на каких сайтах размещены ваши фото? Если изображений немного, можно воспользоваться поиском картинок в «Гугле». Перетащите снимок в строку поиска, и поисковик покажет все сайты, на которых он используется.

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

PixID имеет собственную базу данных картинок (как у «Гугла»), а для поиска в нём используется технология распознавания фотографий. При этом данный сервис может находить сотни картинок одновременно.

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

Вместо заключения

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

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

Укажи при регистрации промокод: БЛОГ и получи 15 бесплатных лидов для теста.
Расскажи мне о результате и я расскажу о твоей компании в нашем блоге и соцсетях!

Пиши нам в соцсетях:

С любовью,

Команда Callbackhunter

Вконтакте

Facebook

Twitter

Google+

Прозрачность

— Какой термин для изображения, которое было отслежено и сделано прозрачным?

Как уже отмечалось, TIFF остается TIFF независимо от содержимого. TIFF — это формат файла ( T с возрастом I mage F ile F ormat) в отличие от JPEG, PNG, PSD и т. Д.

Многослойный будет относиться к файлу, который имеет более одного слоя, в отличие от «плоского» файла со всеми объединенными элементами. Обычно это используется для отделения различных элементов от фона и / или друг от друга, чтобы упростить перемещение и редактирование этих элементов.TIFF может быть многослойным.

Трассировка обычно означает, что растровое изображение (например, фотография или рисунок) было преобразовано в векторные пути. Это может быть автоматизировано (например, в Adobe Illustrator есть эта функция) или может быть выполнено кем-то, нарисовав от руки пути для воспроизведения изображения. Трассированное изображение обычно сохраняется в формате, отличном от TIFF (например, PDF или SVG), поскольку файлы TIFF больше подходят для растровых изображений.

Сейчас. Я думаю, что , о котором вы говорите, , — это процесс, с помощью которого объект в изображении изолирован от его фона, а затем сохраняется с прозрачным фоном, чтобы он аккуратно сидел над другими элементами в композиции.Файлы TIFF поддерживают прозрачность, поэтому они подходят для этой цели. Есть разные способы добиться этого, один из которых — просто удалить ненужные области с помощью ластика или с помощью «волшебной палочки» (или подобного), чтобы выбрать фон и удалить его. Другой (и несколько более профессиональный) способ — нарисовать Clipping Path вокруг той части изображения, которая вам нужна, которая затем используется как маска при сохранении файла. Опять же, TIFF поддерживают эту функцию.

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

Фоновый слой в Photoshop CS5

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

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

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

Панель «Слои», показывающая изображение на фоновом слое.

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

Плагин шорткодов, действий и фильтров: ошибка шорткода [ ads-basics-middle-2 ]

Правило 1. Мы не можем перемещать содержимое фонового слоя

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

Выбор инструмента «Перемещение» на панели «Инструменты».

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

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

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

Значок замка сообщает нам, что некоторые аспекты этого слоя заблокированы.

Правило 2: Отсутствие прозрачных пикселей

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

Во-первых, мне нужно выделить область внутри рамки, и поскольку она залита сплошным белым цветом, я воспользуюсь инструментом Magic Wand Tool . В Photoshop CS2 и более ранних версиях мы можем выбрать волшебную палочку, просто щелкнув ее значок на панели инструментов. В Photoshop CS3 и выше (здесь я использую Photoshop CS5) Волшебная палочка скрывается за инструментом быстрого выбора, поэтому нажмите на инструмент быстрого выбора и удерживайте кнопку мыши в течение секунды или двух, пока не появится всплывающее меню. появляется, показывая другой инструмент (ы), вложенный за ним, затем выберите инструмент Magic Wand из списка:

Выбор инструмента «Волшебная палочка».

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

Теперь выделена белая область внутри рамки.

Чтобы удалить область внутри кадра, я нажимаю Backspace (Win) / Delete (Mac) на клавиатуре, но вместо удаления области и замены ее прозрачностью, как мы ожидаем от обычного слоя , Photoshop загадочным образом открывает диалоговое окно Заливка , чтобы я мог выбрать другой цвет для заливки области:

Вместо удаления области Photoshop открывает диалоговое окно «Заливка».

Я нажму «Отмена», чтобы закрыть диалоговое окно «Заливка», поскольку это совсем не то, что я хотел сделать. Я хотел удалить белую область внутри рамки, а не заливать ее другим цветом. Может Фотошоп просто запутался, так что попробую что-нибудь другое. Я перейду к меню Edit в строке меню в верхней части экрана и выберу Cut :

Выбор «Вырезать» в меню «Правка».

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

Белая область внутри рамки теперь залита черным.

Сказать что? Откуда взялся черный? Как оказалось, Photoshop заполнил эту область черным цветом, потому что, если мы посмотрим на мои образцы цвета переднего плана и фона в нижней части панели инструментов, мы увидим, что мой цвет фона (нижний правый образец) в настоящее время установлен на черный, и Photoshop залил область цветом фона.Если бы мой фоновый цвет был установлен на фиолетовый, он бы залил область фиолетовым цветом. Просто он был установлен на черный цвет:

Образцы цвета переднего плана (вверху слева) и фона (внизу справа).

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

Правило 3. Мы не можем переместить фоновый слой над другим слоем

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

Изображение, которое будет помещено в рамку.

Изображение в настоящее время открыто в собственном окне документа, поэтому я быстро скопирую его в документ фоторамки, нажав Ctrl + A (Win) / Command + A (Mac), чтобы выделить всю фотографию, затем Я нажму Ctrl + C (Win) / Command + C (Mac), чтобы скопировать изображение в буфер обмена. Я переключаюсь на документ фоторамки, затем нажимаю Ctrl + V (Win) / Command + V (Mac), чтобы вставить изображение в документ.Photoshop помещает изображение на новый слой с именем «Слой 1» над фоторамкой на фоновом слое:

Вторая фотография размещается на отдельном слое над фоновым слоем.

И мы видим новую фотографию, появившуюся перед рамкой в окне документа:

Второе изображение появится перед цифровой фоторамкой.

Для того, чтобы моя вторая фотография появилась внутри кадра, мне нужно изменить порядок слоев на панели «Слои», чтобы рамка отображалась над фотографией.Обычно переместить один слой над другим так же просто, как щелкнуть по слою, который нам нужно переместить, и перетащить его над другим слоем, но это не тот случай, когда слой, который нам нужно переместить, является фоновым слоем. Когда я нажимаю на фоновый слой и пытаюсь перетащить его над фотографией на слое 1, Photoshop отображает значок круга с диагональной линией, проходящей через него (международный символ «не произойдет»), давая мне понять, что по какой-то причине это не так. собираюсь позволить мне сделать это:

Круг с диагональной линией, проходящей через него, говорит мне, что я не могу перетащить фоновый слой над слоем 1.

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

Правило 4: нельзя перемещать другие слои ниже фонового слоя

Хорошо, мы не можем переместить фоновый слой над другим слоем. Что, если мы попробуем переместить другой слой ниже фонового слоя? Я нажимаю на слой 1 и пытаюсь перетащить его ниже фонового слоя, но это тоже не работает.Я получаю тот же маленький символ охотников за привидениями, говорящий мне, что Photoshop не позволяет мне это сделать:

Тот же значок «не произойдет» появляется при попытке перетащить слой 1 ниже фонового слоя.

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

Простое решение

Давайте быстро подведем итоги. Мы узнали, что Photoshop не позволяет нам перемещать содержимое фонового слоя с помощью инструмента «Перемещение», потому что слой зафиксирован на месте.Мы узнали, что фоновый слой не поддерживает прозрачность, поэтому удалить что-либо на слое невозможно. И мы узнали, что фоновый слой всегда должен оставаться нижним слоем на панели «Слои». Мы не можем перетащить его над другими слоями, и мы не можем перетащить другие слои под ним.

Поскольку основная цель фонового слоя — быть фоном документа, каждое из этих правил имеет смысл. Тем не менее, как и в случае с большинством правил, есть способы их обойти, когда нам нужно их нарушить.В этом случае есть простой способ обойти их все сразу! Все, что нам нужно сделать, это переименовать фоновый слой во что-нибудь, кроме фона! Чтобы переименовать фоновый слой, вы можете перейти к меню Layer вверху экрана, выбрать New , а затем выбрать Layer From Background :

Перейдите в меню «Слой»> «Создать»> «Слой из фона».

Более быстрый способ — просто дважды щелкнуть прямо на слове Фон на панели «Слои»:

Дважды щелкните имя фонового слоя.

В любом случае открывается диалоговое окно New Layer , в котором мы можем ввести новое имя для слоя. Имя по умолчанию «Слой 0» работает нормально. Подойдет любое имя, кроме Background, поэтому, если у вас нет чего-то особенного, для которого вы хотите назвать слой, просто нажмите OK, чтобы принять Layer 0 в качестве нового имени и закрыть диалоговое окно:

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

СОВЕТ: Чтобы еще быстрее переименовать фоновый слой, просто удерживайте нажатой клавишу Alt (Win) / Option (Mac) и дважды щелкните слово Background .Photoshop мгновенно переименует слой «Слой 0», полностью минуя диалоговое окно «Новый слой».

Теперь мы видим, что имя фонового слоя было изменено на Layer 0:

Фоновый слой был переименован в Слой 0.

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

Например, мне все еще нужно переместить фоторамку над изображением на слое 1.Теперь, когда рамки больше нет на фоновом слое, это просто! Я могу просто щелкнуть слой 0 на панели слоев и перетащить его вверх, пока над слоем 1 не появится тонкая полоса выделения:

Перетаскивание слоя 0 над слоем 1.

Я отпущу кнопку мыши, и Photoshop поместит слой 0 над слоем 1, как мне и нужно:

Слой 0 теперь появляется над слоем 1, что было бы невозможно, если бы слой 0 оставался фоновым.

Ранее мы видели, что мне не удалось удалить белую область внутри кадра, пока изображение находилось на фоновом слое, но теперь, когда я переименовал его в слой 0, это больше не проблема.Я щелкну внутри области с помощью инструмента Magic Wand Tool, чтобы мгновенно выделить ее, как и раньше:

Снова выделяется белая область внутри рамки.

Затем я нажимаю Backspace (Win) / Delete (Mac) на моей клавиатуре, и на этот раз вместо того, чтобы получать диалоговое окно «Заливка», Photoshop на самом деле делает то, что я ожидал, удаляя область из слой и открывая фотографию за ним:

Область внутри кадра наконец-то была удалена, открыв фотографию внизу.

Я нажимаю Ctrl + D (Win) / Command + D (Mac) на клавиатуре, чтобы отменить выделение области внутри рамки и удалить контур выделения. Затем, чтобы быстро закончить работу, я нажимаю на Layer 1 на панели Layers, чтобы выбрать его и сделать активным слоем:

Выбор уровня 1.

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

Перетаскивание фотографии на место внутри рамки.

Используйте прозрачные PNG в своих проектах печати — Дизайн как профессиональный

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

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

Программ: Photoshop и InDesign
Уровень сложности: Средний

Шаг 1

Откройте изображение, из которого вы хотите вырезать фон, в Photoshop.Затем дважды щелкните слой и нажмите OK, чтобы разблокировать его. Убедитесь, что это высокое разрешение (300 точек на дюйм) для проектов печати.

Шаг 2

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

Шаг 3

Затем перейдите в меню «Файл»> «Сохранить как» и убедитесь, что в раскрывающемся списке выбран PNG.Обратите внимание, что это работает только для файлов RGB. Поскольку вы можете преобразовать все элементы вашего проекта печати в CMYK при сохранении PDF-файла в InDesign, вы можете использовать этот файл RGB для любого проекта печати или веб-проекта. Дайте файлу PNG имя, выберите место для его сохранения и нажмите «Сохранить». Во всплывающем окне параметров PNG выберите «Нет» и нажмите «ОК». Вы успешно создали прозрачный файл для использования в проектах печати.

Шаг 4

Теперь давайте откроем InDesign. Создайте новый документ желаемого размера.Моя — это образец обложки альбома, так что она имеет квадрат 4,724 дюйма с отступом 1/8 дюйма.

Шаг 5

Добавьте фоновое изображение, щелкнув и перетащив его из папки в InDesign или CTRL + D (Option + D на Mac), чтобы поместить. Затем переместите фоновое изображение, пока не будете довольны размещением. Вы также можете изменить размер изображения, удерживая CTRL + Shift (Option + Shift на Mac) и щелкнув и перетащив угол изображения. Это ограничивает пропорции при изменении размера изображения.Убедитесь, что ваше изображение доходит до красных линий под обрез.

Шаг 6

Вставьте прозрачное изображение, щелкнув и перетащив его из папки в InDesign или CTRL + D (Option + D на Mac) для размещения. Следуйте инструкциям выше, чтобы изменить размер и разместить прозрачное изображение. На изображении не должно быть цвета фона. Если да, убедитесь, что вы сохранили файл в формате PNG. Обратите внимание: я бы очистил это изображение с помощью некоторой цветокоррекции, чтобы лучше соответствовать фоновому изображению.Это просто, чтобы показать вам, как прозрачное изображение из Photoshop можно быстро добавить в проект печати в InDesign.

Заключение / окончательное изображение

Теперь, когда вы вставили прозрачное изображение в формате PNG, вы можете продолжить работу над своим документом. Добавьте текст, другие изображения и т. Д. Я очистил файл PNG в Photoshop, добавив некоторые коррекции цвета. Я также использовал инструмент «Размытие» по внешнему краю всего изображения, чтобы смягчить резкие линии. Благодаря этому окончательный PNG лучше сочетается с моим фоновым изображением, когда я возвращаю его в InDesign.

Pro Совет: Сохраняйте согласованность дизайна и используйте цвета фона и прозрачные изображения для текста.

Логотип с прозрачным фоном: что это такое и как его создать

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

Создатель логотипа Turbologo

Создайте свой собственный логотип с помощью средства создания логотипа Turbologo. Это займет менее 5 минут и никаких дизайнерских навыков не требуется.
Нанесение логотипа с прозрачным фоном
Чаще всего такие логотипы встречаются на сайтах компаний, страницах в социальных сетях, блогах о товарах или рекламных постах.
Основная причина, по которой компании выбирают логотипы с прозрачным фоном, заключается в их «гибкости» — такие логотипы легко вписываются в дизайн любого веб-сайта, красиво сочетаются с любой цветовой палитрой, используемой на веб-странице, и вполне гармонируют с любыми другими элементами.
В последнее время логотипы все чаще используются в качестве водяных знаков (также встречаются на купюрах любой валюты мира). Это позволяет нам делать продукцию уникальной и предотвращать подделку, что дает нам еще одно преимущество — их можно использовать как юридический гарант качества и подлинности.
Все свадебные фотографы добавляют свои логотипы к фотографиям клиентов, что, по сути, является бесплатной рекламой. Молодожены обязательно разошлют снимки всем знакомым, чтобы они заметили бренд создателя подобных фотографических шедевров.И это также распространит информацию в социальных сетях, где часто бывает непросто понять, кто является автором изображения и где его можно найти.
Форматы изображений для логотипов с прозрачным фоном
Однако у логотипов есть одна неприятная особенность. Не все современные форматы изображений подходят для создания и сохранения готовых результатов. В этом разделе мы расскажем об оптимальных.
PNG
Это, наверное, самый популярный вариант, который по сути является форматом растрового изображения, позволяющим сохранять сжатые изображения с минимальными потерями качества.Он был изобретен в конце ХХ века, а именно в 1996 году, как популярная тогда неофициальная (пиратская) версия GIF.
Вероятно, он стал популярным благодаря удобству и широкому спектру возможностей, которыми он предоставлял редакторы изображений. Еще одно преимущество: PNG поддерживается всеми современными программами для редактирования (Adobe Photoshop, Adobe Lightroom, Illustrator и т. Д.).
Более 80% современных логотипов были созданы в этом формате и использовались на веб-страницах многих успешных предприятий.
GIF
Об этом формате здесь уже упоминалось чуть выше. Старый GIF был вытеснен PNG, но все еще иногда используется. Вероятно, наиболее популярное его использование — когда вы публикуете мемы в социальной сети. Формат был разработан еще в 1987 году. Его нельзя назвать самым удобным форматом логотипа, но есть несколько способов сделать фон прозрачным с его помощью.
Например, сделайте один из 256 цветов прозрачным, чтобы пользователи видели фон бумаги, на которой он напечатан, или веб-страницы, на которой он опубликован.Но есть и плохая сторона: невозможно установить уровень прозрачности в GIF, поэтому он редко используется только крошечной частью современного бизнеса
SVG
В векторном формате SVG есть одна функция, которая позволяет установить уровень прозрачность фона с использованием полной непрозрачности (в основном, изменение чисел, которые, возможно, интересны программистам, но не обычным пользователям). Формат был создан на основе XML (расширяемого языка разметки), что упрощает размещение логотипа в этом формате на веб-сайте.
Отметим, что SVG чаще всего используют настоящие профессионалы, дизайнеры и программисты. Если вы обычный пользователь с базовыми знаниями о том, как работает компьютер (как и большинство из нас, верно?), То для вас существуют менее сложные форматы.
Несколько шагов к прозрачности
Обычно все логотипы создаются с прозрачным фоном (при заказе у фрилансера или профессионального графического дизайнера), если вы заранее не согласились заполнить его каким-либо цветом.А если получился цветной логотип, не расстраивайтесь сразу. Хотите сделать его прозрачным? Добро пожаловать в знаменитый фотошоп! В Интернете есть множество видеороликов, в которых рассказывается, как обрезать фон и сохранить результат в одном из форматов, о которых мы упоминали выше.

Если вам так повезло, что у вас есть файл PSD (Adobe Photoshop), все намного проще. Откройте файл, отметьте все слои, кроме фона, нажав CTRL / CMD. Затем нажмите CTRL + C, создайте новый проект и нажмите CTRL + V.Теперь у вас есть прозрачный логотип, который вы хотели. А при желании вы можете редактировать цветовую палитру и добавлять недостающие элементы — YouTube с большим количеством обучающих видео к вашим услугам.
Что делать, если у меня нет Photoshop или другого редактора?
Вы хотите создать логотип и понимать, насколько он важен и необходим. Но, к сожалению, вы не пользуетесь никаким графическим редактором и не хотите платить фрилансерам за такую услугу? Хотите сделать это сами, но не знаете как?

Есть онлайн-сервисы по созданию логотипов, которые могут вам помочь. Вы научитесь ими пользоваться за считанные минуты и получите отличный результат по смехотворно низкой цене. Одним из таких сервисов является Turbologo, онлайн-конструктор логотипов. Множество изображений, текстовых шаблонов и символов станут отличными помощниками и сэкономят большую часть вашего времени, когда вы создадите свой собственный потрясающий логотип.Ваш логотип также можно легко сохранить и сохранить на вашем компьютере в любом формате, который вам нужен.
Итак, вот как легко создать логотип с прозрачным фоном для вашего интернет-магазина, рекламной кампании или печатных плакатов для стартапа. И, наконец, желаем вам всегда добиваться успеха, чтобы ваша компания радовалась им по максимуму.
Я продуктовый и графический дизайнер с 10-летним стажем. Пишем о брендинге, создании логотипов и бизнесе.
3 способа сделать фон логотипа прозрачным: пошаговое руководство
Логотип с прозрачным фоном может иметь решающее значение для создания дизайна и рекламы профессионального уровня.Это дает вам больше вариантов того, где вы можете разместить свой логотип, и обеспечивает безупречный вид конечному продукту. Хотя Photoshop является отличным инструментом для этого, есть много других способов сделать это, независимо от того, являетесь вы дизайнером или нет!
Прозрачные фоны для непрофессионалов:
1) LunaPic
Лучший бесплатный инструмент, который я нашел, — это LunaPic. LunaPic работает очень просто: вы загружаете свое изображение, нажимая кнопку обзора, а затем выбираете свою фотографию.
Эффект «Прозрачный фон» можно найти в меню редактирования на панели инструментов.
Затем вы щелкаете по цвету фона — в данном случае в любом месте белого. И ваше изображение теперь прозрачное! Вверху есть полоса регулировки, если вам кажется, что фон должен быть виден более или менее. Вы можете легко загрузить его и использовать различными способами.
2) Магия обрезки
Еще один хороший вариант — Clipping Magic. К сожалению, это не бесплатно, и для загрузки изображения вам потребуется подписка, но это относительно недорого.Хотя LunaPic хорош для удаления сплошного цветного фона, если по какой-то причине фон не сплошной, Clipping Magic — еще один хороший выбор. Вот как это работает:
Для начала вы загружаете свою фотографию.
Затем с помощью инструмента «Красная и зеленая кисть» отметьте, какие части изображения оставить, а от каких избавиться.
Не нужно рисовать все, достаточно лишь желтых линий вокруг изображения. Вы также можете изменить размер кисти внизу страницы, если у вашего логотипа тонкие линии.
3) PicMonkey
PicMonkey — еще один отличный ресурс, для которого также требуется подписка. Существует 7-дневная бесплатная пробная версия, но после этого вы должны заплатить, чтобы пользоваться услугой. PicMonkey очень полезен, если вы собираетесь редактировать не только прозрачный фон. Для этого вы начинаете с нажатия «дизайн» на главной странице.
Когда вы открываете свой дизайн, вы хотите изменить размер холста в соответствии с размером вашего изображения. В этом случае мое изображение было 4349 пикселей на 2852 пикселей.Параметр «изменить размер» находится внизу на панели основных эффектов. Убедитесь, что вы сняли флажок «Сохранять пропорции», если ваше изображение не квадратное.
В верхней части панели «Базовый эффект» вы можете сделать фон вашего изображения прозрачным.
Теперь загрузите свое изображение, щелкнув панель «Наложение» и выбрав «Добавить свое». Когда ваша фотография загрузится, появится инструмент наложения. Вам нужно будет нажать на ластик, а затем вы можете начать стирать фон вашего изображения.

Размер ластика регулируется, что помогает стирать мелкие линии. Когда вы закончите, просто сохраните изображение, чтобы использовать его в любое время!
Использование Photoshop для создания прозрачного фона
Если вы, , являетесь дизайнером или используете Adobe Photoshop или Illustrator, есть несколько простых способов сделать фон вашего логотипа прозрачным.
В фотошопе очень легко удалить фон фотографии. Открыв изображение в Photoshop, убедитесь, что оно разблокировано, чтобы его можно было редактировать.Затем выберите инструмент Magic Wand.
Затем щелкните в любом месте фона, чтобы выбрать его. После этого вокруг всего, что выбрано, появится движущаяся пунктирная линия.

Инструмент «Волшебная палочка» великолепен, но не всегда выделяет все пустое пространство. Чтобы убедиться, что вы будете стирать весь фон, я предпочитаю щелкнуть раскрывающееся меню «Выбрать» и выбрать «Подобный». Это обеспечит выделение всего фона.
После того, как весь фон выбран, просто нажмите «Удалить» на клавиатуре, и фон исчезнет!
Чтобы отменить выбор изображения, используйте сочетание клавиш -D и затем вы можете сохранить логотип как PNG для сохранения прозрачности.У JPEG не может быть прозрачного фона, как бы вы ни старались.
Создание векторного логотипа в Illustrator
Хотя PNG прекрасны, они основаны на пикселях, а не на векторах. Это означает, что при увеличении масштаба вы потеряете четкость и изображение будет нечетким. Векторное изображение можно масштабировать бесконечно маленьким или большим и оставаться четким без пикселизации. Если ваш логотип еще не является векторным, есть простой способ превратить его в векторную иллюстрацию с помощью Adobe Illustrator.
Сначала нам нужно проследить изображение логотипа. После того, как вы откроете изображение в Illustrator, выберите «Объект» в верхнем меню, а затем нажмите «Image Trace — Make». После этого есть несколько способов продолжить.
Не беспокойтесь, если ваше изображение будет выглядеть немного странно сразу после этого. Это очень поправимо. Меню предустановок слева очень полезно для определения того, какой контур изображения лучше всего подходит для вашего логотипа. Для этого логотипа я выбрал 6-цветный вариант, потому что используются 4 разных цвета.
Новый вектор выглядит идентично исходному изображению. Вы заметите, что фон все еще остается белым, если переместить вектор.

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

Вы можете сохранить этот файл как EPS, чтобы сохранить вектор. PDF-файл также сохранит векторы, но автоматически установит белый фон.
Независимо от того, никогда ли вы раньше не редактировали изображение или только что знакомы с Illustrator и Photoshop, эти инструменты помогут вам создать более функциональный и привлекательный логотип.
Пригласить Измените медиа-группу в свой почтовый ящик! Вы будете получать нашу первую серию электронных писем, а затем одно письмо в месяц с обязательной информацией. Никакого спама никогда, отписывайтесь в любое время.
Кэмпбелл Томпсон — визуальный композитор CMG. Кэмпбелл занимается креативной рекламой и студийным искусством в Университете штата Мичиган.У нее есть страсть к политике и некоммерческим организациям, и она надеется использовать свои навыки в графическом дизайне и фотографии, чтобы вдохновить на изменения в мире вокруг нее.
Как сделать прозрачный фон изображения с помощью Adobe Photoshop
Леонид Батхан | 30 июня 2010 г.
Есть много способов сделать прозрачное изображение (или изображение с прозрачным фоном). Здесь мы представляем два метода преобразования сплошного цветного фона в прозрачный с помощью Adobe Photoshop.
Имея дело с прозрачностью изображения, нужно понимать, что не каждый формат изображения поддерживает прозрачность. Например, GIF (формат обмена графикой) и PNG (переносимая сетевая графика) действительно поддерживают прозрачность, а форматы JPEG или JPG (Joint Photographic Experts Group) — нет. Кроме того, изображения в формате GIF можно анимировать, а в форматах PNG и JPG — нет. Поэтому в приведенных ниже методах вы должны сохранять изображения в формате (формате) GIF или PNG, чтобы они были прозрачными. Для веб-разработки я предпочитаю использовать следующий метод.
Использование меню «Сохранить для Интернета»
Открыть изображение в Adobe Photoshop
Выберите File-> Save for Web … В следующем окне выберите инструмент «Пипетка» (слева):
Выбрав инструмент «Пипетка», щелкните фон изображения или любой цвет изображения, который вы хотите сделать прозрачным:
Под таблицей цветов щелкните первый значок (всплывающая подсказка «Сопоставление выбранных цветов с прозрачными»):
Теперь ваше изображение должно выглядеть так, как показано ниже.Фон отображается в виде шахматной доски (но не волнуйтесь, эти белые и серые квадратики не являются частью изображения, это так называемая сетка прозрачности, и это просто способ указать прозрачность). Нажмите кнопку Сохранить вверху справа:
Укажите имя файла и тип «Сохранить как»: только изображения (* .gif), и все готово:

Использование инструмента Magic Eraser Tool
Открыть изображение в Adobe Photoshop
Выберите инструмент Magic Eraser, как показано ниже:
Если инструмент «Ластик» не настроен на «Волшебный ластик», щелкните правой кнопкой мыши и выберите «Волшебный ластик» из выпадающего списка, как показано ниже:
Для разноцветного фона вы можете использовать инструмент «Ластик для фона», как показано в этом руководстве: [http: // www.tutorialstraining.com/cstutorials/tut33backgrounderaser.htm].
Выбрав инструмент «Волшебный ластик», щелкните фон изображения или любую часть изображения, которую вы хотите сделать прозрачной. Убедитесь, что непрозрачность (см. Верхний правый угол изображения ниже) установлена на 100%, если вы не хотите, чтобы ваш фон был частично прозрачным:
Теперь ваше изображение должно выглядеть так:
Выберите Файл-> Сохранить как…, а затем введите имя файла и (важно!) выберите формат: GIF или PNG и нажмите кнопку «Сохранить». Если вы сохраняете в формате GIF, появится следующий экран, Индексированный цвет, нажмите OK:
… и нажмите ОК, и все готово:
Если края полученного изображения недостаточно гладкие, вы можете настроить Допуск перед тем, как щелкнуть изображение на шаге 3.
Опубликовать комментарий
Ваш адрес электронной почты никогда не публикуется и не передается.
Как сохранить форму PowerPoint в PNG со 100% прозрачным фоном
Сохранение презентаций PowerPoint в виде изображений — это то, что мы можем сделать, если хотим использовать слайды в качестве изображений. Однако в некоторых случаях мы хотим сохранить фигуру как изображение и оставить 100% прозрачный фон.
Плохая новость в том, что параметр сохранения PowerPoint в изображениях (в диалоговом окне «Файл») не позволяет нам сохранять прозрачный фон при сохранении слайдов. Но хорошая новость заключается в том, что мы можем использовать опцию «Сохранить как изображение» в графике или фигуре, чтобы сохранить их со 100% прозрачностью.
Для этого примера рассмотрим один из шаблонов, доступных на SlideModel.com, одном из моих любимых поставщиков шаблонов PowerPoint. Они предоставляют высококачественные шаблоны PowerPoint, которые можно редактировать на 100%, поэтому докладчик или дизайнер получают «полный контроль» над настройкой слайдов для своих нужд. Это определенно одно из основных преимуществ использования редактируемых шаблонов и графики, созданной с помощью фигур PowerPoint, по сравнению с другими поставщиками или даже бесплатными шаблонами PowerPoint, которые нельзя редактировать.
В этом примере я хотел бы экспортировать графику карты мира со 100% прозрачностью, чтобы мы могли позже использовать его для создания другого изображения, в данном случае с помощью Photoshop, но это может быть любой другой графический инструмент или для любых других целей.
Выбрав рисунок, мы можем щелкнуть правой кнопкой мыши по рисунку или фигуре и затем выбрать опцию «Сохранить как рисунок…» в PowerPoint.
Появится новое диалоговое окно «Файл», в котором вы можете указать выходной каталог и имя файла для использования.Здесь вам нужно выбрать PNG Portable Network Graphics Format * .png в качестве параметра сохранения как типа.
После сохранения выходное изображение сохранит прозрачность, и его можно будет использовать в любой другой графике. В этом случае мы собираемся использовать его для подготовки новой графики в Photoshop, как показано ниже.
Для этой цели я вставил изображение PNG с прозрачностью в новое изображение, которое я создавал в Photoshop, и, как вы могли видеть, карта мира сохраняет полную прозрачность и вставлена как новый слой в редакторе Photoshop.
Вот получившееся изображение после редактирования в фотошопе.
Экспорт слайдов PowerPoint с прозрачностью
Этот же метод работает для других типов графики, например, если у вас есть выделенные фигуры, как показано на изображении ниже.