Блог Евгения Вергуса
Советы Вебмастера
Хотите начать зарабатывать на партнерских программах прямо сейчас?

Как обработать картинку

Всем снова, привет! Сегодня я расскажу, как работать с изображениями для своего блога, а конкретно, как обработать картинку, как обрезать изображение и, как его оптимизировать. Именно такие вопросы очень часто новички задают мне в поддержку. Думаю, что эта статья в полной мере ответит на данные вопросы. Работать с картинками (изображениями) можно в разных программах, но я Вам расскажу о двух, самых распространенных и доступных – Paint и Photoshop.

obrezka-kartinok-titul

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

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

kartinki_v_paint

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

kartinki

Размер указывается в пикселях. И в большинстве случаев для блогов достаточно ширины 500-600 px, если Вы планируете разместить картинку посередине контента своей статьи. Меньше делать можно, но больше 620 px нежелательно, чтобы не нарушить структуру Вашего сайта. Высота может быть произвольной.

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

kartinka

У Вас получится нужная картинка, которую теперь нужно сохранить.

kartinki-1

Для этого на вкладке «Файл» выбираем команду «Сохранить как». Откроется окно, в котором можно выбирать нужный формат. В зависимости от содержания изображения для сайтов выбирают один из трех форматов: jpg, png или gif. Далее указываете место для сохранения, при необходимости меняете название файла и, можно сказать, что работа сделана.

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

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

photoshop

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

photoshop-1

После того, как заданы нужные размеры (выбран нужный фрагмент) достаточно нажать клавишу «Enter» и изображение обрежется до установленного размера.

Далее в меню «Файл» выберите команду «Сохранить для Web-устройств». Эту команду можно дублировать сочетанием клавиш «Alt» +  «Ctrl» + «Shift» + «S». Откроется вот такое окно.

photoshop-2

В нем Вы можете уточнить ширину изображения и самое главное – задать качество для изображений, сохраняемых в формате jpg! Его принято задавать на уровне 85%.  Далее жмете кнопку «Сохранить», указываете место, куда это сделать, именуете файл и нажимаете «Готово».

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

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

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

С уважением, Евгений Вергус.

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (6 голос, в среднем: 4,00 из 5)
Загрузка...

Спасибо Вам за то, что поделились статьей в социальных сетях!
Подпишитесь на RSS-рассылку и будьте в курсе всех новых статей
К данной статье оставлено: 60 ком.
  1. Анатолий
    Ответить
    11 января 2017 в 1:23

    Забыли написать, что картинку надо еще максимально оптимизировать без потери качества перед добавлением в запись блога?

    Например, при помощи сервиса tinypng.com

    • Евгений
      Ответить
      11 января 2017 в 11:52

      А разве команда «Сохранить для Web-устройств» (как написано выше для фотошопа) не является инструментом для оптимизации?

      • Анатолий
        Ответить
        11 января 2017 в 21:49

        Этого недостаточно!

        Например, Google в анализе ругается на такие изображения и рекомендует их сжимать еще больше.

        После обработки изображений через сервис — они сжимаются еще больше.

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

        Установил у себя плагин от tinypng — он автоматически оптимизирует все добавляемые изображения в блог и автоматически создаваемые миниатюры.

        500 изображений в месяц плагин обрабатывает бесплатно — для моего блога это достаточно. Еще и хватает лимита оптимизировать ранее добавленные изображения.

        Смотрите скрин, как сильно плагин оптимизирует изображения без потери качества: prntscr.com/dudph5

        • Евгений

          Не вводите народ в заблуждение. Того, что Евгений представил (Пэйнт да Фотошоп) абсолютно достаточно. А по-большому счету одного пэйнта довольно.

        • Евгений Вергус
          Ответить
          12 января 2017 в 21:11

          Анатолий, нужно много делать и так же можно и не делать ) А вот выражаться в комментариях типа — сами делаете не правильно и другим не даете, это вы можете писать на своем сайте. Каждый имеет право на свое мнение.

        • Анатолий
          Ответить
          12 января 2017 в 23:42

          Евгений, а как еще я должен был ответить на слова: «Не вводите народ в заблуждение»?

          Например, моему блогу 9 лет — сейчас жалею, что мне не подсказали оптимизировать изображения в самом начале создания блога.

          Теперь вот по частям приходится оптимизировать картинки 🙁

          А учитывая, что их более 5000 — это будет сделано полностью еще не скоро...

        • Евгений Вергус
          Ответить
          13 января 2017 в 0:04

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

        • Мария
          Ответить
          9 февраля 2017 в 10:03

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

        • Евгений
          Ответить
          17 февраля 2017 в 0:02

          Действительно, я помню в самом начале у меня голова пухла от регистрации в онлайн кошельке WebMoney ))) А когда блог начал делать так вообще кошмары снились))) Если всё и сразу новичку напичкать в голову, то ни чего хорошего из этого не получится)))

        • Наталья
          Ответить
          11 июля 2017 в 15:27

          Все правильно. Я тоже только начинаю и много информации сразу просто вводит в ступор. Все постепенно приходит.

      • Анатолий
        Ответить
        12 января 2017 в 2:09

        Пэйнт да Фотошоп достаточно для того, чтобы картинку добавить на блог, а чтобы было все правильно — необходимо еще и максимально оптимизировать изображения!

        Сами делаете неправильно и другим мешаете вести блоги без ошибок.

        Смотрите главное предупреждение по результатам анализа Вашего сайта: prntscr.com/duhbzt

    • Евгений Вергус
      Ответить
      11 января 2017 в 15:42

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

    • Татьяна

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

  2. Руслан
    Ответить
    11 января 2017 в 13:12

    Обрабатываю картинки только при помощи фотошопа.

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

    • Евгений Вергус
      Ответить
      11 января 2017 в 15:47

      Да, главное знать как это делать и еще чтобы сам фотошоп был установлен ))

  3. Светлана
    Ответить
    11 января 2017 в 21:40

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

  4. Ирина
    Ответить
    11 января 2017 в 21:45

    Спасибо, Евгений. Очень просто и доступно. И не надо никаких лишних фокусов. Вполне достаточно и не только для начала.

    • Хасбулат
      Ответить
      16 февраля 2017 в 4:39

      Простота и доступность, это уже искусство) Все понятно спасибо.

  5. Дмитрий
    Ответить
    11 января 2017 в 21:51

    Увидел в статье старый добрый Paint и прослезился ))) Ведь это по сути дела первый графический редактор, с каким пришлось «поработать» — нарисовал домик еще в школе, и тогда это было нереально круто! ))) а сейчас с помощью возможностей продуктов Adobe можно «Аватара» в домашних условиях снять )

    • Евгений Вергус
      Ответить
      12 января 2017 в 21:12

      Да ,для простых действий достаточно и Paint )) Я лично больше с фотошопом работаю )

  6. Алексей
    Ответить
    11 января 2017 в 22:02

    Для обработки изображений пользуюсь только этими двумя программами. Если требуется что-то простое, то Paint-ом, посложнее — обращаюсь к Фотошопу.

  7. Галина
    Ответить
    12 января 2017 в 20:09

    А мне проще чем Paint и Photosop, Adobe Illustrstor, там весь функционал

    для векторной графики.

  8. Валера
    Ответить
    13 января 2017 в 7:04

    а мне достаточно MS office picture meneger, хотя иногда и paint пригождается. А фотошоп, кажется слишком сложным.

  9. Владимир
    Ответить
    13 января 2017 в 22:23

    Я тоже паинтом и фотошопом пользуюсь.) Правда фотошопом не очень профессионально владею. Пытаюсь изучать.)

  10. Вячеслав
    Ответить
    17 января 2017 в 16:29

    Спасибо Евгений! Полезная статья. Я лично в фотошопе вставляю картинку в рамку, логотип и все или этого не достаточно?

    • Евгений Вергус
      Ответить
      18 января 2017 в 10:44

      Еще сохраняйте картинку именно для WEB и будет достаточно.

      • Вячеслав
        Ответить
        18 января 2017 в 16:44

        Для веб потому что она мало весит так?

        • Евгений Вергус
          Ответить
          19 января 2017 в 11:28

          да, верно.

  11. Денис
    Ответить
    26 января 2017 в 18:00

    Спасибо большое за статью. На своём блоге делаю картинки 450×250 пикселей. А вам, Евгений, советую записать уроки по установки ssl сертификата. Чтобы у новичков в дальнейшем не возникало затруднений.

    • Евгений Вергус
      Ответить
      27 января 2017 в 17:39

      Денис, спасибо за совет ) Но прежде чем советовать, нужно понимать и разбираться в теме. Нельзя записать уроки для всех по ssl, особенно для новичков ) Это все делается индивидуально в каждом конкретном случае.

  12. Вячеслав
    Ответить
    27 января 2017 в 12:51

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

    • Евгений Вергус
      Ответить
      29 января 2017 в 6:27

      Да, нужно, это ведь тоже картинка )

  13. Галина
    Ответить
    28 января 2017 в 11:46

    Добрый день, Евгений! Статья про оптимизацию картинок очень актуальна. Хорошо дополняет 4 урок во 2 дне тренинга «Путь блогера». Я делала картинки в программе Canva. Только картинки были не оптимизированы. Стали весить больше, т.к. сохранила в формате PNG,а надо было в JPG (из видео узнала, что они меньше весят), да ещё правила картинки после загрузки на сайт.

    Теперь буду делать как надо! А есть чек-лист по оптимизации картинок с информацией об оптимальном размере и весе, в каком формате сохранять?

    Спасибо и вашему помощнику за видео: всё доходчиво.

    С уважением, Галина.

    • Евгений Вергус
      Ответить
      29 января 2017 в 6:27

      Чек-листа нет по оптимизации )

  14. Вячеслав
    Ответить
    29 января 2017 в 11:37

    Еще раз здравствуйте! Извините если надоедаю. А можно изменять размер по ходу создания статьи, после оптимизации сохраняю картинку 500 п. а в статью эта картинка загружается меньшим размером. Можно ли ее растянуть в редакторе допустим по ширине статьи?

    • Евгений Вергус
      Ответить
      6 февраля 2017 в 6:26

      У вас в настройках стоит загружать миниатюру, смотрите в момент в момент загрузки внизу есть настройки.

  15. Татьяна
    Ответить
    2 февраля 2017 в 22:42

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

  16. Олег Тетерин
    Ответить
    3 февраля 2017 в 22:02

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

  17. Татьяна Рахлецова
    Ответить
    5 февраля 2017 в 19:20

    Для меня фотошоп трудно. Paint освоила. И еще есть программка paint.net. В ней можно фон удалить и сделать картинку без фона, чтобы куда-нибудь вставить. Легкая бесплатная программка.А для скринов PicPic нравится, удобная.

  18. Сергей
    Ответить
    6 февраля 2017 в 19:58

    Спасибо за полезную информацию. Теперь и без фотошопа можно обойтись.

  19. Влад
    Ответить
    9 февраля 2017 в 13:58

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

  20. Влад
    Ответить
    9 февраля 2017 в 13:59

    Что-то мой граватар в комменте не отразился.

  21. Ильдар Тимербаев
    Ответить
    9 февраля 2017 в 15:16

    Я все делаю в paint.net Вроде все нормально получается.

    А вот то что вордпресс создает дубли фото под миниатюру с этим ничего поделать не могу. Приходится раз в месяц заходить на хостинг и удалять дубли.

    • Анатолий
      Ответить
      21 февраля 2017 в 18:56

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

  22. Анатолий
    Ответить
    9 февраля 2017 в 17:06

    Или ошибка в коде комментария. Здесь prntscr.com/e6jb5q

    • Евгений Вергус
      Ответить
      21 февраля 2017 в 10:30

      разобрался ) спасибо )

  23. Сергей

    Евгений! Огромное спасибо за урок! я как раз это искал!

  24. Сергей
    Ответить
    12 февраля 2017 в 19:26

    Добрый день, Евгений! Очень своевременная статья (для меня во всяком случае). Искал как раз это!

  25. Владимир
    Ответить
    20 февраля 2017 в 18:58

    Спасибо Евгений, очень полезная статья.

  26. Андрей
    Ответить
    23 февраля 2017 в 18:08

    Доброго времени суток Евгений. Статья полезная и нужная. я сам когда то столкнулся, с размером картинок на своём блоге и по верьте голова кипела, от того что надо делать к каким программам обращаться. Но я сильно обратил внимания, на то как вы просто и доступно объяснили где взять программку Paint, вернее как её найти на компе. А у меня стоит и Paint и Paint.net, больше пользуюсь вторым вариантом. Согласен что размер не должен превышать определённых пикселей, это зависит от тем. Но я у себя на блоге выставляю 750 пикселей и классно смотрится. Вам удачи.

  27. Анжела
    Ответить
    2 марта 2017 в 14:03

    Евгений!Спасибо вам огромное за такие полезные и нужные для всех статьи,которые вы пишете на своем сайте! Я желаю вам удачи и всех благ!С уважением,Анжела.

    • Евгений Вергус
      Ответить
      2 марта 2017 в 15:38

      Анжела, всегда пожалуйста! Удачи Вам!

  28. Александр
    Ответить
    2 марта 2017 в 15:50

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

  29. Николай

    Здравствуйте. Спасибо за урок. Вопрос — Если я куплю курс Евгения — Автоматическая система обучения

    «Матрица Партнерских Продаж» то я могу его продлить? Он даётся на год? А продление не дешевле будет ?

    • Евгений Вергус
      Ответить
      22 марта 2017 в 12:45

      Зачем продлевать? )) Этого времени достаточно для изучения и внедрения.

  30. Ирина

    Всем привет! А вот еще вопрос в тему. Для размещения рекламы в ВК нужна картинка 145×85. Уменьшаю в Point до 145×106, а ее не принимают, пишет, что очень маленькое изображение. Уже бьюсь над этим который день,ни фига сделать не могу. Кто-нибудь подскажет, что надо сделать? Спасибо!

    • Евгений Вергус
      Ответить
      28 марта 2017 в 18:04

      Можно загрузить картинку большего размера и уже в ВК обрезать ее при составлении объявления.

  31. Валентин
    Ответить
    26 июня 2017 в 15:24

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

  32. Николай
    Ответить
    20 сентября 2017 в 16:15

    Я обращаюсь к Анатолию. Почему вы решили именно плагин tinypng? Плагины очень нагружают сайт. Я знаю сайты, где стоит 3-4 плагина и все. Но сжимать картинки можно разными программами, например optimizilla.com/ru/. Или это тоже мало? У вас есть статья или видео об этом плагине? Тогда почему никто не знает о них, по крайней мере я поспрашивал несколько человек. Далее. Вы пишите, что у вас более 5000 тыс картинок. Но почему вы допустили такое количество неправильных действий. Или вас тот же гугл не ругал? И зря вы на Евгения так. Он может многие программы новичкам показать, но это только им навредит. Пусть они освоят что-то одно, а потом сами дойдут, если будут интересоваться. Извините если я некорректно вам ответил.

  33. Алексей

    Полностью с Николаем согласен.

Оставить свой комментарий