Translate

Поиск по этому блогу

суббота, 10 марта 2018 г.

Как сделать прозрачный фон у картинки в 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. Сохраняем точно так же как описал выше.
Результат:



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

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

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

                                                                                                                                                             

среда, 7 марта 2018 г.

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

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

Весь код я рассказал здесь - Как изменить картинку при наведении на неё курсора, но получил несколько вопросов. Решил все собрать в одном месте. По шагам:
  1. Создаем новый пост и добавляем в него код HTML. Учтите, что image1.jpg - картинка, которая видна постоянно, а image2.jpg - та, которая будет появляться при наведении курсора
  2. <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>
    
  3. Теперь, где нибудь выше или ниже этого кода, прямо в вашем посте добавляем фото, которое будет видно постоянно - image1.jpg. Из всего добавленного кода, нас интересует только src нашей картинки. Копируем его и вставляем на место image1.jpg, внутри двойных кавычек
  4. Тоже самое проделываем во второй картинкой. После этого, код, который вы использовали для получения src картинок, можно полностью удалить.
  5. Идем в "Настройки" -> "Шаблоны+ ->"Продвинутые" ->"Добавить CSS" и вставляем код, котоый приведен ниже прям в поле отмеченное на втором фото






  6. .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;
    }
    


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





                                                                                                                                                             

суббота, 3 марта 2018 г.

Как обрезать 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.




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




                                                                                                                                                             


Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook.Пишите мне - kolesnikovy70 почта gmail.com