Иконки социальных сетей для сайта

В этом уроке мы рассмотрим один из вариантов создания изображений для сайта в Фотошопе. В роли изображений будут выступать иконки социальных сетей для сайта. Да, вы не ослышались! Мы будем рисовать иконки соц.сетей в программе «Photoshop».

Итак, перейдем к делу. Как вы знаете, существует огромное количество социальных сетей. Для всех этих сервисов нарисовать иконки будет проблематично долго. Поэтому предлагаю рассмотреть создание этих кнопочек на примере таких социальных сетей, как «FaceBook», «ВКонтакте», «Одноклассники», «Twitter».

Что нам понадобиться для работы: 1. Программа «Photoshop», 2. Программа «Пипетка», 3. Базовые знания Фотошопа, чтобы можно было свободно находить инструменты и понимать процесс создания. Если у вас нет «Пипетки», то не отчаивайтесь, либо скачайте её бесплатно, либо продолжайте выполнять урок без неё. Она нам нужна для того, чтобы можно было взять образец цвета с дизайна тех социальных сетей, кнопки которых мы собрались рисовать. Все цвета, которые я буду использовать, обязательно укажу. Не волнуйтесь! Итак, начнем!

Создание иконок социальных сетей для сайта

1. Откройте программу «Photoshop» и создайте новый документ размером 500×250 пикселей.

Создание документа в Photoshop

2. Создайте новый слой и назовите его «icon-bg».

Создание нового слоя в Photoshop

3. Убедитесь, что у вас выделен только что созданный слой и выберите инструмент «Прямоугольное выделение» Инструмент Прямоугольное выделение на панели инструментов.

4. На панели свойств выберите стиль «Заданный размер» и установите размер выделения 50×50.

Опции выделения

5. Щелкните в любом месте созданного документа, чтобы появилось выделение.

Создание выделения в Photoshop

Сейчас выделение у нас имеет «острые» углы. Мы можем сделать их немного мягче, придав скругление.

6. Перейдите в пункт меню «Выделение» => «Модификация» => «Сгладить». Установите в поле «Радиус» 4 пикселя и нажмите «Ок».

Модификация в Photoshop

7. Не снимая выделения, выберите инструмент «Заливка» и залейте любым цветом активное выделение. Я залил обычным черным. Нажмите сочетания клавиш «Ctrl+D», чтобы снять выделение или перейдите в меню «Выделение» => «Снять». Заготовка для нашей иконки готова.

Создание фигуры в Ptohoshop

8. Перейдите в меню «Слой» => «Стиль слоя» => «Параметры наложения».  Перед вами откроется меню наложения эффектов на нашу созданную фигуру. Перейдите в раздел «Наложение градиента» и установите значения, которые указаны на рисунке ниже, или воспользуйтесь своими.

Параметры наложения в Photoshop

Значения градиента для этой опции следующие:

Настройка градиента в Photoshop

9. Теперь перейдите в пункт «Обводка» и установите следующие значения.

Применение обводки для слоя Photoshop

Настройки обводки следующие:

Параметры обводки в Photoshop

10. Нажмите кнопку «Ок», чтобы закрыть окно наложения эффектов. В итоге у нас должно получиться следующее:

Заготовка для кнопки социальной сети

Теперь давайте создадим стеклянный эффект для кнопки.

11. Создайте новый слой выше слоя «icon-bg» и назовите его «glass». Glass переводится, как стекло.

12. Выберите инструмент «Перо» Инструмент Перо в Photoshop и попробуйте создать контуры, как показано на рисунке.

Рисование с помощью пера в Photoshop

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

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

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

13. Нажмите сочетание клавиш «Ctrl+Enter», чтобы наш контур превратился в выделение, и залейте его белым цветом. Я специально перекрасил задний фон, чтобы вы могли увидеть результат заливки. Если у вас темный фон, на котором должны быть расположены иконки социальных сетей, то статья «Иконки на темном фоне» придется вам кстати.

Создание выделения из контура пера в Photoshop

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

14. Перейдите в окно «Слои».

15. Выберите слой с нашим белым контуром.

16. С зажатой клавишей «Ctrl» щелкните по слою «icon-bg» в том месте, где у вас появляется курсор в виде руки с указательным пальцем и квадратиком чуть ниже.

Я такое место подсветил красной стрелочкой. Можете щелкнуть туда. Что произойдет после щелчка? Произойдет выделение по образцу. Т.е. какие контуры имеет слой «icon-bg», такое выделение и будет применено.

У нас выбран слой «glass» и соответственно выделение будет применено для него. Наша задача убрать все лишнее, что выходи за пределы этого выделения.

17. Не снимая выделения, нажмите сочетания клавиш «Ctrl+Shift+I» или пройдите в меню «Выделение» => «Инверсия», чтобы обратить выделение.

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

18. Смело, нажимаем кнопку «Delete».

Удаление области из контура выделения в Photoshop

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

19. Перейдите в окно «Слои».

20. Убедитесь, что у вас выделен слой со стеклом и измените «Непрозрачность» примерно на 35%. У вас должно получиться примерно следующее.

Изменение параметров непрозрачности в Photoshop

Создание эффекта стекла в Photoshop

 

Вариантов «остекления» может быть много. Вы можете придумать и свой. Можете вообще не использовать эффект стекла. Как вашей душе будет угодно.

21. Выберите инструмент «Горизонтальный текст» и напишите «ОК» большими буквами. Выровняйте посередине кнопки. Настройки шрифта следующие.

Создание кнопки социальной сети Одноклассники

Параметры шрифта для кнопки Одноклассники

Наша кнопка почти готова, осталось добавить немного тени на задний план кнопки.

22. Выделите слой «icon-bg» и перейдите в меню «Слой» => «Стиль слоя» => «Параметры наложения».

23. Перейдите в раздел «Тень» и выставьте следующие значения.

Наложение эффекта тени в Photoshop

Вот что получилось:

Кнопка социальной сети Одноклассники

Теперь вы можете просто раскопировать необходимые слои и поменять цвета градиента. Экспериментируйте!

Кнопки социальных сетей для сайта

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

Понравилась статья? Поделитесь с друзьями!

0


This Post Has Been Viewed 21 Times

Автор статьи: , дата публикации

Читайте также на моем блоге:

  • Как сделать картинку прозрачной в Фотошопе
  • Favicon для сайта — как средство привлечения посетителей!
  • Создание шапки для сайта или блога своими руками!
  • Фон для сайта в Photoshop своими руками!
  • Как я делаю красивые изображения к своим постам (видеоурок)
  • Шапка для сайта
  • Как сохранить изображение с сайта
  • Картинки и иконки для сайта на темном фоне
  • Стильный фон для сайта (часть 2)
  • Стильный фон для сайта
Читатели оставили 6 комментариев к этой статье:
  • Татьяна, 26.08.2013 в 05:39

    Здравствуйте, я похо владею шопом , но после несколько часов иконка и вправду получилась, но вот бьюсь головой- а как её сохранить, она же с фоном сохраняется и даже фон отключаешь , все равно с фоном а не одна иконка

  • Олег Астанин
    Олег Астанин12.09.2013 в 21:20

    При сохранении выберите режим PNG-24.

  • Софья04.04.2016 в 01:40

    Классно! Теперь можно любому начинающему фотошоперу сделать иконки для соцсетей. Я так поняла, что их можно сделать разными: в форме ромба, кругленькими и т.п. Так? Или зеркального эффекта уже не будет?

  • Наталья06.04.2016 в 13:29

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

  • Татьяна06.04.2016 в 18:23

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

  • den114207.04.2016 в 16:59

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

Добавить комментарий к этой статье:

(обязательно)

(не будет опубликовано, обязательно)

Вебсайт (если есть)

  • Получайте оповещения о выходе новых статей на Ваш E-mail. Для этого, введите Ваш E-mail и нажмите Enter.

  • Рубрики

  • Присоединяйся ко мне!

    Группа
    Вконтакте

    Канал на
    You Tube

    Я на
    Twitter