Подготовка изображения — любой процесс можно ускорить

Подготовка изображения — любой процесс можно ускорить

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

Подготовка изображения — ищем исходник

Начнем с поиска нужного изображения. Об экономии времени речи здесь не идет, поскольку найти что-либо подходящее в сети не так-то просто. Настройтесь на творческую волну, чтобы уже мысленно представлять себе, что и как можно сделать с хотя бы отдаленно подходящим вариантом — скорее всего точно по вашему запросу вас тут ничего не ждет. Некоторые картинки на моем блоге состоят из двух, а то и из трех фрагментов, взятых с разных картинок. Ищу я их, как правило, в Гугл – формулирую запрос и в левой стороне страницы нажимаю Картинки. Если здесь я остаюсь без улова – тогда Яндекс. Если и там мимо – иду на сайты стоковых изображений. Но, как правило, хватает и первых двух поисковиков.

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

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

Программа Фотошоп — используем самое необходимое

Следующий шаг — работа в программе Фотошоп. Для начала сделаем рамку, которая будет служить обрамлением наших изображений — одна и на все случаи жизни. Создаем Новое изображение (File – New) шириной, соответствующей вашим возможностям, вернее, допустимой ширине шаблона. У меня это – 450 px. Высота рамки – те же 450 px, поскольку изображения высотой более 400px вы вряд ли будете использовать. Фон – Белый (Backgraund Contents – White). OK.

Далее – берем инструмент Прямоугольное выделение (Rectangular Marquee Tool) – выделяем всю полезную область созданного изображения, затем Редактирование — Обводка ( Edit — Stroke), и в появившейся таблице указываем ширину обводки будущей рамки.

Работаем в Фотошопе

Для этого вполне хватает 5 px, а это значит (450 px – 10 px = 440 px), что ширина любого подготовленного вами в последствии изображения должна быть не больше 440 px для того, чтобы точно вписаться в предназначенную для нее рамку. Для чего нужна такая высота, аж 450 px? То, что мы сейчас сделали – всего лишь заготовка. Если высота подготавливаемого изображения будет меньше, верхушку срезать недолго. Зато не нужно будет каждый раз делать все с самого начала. Выделение – Снять выделение (Select – Deselect) — так можно снять выделение, сделанное для окрашивания обводки в самом начале.

Следующий шаг — в нижней части рамки выделяете область высотой 250 px и заливаете ее нужным цветом — инструмент Заливка (Paint Bucket Tool). Надпись – имя домена – делается по желанию. Кто-то пишет еще и название картинки, как правило, аршинными буквами, но лично мне кажется, что это перебор (ключевое слово здесь – кажется). Для записи своего домена я использовала шрифт hans-hand – уточняю, поскольку меня об этом спрашивали. Вот, в общем-то, и вся хитрость.

Убираем фон, пишем название домена

Теперь, когда вам нужно будет подготовить к публикации какое-то конкретное изображение, находите его в интернете, редактируете в Фотошопе и помещаете в подготовленную рамку, образец которой будет храниться у вас постоянно. Если изображение меньше 450 px в высоту, при помощи инструмента Кадрирование (Crop Tool) обрезаете его до приемлемого состояния, затем с помощью Прямоугольного выделения (Rectangular Marquee Tool) выделяете сверху тонкую полоску ( приблизительно 5 пикселей) и закрашиваете тем же цветом, что и вся остальная рамка. Затем Слои — Свести слои ( Layer – Merge Layers) и Сохранить изображение для Web (Save for Web Devices), оптимизировав его до приемлемого размера.

Не имея абсолютно никакого опыта в работе с Фотошопом, я достаточно долго делала рамку каждый раз заново, и при этом еще постоянно забывала значения ширины и высоты нижней полоски, и вдруг меня осенило – зачем? Зачем делать лишнюю работу, когда просто можно сохранить шаблон. Есть еще кое-какие мелочи, незнание которых может изрядно замедлить процесс подготовки изображений. Представляю, как будут смеяться продвинутые Фотошоп-мэны, если эта статья попадется им на глаза. Но я все-таки перечислю некоторые моменты для тех, кто только начинает разбираться с Фотошопом. Уверена — все это не будет лишним.

Кто сказал, что это мелочи?

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

Обратите внимание на фон изображения: очень часто на белом фоне видны синеватые разводы или грязные остатки чего-то, неряшливо стертого. Появляются они из-за многочисленных редактирований, скорее всего вы уже не первый и даже не 21-й, терзающий эту картинку. Воспользуйтесь инструментом Волшебная палочка (Magic Wand). Активизировав его в панели инструментов, кликните мышкой по белому фону изображения и, выделив его, с помощью Кисти ( Brush Tool) аккуратно почистите фон – картинка будет выглядеть значительно лучше. В таком случае не забудьте установить значение цвета FFFFFF.

Если понравившееся вам изображение имеет водяной знак – проститесь с ним сразу, поскольку избавиться от него очень непросто. А вот если где-то сбоку на белом фоне, или даже на самом изображении, но только там, где имеется однородный тон, есть мешающая вам надпись, либо какой-то значок – его очень просто удалить, воспользовавшись Инструментом выделения (Lasso Tool либо Polygonal Lasso Tool). C его помощью выделяете мешающий вам фрагмент и затем закрашиваете место выделения либо белой краской – если это общий фон, либо цветом фона, на котором находится надпись. Узнать шестизначный HTML код любого цвета легко с помощью утилиты Pixel, о которой можно прочесть здесь.

Перед подготовкой изображения стоит взглянуть на него глазами экономиста — убрать часто имеющиеся излишки фона сверху и снизу, поскольку они так же участвуют в формировании общего веса. Если изображение слишком вытянуто в высоту, прикиньте, насколько можно эту высоту уменьшить без особых потерь для фигуры основного персонажа. Меняем высоту картинки. Изображения ростом за 200px я всегда уменьшаю до 180 – фигурки на них просто становятся чуть-чуть пошире в плечах – ну и что? Этим я убиваю сразу двух зайцев – экономлю пиксели и делаю картинку уникальной, поскольку при определении уникальности данный параметр так же учитывается – вот и воспользуйтесь.

Ну и, разумеется — Редактирование резкости и яркости ( Images – Adjustments-Brightness/Contrast). Если озаботиться этой проблемой, когда изображение уже вставлено в рамку и полностью подготовлено, то надпись с названием вашего домена может слегка расплыться, либо на ней могут появиться чуть заметные разводы. Поэтому редактировать резкость лучше перед тем, как вставить изображение в рамку – результат будет намного лучше. Пожалуйста, не приводите ссылки на мои посты, где невооруженным глазом видны эти самые огрехи. Могу сказать лишь одно – на ошибках учатся, и я не исключение.

Если подготовленное изображение пиксель в пиксель совпадает с шириной рамки ( в нашем случае – 440px), вставить его будет достаточно сложно – движется оно почему-то рывками, попеременно загораживая то правую вертикальную полосу рамки, то левую. А вот если нажать и удерживать при этом Ctrl, изображение прекратит прыгать и его можно будет подогнать с точностью до одного пикселя.

Старайтесь выбирать изображения с белым фоном. Во-первых, процесс редактирования в таком случае будет менее сложным, а, во-вторых, сама картинка не будет смотреться тяжело, как кирпич на белой скатерти. Разумеется, речь не идет об использовании пастельных тонов. Да и вообще – куда меня понесло? Понятно, что это – дело вкуса.

Вот, пожалуй и все, что можно сказать о подготовке изображений к публикации на блоге. Разобравшись в данной теме, вы, конечно же, не станете специалистом по работе в программе Фотошоп, но отредактированные вами изображения будут выглядеть достаточно аккуратно. И еще – они всегда будут одного размера, что, на мой взгляд, придает странице какой-то завершенный вид — имея уже готовую рамку, вы при всем желании не сможете сделать их неодинаковыми. При редактировании изображений в админке постарайтесь не забывать о следующих мелочах: всегда ставьте один и тот же вертикальный отступ – 15 – 20 пикселей; не забывайте убирать в начале абзаца <p style=»text-align: center;»> (режим HTML), поскольку, из-за него текст сразу же выравнивается по центру; проверяйте наличие абзацев – иногда после размещения изображения они исчезают и текст «склеивается».

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

Кстати, все эти манипуляции еще проще сделать в программе Pixlr Editor. Единственное, в чем заключается некоторое неудобство – редактируемое изображение здесь нельзя просто перетащить в рамку, используя Move Tool. Ну и что? Выделяем то, что нужно перенести (Прямоугольное выделение — Rectangular Marquee Tool или Лассо — Lasso Tool либо Polygonal Lasso Tool) , нажимаем Ctrl+С, затем кликаем в поле, куда переносим — Ctrl+V. Вот и все проблемы.


Карта сайта


Информационный сайт Webavtocat.ru