Как сделать иконку (значок) папки из своей фотографии. Уроки Photoshop: Как сделать профессиональную иконку человека в Фотошоп'е

Вот что мы должны получить:

Иконки являются важной частью интерактивного и веб дизайна. Хотя иконки малы, их бывает очень сложно создать. В сегодняшнем уроке мы продемонстрируем, как создать иконку папки с использованием различных форм и рефлексов в Photoshop. Давайте начнем!

Шаг 1 - Новый файл / Техника Пера
Откройте Photoshop и создайте новый документ (Ctrl + N). Используйте следующие настройки:
Разрешение: 72dpi
Цветовой режим: RGB цвет
Размеры: 600 × 600 пикселей

Создайте следующую фигуру с помощью инструмента Pen Tool (P) (Перо). Цвет: # 3da1e2

Шаг 2 - Создание фигур с помощью Пера
Нарисуйте заднюю часть папки с помощью Pen Tool (Пера), используя ту же технику рисования. Затем нарисуйте полосу, как показано на рисунке.
Цвет: # 003658 # 3da1e2 # 08517e

Шаг 3 - Закончим форму
Как только Вы закончили рисунок папки, нужно добавить лист бумаги и стрелку, как показано на рисунке. Теперь у вас должны быть 5 слоев. Каждая форма будет на отдельном слое. Назовите каждый слой.
Цвет: # ffffff # 32e732

Шаг 4 - Добавление цветовых эффектов
Добавьте следующие стили слоя к передней части папки. Понизьте непрозрачность до 90%.

Добавить следующие стили слоя для бумаги. Понизьте непрозрачность слоя примерно до 90-95%.

Добавьте следующие стили слоя для полосы.

Добавьте следующие стили слоя к задней части папки.

Добавьте следующие стили слоя для стрелки.

Теперь ваша иконка выглядит так.

Шаг 5 - Добавление Рефлексов
Добавить новую группу под названием "Рефлексы". Используйте Pen Tool (Перо), чтобы нарисовать отражение, как показано на рисунке. Убедитесь, что вы рисуете только контур, а не фигуру. После того как вы закрыли путь, щелкните правой кнопкой мыши по рабочей области и выберите make selection (Создать выделение) (растушевка (feather) 0). Возьмите большую кисть (диаметром около 470, твердость 0) и закрасьте правую часть выделения, как на рисунке, для создания белого отражения. Измените режим смешивания на Overlay (Перекрытие) и уменьшить непрозрачность до 63%.

Шаг 6 - Края
Создайте новую группу под названием "Края", создайте новый слой в ней (Ctrl + Shift + N или нажмите значок создания нового слоя). Добавление бликов на краях придает иконке 3D эффект. Используйте Pen Tool (Перо), чтобы создать линии обводки вокруг углов и всех полей папки, бумаги и стрелки. Затем щелкните правой кнопкой мыши по рабочей области и выберите Stroke Path (Выполнить обводку) - Brush (Кисть). Настройки кисти должен быть изменены заранее, master diameter (диаметр) 8 пикселей а hardness (твердость) 0.

Шаг 7 - Тени
Создайте новый слой (Ctrl + Shift + N) для теней и поместить его в новую группу (Ctrl + G). Сделайте выделение, как вы это делали в 5 шаге, для создания отражений. Заполните выделение черным цветом, а затем размойте поля с помощью инструмента Blur tool (Размытие). Если тени выглядят слишком тёмными, снизьте непрозрачность слоя до 40%.

Шаг 8 - Добавление текста
Добавьте текст, используя любой шрифт, который вам нравится. Я выбрал "Agency FB". Размер шрифта: 40, непрозрачность слоя: 75%.

Шаг 9 - Итоговое добавление рефлексов и тени
Добавьте еще несколько рефлексов на бумагу, используя те же методы, что приведены в 5 Шаге.

Добавить тень, используя Ellipse Tool (E) (Эллипс). Нарисуйте эллипс, как показано на рисунке и добавьте немного Filter - Blur - Motion blur (Фильтр - Размытие - Размытие в движении). Уменьшите непрозрачность по своему вкусу.

Заключительный просмотр
Я надеюсь, вам понравился этот урок. Я добавил некоторые дополнительные значки, которые создал с использованием тех же методов.

Создание иконок может быть весьма сложным делом, потому, что вам нужно суметь сделать гибкий дизайн, который можно легко увеличивать или уменьшать. Для того чтобы добиться такой легкой возможности изменения размера, графические дизайнеры обычно используют программы для работы с векторной графикой, вроде Illustrator. Однако в этом уроке, рассчитанном на пользователей со средними знаниями, мы покажем, как сделать из наброска потрясающую иконку, используя Photoshop . Вам понадобится базовое знание программы Photoshop и, в частности, инструмента Перо (Pen Tool).

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

Введение

В этом уроке практически все фигуры рисуются с помощью инструмента Пера в Photoshop. Если вы не знаете, как пользоваться этим инструментом, вы можете обратиться к отличному уроку под названием: « » от одного из опытных графических дизайнеров на специализированном сайт PSDfan.

Шаг 1: Создаем документ Photoshop

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

Для удобства, залейте фоновый слой оттенком серого и установите в центре документа вертикальную направляющую: Просмотр – Новая направляющая (View > New Guide). Эта направляющая поможет добиться симметричности рисунка.

Шаг 2: Начинаем с основы

Один из самых простых способов достичь симметрии для формы (рисунка) – это нарисовать сначала только его половину. Выберите инструмент Перо (P) в Панели инструментов и нарисуйте форму, показанную ниже. Перед тем, как нарисовать фигуру, убедитесь, что вы выбрали Слои с фигурами из меню Настроек (опций) и установили черный цвет (#000000) в качестве цвета переднего плана.

Как только вы нарисовали половину фигуры (рисунка), выберите инструмент Выделения контура (Path Selection Tool) и кликните на фигуре на холсте.

Теперь нажмите комбинацию Ctrl+C, а затем Ctrl +V, чтобы скопировать и вставить такой же контур на слой.

Далее, выберите Редактирование – Трансформирование – Отразить по горизонтали (Правка – Трансформация – Отразить по горизонтали (Edit > Transform Path > Flip Horizontal) и переместите вторую половинку фигуры в правую сторону, так чтобы ее две половинки соединились.

При выбранном инструменте Выделение контура (Path Selection Tool), растяните выделение через обе половинки, затем кликните на кнопке «Объединить» в меню Опций; это соединит две половинки в одно целое, и в результате, у нас будет одна симметричная фигура.
Назовите слой с формой «основной», чтобы ваши слои были организованы, и вы легко могли в них ориентироваться.

Шаг 3: Применяем стиль к основному слою

Выберите Настройки стилей для слоя «основной» и примените к нему следующие из них:

Внутреннее свечение (Inner Glow)

Заливка градацией (Наложение градиента) (Gradient Overlay)

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

Шаг 4: Добавляем тени к основному слою

Создайте новый слой и расположите его под «основным» слоем.

Залейте выделение на нем, используя инструмент Эллиптического выделения (Elliptical Marquee Tool (M) и уменьшите его прозрачность до 30%.

Затем примените к нему два фильтра – Размытие по Гауссу и Размытие в движении (Gaussian Blur и Motion Blur).
Фильтр – Размытие – Размытие по Гауссу (Filter > Blur > Gaussian Blur)

Установите радиус на значение в 3.0px.

Фильтр – Размытие – Размытие в движении (Filter > Blur > Motion Blur)

Установите угол падения (Angle) на 0°, а расстояние (Distance) на 30px.

Создайте новый слой и нажмите на слой «основной», удерживая клавишу Ctrl, чтобы создать вокруг него выделение, а затем залейте его черным цветом на новом слое.

При активном выделении, пройдите к меню Выделение – Модификация – Расширить (Select > Modify > Expand) и расширьте выделение на 2px.

Передвиньте выделение на 5px вверх и нажмите на клавишу Delete, чтобы очистить область под выделением.

Выделите инструмент Перемещения (Move Tool (V) и передвиньте слой на 3px вниз.

Наконец, примените фильтр Размытие по Гауссу с радиусом 2.5px и уменьшите прозрачность слоя до 50%. Если вы точно придерживались наших инструкций, то у вас на данном этапе получится нечто такое.

Шаг 5: Создаем рубашку

Используя инструмент Пера (Pen Tool), нарисуйте фигуру, похожую на приведенную ниже и назовите ее «рубашка».

Когда вы закончите рисовать фигуру, примените к слою Заливку градацией (Gradient Overlay) светло-серого оттенка.

Шаг 6: Создаем шею

Выберите инструмент многоугольного выделения (Rectangular Marquee Tool (M) и, на новом слое, залейте выделение любым цветом, как показано ниже (мы будем добавлять к слою стиль, поэтому цвет, которым вы его зальете, не имеет значения).

После этого примените к слою стиль Заливка градацией (Наложение градиента) (Gradient Overlay).

Шаг 7: Создаем галстук

Следующий на очереди галстук. Это будет красный галстук, но мы будем только рады, если вы решите поэкспериментировать с разными цветами и узорами галстуков! Форму галстука создайте с помощью инструмента Пера (Pen Tool (P), используя тот же прием, о котором мы уже говорили.

Далее мы применяем к слою с галстуком несколько стилей:
Тень (Drop Shadow)

Внутренняя тень (Inner Shadow)

Вуаля! Вот как наш галстук теперь выглядит.

Далее нам надо сделать еще одну форму с помощью Пера (Tool (P) для узла.

Давайте применим несколько стилей к узлу галстука.
Тень (Drop Shadow)

Внутренняя тень (Inner Shadow)

Заливка градиентом (Наложение градиента) (Gradient Overlay)

Теперь наш галстук полностью завершен.

Шаг 8: Создаем воротник рубашки

Настало время создать воротник рубашки. Нарисуйте форму, которую вы здесь видите; цвет для заливки можно выбрать произвольно, поскольку позднее он будет перекрыт (просто выберите цвет, который вы можете легко отделить от фонового).

Назовите слой с новой формой «воротник».

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

Тень (Drop Shadow)

Внутренняя тень (Inner Shadow)

Заливка текстурой (Наложение узора) (Pattern Overlay)

Вот как выглядит готовая левая половинка воротника после окончания работы.

Чтобы закончить весь воротник, вам нужно продублировать левую его часть и отразить его горизонтально. Так как слой «воротник» содержит стили, трансформирование дублированной копии не сработает.

Поэтому, чтобы добиться желаемого результата, выберите слой «воротник» и нажмите комбинацию Ctrl+J, чтобы скопировать его.

Теперь создайте новый слой и соедините его с дублированным слоем. Это переведет левую часть воротника в растр, так что когда мы будем его трансформировать, на стили это не повлияет.

После этого проделайте комбинацию Правка – Трансформация – Отразить по горизонтали (Edit > Transform > Flip Horizontal) и передвиньте вторую половинку вправо с помощью инструмента Перемещение (Move Tool), чтобы закончить воротник.

Шаг 9: Добавляем лацканы на пиджак

Установите цвета фона и переднего плана на значения по умолчанию нажатием клавиши D (она устанавливает черный цвет для переднего плана, а белый – для заднего).

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

Добавьте эти стили для этого слоя:

Тень (Drop Shadow)

Внутренняя тень (Inner Shadow)

Внешнее свечение (Outer Glow)

Заливка градиентом (Наложение градиента) (Gradient Overlay)

Левый лацкан полностью закончен со стилями слоя.

Так же, как и в случае с воротником в предыдущем шаге, добавьте копию этой формы вправо, чтобы у вас получилось нечто вроде этого.

Шаг 10: Набросок рукавов пиджака

Выберите инструмент Кисть (Brush Tool) и выберите мягкую кисть толщиной 4px.

Теперь выберите инструмент Пера (Pen Tool (P) и кликните на опции Путь, как показано на рисунке.

Создайте новый слой и нарисуйте кривую через правое плечо пиджака. Кликните правой клавишей мыши на пути и выберите в меню пункт Штриховать путь при выбранном цвете переднего плана черным (#000000).

Нажмите «OK» после выбора инструмента Кисть (Brush).

Теперь примените к новым путям такие стили:

Тень (Drop Shadow)

Заливка градиентом (Наложение градиента) (Gradient Overlay)

Поместите скопированный слой на противоположную сторону, чтобы у вас получилось нечто вроде этого.

Шаг 11: Создаем голову

Нарисуйте эллипс для лица, как показано ниже.

Шаг 12: Добавляем тени на лицо

Создайте новый слой и кликните на слое «лицо» мышью, удерживая Ctrl, чтобы автоматически создать вокруг него выделение.

Передвиньте выделение на 4px вниз и залейте цветом #423820 на новом слое.

Примените фильтр Размытие в движении (Motion Blur filter) Фильтр – Размытие – Размытие в движении (Filter > Blur > Motion Blur) с углом 90° (Angle) и Расстоянием (Distance) 10px.

Повторите этот же самый фильтр нажатием комбинации Ctrl+F.

Выберите слой с тенью, кликните на слое «шея», удерживая Ctrl, чтобы создать вокруг него выделение, затем нажмите Ctrl+Shift+I, чтобы обратить выделение.

Нажмите клавишу Delete, чтобы очистить область под обращенным выделением.

Шаг 14: Добавляем тени в волосы

Точно так же, как вы добавляли тень на лицо, добавьте тень на волосы через лицо, используя тот же цвет, но с меньшей прозрачностью (Opacity) – около 70%.

Шаг 15: Совершенствуем волосы

Создайте новый слой и кликните на слое «волосы», удерживая Ctrl, чтобы загрузить его выделение.

Передвиньте выделение на 7px вверх и залейте белым цветом (#ffffff).

При выбранном выделении, передвиньте его на 5px вверх и нажмите клавишу Delete,чтобы очистить область под выделением.

Теперь примените к слою такие фильтры:
Фильтр – Размытие – Размытие по Гауссу (Filter > Blur > Gaussian Blur)

Установите опцию Радиус (Radius) на 1px.
Фильтр – Резкость – Резко (Filter > Sharpen > Sharpen)

Примените этот фильтр дважды.

Затем, установите прозрачность заливки слоя на 0% и примените к нему стиль Заливка градиентом (Наложение градиента) (Gradient Overlay).

Заключение

Все готово! Спасибо за то, что прошли вест тот урок! Надеюсь, что вам удалось выучить один или два приема Photoshop.

Если мы вдохновили кого-то из вас на новые работы с помощью этого урока, прошу добавить свои работы в комментарии!

Вот окончательная версия дизайна иконки.

Загрузить исходники

* (ZIP, 0.20мб)

Внимание! У вас нет прав для просмотра скрытого текста.

04.07.2016 27.01.2018

В этом уроке вы узнаете, как создать плоские флэт иконки социальных сетей.

То, что вы будете создавать:

Создавать плоские иконки мы начнем с фона, потом добавим иконкам эффекты, чтобы придать им оригинальность, далее нарисуем длинные тени. Для повторения урока вам понадобится Photoshop CS3 или более поздняя версия.

Ресурсы:

Шрифт 1 — http://fontawesome.io/cheatsheet/
Шрифт 2 — http://fontawesome.io/

Шаг 1

Создайте новый файл (Ctrl + N) размером 500 × 400 пикселей.

Создайте новую группу (CTRL+G) и назовите её "Фон".

Шаг 2

Заполните фон цветом # e7e9ea с помощью инструмента Заливка (Bucket Tool) .

Шаг 3

Чтобы добавить больше эффектов на задний план, мы добавим градиент. Нажмите на иконку Корректирующий слой (Adjustment Layer) и выберите Градиент (Gradient ), используйте следующие настройки:

Режим наложения слоя Мягкий свет (Soft Light ) | Непрозрачность: 25%

Шаг 4

Создайте новую группу и назовите её «symbols».

Шаг 5

Прежде чем начать работу, нам нужно настроить меню Линейки и Сетки (Rulers and Grids) . Перейдите в меню Вид-Линейки (View - Rulers ) и Вид-Показать-Сетки (View — Show — Grids ) . Вот мои настройки дляЛинеек и Сеток (их можно открыть, перейдя в Редактирование-Настройки (Edit-Preference) :

Чтобы создать Направляющую линию , нужно просто щелкнуть и перетащить её из линейки. Для создания вертикальной направляющей перетаскивайте из вертикальной линейки и наоборот. Вот как я разделил холст (каждый значок равен 50 × 50 пикселей и расстояние между каждым значком 25 пикселей ):

Шаг 6

В этом уроке мы работаем с помощью шрифта Awesome, вы можете добавить настраиваемые иконки для вашего сайта. Как правило, это делается путем размещения CSS шрифта на ваш сайт, но так как мы работаем с Photoshop, нам нужно скопировать каждый значок, который вы хотите использовать из шпаргалки. Зайдите на страницу, выберите значок, который вы хотели бы нарисовать. Я использовал иконки для следующих (социальные сети) сайтов: Twitter; facebook; Tumblr; Google+;Instagram; YouTube; Twitch; Dropbox; Deviantart; Pinterest; Skype; Feed.

Шаг 7

После того как вы нашли значок, который хотели бы использовать, скопируйте его (Выделите ее затем щелкните правой кнопкой мыши-Копировать )

Затем вернитесь в Photoshop и выберите инструмент Текст (Text Tool) на панели инструментов. Измените настройки шрифта, как показано на рисунке:

Теперь вставьте значок, который вы только что скопировали. (Щелкните правой кнопкой мыши-Вставить )

Шаг 8

Повторите предыдущий шаг, пока не вставите все значки, которые вы хотели бы использовать.

Шаг 9

Создайте новую группу и переименуйте её в «icon bg», поместите группу ниже группы «symbols».

Шаг 10

Создайте новый слой и поместите его в группу, созданную в предыдущем шаге. Я переименовал слой в «icon bg».

Шаг 11

Используя инструмент Прямоугольник с округленными углами (Rectangular Circle Shape Tool) (расположенный на панели инструментов ниже инструмента Текст (Text Tool)) я создал фон иконок,

Вот все цвета, которые я использовал:
Twitter: # 6bd1f4 ;
Facebook: # 5a93cb ;
Tumblr: # 3c6a9c ;
Google +:#e44940 ;
Instagram:#9bd29d ;
Youtube:#f4504c ;
Twitch:#a96db6 ;
Dropbox:#81d5ed ;
Deviantart:#6e8e61 ;
Pinterest:#f25f5f ;
Skype:#67d5f4 ;
Feed:#e9951d ;

Вы можете использовать эти цвета, а можете использовать цвета на свое усмотрение - так работа приобретет оригинальность.

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

Шаг 12

Если вы довольны результатом на данном этапе, вы можете идти дальше, но если хотите придать живости иконкам, давайте продолжим улучшения. Начнем со стиля слоя Тень (Drop Shadow). Откройте группу «symbols», выберите одну из иконок и щелкните значок Fx -Тень (Fx-Drop Shadow)

Шаг 13

Повторите предыдущий шаг с остальными значками. Для того, чтобы сделать вашу работу намного проще, щелкните правой кнопкой мыши на слое-Копировать стиль стоя (-Copy Layer Style) . Затем выберите остальные слои с иконками, щелкните правой кнопкой мыши-Вставить стиль слоя (-Paste Layer Style) .

Шаг 14

Теперь добавим внутреннюю тень на задний план каждого значка. Открываем группу «icons bg», выбираем слой с иконкой, нажимаем на значок Fx -Внутренняя тень (Fx-Inner Shadow ) . Используйте следующие параметры:

Шаг 15

Создайте новый слой и назовите его «Gloss Effect». Измените цвет переднего плана на #ffffff ; и при помощи инструмента Прямоугольная область (Rectangular Marquee Tool) создайте несколько прямоугольников, наполовину меньше размера иконок (приблизительно 50×25 пикселей ). Сделайте это для всех иконок.

Затем измените режим наложения на Мягкий свет (Soft Ligh), снизьте непрозрачность (Opacity) слоя до 20% , а заливку (Fill) до 80% .

Шаг 16

Отключите видимость слоя «Gloss Effect». Создайте новый слой и назовите его «Long Shadow». Этот шаг является немного сложнее по сравнению с остальными эффектами. Поместите новый слой ниже слоя «Gloss Effect».

Шаг 17

Возьмите инструмент Полигональное лассо (Polygonal Lasso Tool) и начните создавать прямоугольную тень, касаясь ребра иконки только с правой нижней стороны, затем сделайте диагональную линию, пока она не достигнет нижнего правого края фона значка, сделайте прямую линию, пока она не достигнет центра фона, затем соедините линии. На изображении вы можете рассмотреть более наглядно, как рисовать длинную тень.

Шаг 18

Последний шаг! Уменьшите непрозрачность (Opacity) слоя с тенью до 10% , и заливку (Fi ll ) до 0% .

Теперь Нажмите на иконку Fx и выберите Наложение цвета (Color Overlay) . Используйте следующие параметры:

Теперь выберите Наложение градиента (Gradient Overlay) и используйте эти настройки:

Финальные результаты:

Как легко и быстро создать свою иконку в фотошопе. Иконка в Photoshop мы сохраним как формат иконок.ico
Для начала вам надо сделать поддержку формата.ico в фотошопе.

Поддержка формата ICO

Недавно мне понадобилось нарисовать другу favicon в photoshop. После начатой работы я вдруг понял, что photoshop не дружит с ico форматом. Недолго думая, я вдруг вспомнил, что уже сталкивался с этим и подружить ico я мог только с плагином о котором я вам и расскажу.
Для того, чтобы подружить photoshop cs6 и младше с ico форматом (подружить – это открывать формат ico, редактировать его, сохранять в другой формат или сохранять в ico) нам понадобиться плагин.
Итак первым делом давайте скачаем плагин, примерно с этого сайта выбрав для какой разрядности (я не знаю как у меня разрядность Windows) вам нужен плагин или для 32-ух или для 64-ёх разрядной системы

После того, как вы загрузили zip файл извлеките из него один файл с расширением 8bi.

Теперь этот файл киньте в папку (для 32-ух и 64-ёх разрядных систем)
C:/Program Files/Adobe/Adobe Photoshop CS6 (64 Bit)/Required/Plug-Ins/File Formats/
C:/Program Files (x86)/Adobe/Adobe Photoshop CS6/Required/Plug-Ins/File Formats

После этого выйдите из photoshop и запустите его заново. Теперь вы можете сохранять в ico и открывать ico формат прямо в своём любимом редакторе photoshop. Единственное, что если вы хотите сохранить в формате ico размер должен быть 16 на 16 пикселей или окошка с выбором сохранения в ico НЕ БУДЕТ!

После того, как фотошоп у нас уже поддерживает ico формат, мы можем приступать к созданию иконки в фотошопе. Если вы хорошо рисуете, то можете нарисовать на новом документе, с прозрачным фоном иконку. Разрешение не более чем 512 на 512 пикселей. Всё равно сохранять иконку мы будем не в формате 512 на 512, а в меньшем!

Как мы видим, у картинки нет фона. Она нам отлично подойдёт для создания иконки в формате ico в фотошопе . Открываем её в фотошопе, делаем размер 256×256 пикселей и сохраняем в формате ico

Наша иконка готова, и мы её успешно применяем!

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

Как создать значок сайта.ico при помощи Photoshop

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

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

Значок сайта - это миниатюрный логотип (16×16 ), который Вы можете использовать на сайте. Если Вам удобнее работать с изображением большего размера, Вы можете работать над значком, размером 64×64 пикселя, а затем его уменьшить.

Создайте новый документ Photoshop. Откройте вкладку меню ‘Файл’ > ‘Новый’ (‘File’ > ‘New’):

Используйте инструмент ‘Масштаб’, для того чтобы увеличить документ для редактирования:
Например, мы создадим значок сайта, который состоит из простого градиентного фона и двух букв ‘TM’ (Торговая марка).
Примените к вашему документу инструмент ‘Градиент’ (Gradient Tool). Вы можете использовать одно из доступных сочетаний цветов, или создать новое сочетание цветов:
Используйте инструмент ‘Горизонтальный текст’ (Horizontal Type), для того чтобы добавить ваш текст. Задайте шрифт, цвет и размер шрифта:
Используя инструмент ‘Трансформирование’ (Ctrl + T) , отрегулируйте расположение текста:
Соедините слои (Merge layers), как это показано на скриншоте ниже:
Вы успешно создали значок сайта. Он был сохранён как файл ‘favicon .png’ на вашем компьютере.
Однако, значок сайта нужно сохранить в формате .ICO . Этот формат файла позволяет сохранить несколько изображений разных размеров для масштабирования. По этому, теперь Вам нужно конвертировать созданный значок сайта.PNG в формат .ICO . Это последний шаг данного туториала.
Откройте в браузере любой сайт конвертирования изображений. Мы воспользуемся этим сайтом .
Перетяните ваш файл ‘favicon .png’ в область ‘Загрузить’ (как это показано на скриншоте). Конвертирование начнётся автоматически. Процесс займёт 1 — 2 секунды:.ico’ на вашем компьютере.

Это конец данного туториала. Вы успешно создали пользовательский значок для вашего сайта, используя программное обеспечение Adobe Photoshop. Теперь Вы можете загрузить значок сайта на ваш сервер.

Вы можете также ознакомиться с детальным видео-туториалом ниже.