Создание простого веб-значка в Adobe Photoshop

Создание простого веб-значка в Adobe Photoshop

В этом уроке Вы научитесь создавать простой веб-значок, используя Photoshop.

Предварительный просмотр результата

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

Создание простого веб-значка в Adobe Photoshop

Источники

Шаг 1

Откройте Photoshop и нажмите Ctrl + N, чтобы создать новый документ. Введите все данные, показанные на рисунке ниже, и нажмите кнопку ОК.
Активируем сетку Grid (View > Show > Grid) и привязку к сетке Snap to Grid (View > Snap To > Grid).
На данный момент Вам необходима сетка через каждые 5рх. Переходим в меню Edit > Preferences > Guides, Grid & Slices и фокусируемся на секции Grid. Вводим значение 5 в окно Gridline Every и 1 – в окно Subdivision. Также устанавливаем цвет сетки #a7a7a7.
После того, как Вы ввели все данные, нажмите ОК. Не пугайтесь этой сетки. Она облегчит нашу работу в дальнейшем.
Вам также необходимо открыть панель Info (Window > Info) для предварительного просмотра размера и расположения Ваших фигур.

Создание простого веб-значка в Adobe Photoshop

Шаг 2

Берем инструмент Polygon Tool и фокусируемся на верхней панели. Вводим значение 25 в окно Sides, затем нажимаем на маленькой черной стрелке, чтобы открыть меню настроек Polygon.
Отмечаем все три окошка, затем вводим 100рх в качестве радиуса и 20% отступа.
Устанавливаем в качестве цвета переднего плана цвет #c7a069 и создаем нашу фигуру, как показано на изображении ниже.

Создание простого веб-значка в Adobe Photoshop

Шаг 3

Теперь Вам необходимо создать простой узор. Для начала, нажимаем Control + N, чтобы создать новый документ. Вводим значение 4 для ширины и высоты и нажимаем ОК.
Сетка и привязка к сетке уже должны быть включены. Для нового документа нам нужна сетка через каждый 1рх. Просто переходим в меню Edit > Preferences > Guides, Grid & Slices и вводим 1 в окно Gridline Every.
Переходим на панель слоев и удаляем слой “Background”. Устанавливаем в качестве цвета переднего плана черный цвет и создаем прямоугольник с помощью инструмента Rectangle Tool. Создаем два векторных пути 2 на 2рх и располагаем их так, как показано на следующем изображении.
Теперь переходим в меню Edit > Define Pattern. Вводим имя своего узора, нажимаем ОК, и вот у нас уже есть узор.
Закрываем этот документ и возвращаемся к первому.

Создание простого веб-значка в Adobe Photoshop

Шаг 4

Возвращаемся к «сетке через каждые 5рх». Переходим в меню Edit > Preferences > Guides, Grid & Slices и вводим значение 5 в окно Gridline Every.
Фокусируемся на панели слоев и нажимаем дважды на векторной фигуре, созданной во втором шаге, чтобы открыть окно стилей слоя.
Вводим свойства, показанные на следующих изображениях, и нажимаем ОК. Для секции Pattern Overlay Вам необходимо использовать узор, созданный в предыдущем шаге.

Создание простого веб-значка в Adobe Photoshop

Создание простого веб-значка в Adobe Photoshop

Создание простого веб-значка в Adobe Photoshop

Создание простого веб-значка в Adobe Photoshop

Создание простого веб-значка в Adobe Photoshop

Создание простого веб-значка в Adobe Photoshop

Создание простого веб-значка в Adobe Photoshop

Шаг 5

Устанавливаем цветом переднего плана цвет #855f37, нажимаем на инструменте Ellipse Tool, создаем круг диаметром 120рх и располагаем его, как показано на первом изображении. Убедитесь, что эта новая векторная фигура остается выделенной, и продолжайте работать с инструментом Ellipse Tool: поставьте пометку на Subtract на верхней панели и создайте круг диаметром 70рх, как показано на втором изображении.

Создание простого веб-значка в Adobe Photoshop

Шаг 6

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

Создание простого веб-значка в Adobe Photoshop

Создание простого веб-значка в Adobe Photoshop

Создание простого веб-значка в Adobe Photoshop

Создание простого веб-значка в Adobe Photoshop

Шаг 7

Устанавливаем цветом переднего плана цвет #c7a069, берем инструмент Ellipse Tool, создаем круг 70рх и располагаем его так, как показано на первом изображении. Убедитесь, что новая векторная фигура остается выделенной и переключитесь на инструмент Rectangle Tool.
Отмечаем Add на верхней панели и создаем прямоугольник 270 на 40px, как показано на втором изображении.

Создание простого веб-значка в Adobe Photoshop

Шаг 8

Убедитесь, что векторная фигура, созданная в предыдущем шаге, все ещё выделена. Возьмите инструмент Add Anchor Point Tool и добавьте две новые ключевые точки, как показано на первом изображении.
Переключитесь на инструмент Convert Point Tool и нажмите на обеих ключевых точках. Затем Вам необходимо переместить эти новые точки.
Берем инструмент Direct Selection Tool, выделяем левую ключевую точку и перемещаем её на 25рх вправо, затем выделяем правую ключевую точку и перемещаем её на 25рх влево. В конце Ваша векторная фигура должна выглядеть так, как показано на третьем изображении.
Открываем окно стилей слоя для этого векторного пути и вводим настройки, показанные на следующих изображениях.

Создание простого веб-значка в Adobe Photoshop

Создание простого веб-значка в Adobe Photoshop

Создание простого веб-значка в Adobe Photoshop

Создание простого веб-значка в Adobe Photoshop

Создание простого веб-значка в Adobe Photoshop

Создание простого веб-значка в Adobe Photoshop

Шаг 9

Устанавливаем в качестве цвета переднего плана цвет #855f37, берем инструмент Rectangle Tool, создаем векторную фигуру 240 на 30px и располагаем её так, как показано на первом изображении. Берем инструмент Add Anchor Point Tool и добавляем две ключевые точки, как показано на первом изображении.
Переключаемся на инструмент Convert Point Tool и нажимаем на обеих точках.
Берем инструмент Direct Selection Tool, выделяем левую ключевую точку и перемещаем её на 15рх вправо, затем выделяем правую ключевую точку и перемещаем её на 15рх влево. В конце Ваша векторная фигура должна выглядеть так, как показано на третьем изображении.

Создание простого веб-значка в Adobe Photoshop

Шаг 10

Убедитесь, что векторная фигура, созданная в предыдущем шаге, все ещё выделена. Берем инструмент Ellipse Tool, ставим отметку на Subtract на верхней панели и создаем круг с размерами 70 на 70px, как показано на первом изображении.
Открываем окно стилей слоя для этого векторного пути и вводим настройки, показанные на следующих изображениях.

Создание простого веб-значка в Adobe Photoshop

Создание простого веб-значка в Adobe Photoshop

Создание простого веб-значка в Adobe Photoshop

Создание простого веб-значка в Adobe Photoshop

Шаг 11

Устанавливаем в качестве цвета переднего плана цвет #c7a069, берем инструмент Type Tool и добавляем надпись “PREMIUM”, как показано на первом изображении.
Используем шрифт MoolBoran с размером 15pt. Выделяем часть текста и переходим в меню Edit > Transform > Warp.
Выбираем пункт Arc из выпадающего меню Warp, вводим значение 65 в окно Bend и нажимаем Enter.

Создание простого веб-значка в Adobe Photoshop

Шаг 12

Открываем окно стилей слоя для добавленного в предыдущем шаге текста и вводим настройки, показанные на следующих изображениях.
Переходим на панель слоев, нажимаем правой кнопкой на этой части и выбираем Copy Layer Style.

Создание простого веб-значка в Adobe Photoshop

Шаг 13

Берем инструмент Type Tool и добавляем надпись “QUALITY”, как показано на следующем изображении. Снова используем шрифт MoolBoran с размером 15pt.
Выделяем часть текста и переходим в меню Edit > Transform > Warp.
Выбираем пункт Arc из выпадающего меню Warp, вводим значение -50 в окно Bend и нажимаем Enter.
Переходим на панель слоев, нажимаем правой кнопкой на этой части и выбираем Paste Layer Style.

Создание простого веб-значка в Adobe Photoshop

Шаг 14

Берем инструмент Type Tool и добавляем надпись “ MONEY BACK ”, как показано на следующем изображении. Снова используем шрифт MoolBoran с размером 13pt. Также вводим значение 10pt для leading и 350 для tracking.
Нажимаем правой кнопкой на этой части текста и выбираем Paste Layer Style.

Создание простого веб-значка в Adobe Photoshop

Шаг 15

Берем инструмент Type Tool и добавляем “100” и знак процента и используем настройки, показанные на первом изображении. Выделяем обе части текста и конвертируем его в smart object.
Открываем окно стилей слоя для этого объекта и вводим настройки, показанные на следующих изображениях.

Создание простого веб-значка в Adobe Photoshop

Создание простого веб-значка в Adobe Photoshop

Создание простого веб-значка в Adobe Photoshop

Создание простого веб-значка в Adobe Photoshop

Создание простого веб-значка в Adobe Photoshop

Результат

Вот как должен выглядеть Ваш окончательный результат.

Создание простого веб-значка в Adobe Photoshop

 

http://www.photoshopstar.com
Перевод: http://www.4webmaster.ru/

Рекомендуем почитать:
Создание логотипа в стиле Web 2.0 в Photoshop
Как создать пули в Photoshop
Создание футуристических абстрактных обоев для рабочего стола


Оставить комментарий: