Как сделать значок в photoshop
Добавил пользователь Morpheus Обновлено: 04.10.2024
Друзья, я уверен, что у многих возникнет вопрос. Зачем делать иконки в фотошопе? Ведь удобнее и лучше создавать их в любом редакторе для векторной графики, будь то иллюстратор или какой-то другой. Да никто и не собирался доказывать обратное.
Но иногда, к примеру, во время процесса создания прототипа дизайна или другой работы необходимо быстро разработать простую иконку (стрелки, домик, лупа и т.д.), и лично я не вижу разницы разработаю я ее в фотошопе или буду переключаться в иллюстратор.
В фотошопе можно сделать неплохие иконки благодаря фигурам и инструменту перо, которые можно легко масштабировать без потери качества.
Я записал этот видеоурок или лучше назвать его процесс отрисовки иконок, для того чтобы дать понимание начинающим что иногда можно обойтись средствами фотошопа для создания иконок и нет необходимости пользоваться сразу несколькими редакторами.
В этом процессе я покажу, как нарисовать 12 иконок и несколько дополнительных вариаций.
Мы отрисуем такие иконки как:
Возможно, вы не будите создавать иконки в фотошопе, но благодаря этому видео найдете для себя какие-то новые приему или способы для работы с фигурами или пером в фотошопе.
На заметку: иконки создавались для примера, у меня не стояла цель сделать их идеальными, поэтому при их создание были кое-где допущены мелкие неточности с толщиной линий, надеюсь, к этому вы отнесетесь с пониманием.
Друзья если у вас есть вопросы или дополнения задавайте их в комментариях, попробую на них ответить.
Эй, приятели! Вы готовы создать набор пиратских иконок в Adobe Photoshop? Поднять цвета! В этом руководстве мы используем базовые фигуры и множество удобных функций и свойств Adobe Photoshop в создании пиратских иконок в трендовом плоском стиле! Выбор за вами – сделать их чёткими и острыми или добавить текстурные штрихи при помощи гранджевых кистей.
У Adobe Photoshop есть свои преимущества и некоторые действительно крутые примочки для создания плоских иконок. К концу этого руководства вы научитесь не только создавать плоские иконки, но и применять эти техники к другим видам плоских иконок или плоских иллюстраций. Более того, добавляя текстуру к иконкам, вы сделаете их более сложными, добавив модный ретро-вид.
Если хотите сделать свои иконки уникальными и добавить художественные штрихи, вы можете захотеть заменить стандартные кисти на свои и найдёте очень крутые наборы среди этих кистей с гранджевой текстурой для Adobe Photoshop на Envato Market. Попробуйте разные опции и узнайте, что лучше подходит вам!
1. Создаём иконку с бутылкой рома
Шаг 1
Сначала создадим Новый документ 3800 х 3800 пикселей. Я буду работать с большими объёмами, чтобы иметь возможность использовать любую иконку как отдельный объект, поэтому мне нужны достаточно большие изображения.
Хочу заметить, что когда мы создаём любую базовую фигуру (эллипс, прямоугольник, многоугольник и т.д.), у неё есть специальная отметка на слое на панели Слоёв, означающая, что фигура остаётся векторной прежде чем мы Растрируем её. Это значит, что наша фигура может быть трансформирована, перекрашена и изменена в размере без потери качества, что очень здорово. Однако, имейте в виду, что мы не можем раскрашивать такие фигуры кистями.
Шаг 2
Давайте начнём формировать нашу бутылку из скруглённого прямоугольника 390 х 550 пикселей. Мы всё время будем использовать панель Свойств, поэтому вы увидите все мои настройки для фигур на скриншотах. Для бутылки мы установим Угловой радиус верхних углов на 130 пикселей и нижних углов – на 60 пикселей; цвет Заливки фигуры – ярко-бирюзовый.
Проделайте то же самое с противоположной стороной, сделав дно бутылки более узким.
Шаг 3
Давайте заполним нашу бутылку ромом! Скопируйте слой с бутылкой (Control-J), нажмите Control-T для Свободного трансформирования и уменьшите копию, создав стеклянные края бутылки.
Шаг 4
Давайте сформируем горлышко из бирюзового прямоугольника 115 х 190 пикселей. Выделите все созданные фигуры и используйте панель Выравнивания в верхней части для Выравнивания центров по горизонтали.
Шаг 5
Шаг 6
Сделайте стеклянную поверхность более блестящей, добавив круглый блик на верх бутылки. Снизьте его Непрозрачность на панели Слоёв, сделав полупрозрачным.
Шаг 7
Давайте добавим нашей бутылке пробку. Скопируйте (Control-J) горлышко бутылки и измените цвет копии на коричневый на панели Свойств. Нажмите Control-[, чтобы поместить копию под горлышко (или перетащите её вниз вручную на панель Слоёв).
Сделайте верх пробки слегка скруглённым, установив Угловой радиус на 30 пикселей.
Шаг 8
Наша иконка с бутылкой рома готова! Перейдём к следующей!
2. Формируем иконку со штурвалом
Шаг 1
Давайте сформируем основу штурвала из светло-коричневого круга 460 х 460 пикселей. Скопируйте (Control-J) круг, нажмите Control-T для Свободного трансформирования и сделайте копию намного меньше (вы можете увидеть уменьшенную копию, отмеченную тёмной обводкой, на картинке ниже). Выделите обе фигуры, нажмите правой кнопкой мыши и Вычтите переднюю фигуру, чтобы вырезать внутренний круг.
Шаг 2
Теперь сформируем внутреннюю часть штурвала. Создайте жёлтый круг 160 х 160 пикселей внутри штурвала и при помощи панели Выравнивания сверху выровняйте обе фигуры по горизонтали и по вертикали.
Скопируйте (Control-J) коричневый штурвал, поместите копию поверх (Shift-Control-]), нажмите Control-T для Свободного трансформирования и сожмите её, уменьшив фигуру.
Шаг 3
Шаг 4
Скопируйте созданный элемент, переверните его в режиме Свободного трансформирования и присоедините к низу перекладины.
Теперь мы можем Сгруппировать (Control-G) перекладину и держатели. Скопируйте всю группу, выделив папку группы на панели Слоёв, нажмите Control-T и поверните её на 90 градусов.
Создайте ещё две копии и поверните их на 45 градусов в разных направлениях, как показано на картинке внизу.
Шаг 5
Давайте завершим создание иконки со штурвалом, добавив несколько шляпок гвоздей на деревянной основе штурвала. Сначала поместите маленький тёмно-серый эллипс на верх штурвала. Поместите другой эллипс в низ, сгруппируйте оба круга и скопируйте группу. Поверните группу на 90 градусов и создайте больше копий, как мы сделали это с перекладинами.
Отлично! Теперь мы можем поместить нашу иконку на её основу и двигаться дальше!
3. Создаём иконку с пиратским сундуком
Шаг 1
Добавьте маленький прямоугольник более светлого цвета поверх сундука и Выровняйте верхние края жёлтой и светло-коричневой фигур.
Шаг 2
Добавьте ещё один золотистый металлический элемент на верху нашего сундука: создайте вертикальный прямоугольник 67х 165 пикселей, поместив его в центре крышки нашего сундука.
Шаг 3
Шаг 4
Наша иконка с сундуком готова! Давайте перейдём к нашей последней иконке!
4. Изображаем иконку с пиратской шляпой
Шаг 1
Выберите Деформацию дугой и установите значение Сгиба на 20%, выгнув фигуру.
Шаг 2
Шаг 3
Шаг 4
Шаг 5
Шаг 6
Наконец, добавьте две маленькие вертикальные полоски на левой стороне, сформировав кончики банданы.
5. Добавляем фоновые декоративные детали
Шаг 1
Шаг 2
Теперь мы можем настроить параметры и изменить вид нашей линии. Сделайте Обводку тёмно-синей на панели управления сверху (убедитесь, что у вас выбран Режим инструмента «Фигура"), установите Толщину линии на 4 и откройте меню с Настройками обводки.
Шаг 3
Почти всё! Наш набор иконок уже выглядит полным. Здесь у нас есть два варианта. Если хотите сохранить этот чистый плоский вид иконок, то сохраните свой файл – вы закончили!
Шаг 4
Йо-хо-хо и бутылка рома! Наш пиратский набор иконок готов!
Ура! Мы проделали отличную работу и закончили наш набор плоских иконок с пиратскими принадлежностями! Надеюсь, вам понравилось следовать этому руководству, и вы нашли для себя новые советы и рекомендации, которые будете использовать в создании будущих наборов иконок или плоских иллюстраций.
Наслаждайтесь и не забудьте поделиться результатами! Пусть всё будет как по нотам, друзья!
Вчера захотел нарисовать иконку в фотошопе, ну, знаете, иконки как на рабочем столе или фавиконы… Я был ошеломлен! Как в таком графическом агрегаторе, как фотошоп, нет поддержки формата .ICO?
ICO в фотошопе
Как оказалось это не проблема, поискав немного информации на эту тему, я нашел маленький плагин, который достаточно кинуть в определенную папку и вы сможете создавать файлы в ico формате.
Перейдем к практике: файлы, которые вы только что скачали, нужно положить вот сюда:
Adobe Photoshop CS4\ App\Photoshop\Plug-ins\File Formats.
Adobe Photoshop CS5\ Required \Plug-Ins \File Formats.
Adobe Photoshop CS6\ Required \Plug-Ins \File Formats.
Adobe Photoshop CC 2015\ Required \Plug-Ins \File Formats.
2 файла ICOFormat.8bi нужно поместить в папку File Formats , после чего запускаем фотошоп и наблюдаем, что уже можно сохранить документ в ICO или CUR форматах.
Проверено на Photoshop cs4/cs5/cs6 и Photoshop CC 2015. Windows 7 x64.
Однажды делала сайт-визитку для одного из своих клиентов и поймала себя на мысли, что обычный фавикон в формате .ico нельзя сделать в современном фотошопе, начиная с версии cs4 и выше.
Представим, что у нас есть вот такая картинка favicon.jpg размером 16х16 пикселей. Я специально выбрала этот минимальный размер для примера, потому что на нем хорошо будут видны различия миниатюр самих иконок.
Если вы думаете, что можно просто вручную поменять расширение изображения с .jpg на .ico, то вы ошибаетесь. Так иконка не получится и отображаться она будет такой же маленькой картинкой. Вот например так:
Поэтому, для того, чтобы сделать иконку в формате ico из обычного изображения в формате .jpg, .jpg, нам нужно будет воспользоваться фотошопом.
Однако, как видно на следующем фото, стандартная сборка фотошопа, начиная с версии Photoshop cs4, cs5 и cs6 не позволяет сохранять изображение в формате ico .
В этом случаем нам нужно установить специальный плагин ico для фотошопа, скачать бесплатно который можно здесь на моем сайте ниже.
Плагин ICO для 32-битной версии Windows x86
Плагин ICO для 64-битной версии Windows x64
*Не забудьте разархивировать скаченный файл.
Как установить плагин для расширений .ico на Photoshop?
Все очень просто!
- У меня Photoshop cs4 и находится он на диске C, значит, я ищу папку здесь:
C:\Program Files\Adobe\Adobe Photoshop CS4\Plug-ins\File Formats\
Копирую туда наш скачанный файл плагина .ico.
Также у вас может быть еще другой адрес этой папки:
C:\Program Files\Adobe\Adobe Photoshop CS4\App\Photoshop\Plug-ins\File Formats\
- Если у вас Photoshop cs5, то вероятнее всего адрес данной папки будет такой:
C:\Program Files\Adobe\Adobe Photoshop CS5\Required\Plug-ins\File Formats\
- Если у вас Photoshop cs6, то плагин ICO также нужно установить в эту папку:
C:\Program Files\Adobe\Adobe Photoshop CS6\Required\Plug-ins\File Formats\
Что касается версии Photoshop cc, то адрес папки с плагинами остался прежним. Т.е. наш скаченный плагин ico для photoshop cc устанавливаем по тому же пути, как и для версии Photoshop cs6. Только не забудьте скачать 64-битную версию плагина, если у вас 64-разрядная система.
Как сохранить картинку в формате ico?
После того, как мы скинули туда наш файл, просто запускаем фотошоп и загружаем нужную картинку. А далее, все как обычно: нажимаем Файл —> Сохранить как —> и выбираем уже наш появившийся формат .ICO.
Сохраняем и получаем результат – чудесную иконку 16х16 в формате .ico. Теперь ее уже можно будет поставить в качестве фавикона на своем сайте или просто использовать, в качестве иконки к какой-нибудь папке или файлу на рабочем столе вашего компьютера.
А о том как именно добавить фавикон на сайт, я расскажу уже в следующей статье.
Читайте также: