Вот что мы должны получить:
Иконки являются важной частью интерактивного и веб дизайна. Хотя иконки малы, их бывает очень сложно создать. В сегодняшнем уроке мы продемонстрируем, как создать иконку папки с использованием различных форм и рефлексов в 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 (Фильтр - Размытие - Размытие в движении). Уменьшите непрозрачность по своему вкусу.
Заключительный просмотр
Я надеюсь, вам понравился этот урок. Я добавил некоторые дополнительные значки, которые создал с использованием тех же методов.
Из этого туториала Вы узнаете, как создать значок для вашего сайта при помощи Photoshop .
Как создать значок сайта.ico при помощи PhotoshopЗначок сайта - это небольшой, но значительный элемент продвижения вашего бренда на сайте. Вот пример, того, как он может выглядеть на вашем сайте:
Photoshop - это прекрасная программа для работы с изображениями, которая поможет Вам создать пользовательский значок сайта.
Значок сайта - это миниатюрный логотип (16×16 ), который Вы можете использовать на сайте. Если Вам удобнее работать с изображением большего размера, Вы можете работать над значком, размером 64×64 пикселя, а затем его уменьшить.
Используйте инструмент ‘Масштаб’, для того чтобы увеличить документ для редактирования:
Например, мы создадим значок сайта, который состоит из простого градиентного фона и двух букв ‘TM’ (Торговая марка).
Примените к вашему документу инструмент ‘Градиент’ (Gradient Tool). Вы можете использовать одно из доступных сочетаний цветов, или создать новое сочетание цветов:
Используйте инструмент ‘Горизонтальный текст’ (Horizontal Type), для того чтобы добавить ваш текст. Задайте шрифт, цвет и размер шрифта:
Используя инструмент ‘Трансформирование’ (Ctrl + T) , отрегулируйте расположение текста:
Соедините слои (Merge layers), как это показано на скриншоте ниже:
-
Вы успешно создали значок сайта. Он был сохранён как файл ‘favicon .png’ на вашем компьютере.
Однако, значок сайта нужно сохранить в формате .ICO . Этот формат файла позволяет сохранить несколько изображений разных размеров для масштабирования. По этому, теперь Вам нужно конвертировать созданный значок сайта.PNG в формат .ICO . Это последний шаг данного туториала.
Откройте в браузере любой сайт конвертирования изображений. Мы воспользуемся этим сайтом .
Перетяните ваш файл ‘favicon .png’ в область ‘Загрузить’ (как это показано на скриншоте). Конвертирование начнётся автоматически. Процесс займёт 1 — 2 секунды:.ico’ на вашем компьютере.
Создайте новый документ Photoshop. Откройте вкладку меню ‘Файл’ > ‘Новый’ (‘File’ > ‘New’):
Это конец данного туториала. Вы успешно создали пользовательский значок для вашего сайта, используя программное обеспечение Adobe Photoshop. Теперь Вы можете загрузить значок сайта на ваш сервер.
Вы можете также ознакомиться с детальным видео-туториалом ниже.
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) и используйте эти настройки:
Финальные результаты:
Доброго всем денечка, мои дорогие друзья! Вы знаете? Иногда так надоедают стандартные ярлыки, точнее иконки, что хочется чего-то новенького, дабы разнообразить свое пребывание за компьютером. Можно конечно , сменить фон рабочего стола, но сегодня я хотел бы вам рассказать как сделать иконку из картинки с помощью моего любимого фотошопа.
Многие ошибочно предполагают, что достаточно на ICO, и сразу изображение преобразуется в эту самую иконку. Ну-ну. Попробуйте сами и вам выдастся ощибка, когда вы попытаетесь заменить изображение ярлыка. В общем давайте лучше делать, чем трындеть) Погнали!
Сейчас я хочу сменить иконку для моего браузера гугл хром. Как лучше всего поступить в данной ситуации? Давайте по порядку.
Что же тогда делать? Как тогда нам сделать иконку? Да элементарно. В этом нам поможет один внешний плагин (дополнение), благодаря которому нужный нам формат станет доступным для сохранения. В общем давайте, повторяйте за мной.
Что мы только что сделали? Мы скачали файлы плагинов (для разных разрядностей), которые дополнительно устанавливают новый формат в фотошоп. Папка File Formats как раз служит для подключения новых форматов. Надеюсь, я понятно объясняю? А то мало ли)
Ну а теперь заходите снова в фотошоп, открывайте картинку из которой хотите сделать иконку. Теперь вы сможете сохранять файл с расширением ICO . Просто как обычно сохраните картиночку и теперь выберите нужное расширение из списка.
ВАЖНО! Если у вас большое изображение, то при сохранении вы не увидите формата ico в списке допустимых. Дело в том, что эта возможность недоступна, если ваша картинка превышает размер 256*256. Если это так, то просто до 64*64. Думаю, что больше вам не потребуется. После замены расширение будет доступно.
Ну а теперь дело за малым, осталось лишь заменить полученную штуку на ярлыке. Для этого нажмите правой кнопкой мышки на нужном ярлыке и выберите «Свойства» . После этого выберите «Сменить значок» и теперь ищите свежесохраненную иконку там, куда вы ее положили, нажав предварительно кнопку обзор.
Ну как? Не появилось у вас желания обновить ваши ярлычки? Можете поэкспериментировать и слегка преобразить ваш рабочий стол.
Ну а вообще, если вы хотите хорошо освоить фотошоп, то я очень рекомендую вам посмотреть прекрасные видеоуроки , благодаря которым вы научитесь владеть этим замечательным фоторедактором. Все уроки построены просто великолепны. Я сам его смотрел и узнал много новенького.
Ну вот пора и честь знать. На сегодня я заканчиваю. Надеюсь, что вам моя статья понравилась и я увижу вас и в других своих постах. И конечно же я рекомендую вам подписаться на обновления блога, дабы не пропустить чего-то интересного. Успехов вам! Пока-пока.
С уважением, Дмитрий Костин.
Плоский дизайн — это относительно новое веяние. Но с учетом того, что на сегодняшний день iOS и Windows активно внедряют эту структуру дизайна, совсем скоро это будет не так. И большинство (если не все ) сайтов в Сети начнут применять ее.
Почему бы не начать менять концепцию дизайна своего сайта уже сейчас? Можно начать перестройку ресурса с векторных иконок, используемых в плоском интерфейсе.
Существует много изображений, которые можно «сгладить
«. Вы можете начать с логотипа, или с иконок навигации.
Мы создадим иконки навигации для вашего сайта или блога. В этой статье я буду использовать Adobe Photoshop CS6
. Поэтому приготовьтесь, мы начинаем создание элементов плоского интерфейса.
Что мы будем создавать :
Откройте Photoshop . Создайте новый файл с помощью пресета для фото (10 на 8 дюймов, 300 точек на дюйм, прозрачный фон, цвет RGB ).
С помощью инструмента «Прямоугольник со скругленными углами » создайте новую фигуру с размерами 1736 пикселей на 1736 пикселей , радиус — 83 пикселя , цвет — #82d8b5 . Или вы можете использовать собственный цвет. В векторной иконке для сайта используйте цвета в соответствии с цветовой гаммой своего ресурса.
С помощью инструмента «Перо » нарисуйте что-то наподобие того, что показано на рисунке ниже. Используйте цвет #a30d00 . Это будет крыша для иконки «Главная страница «.
Используя инструмент «Перо », нарисуйте прямоугольную фигуру, как показано на рисунке ниже. Используйте цвет #ffffff . С помощью инструмента «Прямоугольная область » нарисуйте маленький квадрат, цвет #3498db .
Затем с помощью инструмента «Прямоугольная область » нарисуйте фигуру размером 248 на 396 пикселей , цвет заливки — #fcab3a .
Мы уже создали векторную иконку «Главная страница «, но я хочу добавить длинную тень. Так что продолжаем.
Используя инструмент «Перо » с цветом заливки #000000 , нарисуйте фигуру. Начните с правого края крыши. На краю, где пересекаются красно-белые и красные тона. Расширьте рисунок на внешнюю сторону ограничивающего прямоугольника с закругленными углами и завершите фигуру на левом нижнем краю дома.
Разверните тень в обратном направлении. Растрируйте слой тени. С помощью «Волшебной палочки » выберите весь слой ограничивающего прямоугольника с закругленными углами и инвертируйте выделение (можете использовать комбинацию клавиш Ctrl + Shift + I ). При активном выделении (обозначенном мигающей линией ) выберите слой с тенью и нажмите удалить.
Наша векторная иконка предмета готова. Чтобы сохранить его, перейдите в Файл> Сохранить для Web (комбинация клавиш Ctrl + Shift + Alt + S ). Сохраните изображение в формате PNG-24, при этом установите флажок для опции «Прозрачность ». Мы будем все сохранять в формате PNG-24 , так как он поддерживает прозрачные пиксели.
- Откройте Photoshop и повторите первый и второй шаги предыдущего раздела;
- Нарисуйте прямоугольник с закругленными углами с размером 929 на 929 пикселей и радиусом 38 пикселей . Я использовал цвет #f5ea74 , чтобы иконка была похожа на стикер;
- Нарисуйте линию шириной в 1 пиксель с цветом #5d5608 в верхней части стикера;
- Нарисуйте линии шириной в 15 пикселей. Обратите внимание на отступы. Я сделал их немного шире, чтобы векторная иконка предмета воспринималась минималистично. Компактность является отличительной чертой плоского дизайна;
- Нарисуйте прямоугольник, который будет символизировать изображение на стикере;
- Нарисуйте тень, как мы это делали для иконки «Домашняя страница «;
- Сохраните изображение!
А это векторные иконки «О себе » и «Связаться со мной «:
Скачать весь пакет
Я надеюсь, что после того, как вы прочтете эту статью, вы приступите к реконструкции своего сайта. Это очень сложный процесс, но изменения неизбежны, так что чем раньше вы начнете, тем лучше. К тому же, плоский дизайн является не только красивым, но еще и практичным. Таким образом вы сможете извлечь двойную выгоду.
Я хотел бы напомнить вам, что это всего лишь общее руководство. Вы можете поэкспериментировать, отталкиваясь от него.
Перевод статьи «How to Create Flat Icons in Photoshop » был подготовлен дружной командой проекта
