Понедельник, 23.09.2024, 15:26
Приветствую Вас Гость | RSS

Графика для вебмастера

Каталог статей

Главная » Статьи » Кнопки для сайта

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

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

 
 
 

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

Для примера сделаем кнопку со значком Twitter, а дальше по такой же схеме делаются остальные кнопки социальных сетей. Для начала создадим в программе Фотошоп новый документ, размером 200х200рх. Зальём его тёмным цветом. Выбираем инструмент "Прямоугольник” и рисуем небольшой вертикальный прямоугольник, предварительно выставив основной цвет белым:



 


Теперь выбираем инструмент "Перо” и выставляем ему тип "Вычесть из области фигуры (-)”:
 



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

 

Чтобы убрать выделения и точки, нажмите на пиктограмму, чтобы вокруг её появилось черное очертание:

 


Теперь в окне слоёв выделяем слой с ленточкой, делаем двойной клик и работаем со слоем. Выставляйте примерно такие настройки:

Тень:


 


Внутренняя тень:
 


Наложение градиента (градиент настраивайте по своим вкусам):
 


Обводка:
 


У Вас получится такая лента:
 

 

Теперь щелкните в окне слоёв правой кнопкой мыши на слое с лентой и выберите пункт "Преобразовать в смарт-объект”. После преобразования перейдите в меню Фильтр > Шум > Добавить шум :

 


Сделаем для красоты на ленте прошивку нитью. Выберите инструмент "Горизонтальный текст”.
Установите цвет переднего плана такой, чтобы нить немного выделялась на ленте. Клавишами минус и пробел сделайте пунктирную линию длиной, соответствующей длине ленты. Инструментом "Трансформирование” (Ctrl + T) перевернём шов в вертикальное положение и подравняем его на ленте. Теперь надо создать дубликат слоя с пунктирной линией и передвинуть эту линию на противоположный край ленты. Ленточка стала выглядеть так:

 

 
 
Остаётся добавить логотип социальной сети и кнопка-лента готова. Логотип у меня уже заготовлен, остаётся перенести его на кнопку. Для начала инструментом "Прямоугольник" нарисую небольшой прямоугольник белого цвета:
 
 
Фигуру можно рисовать любой формы. Можно добавить небольшую стрелочку. Делается это так же как и вырезали треугольник - инструментом "Перо", выставив в верхней панели "Добавить к области фигуры":
 
 
Поставив "Пером" три точки, получаем стрелочку:
 
 
 
Теперь вставляем эмблемку социальной сети и кнопка готова:
 
 
 
Вот и всё! По этой схеме можно делать оригинальные кнопки любых форм и расцветок.
Категория: Кнопки для сайта | Добавил: zuma307 (30.06.2015)
Просмотров: 315 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Меню сайта
Категории раздела
Кнопки для сайта [6]
Вертикальное меню [2]
Горизонтальное меню [2]
Шапка для сайта [2]
Создание баннера [1]
Создание логотипа [2]
Эффекты для текста [2]
Вход на сайт
Продажа сайтов
Магазин сайтов Top-Bit
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Copyright MyCorp © 2024
Создать бесплатный сайт с uCoz