Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте

Здравствуйте уважаемые читатели блога KtoNaNovenkogo.ru. Продолжаем в рамках рубрики Обзоры полезных сервисов для вебмастеров рассматривать все то, что может пригодиться вебмастеру в его работе над благоустройством и продвижением своего сайта.

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

Все это не составить вам труда, если вы владеете навыками работы в каком-нибудь серьезном графическом редакторе, например, Фотошопе. Но если вы не фотошопер и никогда до этого не занимались обработкой изображений, то тут вам могут помочь онлайн сервисы по работе с изображениями, которые очень просты в освоении и интуитивно понятны. Эти онлайн сервисы так же могут быть полезны, если по каким-либо причинам вы работаете с сайтом, не имея под рукой привычных вам графических редакторов.

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

Напомню вам некоторые онлайн сервисы по работе с изображениями, о которых я уже писал:

• Оптимизация изображений для вашего сайта
• Da Button Factory — сервис для создания и тонкой настройки красивых кнопок для вашего сайта
• Sexy Buttons — конструктор (фреймворк) красивых кнопок для вашего сайта
• Сервисы по генерации фонового рисунка для вашего сайта
• Сервисы по созданию полосатого или клетчатого фона для вашего сайта
• Сервис по скруглению краев у изображений
• Сервисы для создания иконок из ваших E-mail и ICQ номеров

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

PicMarkr — онлайн сервис по добавлению на изображения водяных знаков (одни из вариантов защиты от воровства контента)

Один из способов, помогающих при борьбе с воровством контента (статей) с сайта — это добавление водяных знаков на изображения, которые вы используете в статье. Водяной знак можно наложить различными способами, в том числе и с помощью фотошопа. Но если по каким-либо причинам все эти способы покажутся вам не удобными или у вас не будет под рукой подходящих программ, то можно будет воспользоваться онлайн сервисом, на подобии PicMarkr, который позволяет за раз добавить водяной знак на пять изображений. Причем, в качестве водяного знака можно использовать как текст, так и изображение (например, логотип).

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

На этом шаге вам нужно будет выбрать способ загрузки изображений на сервис PicMarkr. Возможен вариант загрузки изображений со своего компьютера (установлен по умолчанию), а так же изображения можно будет взять с сервисов Flickr, Facebook и Picasa. Вариант загрузки выбирается в верхнем меню мастера первого шага. При выборе варианта загрузки изображений со своего компьютера, вам нужно будет используя кнопку «Обзор» найти нужное изображение на своем компьютере, причем, одновременно можно будет загрузить до пяти изображений общим весом не более 25 мегабайт.

Одновременно с добавлением на изображение водяного знака вы можете еще и уменьшить размер итогового изображения до одного из трех вариантов, предлагаемых в выпадающем списке «Optional: resize uploaded pictures» (см. рисунок выше). По умолчанию размер изображения изменяться не будет, но вы можете выбрать из выпадающего списка варианты уменьшения ширины итогового изображения до 500 px (считается оптимальных для блога), 800 px (часто используется такой размер на форумах) или 1024 px (для отправки изображений по электронной почте).

Для перехода ко второму шагу мастера добавления водяного знака на изображение нажмите на кнопку «Ok! Go to Step2». В левой части открывшейся страницы сосредоточены всевозможные настройки положения и внешнего вида водяного знака, а в правой части — приведена картинка примера со схематичным отображением на ней выбранного вами варианта водяного знака. В левой части вы можете выбрать один из трех вариантов водяных знаков.

Если вы поставите галочку напротив «Text watermark», то откроется вкладка с настройками текстового водяного знака. Вы сможет ввести в поле «Text to display» содержимое водяного знака (например, URL своего сайта), а в поле «Presets» вы сможете выбрать один из вариантов отображения водяного знака на изображении. Причем, при выборе из выпадающего списка того или иного варианта отображения текстового водяного знака, на превьюшке, расположенной справа, будет показано, как это будет выглядеть на изображении. В области «Watermark align» вы сможете выбрать положение (выравнивание) водяного знака на результирующем изображении.

Если вы поставите галочку напротив «Image watermark», то откроется вкладка с настройками графического водяного знака. Вы сможете загрузить со своего компьютера с помощью кнопки «Обзор» нужное изображение водяного знака (например, ваш логотип или заранее подготовленный в графическом редакторе текстовый водяной знак, сохраненный в формате изображения), а затем выбрать в области «Watermark align» положение (выравнивание) водяного знака на изображении.

Для того, чтобы наложить на изображение не один водяной знак, а целую россыпь водяных знаков, вам нужно будет поставить галочка напротив «Tiled watermark». В открывшейся вкладке с настройками вы сможете либо ввести текст водяного знака, либо загрузить изображение водяного знака, нажав на ссылку «picture» и воспользовавшись кнопкой «Обзор».

По окончании настроек внешнего вида и положения водяного знака нажмите на кнопку «Continue». На открывшейся странице вам предоставится возможность сохранить результирующее изображение с водяным знаком, нажав на кнопку «Download images to computer», либо загрузить изображение с водяным знаком обратно на сервисы Flickr, Facebook и Picasa, воспользовавшись соответствующими кнопками. Вот и все, для добавления водяных знаков на следующую партию изображений нажмите на ссылку «Set watermark to other images», расположенную внизу окна мастера.

Онлайн сервисы для подбора сочетающихся цветов для сайта

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

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

Но знание теории вовсе не облегчает подбор сочетающихся цветов на практике. Поэтому, для решения столь сложной эстетической задачи можно воспользоваться одним из онлайн сервисов по подбору сочетающихся цветов. Например, на сервисе The Color Wizard, для того, чтобы подобрать сочетающиеся цвета нужно будет указать код основного цвета сайта. Если вы не знаете код этого цвета, то ничего страшного, воспользуйтесь одной из программ по определению (захвату) цвета на экране.

Если вы знаете, какой цвет на вашем сайте будет основным и превалирующим, то для подбора сочетающихся с ним цветов вам нужно будет выполнить следующие действия на сервисе The Color Wizard. В поле «Enter hex code» вставьте код основного цвета вашего сайта, затем выберете способ формирования сочетающихся цветов «Complimentary», нажав на соответствующую кнопку, в нижней части окна программы подбора цвета. Ну, а потом нажмите на кнопку «SET», расположенную рядом с полем для ввода кода основного цвета.

В результате в области «Suggested colr schemes» отобразятся квадратики с вашим указанным основным цветом и двумя сочетающимися с ним цветами. Над этими подобранными цветами будут написаны их коды, которые вы можете скопировать и использовать на своем сайте.

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

Кроме сервиса The Color Wizard существует еще ряд подобных сервисов, например, весьма удобны сервисы ColorMixers и Color Scheme Designer.

Онлайн сервис по оптимизации размера (веса) файлов изображений без ущерба для качества

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

Но самой распространенной причиной большого времени загрузки страниц сайта являются не оптимизированные изображения, используемые на этих страницах. Я не говорю о совсем безграмотном добавлении изображений на страницы своего сайта. Хотя показательный пример все же приведу. Один мой знакомый знал, что размер изображения на странице сайта можно задать с помощью атрибутов тега IMG под названием WIDTH и HEIGHT (читайте подробнее о вставке изображений на странице сайта здесь — Вставляем изображения в текст с помощью тега IMG).

Это он знал, поэтому загрузил файлы с изображениями себе на сервер в какую-то там папку. Прописал в нужном месте HTML кода страницы теги IMG, указав пути до файлов изображений и не забыв указать атрибуты WIDTH и HEIGHT, задающие ширину и высоту изображений. Т.е. сделал все правильно. На сайте ему нужно было отображать совсем маленькие изображения и он задал их размер в WIDTH и HEIGHT. Но каково же было его удивление и разочарование, когда эти маленькие картинки (где-то около 100 на 100 пикселей) грузились очень долго, плавно и очень медленно прорисовываясь.

Все дело было в том, что исходные файлы изображений, загруженные им на сервер, не то что не были оптимизированы, об этом речи и не шло — эти изображения имели гигантское разрешение в несколько тысяч пикселей по ширине и высоте. Но он посчитал, наверное, что сервер сам должен был уменьшить изображение до заданных им размеров в атрибутах WIDTH и HEIGHT. Поэтому, памятуя о печальном опыте моего товарища, хочу призвать вас внимательней относиться к оптимизации изображений, используемых на страницах сайта.

Чем меньше будут весить файлы с этими изображениями, тем будет лучше для вас и вашего сайта. Т.е., во-первых, размеры изображений должны соответствовать размеру, задаваемому в атрибутах WIDTH и HEIGHT, если вы эти атрибуты используете. А во-вторых, существует масса возможностей уменьшить вес файла с изображением практически без ущерба для качества этого изображения.

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

Сервис PunyPNG прост до безобразия — загружаете с помощью кнопки «Upload images» со своего компьютера изображение, которое требуется оптимизировать (размер изображения не должен превышать 350 килобайт) и через несколько секунд вам откроется окно где вы сможете скачать уже оптимизированное изображение:

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

Для того, чтобы оптимизировать следующее изображение опять нажмите на кнопку «Upload images» и найдите файл с изображением у себя на компьютере. Все оптимизированные с помощью онлайн сервиса PunyPNG изображения не обязательно скачивать по одиночке, можно их все скачать в одном архиве, нажав на кнопку «Download» в строке «Total Savings». В общем, все очень удобно, без всяких там излишеств. Сервис PunyPNG поддерживает форматы изображений PNG, JPEG и GIF.

Можете также посмотреть видео «Водяной знак»:

У Евгения Попова вышел новый видекурс Все Технические Моменты Онлайн Бизнеса в Видеоформате, который стоит того, чтобы с ним ознакомиться.

Предлагаю вашему вниманию так же и другие обзоры популярных онлайн сервисов:

• Проверка орфографии и пунктуации онлайн
• Яндекс и Гугл картинки
• Онлайн анализ сайта
• Обратная связь - варианты создания для различных сайтов
• Красивые шрифты для сайта онлайн
• Мониторинг доступности сайтов
• Подбор ключевых слов в Яндекс Вордстат (wordstat.yandex.ru)
• Кросспостинг в онлайн сервисах
• Создание иконки Favicon (фавикон)
• Выпадающее горизонтальное и вертикальное меню - создание онлайн
• Кнопки для сайта
• Транслит и транслитерация
• Яндекс (Yandex)
• Google (Гугл)
• Рамблер (Rambler)

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Очень обяжете, если воспользуетесь этим блоком кнопок:

Рубрика : Онлайн сервисы

Наверх