Хотите разместить иконки ВКонтакте, Одноклассников и других соцсетей на сайте? На 1С-UMI это не составит труда. Во все сайты на этом сервисе уже встроены стандартные иконки ― достаточно включить этот блок, и кнопки появятся на вашем сайте. Но если хочется чего-то более оригинального, то всегда можно заменить эти иконки на любые другие.
В интернете есть множество ресурсов, откуда можно скачать уже готовые иконки. Вот некоторые из них:
Скачиваете понравившиеся иконки и загружаете на свой сайт. Просто? Да. Но если есть время и желание нарисовать собственные уникальные иконки, мы покажем вам, как это делается.
Рисуем иконки при помощи Photoshop 2018
В первую очередь, скачиваем и устанавливаем сам графический редактор. Если нет желания приобретать лицензию на Photoshop ― воспользуйтесь его бесплатными аналогами, например, онлайн-сервисом pixlr.com. Мы рассмотрим этот процесс на примере Photoshop, но аналогичные действия можно сделать и в других программах.
Создаем файл нажатием кнопок Ctrl N или через меню «Файл-Создать».
Появляется окно, где нужно указать ширину и высоту документа в пикселях. Выставляем значения 512x512 с учетом запаса.
Все остальные значения оставляем по умолчанию, если они такие, как на скриншоте.
Теперь жмем на кнопку «Создать».
Открывается белый прямоугольник, в котором мы и будем рисовать нашу иконку.
Переходим на сайт flaticon.com и вбиваем в поисковую строку название той соцсети, иконку которой мы хотим создать. Допустим, ВКонтакте. Кликаем по иконке без всяких рамок, квадратов и окружностей. Затем скачиваем бесплатно и сохраняем себе на компьютер в PSD-формате.
Открываем файл с помощью Photoshop сочетанием клавиш Ctrl O и выбором нужного документа или через меню “Файл – Открыть.
Рядом с созданными нами ранее файлом открывается другой – с иконкой ВКонтакте. Выбираем инструмент «Перо» в боковой панели редактора, наводим его на иконку, зажимаем клавишу Ctrl и кликаем по изображению.
Теперь жмем на правую кнопку мыши и выбираем пункт «Определить произвольную фигуру».
Можем дать ей любое название. Например, Вконтакте.
Не забываем кликнуть по кнопке «ОК» после этого.
Переходим к первому файлу, который мы создали изначально. В боковой панели инструментов выбираем «Произвольная фигура». Для этого нужно щелкнуть по изображению с прямоугольником и выбрать соответствующий пункт.
Наводим мышку на белый квадрат внутри нашего документа и кликаем правой кнопкой. Среди появившихся фигур выбираем ту, которую мы определили ранее – Вконтакте.
Жмем на Shift и левую кнопку в пустой области белого квадрата и растягиваем фигуру иконки до нужного нам масштаба (определяется на глаз).
Если вас смутил цвет обводки или вы хотите залить фигуру любым другим цветом, обратите свое внимание на панель с опциями вверху, под основным меню редактора. Там можно поменять цвет обводки и заливки или вовсе убрать их.
Чтобы убрать обводку, нужно кликнуть по значку и выбрать белый прямоугольник с перечеркивающей его красной линией.
Для изменения цвета заливки кликните по соответствующему значку и затем по прямоугольнику с палитрой.
Появится окно, где можно указать нужный нам цвет. Если речь о фирменных цветах Вконтакте, то используйте значение 4065ae.
Вписываем его в поле «#» и жмем кнопку «ОК». Иконка меняет заливку на цвет, который хорошо знаком пользователям социальной сети.
Следующий шаг – это создание рамки в виде окружности или квадрата.
Меняем инструмент «Произвольная фигура» на «Эллипс» или «Прямоугольник».
Затем от верхнего левого угла документа растягиваем фигуру поверх наших букв. При этом, не забываем удерживать кнопку Shift, чтобы получился идеально ровный круг или же квадрат, а не прямоугольник или эллипс.
Если мы не отключили заливку, то вторая фигура полностью перекроет первую. В этом случае просто убираем заливку и оставляем только обводку круга/квадрата.
При желании можно вместо белого фона сделать любой цвет или даже градиент. Для этого выделяем мышкой слой с нашими буквами и перетаскиваем их выше, размещая над слоем с кругом или квадратом. Затем выделяем слой с одной из упомянутых ранее фигур, которые используются для обводки иконки и меняем цвет заливки на тот, который хотим.
Результат получается примерно такой, как на изображении ниже.
Для использования градиента в заливке нужно выбрать третий значок слева.
Чтобы поменять цвета в градиенте, кликните поочередно на каждый из нижних «карандашиков» и выберите нужный оттенок.
Менять можно и сам стиль градиента. На скриншоте выше видны различные типы. При желании можно создать и свой, но, чтобы лишние телодвижения не совершать, будет достаточно воспользоваться готовым вариантом.
Можно также наложить внешнюю или внутреннюю тень на нашу буквы VK. Для этой цели следует выделить мышкой слой с данной фигурой, кликнуть по нему правой кнопкой и выбрать пункт «Параметры наложения…».
В появившемся окне надо пометить галочками пункты «Внутренняя тень» и «Тень». Конечно, это делать не обязательно, либо можно активировать только один пункт. Настройки тени можно также регулировать. Попробуйте это сделать самостоятельно.
После добавления тени иконка будет выглядеть примерно так, как на изображении ниже.
Если первую фигуру, обозначающую ВКонтакте, нужно пропорционально уменьшить, нажмите сочетание клавиш Ctrl T, затем зажмите Shift и Alt и левой кнопкой мышки стяните букву до нужного размера.
Если белый фон нам не нужен, а требуется прозрачный, берем инструмент «Волшебный ластик», выбираем фоновый слой и кликаем по белому пространству.
Белый цвет фона исчезает.
Квадратики, которые мы видим в Photoshop, означают прозрачность фонового слоя. В изображении, которое мы потом сохраним, они показываться не будут.
Теперь необходимо сохранить нарисованную нами иконку. Кликаем по кнопке «Файл» в меню и выбираем пункт «Экспортировать», затем «Экспортировать как».
Для сохранения прозрачности нужно указать PNG-формат, а для белого фона JPEG. После этого жмем на кнопку «Экспортировать все», выбираем путь для хранения и «Сохранить».
Вот и всё! Теперь можно загрузить наш шедевр на сайт. Аналогичным образом создаются иконки и для других социальных сетей.
