Картинка для блогаИтак, друзья, вчера я немного отвлекся от темы и вместо того, что бы рассказать, как искать и готовить картинку для блога, рассказал вам для чего вообще я пишу подобные подробные посты и что такое проект ДИАС (подробно об этом можете почитать в моей статье «ДИАС – это кто?»).

Сегодня я обещаю идти по намеченному плану и не откланяться от него ни на шаг.

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

Где искать картинки



Самый простой и проверенный способ – это, конечно же, поисковые системы.

Давайте возьмем вымышленный текст и добавим к нему картинку.

Если вы не знаете, где брать такой текст – воспользуйтесь сервисом «Lorem Ipsum». От вас требуется лишь указать количество абзацев (можно символов или байтов) и сервис сгенерирует вам уникальный текст.

В нашем примере я указываю 5 абзацев и нажимаю кнопку «Generate Lorem Ipsum»

Lorem Ipsum

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

Предположим, тема нашего текста – «Отдых в Черногории». Я дальше поступаю следующим образом – захожу в поисковую систему Google и ввожу название или основую тему статьи. Затем в левой колонке выбираю «Картинки» и ищу подходящий мне вариант (прямая ссылка на Google.Картинки)

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

Если вы привыкли пользоваться Яндексом – вот ссылка для поиска картинок на этом сервисе.

Кроме того, есть специальные хранилища картинок (как платные, так и бесплатные). Вот пример нескольких:

Дальше нужно определиться, для чего вам нужна картинка. Если это самая первая картинка, которая будет идти в начале статьи (т.н. Превьюшка – от англ. PreView), то ее размер обычно или 128×128, или 150×150 (я использую первый вариант).

Если вам нужна картинка в текст – то ее размер должен соответствовать ширине блока для текста на вашем блоге (в моем случае – 550 пикселей).

Если же размер картинки должен быть больше, то вам нужно сохранить ее с нужными размерами, а при добавлении в текст — принудительно указать меньший размер. При установленном плагине, например, wp-lighbox2 такая картинка будет «распахиваться» до сохраненных размеров при клике на ней (более подробно я это рассказывал в статье «Как добавить картинку на блог» )

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

Выбрав картинку, нам нужно каким-то образом сохранить ее себе на компьютер.

Можно пойти 2-мя путями:

  • сохранить прямо с экрана (сделать «захват картники»)
  • сохранить на компьютер и потом обработать

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

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

Создание «превью» с помощью программы FSCapture



Запускаем программу FSCapture и начинаем искать картинку, как рассмотрено выше. Подобрав подходящую – нажимаем комбинацию клавиш «Ctrl+PrintScreen». Затем, удерживая нажатой левую кнопку мыши, рисуем рамку вокруг интересующей нас картинки (указываем область захвата)  и отпускаем кнопку.

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

Создание края картинки с помощью FSCapture

Затем я задаю нужный размер:

Изменение размера картинки с помощью FSCapture

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

В результате у вас должно получиться следующее:

Итоговая картинка

Из-за того, что размер такой картинки небольшой – то и занимаемое нею место тоже небольшое (3-5 кб)

Подготовка большой картинки с помощью AdobePhotoshop



Теперь давайте рассмотрим, как поступать, если нам нужна большая картинка (550 пикселей по ширине и больше).

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

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

Когда картинка уже сохранена на компьютере – запускаем программу Adobe Photoshop и открываем в нем эту картинку (Ctrl+O или «File» — «Open»).

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

Первое – это нужно изменить размер (хотя часто можно и не изменять) . Для этого идем в меню программы: "Image""Image Size".

В открывшемся окне в верхних полях указываем нужный вам размер. Если хотите сохранить пропорциональность – поставьте галочку возле «Constrain Proportions»:

Изменение размера в photoshop

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

Кроме того, поскольку вы будете публиковать картинку для отображения на экране монитора – разрешение DPI («Resolution») установите 72 – этого достаточно (pixel/inch – пикселей на дюйм).

Теперь переходим к сохранению нашего файла.

В Adobe Photoshop есть замечательная фунцкия – Сохранение для Web-публикации. При этом размер картинки становится минимальными с сохранением достаточного качества (это и называется «Оптимизация картинки»).

Для этого идем в меню: «File» — «Save for Web» (или Ctrl+Alt+Shift+S). В открывшемся окне выбираем подходящий нам формат будущей картинки (gif или jpeg), ее качество или количество цветов (для формата gif) и сохраняем:

Сохранение для WEB в Photoshop

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

Для jpeg помогает уменьшить размер небольшое размытие («Blur») в пределах 1-2 значений.

И не забудьте выбрать «2-Up» что бы сразу видеть и исходную картинку, и то, что получится (вы будете иметь возможность оценить, как изменится внешний вид картинки с заданными параметрами).

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

Последний совет — неправильно вставлять картинку в текст в Ворде и потом все вместе переносить на блог. Сначала нужно перенести текст, а затем – вставить картинки (т.е. придерживаться предложенного алгоритма)

На сегодня это все.

Желаю удачи!