Уроки » Веб-дизайн → Простой Web значок в Photoshop  

Результат выполнения урока


Файлы для выполнения этого урока

Шрифт MoolBoran MoolBoran_PSTR.rar [137,57 Kb] (cкачиваний: 3)

Шаг 1:

Открываем Photoshop и жмем сочетание клавиш CTRL+N для того чтобы создать новый документ. Установите значения как показано на скриншоте ниже и нажмите ОК.

Включите отображение сетки View > Show > Grid (Вид > Показать > Сетка) и привязку к сетке View > Snap To > Grid (Вид > Привязка к > Сетка)

На данный момент нам нужно установить сетку с размером ячейки в 5px. Для этого в главном меню выбираем Edit > Preferences > Guides, Grid & Slices (Редактировать > Установки > Направляющие, сетка и фрагменты) и остановимся на секции Grid (сетка). Введите значения как показано ниже. Кроме того, установим цвет сетки на #a7a7a7.

После того как вы установите все эти свойства нажмите кнопку ОК.

Также нам нужно открыть панель информации (Window > Info) для предварительного просмотра размеров и положения наших форм.

Простой Web значок в Photoshop

Шаг 2:

Выберите инструмент Polygon Tool (Полигон) и обратите внимание на верхнюю панель. Введите 25 в поле Sides (стороны), и нажмите на маленькую черную стрелку, чтобы открыть меню параметров многоугольника.

Проверьте чтобы стояли все три галочки, затем введите 100px для радиуса и 20% отступа.

Установите цвет переднего плана #c7a069 и создайте форму, как показано на рисунке ниже.

Простой Web значок в Photoshop

Шаг 3:

Далее, нам нужно создать простой паттерн. Сначала нажмем Ctrl + N, чтобы создать новый документ. Размеры документа по высоте и ширине 4px.

Сетка и привязка к сетке должна быть уже включена. Для этого нового документа необходимо установить сетку в 1px. Просто выберите в главном меню Edit > Preferences > Guides, Grid & Slices (Редактировать > Установки > Направляющие, сетка и фрагменты) и введите 1 в поле Gridline Every.

На палитре слоев удалите слой "Background" (Фон). Установите цвет переднего плана на черный и выберите инструмент Rectangle Tool (Прямоугольник). Создайте два векторных квадрата, с размерами по 2px и разместите их, как показано ниже.

В главном меню выбираем Edit > Define Pattern (Редактировать > Определить узор). Введите имя для вашего паттерна, нажмите кнопку ОК.

Закрываем этот документ, он нам больше не нужен. Переходим к первому документу.

Простой Web значок в Photoshop

Шаг 4:

Теперь нам нужно установить размер ячейки сетки обратно в 5px. Для этого в главном меню выбираем Edit > Preferences > Guides, Grid & Slices (Редактировать > Установки > Направляющие, сетка и фрагменты) и вводим 5 в поле Gridline Every.

На палитре слоев двойным щелчком мыши по слою с нашей векторной фигурой откроем диалоговое окно Layer Style (Стили слоя).

Введите все как показано ниже и нажмите ОК. Для Pattern Overlay (Наложение узора) вам необходимо использовать паттерн, который вы делали в предыдущем шаге.

Простой Web значок в Photoshop

Простой Web значок в Photoshop

Простой Web значок в Photoshop

Простой Web значок в Photoshop

Простой Web значок в Photoshop


Простой Web значок в Photoshop

Шаг 5:

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

Простой Web значок в Photoshop

Шаг 6:

Применим к этому слою стили слоя.

Простой Web значок в Photoshop
Простой Web значок в Photoshop
Простой Web значок в Photoshop
Простой Web значок в Photoshop

Шаг 7:

Установим цвет переднего плана на #c7a069, выберем Ellipse Tool , создадим круг 70px и поместим его, как показано на первом изображении. Убедимся в том, что выбрана эта новая векторная форма и выбираем инструмент Rectangle Tool (Прямоугольник).

Нажмите кнопку Add (Добавить) в верхней панели и создайте прямоугольник с размерами 270x40px, как показано на втором изображении.

Простой Web значок в Photoshop

Шаг 8:

Убедитесь в том, что векторная форма, созданная в предыдущем шаге все еще выбрана. Выберите инструмент Add Anchor Point Tool (Добавить опорную точку) и добавьте две новые опорные точки, как показано на первом изображении.

Выбираем инструмент Convert Point Tool и нажимаем на созданные опорные точки. Далее, нам нужно, переместить эти новые опорные точки.

Выбираем инструмент Direct Selection Tool , выбираем левую опорную точку и перемещаем ее вправо на 25px, выберите правую опорную точку и перемещаем ее влево на 25px. В конце концов ваши векторные формы должны выглядеть как на третьем изображении.

Примените следующие стили слоя.

Простой Web значок в Photoshop
Простой Web значок в Photoshop
Простой Web значок в Photoshop
Простой Web значок в Photoshop
Простой Web значок в Photoshop
Простой Web значок в Photoshop

Шаг 9:

Установите цвет переднего плана #855f37, выберите инструмент Rectangle Tool (прямоугольник), создайте фигуру с размерами 240х30px и поместите ее, как показано на первом изображении. Добавим две новые опорные точки, как показано на первом изображении.

Выбираем инструмент Convert Point Tool и нажимаем на созданные опорные точки. Далее, нам нужно, переместить эти новые опорные точки.

Выбираем инструмент Direct Selection Tool , выбираем левую опорную точку и перемещаем ее вправо на 15px, выберите правую опорную точку и перемещаем ее влево на 15px. В конце концов ваши векторные формы должны выглядеть как на третьем изображении.

Простой Web значок в Photoshop

Шаг 10:

Убедитесь что выбрана векторная фигура которую мы только что создали. Выберите Ellipse Tool , нажмите на кнопку Subtract (вычитание) на верхней панели и создайте окружность с размерами 70х70px, как показано на первом изображении.

Примените следующие стили слоя.

Простой Web значок в Photoshop
Простой Web значок в Photoshop
Простой Web значок в Photoshop
Простой Web значок в Photoshop

Шаг 11:

Установим цвет переднего плана #c7a069, выберем инструмент Type Tool (Текст) и напечатаем текст "PREMIUM", как показано на первом рисунке.

Используйте шрифт MoolBoran с размером в 15pt. Выделим этот фрагмент текста и выберем в главном меню Edit > Transform > Warp(Редактировать > Трансформация > Деформация).

Выберем тип Arс (дуга) из раскрывающегося меню, введем значение 65 и нажмем Enter.

Простой Web значок в Photoshop

Шаг 12:

Откроем окно Layer Style (Стили слоя) для текста добавленного на предыдущем шаге и установим параметры, как показано на следующем рисунке.

Перейдем на панель слоев, щелкнем правой кнопкой мыши на этом куске текста и выберем пункт Copy Layer Style (Копировать стили слоя)

Простой Web значок в Photoshop

Шаг 13:

Выберем инструмент Type Tool (Текст) и напечатаем текст "QUALITY", как показано на рисунке ниже. Снова используем шрифт MoolBoran с размером 15pt.

Выделим этот фрагмент текста и выберем в главном меню Edit > Transform > Warp (Редактировать > Трансформация > Деформация).

Выберем тип Arс (дуга) из раскрывающегося меню, введем значение -50 и нажмем Enter.

Перейдем на панель слоев, щелкнем правой кнопкой мыши на этом куске текста и выберем пункт Paste Layer Style (Вставить стили слоя)

Простой Web значок в Photoshop

Шаг 14:

Снова выбираем инструмент Type Tool и добавляем текст "MONEY BACK" два раза как показано ниже

Шрифт используем тот-же MoolBoran с размером 13pt. Вдобавок установим Leading на 10pt и Tracking на 350

Щелкаем правой кнопкой мыши по слоям с этим текстом и вставляем стили слоя Paste Layer Style

Простой Web значок в Photoshop

Шаг 15:

Добавляем текст "100" и символ процентов, параметры текста на первом изображении

Выделяем обе части текста и конвертируем их в Smart Object

Откроем окно стилей слоя для этого объекта и установим следующие параметры.

Простой Web значок в Photoshop
Простой Web значок в Photoshop
Простой Web значок в Photoshop
Простой Web значок в Photoshop
Простой Web значок в Photoshop

Результат:

В результате получим вот такой значок.

Простой Web значок в Photoshop


А вот что получилось у меня:

Простой Web значок в Photoshop


Ваши результаты ждем на форуме

Информация к уроку:

Категория - Уроки » Веб-дизайн

Дата публикации: 16-08-2013, 11:30

Опубликовал: killot

Просмотров: 48789

Комментариев: 3

Ссылки к этой статье:

Источник - PhotoshopStar

Автор - Andrei Marius

Переводчик - Killot

Найти - Все уроки с PhotoshopStar

Еще по этой теме:

Пурпурный значок Пурпурный значок
В этом уроке создадим пурпурный значок для папки ...
Глянцевый значок Глянцевый значок
В этом уроке создадим простой глянцевый значок. ...
Значок Quicktime Значок Quicktime
В это уроке мы будем создавать значок "Quicktime" ...
Значок Значок
В этом уроке будем создавать значок, по этому ...
Значок – Vista Firewall Значок – Vista Firewall
В этом уроке мы создадим значок (иконку) фаервола ...
Actions в Photoshop Actions в Photoshop
Экшены или Макросы это скрипты которые позволяют ...
Значок звезды в стиле Web 2.0 Значок звезды в стиле Web 2.0
В этом уроке мы создадим символ звезды, который ...
Значок Error (Windows Vista) Значок Error (Windows Vista)
Создаем иконку ошибки как в Windows Vista ...
Значок Burn (Mac OS) Значок Burn (Mac OS)
Создаем иконку выжигалки как в "Маке" ...
Рисуем значок компьютера в стиле XP Рисуем значок компьютера в стиле XP
В этом туториале мы создадим очень хорошо ...

Социальные закладки:


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


moido       19 августа 2013 13:16 /
I was in awe of how he could afford such a piece of land.
        Цитировать

killot       20 августа 2013 10:38 /
Цитата: moido
I was in awe of how he could afford such a piece of land.

What do you mean?
        Цитировать

NeroArofeBuri       13 сентября 2013 11:12 /
http://www.azurema.com/c-211.html 8/1000 live births for Periods I II (p=. but the Mandels first had to turn their new acquisition around. a number of these promoters in transient transfection.?
        Цитировать
 

Добавление комментария

 
 
Ваше Имя:
Ваш E-Mail:
Вопрос:
На каком дереве растут яблоки?
Ответ:*
Код:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Введите код: