Создание красивой RSS иконки для блога

красивые RSS иконки для блогаДля тех, кто еще не знает RSS — специальный формат сообщений в блоге, который позволяет получать обновления с сайта без необходимости его посещения. Для чтения используются специальный программы — RSS ридеры (например, Google Reader).

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

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

Приступим к созданию собственной RSS иконки для вашего блога — для этого понадобиться выполнить 3 простых шага.

Шаг 1. Создание формы

Скачиваем набор форм для RSS иконок. Чтобы подключить их в фотошоп, находим директорию, где он установлен и копируем *.csh файл в папку Presets\Custom Shapes. Далее в графическом редакторе photoshop в боковой панели инструментов выбираем элемент с формами (пункт 1 на рисунке ниже):

формы (shapes) для фотошопа

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

Выбираем нужную нам форму и начинаем рисовать. Удерживая кнопку Shift, мы получим «правильную фигуру» без растяжек в ширину или высоту. Форма готова, соответствующий слой создан.

формы photoshop

Шаг 2. Задание стиля для иконки

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

Перед тем как использовать стили их также нужно установить. Для этого в разделе Edit главного меню находим пункт Preset Manager.

Установка стилей (styles) в фотошоп

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

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

Работа со стилями в фотошопе

Шаг 3. Косметические правки

Теперь на основании полученных знаний, можем слегка улучшить нашу иконку. Для этого добавим еще один слой (пункт 1 на рисунке ниже), причем он должен располагаться под слоем с формой:

урок со стилями в фотошопе

Выделяем прямоугольную область, которая полностью покрывает рисунок внутри иконки (пункт 2). После этого выбираем инструмент заливки (пункт 3) и заливаем выделенную область цветом по умолчанию. Дальше опять просто кликаем на понравившийся вам стиль и он будет применен к этой прямоугольной области.

Как я уже говорил, стиль — это совокупность разных свойств объекта. Если вы посмотрите на слой, то заметите перечень этих самых свойств (пункт 1 на рисунке ниже):

photoshop styles

Поэтому можно вносить свои изменения в каждый стиль. Для этого кликаете дважды по иконке (пункт 2) и во всплывающем окне формируете уже новые настройки стиля. Можно, например, добавить в форме тень (пункт 3). Чтобы сохранить изменения, нажимаете «Ок».

После всех настроек соединяете видимые слои изображения — раздел Layer в главном меню, пункт MergeVisible (или Ctrl + Shift + E).

RSS иконка готова!

Имея в наличии много разных форм и стилей, можно легко и быстро создать оригинальную RSS иконку для своего блога.

rss иконки для блога

Если урок понравился — подписываемся на RSS или кликните на соответствующую иконку в блоге:)

34 комментария к статье “Создание красивой RSS иконки для блога”
  1. Классно поработал.. Но вот я не пойму, а что можно еще создавать для вордпреса, кроме иконок.
    Урок понятен, но вот если бы ты смог пояснить подробнее, как сделал те четверти радиусов? Теоретически я понимаю, как это делается, а на практике, просто гемор какой-то..
    Будет желание, можешь разместить свой материал у меня…

  2. Tod

    Не совсем понял, что подразумевается под «четверти радиусов»?

  3. Ну что непонятного? Та фигура белого цвета, которая внутри всех значков, ну как бы две полусферы…

  4. Tod

    Я их не делал вообще, использовал готовые формы — см. шаг 1

  5. Спасибо, теперь понятно. Надо посмотреть, есть ли у меня такие значки в фотошопе. Но ни разу не обращал на них внимания.

  6. Народ а можно на нормальный файл-сервер залить формы, ну рапиду или депозит в конце концов, единственное зеркало на летитбите — не вариант =(

  7. Tod

    Stas, в ближайшие выходные я постараюсь сделать зеркала для файлов.

  8. Зеркало — http://www.mediafire.com/

    Удобный файлообменник, правда нет бонусов для хозяина файла.

  9. Дмитрий

    Это главная файлообменника. Можно поправить ссылку на зеркало? А то летитбит на файрволле закрыт. :(

  10. Tod

    Залил на хостинг — формы, стили1, стили2.

  11. VirtualBiz

    Урок очень полезный, спасибо. Сделал себе новую RSS иконку — можно наблюдать ее в моем блоге. Жаль форм маловато :)

  12. Вадим

    Замечательные иконки вышли.. Спасибо пост.

  13. Tod

    VaNToS, если найду, обязательно об этом напишу.

  14. VaNToS

    Очень нужные сэмплы, спасибо. Сделал себе иконку.

    Ты случайно не знаеш, как самому сделать такие формы для фотошопа, в кореле там или ещё где?
    Мне очень интересно. Буду благодарен если найдёш.

  15. Спасибо за такое детальное руководство. Очень полезно для всех, кто хочет сделать иконку для RSS своими руками.

  16. Tod

    Lady Maksima, спасибо за распространение моего руководства в массы:)

  17. Zer0CooL

    Сорри за глупый вопрос (мало общаюсь с фотошопом)
    У меня стоит CS3 Русский (лучше бы англ был нифига по русски не понять)
    У меня нету директорий Custom/Presets
    Создавал сам закидывал файлик запускаю
    но ничего не появилось на сайдбаре (как на скриншоте)
    закинул так C:Program FilesAdobeAdobe Photoshop CS3НаборыCustom
    но тоже без вариантов =(
    и вовще что за бред =) я понимаю фотошоп русский =) но что-бы директории это какойто фотожоп прям получается=)
    Помогите плийз :oops:

  18. Tod

    В принципе, закидывать файл в нужную папку не обязательно, как я потом понял.
    В сайдбаре нужно выбрать инструмент форм. Вообще можешь еще заглянуть в меню Edit — Preset Manager (хз как по русски) и в открывшемся окне найти Custom Shapes. После чего загрузить формы из файла.

  19. Zer0CooL

    2 Tod Нашел !
    все получилось !
    просто все этот корявый русский фотошоп =(
    надо нафиг сносить и ставить ENG
    Спасибо за помощь ;-)

  20. Zer0CooL

    Да винда слава богу тоже англ =)
    вот чет решил русс фотошоп посмотреть xD ну я не фанат конечно PS =)
    Но в англ я хоть понимал что делаю =) а русс это просто конец =) как первый раз=)
    P.s забыл сказать даже =) Спасибо за качественный урок ;-)

  21. Tod

    Zer0CooL, не люблю русский фотошоп:) и винду. С юных лет ставлю только английские версии.

  22. Assasin

    Прикольно… Спасибо большое! Запарился чужими иконками пользоваться!

  23. seoBB.log

    Советую в качестве зеркала.

    filekeeper.org/ru/ Загрузить файлы 10 Gb
    позволяет хранить 10 ГБ файлов. Трафик не ограничен независимо от направления.

  24. Tod

    seoBB.log, выглядит немного стремно:) Вызывает страх насчет сохранности и доступности файлов, если честно. Привык доверять более-менее продвинутым конторам, кто уже не первый год на рынке.

  25. Спасибо! Статья очень полезная и как раз то, что я искала :)Уже почти разобралась, что это вообще такое RSS и подумывала свою какую-то иконку нарисовать, а тут такое руководство. Супер!

  26. Valentin

    А у самого почему иконка не уникальная?

  27. Tod

    Valentin, мне текущая приглянулась очень:)

  28. Денис

    Можешь залить формы для иконок куда-нибудь еще? У меня не скачивается…

  29. Tod

    Денис, только что попробовал скачать, все работает.

  30. Lp

    спасибо огромное, очень хорошая статья. раньше не знал об этом блоге, теперь сижу читаю всё подряд)

  31. Сергей Мишалов

    Тод, а можно несколько уроков из серии тех дизайна, если не своих, то переведенных, ну очень интересно…

  32. Tod

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

  33. Там кто-то спрашивал как самому замутить форму (shape). Так вот:
    1) Нарисовать её с помощью инструмента «pen tool» (не знаю как по-русски) сразу над инструментом «Текст» в CS4
    2) Когда нарисовали тыкнуть правой кнопкой мыши и выбрать пункт «Define custom shape» и в появившемся окне дать ей имя.
    3) После этого форма добавится к уже существующим стандартным, как до них добраться описано в 1-м этапе урока.

  34. 4ksner

    Отличная статья, буду теперь делать сам для своих сайтов иконки!

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

Внимание! Если вы комментируете впервые, текст будет отправлен на модерацию.
Ваш e-mail не публикуется. Обязательные поля помечены *