Делаем социальные кнопки

Социальные кнопки

Начнём наверное с самого простого. Попробуем сделать кнопки для социальных сетей. Нам потребуется программа Фотошоп,  фантазия и немного терпения. Кнопки сделаем не очень крупными. У каждой соцсети кнопки окрашены в свой цвет, поэтому и вы окрашивайте свои кнопки соответствующим цветом. Размеры кнопок могут быль любыми.

В программе Фотошоп создадим новый документ, размером 100х100 рх. А чтобы удобнее было работать, с помощью инструмента "Масштаб" :

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

Каждую кнопку будем делать отдельно, чтобы вставлять их на сайт как кликабельные картинки. Выбираем и устанавливаем основной цвет для первой кнопки и включаем инструмент "Прямоугольник со скруглёнными углами"

Радиус закругления углов устанавливается вверху в панели:

Инструментом "Прямоугольник со скруглёнными углами" рисуем квадрат между выставленными направляющими, который окрасится в выбранный цвет:

На картинке у меня уже почти готовая кнопка. Такой результат можно получить, выставив определённые настройки в окне "Стиль слоя". Что такое "Стиль слоя" и где это искать. Для тех кто только познаёт азы Фотошопа, немного поясню. Чтобы открыть окно "Стиль слоя" необходимо выделить слой:

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

Кнопка почти готова, остаётся только найти логотип нужной социальной сети и вставить в эту кнопку. Для примера я скачал из интернета логотип кнопки Facebook. Из него вырежем букву f и вставим в свою кнопку. 

 Инструментом "волшебная палочка" удалим всё ненужное, оставив одну букву f.Затем скопируем букву и вставим её в свою кнопку. Размер буквы подгоняйте с помощью масштабирования.

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


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

Чтобы кнопки ставить на сайте, необходимо чтобы они были на прозрачном фоне. Можно сделать это двумя способами:
1. В окне "Слои" выключит слой "Фон" и сохранить файл для Web в формате GIF
2. Объединить в окне "Слои" все видимые слои, вырезать фон инструментом "Волшебная палочка" и сохранить файл точно так же.

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

Это самый простой способ создания простых кнопок. Надеюсь, что это кому-то поможет.