Как сделать в фотошопе иконку RSS на сайт

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

1). Откройте в фотошопе новый документ («Файл» => «Создать») с размером «300 х 300 px». Цвет фона выберите белый.

2). Создайте «Новы слой» («Слой» => «Новый» => «Слой»). Выберите инструмент «Прямоугольник с круглыми углами» , цвет белый:

Установите радиус - «50 px.», «Слой фигура» и, придерживая клавишу «Shift», нарисуйте квадрат:  

Увеличить картинку?

3). Теперь применим стили к квадрату. Нажмите в меню «Слой» => «Стиль слоя» => и выберите:

- «Параметры наложения»;

- «Внутреннее свечение» (Режим: осветление основы. Размер: 40 пикс.):

Увеличить картинку?

- «Наложение градиента» (стиль: линейная, угол - 125°):

Увеличить картинку?

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

Увеличить картинку?

- «Обводка» (Размер: «10 пики», Положение: «Внутри», Цвет: «61c601»):

Увеличить картинку?

Жмите на кнопку «ОК».

Вот, что на данном этапе у вас должно получиться:

4). Теперь продублируйте слой с квадратом. Для этого жмите в меню «Слой» => «Создать дубликат слоя…».

Далее нужно очистить все стили от дублированного слоя. Для этого жмите в меню «Слой» => «Стиль слоя» => «Очистить стиль слоя…».

5). Перейдите в меню «Редактирование» => «Свободное трансформирование контуров» или нажмите на горячие клавиши «CTRL» + «T». Установите такие параметры:
Width (ширина) - 90%
Height (высота) - 90%.

Увеличить картинку?

Вот такой результат должен получиться в итоге:

6). Остаетесь на дублированном слое и выбираете в меню «Слой» => «Растрировать» => «Фигуру».

Далее выберите инструмент «Овальная область»  и нарисуйте на дублированном слое овал, так, как на рисунке снизу:

Нажмите в меню «Выделение» => «Инверсия» или воспользуйтесь горячими клавишами «CTRL»+«Shift»+«I»:

и жмите на кнопку клавиатуры «Delete». В результате вы увидите вот такое:

6). Теперь нужно убрать на дублированном слое непрозрачность на «50%»:

Вот такая картина у нас с вами вырисовывается:

7). Далее выберите Инструмент «Эллипс» , цвет черный и, нажав клавишу на клавиатуре «Shift», рисуем черный круг, так, как у меня на рисунке:

Выставите заливку на «0%»:

8). Нажмите в меню «Слой» => «Стиль слоя» => «Обводка…» и выберите размер «25», цвет «черный», положение «внутри».

Увеличить картинку?

Результат:

Такие же действия проделайте и со следующим кругом (внутренним), только он должен быть немного меньше:

Рисуем третий круг, еще меньше. Только на этот раз уберите «Обводку» и выставьте заливку «100%». Вот такой результат у вас получится:

Теперь объедините эти три слоя (пункт№8):

Увеличить картинку?

9). Выберите инструмент «Прямоугольная область»  и выделите так, как у меня на картинке снизу. Жмите на клавишу «Delete»:

Если нужно, вы можете подвигать слой так, чтобы изображение на кнопке смотрелось симметрично и красиво, примерно вот так:

10).  Если верхний слой с изображением переместить на один слой ниже

Увеличить картинку?

то ваша кнопа будет вот такого вида:

11). Теперь можно уменьшить размер кнопки. Для этого зайдите в меню «Изображение» => «Размер изображения». Я установил размер 50 х 50 пикс.

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

Увеличить картинку?

Обязательно сохраните файл в формате gif или png.

Вот и все. Понравилась статья? Ну, тогда «лайкайте» на кнопки социальных сетей. Если не хотите пропустить интересную новость на моем блоге, подписывайтесь на обновления блога.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

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

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: фотошоп