Favicon.ico - специальная иконка, которая отображается рядом с адресом вашего сайта в адресной строке браузера, закладках (favorites), результатах поиска от Yandex или, например, на специфических ресурсах (каталогах, социальных проектах). «Зачем это вообще нужно?» - вопрос скорее риторический, поэтому ответы на него могут быть разные и для каждого свои: это красиво, оригинально, помогает выделить ваш сайт из многих других. Конечно, создание favicon - задание не первоочередное при разработке того или иного дизайна, скорее небольшое дополнение. Лично я считаю, фавикон - вещь забавная (интересная) и нужная. В любом случае, ваш проект от этого только выиграет.

Иконка favicon имеет размер 16х16 пикселей, при этом сам файл желательно должен занимать не более 300 килобайт. Из всех браузеров только Internet Explorer не отображает изображение в строке браузера сразу. Фавикон появится там только после добавления сайта в «Избранное».
Для того чтобы установить (подключить) favicon на своем ресурсе, в HTML коде необходимо прописать следующие строки:

<link rel=”icon” href=”http://ваш-сайт.ru/путь_к_иконке/favicon.ico” type=”image/x-icon”>
<link rel=”shortcut icon” href=”http://ваш-сайт.ru/путь_к_иконке/favicon.ico” type=”image/x-icon”>

Предварительно сам файл с иконкой необходимо «залить на ФТП» в нужную вам папку. Насколько я понимаю, код выше - стандартный и лучше его придерживаться, хотя, сказать по правде, у меня работает и упрощенный вариант:

<link rel=”shortcut icon” href=”путь_к_иконке/favicon.ico” />

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

• Icon Empire - программа для создания статических или анимированных иконок с глубиной цвета от 1 до 32 бит, а также прозрачных иконок под Windows.
• Icon Magic - простейшая программа для создания favicon по аналогии с редактором Paint.
• Icon Craft - софт для работы с курсорами и иконками, обладающий достаточно мощным функционалом. В отличии от первых двух программа платная и стоит $40.

В принципе, думаю, вы с легкостью сможете найти и другие продукты для создания и редактирования файлов favicon.ico. Я же для этих целей использую всем известный графический редактор Photoshop. Мне кажется, это наиболее удобный вариант: находим в Интернете подходящее изображение, уменьшаем до требуемого размера иконки 16х16 пикселей и сохраняем. Проблема лишь в том, что по умолчанию Photoshop не обладает возможностью сохранять файлы в формате .ico. Для этого требуется установить специальный плагин - единственный файл архива ICOFormat.8bi помещаем в папку где установлен Photoshop (например: /Program Files/Adobe/Adobe Photoshop CS2/Plug-Ins/File Formats).
Кстати, для Photoshop есть еще один плагин по работе с иконками, который позволяет записать в один файл сразу несколько изображений с разными стандартными размерами (16х16, 32х32 и 48х48). Более подробно о работе с ним можно почитать в блоге Никиты Селецкого.

Значимость иконок для сайта дополнительно подчеркивает наличие в РУнете специального ресурса, посвященного данному вопросу - favicon.ru. Сервис существует в сети с 2005 года, за это время на нем было созданного около 180 тыс. иконок. Во-первых, ресурс исполняет информационную роль - там можно почитать о том что такое favicon и зачем он нужен, а также найти подборку ответов на наиболее часто задаваемые вопросы по теме.

Вторая, еще более важная функция проекта, - создание иконок непосредственно на сайте. Вы загружаете туда собственное изображение, с которого создается (генерируется) фавикон. После этого можно либо просто его скачать, либо предварительно подкорректировать изображение в специальном онлайн редакторе. Таким образом, сервис предоставляет возможность создать себе favicon вообще без применения Photoshop или другого офлайнового софта.

Пользуясь случаем, хотел поделиться информацией об одной интересной акции, которую проводит некий Константин (под ником wmas). Он предлагает нарисовать каждому желающему бесплатную иконку favicon.ico. Все что требуется взамен - написать о данном щедром предложении у себя в блоге, после чего в комментариях к акции оставить ссылку на собственный пост и пожелания относительно требуемой иконки. Занятно то, что это уже второе подобное мероприятие в блоге Константина. Прошлые результаты меня и вдохновили принять участие в данном действе, посудите сами весьма хорошо сделано:

По такому поводу даже решил взять у автора мини-флэш-интервью:

Привет, откуда у тебя такая тяга к иконкам? я видел на всех твоих проектах множетсво нестандартных изображений)
«Тяга» появилась (наверное) из-за моего каталога блогов - Blogmir.net. Там иконки (favicon) играют не последнюю роль в визуализации информации, как и во многих других сервисах (к примеру: Яндекс, kollegi.zhilinsky.ru, blogosphera.net). Плюс, достаточно малый размер и затрата времени, на их создание, позволяют устроить вполне реальные (по реализации) акции, получить обратные ссылки и т.д.

Ты профессионально занимаешься дизайном?
Нет.

Что по-твоему дает эти иконки, зачем они нужны?
Ответ в первом пункте. А вообще, это наверное как визитка, аватар или что-то в этом роде.

Какими инструментами пользуешься для рисования их?
Photoshop.

Спасибо за интервью и бесплатные favicon!

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

При поддержке спонсоров:

• ePochta - все что нужно для эффективной email рассылки.
• Интернет магазин Глазик. Контактные линзы. Доставка.

Многие Интернет издания и блоги вчера пестрили заголовками о выходе онлайновой версии одного из самых популярных графических редакторов (фотошопа) под названием Photoshop Express Online. По старой доброй традиции возле логотипа красуется давно уже приевшаяся надпись beta (когда уже кто-то придумает новую фишку), а это значит, что сервис находится всего лишь на стадии бета-тестирования. Об окончательном полнофункциональном релизе говорить еще рано, хотя объем доступных функций уже на сегодняшний день весьма велик. Не смотря на то, что многие сайты так и остаются с пометкой beta чуть ли не навсегда, думаю, Photoshop Express Online это не касается, и в дальнейшем нас ожидает уйма новинок. Заглядывать наперед пока не буду, попытаюсь лишь оценить что из себя представляет данное приложения не сегодня.

Во-первых, сервис (пока) является облегченной версией редактора Photoshop, доступен через веб-интерфейс (используется технология Flash) и является абсолютно бесплатным. Во-вторых, после регистрации кажый пользователь получает 2 гигабайта для хранения своих файлов с возможностью делиться ими с другими людьми по адресу вашеимя.photoshop.com. Это уже больше смахивает на фото-хостинг. И, в-третьих, каждое изображение может быть отредактировано с помощью специальных инструментов, условно разделенных на типы «Базовый», «Тюнинг» и «Эффекты». Рассмотрим их чуть позже, сейчас я хочу немного рассказать об интерфейсе системы.

Управление фотографиями
После регистрации и входа в систему вам предоставляется на выбор 3 направления работы (если можно так выразиться):

• My Photos - создание альбомов и редактирование ваших фоток.
• My Album - просмотр и управление доступностью альбомов для других пользователей.
• Browse - доступ к галереям и альбомам остальных пользователей системы.

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

Слева располагается небольшое навигационное меню по разделу: ссылка на загрузку новых фотографий, «библиотека», содержащая список всех и последних добавленных изображений, а также созданные альбомы. Формирование альбомов происходит с помощью простого перетаскивания изображений в них из общей папки (All Photos). Чуть ниже расположены ссылки на другие популярные сервисы с услугами фото-хостинга - Facebook, Photobucket, Picasa. Photoshop Express Online интегрирован с этими системами и позволяет загрузить из них изображения. Лично я тестировал работу приложения с Picasa - все было здорово за исключением двух небольших нюансов:

1. Выполняется загрузка всех фотографий с другого сервиса - подозреваю что не реальная, а лишь превью объектов с кратким описанием, но, тем не менее, моя галерея Picasa со скромными 10Мб (400 небольших изображений) заставил Photoshop Express слегка призадуматься. Забегая наперед, скажу, что для работы с системой нужен весьма хороший Интернет, иначе впечатление от ее работы может быть слегка подпорчено.
2. На данном этапе поддерживается лишь английская версия системы, поэтому некоторые альбомы Picasa с русскими названиями отобразились некорректно. Кстати, использовать русский текст в заголовках фоток также не представляется возможным.

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

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

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

В самом верху меню имеется иконка развертывания системы в полноэкранный режим. Как по мне, это весьма удобно, сразу пропадает впечатление работы в браузере - Photoshop Express Online превращается в обычное приложение. Наличие подобных мелочей создает весьма позитивное впечатление о продукте - видно, что делался для людей. Тем, кто будет активно работать с редактором подскажу два небольших наблюдения:

1. Чтобы выделить несколько картинок, зажмите клавишу Ctrl и кликайте по нужным изображениям. Так как в полноэкранном режиме клавиатура недоступна, подобную фишку провернуть не удастся.
2. Перемещение по браузеру изображений вверх-вниз осуществляется с помощью соответствующих кнопок на клавиатуре, а в полноэкранном режиме работает скролл колесика мышки.

На сегодняшний день неотъемлемым элементом фото-хостингов можно назвать доступность просмотра изображений в формате «слайд-шоу». В Photoshop Express Online она также присутствует, причем количество различных настроек меня лично впечатлило. Кроме стандартных опций можно выбрать вид отображения фотографий «в строку» (идут друг за другом), в виде «сетки картинок», «по кругу» с возможностью включения режима 3D - фото как бы распределяются в пространстве. В общем, подобные объяснения могут ни о чем и не сказать, поэтому лучше один раз увидеть:

Редактирование изображений
Неудивительно, что в Photoshop Express Online каждое загруженное в систему изображение можно отредактировать. Инструменты хоть и не дотягивают до оффлайновой версии Photoshop, но являются достаточно мощным инструментом. Они позволяют корректировать цветовой бананс фотографий, поворачивать и обрезать картинку, изменять яркость, контрастность, резкость изображения, добавлять искажения и менять цветовую гамму.

Заранее предупреждаю, что я пользуюсь Photoshop`ом на базовом уровне, в фильтры, плагины особо не лезу, поэтому могу ошибиться в каком-то названии. Буду пытаться объяснить все увиденное простыми словами. Как уже говорилось выше, для работы с фотками имеется типа функций «Базовые», «Тюнинг» и «Эффекты».

Базовые:

Crop&Rotate - позволяет вырезать часть изображения, а также поворачивать его.

Auto Correct - коррекция цветов, есть для выбора несколько вариантов преобразования.

Exposure (облучение) - производит осветление затемненной фотографии. (кстати, я уже рассказывал как это сделать с помощью обычного Photoshop`а).

Red-Eye Removal - убираем красные глаза.

Touchup - не совсем понятная штука, которая позволяет скопировать часть изображения из одной области (задается кругом) в другую. Проще оценить работу данного свойства на примере:

Saturation (насыщенность) - позволяет управлять этим параметром для фотографий.

Тюнинг:

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

Вполне возможно в дальнейших версиях мы сможем прописывать подобные более подробные настройки для всех остальных свойств.

Highlight - судя по всему, выполняет высветление фотографии.

Fill Light - все изображение равномерно заполняется светом, в интерснете это называется «настройка силы света».

Sharpen - добавление резкости.

Soft Focus - имитируется эффект мягкого фокуса портретной оптики, хоть я и без понятия, что это значит.

Эффекты:

Pop Color - эффект выделения на фотке какого-то одного цвета с возможностью его замены на другой (доступны несколько цветов), выглядит это примерно так:

Hue - инструмент похож на предыдущий, но есть менее гибким в настройке. Представляет все изображение в одном тоне - фиолетовый, розовый, салатовый и т.д.

Black&White - создание ч/б фотографии с разными настройками света.

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

Scetch (этюд) - наверное, должно создаваться впечатление рисунка красками.

Distort - разного рода искажения с указанием - сначала определеяем область (круглую, овальную, можно, кстати, изменять ее размеры и после создания), затем выбираем вид искажения и с помощью настроек воплощаем все свои извращенные фантазии в действительность.

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

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

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

P.S. Кстати, в Интернете я видел сервис, который намного больше похож по внешнему виду и функционалу на стандартный Photoshop, но о нем я расскажу в другой раз.
P.P.S. Интересно что думает Артемий Лебедев о Photoshop Online.

При поддержке спонсора:

• Лучшее программное обеспечение для email маркетинга

Вашему вниманию предлагаю еще одну дизайнерскую заметку, не смотря на то, что совсем недавно эта тема уже поднималась. Тем не менее чуть позже подобный пост потеряет львиную долю своей актуальности, которая имеет отношение к новогодним праздникам. Надеюсь еще не все украсили свои блоги, сайты новогодними «фишками». Хотя с другой стороны, зима продлится еще два месяца по календарю и, наверное, три, учитывая причуды нашего с вами климата (имеется ввиду просторы СНГ). Поэтому лучше поздно, чем никогда.
Итак, пост об RSS иконках!

Скорее всего, лишний раз можно не напоминать, что это достаточно важный элемент в вашем блоге. Рекомендуется его размещать на видном месте, и чтобы данная иконка была достаточно заметной. «Почему так? Я вовсе не хочу навязывать человеку подписку» - скажете вы. И это правильно, но иногда возникают ситуации когда все тебе нравится в блоге, ты с радостью хочешь подписаться на RSS канал, а вот найти способ как это сделать оказывается весьма сложной задачей. По крайней мере я очень часто попадаю в подобную ситуацию с E-mail`ом автора или обратной связью - хочу спросить или уточнить что-то, но куда и каким образом обращаться остается загадкой. Понятно, что после нескольких минут подобных поисков вы просто бросите это занятие.
В общем, суть абзаца - размещаем заметную иконку на видном месте!

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

Читать далее »