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

Создать сайт бесплатно на сервисе готовых сайтов UMI
ЧЁРНАЯ ПЯТНИЦА -50%: цены на все тарифы снижены вдвое!

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

Хотите разместить иконки ВКонтакте, Одноклассников и других соцсетей на сайте? На 1С-UMI это не составит труда. Во все сайты на этом сервисе уже встроены стандартные иконки ― достаточно включить этот блок, и кнопки появятся на вашем сайте. Но если хочется чего-то более оригинального, то всегда можно заменить эти иконки на любые другие.

В интернете есть множество ресурсов, откуда можно скачать уже готовые иконки. Вот некоторые из них:

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

Рисуем иконки при помощи Photoshop 2018

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

Создаем файл нажатием кнопок Ctrl N или через меню «Файл-Создать».

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

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

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

 

Все остальные значения оставляем по умолчанию, если они такие, как на скриншоте.

Теперь жмем на кнопку «Создать».

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

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

Переходим на сайт flaticon.com и вбиваем в поисковую строку название той соцсети, иконку которой мы хотим создать. Допустим, ВКонтакте. Кликаем по иконке без всяких рамок, квадратов и окружностей. Затем скачиваем бесплатно и сохраняем себе на компьютер в PSD-формате.

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

 

Открываем файл с помощью Photoshop сочетанием клавиш Ctrl O и выбором нужного документа или через меню “Файл – Открыть.

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

 

Рядом с созданными нами ранее файлом открывается другой – с иконкой ВКонтакте. Выбираем инструмент «Перо» в боковой панели редактора, наводим его на иконку, зажимаем клавишу Ctrl и кликаем по изображению.

Теперь жмем на правую кнопку мыши и выбираем пункт «Определить произвольную фигуру».

Работа с иконкой социальных сетей для сайта в Photoshop

 

Можем дать ей любое название. Например, Вконтакте.

Имя иконки социальной сети для сайта в Photoshop

 

Не забываем кликнуть по кнопке «ОК» после этого.

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

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

Наводим мышку на белый квадрат внутри нашего документа и кликаем правой кнопкой. Среди появившихся фигур выбираем ту, которую мы определили ранее – Вконтакте.

Выбор иконки социальных сетей для сайта в Photoshop

 

Жмем на Shift и левую кнопку в пустой области белого квадрата и растягиваем фигуру иконки до нужного нам масштаба (определяется на глаз).

Если вас смутил цвет обводки или вы хотите залить фигуру любым другим цветом, обратите свое внимание на панель с опциями вверху, под основным меню редактора. Там можно поменять цвет обводки и заливки или вовсе убрать их.

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

 

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

Удаление обводки иконки социальных сетей для сайта в Photoshop

 

Для изменения цвета заливки кликните по соответствующему значку и затем по прямоугольнику с палитрой.

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

 

Появится окно, где можно указать нужный нам цвет. Если речь о фирменных цветах Вконтакте, то используйте значение 4065ae.

Палитра цветов для иконки социальных сетей для сайта в Photoshop

Вписываем его в поле «#» и жмем кнопку «ОК». Иконка меняет заливку на цвет, который хорошо знаком пользователям социальной сети.

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

 

Следующий шаг – это создание рамки в виде окружности или квадрата.

Меняем инструмент «Произвольная фигура» на «Эллипс» или «Прямоугольник».

Обводка иконки социальных сетей для сайта в Photoshop

 

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

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

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


 

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

Результат получается примерно такой, как на изображении ниже.

Готовая иконка социальной сети ВКонтакте для сайта

 

Для использования градиента в заливке нужно выбрать третий значок слева.

Градиент для иконки социальных сетей для сайта в Photoshop

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

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

Использование градиента для иконки социальных сетей

 

Можно также наложить внешнюю или внутреннюю тень на нашу буквы VK. Для этой цели следует выделить мышкой слой с данной фигурой, кликнуть по нему правой кнопкой и выбрать пункт «Параметры наложения…».

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

 

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

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

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

Иконка ВКонтакте с градиентом

 

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

Уменьшение иконки социальных сетей для сайта в Photoshop

Если белый фон нам не нужен, а требуется прозрачный, берем инструмент «Волшебный ластик», выбираем фоновый слой и кликаем по белому пространству.

Прозрачный фон для иконки социальных сетей в Photoshop

 

Белый цвет фона исчезает.

Прозрачность фона иконки социальных сетей в Photoshop

 

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

Теперь необходимо сохранить нарисованную нами иконку. Кликаем по кнопке «Файл» в меню и выбираем пункт «Экспортировать», затем «Экспортировать как».

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

Для сохранения прозрачности нужно указать PNG-формат, а для белого фона JPEG. После этого жмем на кнопку «Экспортировать все», выбираем путь для хранения и «Сохранить».

Экспорт иконки социальных сетей для сайта в Photoshop

 

Вот и всё! Теперь можно загрузить наш шедевр на сайт. Аналогичным образом создаются иконки и для других социальных сетей.

8-800-5555-864

Бесплатно по РФ

+7 (495) 662-87-59

Для звонков из Москвы

+7 (812) 309-68-23

Для звонков из Санкт-Петербурга