Симпатичные и простые иконки для подписки - Школа Photoshop
Простые иконки для сайта Простые иконки для сайта

Симпатичные и простые иконки для подписки

17.10.2008Категория урока: Веб-графика

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

Кнопка settings иконок значков фотошоп

Приблизительное время выполнения: 7 минут

1. Фон

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

Я взял документ 800×600, довольно маленький – удобно работать. После создания нового документа, залейте фон темным цветом. Я использовал темно-коричневый (#2e1f13).

OK, после установки фона, можете удовлетвориться таким фоном или найти, к примеру, симпатичную текстуру дерева и также добавить к фону.

Простейшие значки фото

OK, если вы хотите добавить текстуру дерева, зайдите на CG Textures. Достав текстуру, скопируйте её на ваш документ и измените размер соответственно. После этого снизьте opacity и поиграйте с режимами, чтобы смешать текстуру с основным цветом.

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

Простейшие значки фото

2. Основа для значка

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

Простые иконки для сайта

Теперь у вас есть фигура, вам нужно отрезать уголок и повернуть его. Чтобы сделать это, сначала выберите polygonal lasso tool, затем выберите уголок так:

Простые иконки для сайта

Кликните правой кнопкой на выделенную область и затем на layer via cut, это вырежет выбранные пиксели, и расположит их в новом слое. Поверните ваш слой (edit > transform > rotate 180) , затем вам может понадобиться повернуть его так, чтобы он был точно на углу.

Затем залейте вашу маленькую фигуру белым или ещё каким-либо светлым цветом, чтобы она контрастировала с основным.

Значок подписаться

У нас вышел хороший эффект отслоившейся наклейки. Я надеюсь, я хорошо объяснял.

3. Эффекты (Стили слоев)

Теперь как насчет того, чтобы добавить значку глубины? Мы применим к нему Gradient Overlay для каждого из слоев, так что кликните правой кнопкой на слой и зайдите в Blending Options.

Gradient Overlay (основной значок)

Значок подписаться

Gradient Overlay (белый уголок)

Иконки подписка

Замечание: Вам может понадобиться немного повернуть градиент, сделайте это, потянув  под blending options box.

Кнопка settings иконок значков фотошоп

Намного лучше

4. Добавьте текст

Теперь давайте добавим немного текста. Выберите horizontal type tool (обычный) и наберите что-то вроде ‘Subscribe Today!’ на двух строчках.

Кнопка settings иконок значков фотошоп

Замечание: Выбранный мной шрифт называется Delicious, он бесплатен и вы можете скачать его отсюда http://www.josbuivenga.demon.nl/delicious.html

Теперь у вас есть текст, вы должны его повернуть и расположить наверху вашего значка. Поворачивая (ctrl+t), вы можете захотеть уменьшить его, чтобы он вписывался более органично.

Кнопка settings иконок значков фотошоп

Выглядит симпатично! Чтобы ещё больше выделить текст, добавьте немного Drop Shadow.

Дополнительно: чтобы закончить работу, вам нужно сцепит все слои вместе, затем уменьшить размер до 25% (зависит от того, каким у вас был оригинальный размер).

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

Простейшие значки фото

Источник: Nice ‘n’ Simple Subscribe Badges




Смотрите также:

Понравился урок? Поделитесь им в социальных сетях:



12 комментария(-ев) к уроку “Симпатичные и простые иконки для подписки”

  1. щас попробовал,классно получилось) только вот парил.. когда делаешь белый заворот на наклейке..как перенести на новый слой,так и не сделал, работал с одним слоем..

    Андрей

  2. А я запнулась о градиент значка. почему-то весь цвет значка пропадает, меняется на монохром =(

    Lana

  3. Класно! А главное очень просто! А я сидел, парился

    Станиславский

  4. Я не понял как текстуру дерева сделать? :sad: :?:

    Shade

  5. Прикольно. Облепить свой блог такими наклейками, что ли… :)

    Омский студент

  6. rss’ка довольно симпатичная

    System of a Down

  7. Отличный урок! Удачно расписано.

    Сергей

  8. Супер, как раз то что мне надо, для нового проекта! Большое спасибо! :smile:

    Алекс Газун

  9. ОТЛИЧНЫЙ САЙТ, РЕШИЛ СДЕЛАТЬ НОРМАЛЬНЫЙ ДИЗАЙН САМ, А НЕ ПОЛЬЗОВАТЬСЯ ШАБЛОНАМИ, буду пользоваться вашими уроками, сайт добавил в закладки…

    Александр

  10. Здорово!!

    Ярослав

  11. Красота! Спасибо огромное!

    HardCorE

  12. Прикольно.Я бы тоже поставил такие кнопки себе.

    Игорь Алексеенко

Прокомментировать урок

 


Rambler's Top100