Как сделать прозрачный фон у картинки в GIMP.

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

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

Удаление сложного фона

1. Открыли GIMP. Нажали File -> Open.... Выбрали и загрузили нужное фото. Я буду использовать первое попавшееся с картинкой, которую в будущем, возможно, буду использовать для картинки на кнопке меню сайта.
2. На панели инструментов, слева, выбираем Path Tool и начинаем самую утомительную работу по выделению нужного нам объекта. Методично обходим, расставляя точки. Если ошиблись, то можно всегда вернуться назад Ctrl + z, или на панели слева - на шаг и более назад. Между начальной и конечной точками оставляем небольшое расстояние.







3. Кликаем правой кнопкой мыши и выбираем Select - > From Path Справа появится черно белое изображение с подтверждением того, что путь выбран - Path to Select







4. Переходим во вкладку Слои - Open the layers Dialog и правой кнопкой кликаем по слою нашей картинки (правее значка глаза и кнопки). Из выпадающего меню выбираем -Add Alpha Channel Добавить альфа канал.Опять кликаем Правой кнокой мышки, выбираем Select -> Invert и нажимаем кнопку Del. Обратите внимание, что на вкладке Cлои вы сможете заранее видеть удаляемую часть - она светлая. То, что остается - темное. Все это вы можете посмотреть на фото ниже.







5. Если у вас все получилось, то вы можете сразу перейти к сохранению, если остались участки как у меня, то повторяем снова - выделение - Путь - Инвертировать - Удалить. Стоит отметить, что при выборе Инвертировать, вы сможете выбрать что удалить, слева на вкладке Слои. Там НЕ УДАЛЯЕМАЯ часть будет показана черным. Если вам нужно изменить часть, то еще раз нажать инвертировать и выбрать нужное.
6. Сохранить нужно обязательно в формате .png Отметить , чтобы сохранить фон. Вот и все.

У меня получилось так :

Удаление простого фона.

1. Первый шаг такой же - Загрузка фото.
2. Кликаем правой кнопкой мышки рядом с фото слоя (1).
3. Выбираем - добавить альфа канал Add Alpha Channel (2).
4. Выбираем - Fuzzy Select Tool, она же "Волшебная палочка" (3).
5. Шелкаем в любом месте фона. Он выделяется по контуру и нажимаем кнопку Del







6. Сохраняем точно так же как описал выше.

Результат:

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

Удачи вам, и до скорой встречи. Буду очень признателен вам за ваши вопросы, комментарии и отзывы.

Дерзайте, и все у вас получится!

                                                                                                                                                             

Смена картинки при наведении курсора.

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

Весь код я рассказал здесь - Как изменить картинку при наведении на неё курсора, но получил несколько вопросов. Решил все собрать в одном месте. По шагам:

1. Создаем новый пост и добавляем в него код HTML. Учтите, что image1.jpg - картинка, которая видна постоянно, а image2.jpg - та, которая будет появляться при наведении курсора

<div class="animate2" style="margin-top: 100px;">
    <img class="first" height="" src="image2.jpg" width="100%" />
    <img class="second" height="" src="image1.jpg" width="100%" />
</div>

2. Теперь, где нибудь выше или ниже этого кода, прямо в вашем посте добавляем фото, которое будет видно постоянно - image1.jpg. Из всего добавленного кода, нас интересует только src нашей картинки. Копируем его и вставляем на место image1.jpg, внутри двойных кавычек
3. Тоже самое проделываем во второй картинкой. После этого, код, который вы использовали для получения src картинок, можно полностью удалить.
4. Идем в "Настройки" -> "Шаблоны+ ->"Продвинутые" ->"Добавить CSS" и вставляем код, котоый приведен ниже прям в поле отмеченное на втором фото












.animate2{

  position:relative;

  margin:0 auto;/* устанваливаем блок div по центру страницы*/

  width:480px; /* Ширина */

  height: 360px;  /* Высота */                

}

.animate2 img {

  position:absolute; /* абсолютное позиционирование*/

  left: 0; /* выравниваем картинки по левому верхнему углу div-а*/

  top: 0; /* выравниваем картинки по левому верхнему углу div-а */  

}
.animate2 img.first { /* первая картинка полностью прозрачная */

  opacity:0;

  filter:alpha (opacity=0);

}

.animate2:hover img.first { /* при наведении курсора первая картинка становится не прозрачной */

  opacity:1;

  filter:alpha (opacity=100);

}

.animate2:hover img.second, .animate2 img.second:hover { /* а вторая при наведении курсора становится прозрачной */

  opacity:0;

  filter:alpha (opacity=0);
     -moz-transition: all 3s ease-in-out; /* эффект перехода для Firefox до версии 16.0 */

    -webkit-transition: all 3s ease-in-out; /* эффект перехода для Chrome до версии 26.0, Safari, Android и iOS */

    -o-transition: all 3s ease-in-out; /* эффект перехода для Opera до версии 12.10 */

    transition: all 3s ease-in-out; 
}
/*--для всех браузеров---*/
.animate:not(:hover) img.second, .animate img.second:not(:hover) {
  
  
  -moz-transition: all 3s ease;
  -wedkit-transition: all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;
}
/*---замедление возрата к началу--*/
.animate2:not(:hover) img.first:not(:hover){
  opacity:0;
  filter: alpha (opacity=100);
   filter: alpha (opacity=0);
  -moz-transition: all 3s ease;
  -webkit-transition: all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;
}
.animate2:not(:hover) img.second, .animate2 img.second:not(:hover) {
  opacity:1;
  filter: alpha (opacity=0);
  -moz-transition: all 3s ease;
  -webkit-transition: all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;
}



Не забудьте сохранить изменения!

                                                                                                                                                             

Как обрезать gif-анимацию в GIMP.

Самый простой способ обрезать гифку (изображение в gif формате), это воспользоваться бесплатным редактором GIMP

Без долгих предисловий, приступим по шагам:

1. Открываем редактор GIMP и нашу gif-анимацию, как слой. Для этого в редакторе Выбираем File (1) и Open as Layers... (2)







2. Для того, чтобы посмотреть изображение в движении, нам нужно перейти по пути Filters - > Animation ->Playback







3. После того, как посмотрели и выбрали, то что нужно сохранить, а что обрезать, возвращаемся назад и выбираем : Tools -> Transform Tools -> Crop







4. Выделяем нужную область и делаем два щелчка левой кнопкой мышки. Вот и все. Для того, чтобы посмотреть что получилось, можно перейти к шагу 2
5. Теперь нам осталось только сохранить нашу гиф-анимацию в нужном формате. Идем в File -> Export as ... называем наш файл (например - image.gif). Здесь очень важно указать расширение -.gif и нажимаем Export. В всплывающем окне отмечаем (галочкой), что сохранить нужно с сохранением анимации. Нажимаем Export.






Таким образом можно обрезать любое гиф-изображение, с сохранением анимации.

                                                                                                                                                             

Как сделать копирование поля в браузер и очистка поля ввода.

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

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

Начнем с разметки html документа:

<body>
  <input id="in" type="text">
  <button type="button" onclick = "reset('in')" >Reset</button>
  <br /><br />
  <input id="out" class="js-copyinput" type="text" >
  <button type="button" onclick="getLink();">Get Link</button>
  <button class="js-inputcopybtn" >Copy Link</button>
</body>

Ничего нового. Обычные текстовые поля input с кнопками button и специфичными идентификаторами id, для привязки к нашему JS - коду.

Добавляем JS - код для копирования

<script>
 var copyTextareaBtn = document.querySelector('.js-inputcopybtn');

 copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copyinput');
  copyTextarea.select();

  try {
   var successful = document.execCommand('copy');
   var msg = successful ? 'successful' : 'unsuccessful';
   alert('Copying text command was ' + msg);
  } catch (err) {
   alert('Oops, unable to copy');
  }
 });
</script>

Здесь, я думаю, что все понятно в коде и без пояснений. Берем поле с классом .js-copyinput и копируем его содержимое в браузер. Часть кода - try - catch добавлена для отображения процесса копирования пользователю. Я вывел уведомления в виде alert. Вы можете сделать это иначе или не показывать их вовсе. Но я думаю, что уведомления для пользователя нужны. Иначе не создается уверенности, что копирование информации в браузер прошло успешно.

JS - код для очистки полей.

Для того, чтобы нам очистить любое поле, нам достаточно просто написать в JS - коде, что значение этого поля равно пустой строке.
Например: document.getElementById('out').value = ""; Здесь мы говорим браузеру, что поле со значением out должно быть пустым.

<script>
function reset() { 
if (document.getElementById('in').value != "" || document.getElementById('out').value != "" )  {
document.getElementById('in').value = "";
document.getElementById('out').value = "";
}else {return false}; 
};
</script>

Посмотреть готовый пример можно на сайте Codepen

See the Pen Модератор Ссылки загрузкиГД с копированием и очисткой полей by YaroslavW (@YaroslavW) on CodePen.

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

                                                                                                                                                             

Как сделать ссылку для загрузки файлов с Гугл Диска.

Решил описать самый простой способ создания ссылки на загрузку файлов, папок, документов с Гугл-Диска сразу на компьютер пользователя.

Все началось с того, что я написал несколько полезных расширений для браузера Google Chrome и решил ими поделиться с друзьями, но не тут то было! Просто так сделать ссылку для скачивания со своего диска Google Drive не получилось. Дело в том, что Гугл Диск предоставляет по ссылке только просмотр файлов, мне же хотелось, чтобы при нажатии на ссылку "Скачать" - происходила загрузка файлов, а на ссылку "Просмотр" - можно было посмотреть файлы на диске до загрузки.

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

Добавление атрибута download непосредственно к ссылке не принесло ожидаемого результата. Файлы загружались, но не в zip-архиве, или в существующем формате, а только как некое подобие html-документа.

Вот пример - создал папку на Диске, прошел -> "Включить доступ по ссылке" -> "Получить ссылку".

Для пробы я использовал Codepen. Здесь вы можете посмотреть, что получилось.

See the Pen загрузка папки by YaroslavW (@YaroslavW) on CodePen.

Если коротко, то создал обычную ссылку в которую добавил атрибут download. Путь к файлу - href указал, тот, что получил с диска.

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

См. фото ниже.

Помог поиск в Гугл. Оказывается. что все дело в ссылке. Предложенная ссылка была такая:

https://drive.google.com/open?id=103vuGWLfwofXNR4pdFm986lBhETCbjQL

А для ссылки загрузки требовалась вот такая:

https://drive.google.com/uc?export=download&confirm=no_antivirus&id=103vuGWLfwofXNR4pdFm986lBhETCbjQL

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

1. Получить ссылку на вашу папку (или документ) на Google Drive
2. Взять от нее (скопировать) идентификатор -id=///
3. Подставить в ссылку для загрузки (выделено красным)

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

Решил написать простой скрипт, который бы производил все автоматически. И пошло и поехало. Потому что захотелось, чтобы стояла кнопка - "Copy", при нажатии на которую сразу бы копировался код ссылки в браузер. Потом решил, что нужно поставить кнопку очистки поля ввода - Reset, которая бы облегчала задачу многократного ввода.

Все это я описал в посте.

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





Код для модификации ссылки я применял очень простой:

function getLink(){
  var custom = document.getElementById('in').value;
  var output = document.getElementById('out');
  
  var fl = custom.indexOf("id=");
  console.log(fl);
  var custPart = custom.substring(fl+3);
console.log(custPart);
  var answer = "https://drive.google.com/uc?export=download&confirm=no_antivirus&id=" + custPart;
  output.value = answer;
};

Понятное дело, что к этому коду требуется соответствующая html разметка.

Подробнее об этом в посте Как сделать копирование поля в браузер и очистка поля ввода.

Удачи вам, друзья и пользуйтесь "Простыми советами" для того, чтобы сделать свою жизнь немного проще, легче и приятнее!

                                                                                                                                                             

Как скачать WEBP фото из Google+.

Наверное каждый из нас когда-нибудь сталкивался с вопросом - как скачать фото формата WEBP из Гугл+.

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

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

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

Для справки. Вот что нам говорит Википедия о данном WEBP формате.

WebP (произносится как англ. weppy[4]) — формат сжатия изображений с потерями и без потерь качества, предложенный компанией Google Inc. в 2010 году. Основан на алгоритме сжатия неподвижных изображений (ключевых кадров) из видеокодека VP8. Использует контейнер RIFF.

Для работы с данным форматом существуют открытые библиотека (libvpx) и конвертер (webpconv).

В общем - спасибо Гугл, ты, как всегда, меня порадовал своими обновлениями и улучшениями. :-)

На первых позициях поиска - онлайн конвертеры и программы для конвертацииwebp в jpg файлы.

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

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

Самый простой способ

Для Google Chrome

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






2. Нажимаем кнопку F12 (или открываем панель разработчика ->"Исследовать элемент" правой кнопкой мыши.
3. В открывшейся панели выбираем "Консоль" и вставляем в нее вот этот код:




function googlePlus(){
  var url = document.querySelector('img').src;
  var fL = url.indexOf("\/w");
var lL = url.indexOf("w\/");
var c = url.substring(lL+1);
  var a = url.substring(0,fL); 
  location.href  = a + c;
}
googlePlus();





Важно!!!

Если вы видите, что фото пытается сохраниться только как html страница ( расширение .html ), то код вот такой:




function googlePlus(){
  var src = document.querySelector('img').src;
  var firstLetter = src.indexOf("=");
  var a = src.substring(0,firstLetter);  
  location.href  = a;
}
googlePlus();;



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






4. Нажимаем Enter
5. Код в консоле может исчезнуть введенный вами код или там может появиться предупреждение( например такое - Resource interpreted as Document but transferred with MIME type image/jpeg ), в этом нет ничего страшного, просто это потому, что в этом окне загрузится выбранное вами изображение, но уже не в WEBP, а в jpg формате
6. Теперь просто кликаем по картинке правой кнопкой мышки и скачиваем ее в формате jpg

Если не получилось ни в одном из вариантов. то посмотрите внизу поста, под заголовком UPDATE.↓

Второй способ

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

1. Выбираем изображение и правым кликом в выпадающем меню, выбираем "Копировать картинку"
2. Открываем на компьютере любой удобный редактор изображений, мне для таких целей хватает и PowerPoint, можно GIMP или Photoshop
3. Сочетанием клавиш Ctrl + V вставляем изображение из браузера в пустой документ.
4. Обрезаем по формату и сохраняем, как обычное изображение, уже в любом доступном формате

Для ленивых!

Открываете фото в новой вкладке -> "Правая кнопка мыши" -> "Открыть фото в новой вкладке"

Вставить код и нажать Enter

function googlePlus(){
  var src = document.querySelector('img').src;
  var firstLetter = src.indexOf("/w530-");
  var a = src.substring(0,firstLetter);
  var b = src.substring(firstLetter + 15 );
  var url = a + b;
  var link = document.createElement( 'a');
  link.target = "_blank";
  link.download = "img.jpg";
  link.href = url;
  link.click ();
}
googlePlus();

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

---

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

Как скачать видео с сайта Твиттер вы можете посмотреть в моем посте про blod-видео

Как скачать картинку (фото) из Twiiter

И Как скачать картинку из инстаграм

Как скачать видео с фейсбука

Как скачать видео с ютуба.

---

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

function googlePlusOdd(){
 var src=document.querySelector('content .ZRciZe img').src;
 var lastL = src.length - 13;
 var a = src.substring(0, lastL );
 location.href = a;
};
googlePlusOdd();

По нечетным дням он срабатывает :-)
Друзья, мне очень важно знать, получается ли у вас все так как у меня и есть ли какие-либо предложения, замечания, пожелания? Есть ли потребность в написании расширения для браузера? Загрузчики фото или видео и для каких сетей вы бы хотели иметь?                                                                                                                                                              

Как разрешить изменять размер шрифта сайта посетителям.

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

Главное, что стоит учесть это то, что размеры шрифта на вашем сайте должны быть заданы в относительных величинах (em, % ).

Здесь все очень просто. Код понятен, но постараюсь дать комментарии в тексте.

Каждая ссылка нашего блока имеет уникальный id, например - id="size-12". При клике на нее возниакет событие onclick, которое мы отслеживаем - document.getElementById('size-12').onclick = size12;

И так как функция присвоена переменной var size12 = makeSizer(12);, то мы запускаем функцию, передавая в нее уникальную переменную. В данном случае - 12.

Сама функция makeSizer(size) очень проста. Она возвратит document.body.style.fontSize = size + 'px';, в нашем случае - document.body.style.fontSize = '12px';, тем самым изменив размер шрифта всего документа. И коль скоро, у нас размеры заданы в относительных величинах, то пропорционально изменятся и заголовки документа.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
 }

 h1 {
  font-size: 1.5em;
 }

 h2 {
  font-size: 1.2em;
 }
</style>
</head>
<body>
 <div>
  <a href="#" id="size-12">12</a>
  <a href="#" id="size-14">14</a>
  <a href="#" id="size-16">16</a>
  <a href="#" id="size-18">18</a>
  <a href="#" id="size-20">20</a>
  <a href="#" id="size-22">22</a>
  <a href="#" id="size-24">24</a>
  <a href="#" id="size-26">26</a>
 </div>
 <div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iure aliquid perferendis assumenda necessitatibus dolorem aperiam inventore, est, consectetur ex? Quia, omnis illo dignissimos quas iusto cumque, culpa laboriosam laudantium.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio maxime consequatur necessitatibus, impedit sint repellendus esse? Architecto facere quibusdam nobis repellendus est a corrupti explicabo nemo. Nostrum architecto ullam maxime.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus velit eligendi quisquam harum ut perspiciatis illum quae vero, modi magni esse non vitae, quibusdam laudantium, a repellat adipisci sed </p>
  
 </div>
 <script>
  window.onload=function (){
 (function (){
function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
};

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);
var size18 = makeSizer(18);
var size20 = makeSizer(20);
var size22 = makeSizer(22);
var size24 = makeSizer(24);
var size26 = makeSizer(26);

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;
document.getElementById('size-18').onclick = size18;
document.getElementById('size-20').onclick = size20;
document.getElementById('size-22').onclick = size22;
document.getElementById('size-24').onclick = size24;
document.getElementById('size-26').onclick = size26;
 })();
};
 </script>
</body>
</html>

Вы можете посмотреть файл на моем Google Grive

Или можете посмотреть его в работе на сайте Codepen

See the Pen Изменение размера ШрифтаПользователемJS by YaroslavW (@YaroslavW) on CodePen.

Эту фишку можно использовать и для блога, совместив ее с другими возможностями для пользователя. Например - Изменить цвет фона и текста по желанию посетителя сайта.
Или
Как сделать заглавной каждую букву в слове (JS)