BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

2014-04-30 / Вр:22:35 / просмотров: 3632

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

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

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

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

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

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

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

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

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

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

Внутреннее свечение

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

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

Наложение градиента

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

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

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

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

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

Обводка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выставите заливку

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

Обводка

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

Результат:

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

Это для того, чтобы ваш фон был прозрачным

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

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

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

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

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

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

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

Subscribe without commenting

Метки:

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 704
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3821