Как сделать иконку в фотошопе: Как создать .Ico в Photoshop (иконку)

Содержание

Как создать .Ico в Photoshop (иконку)

Как легко и быстро создать свою иконку в фотошопе. Иконка в 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 photoshop)


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

Как создать иконку в фотошопе (ico photoshop)


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

Как создать иконку в фотошопе (ico photoshop)

Все подробности о создании иконки в фотошопе, описаны в видео, которое в начале! Если у кого-то, что-то не выходит смотрим видео обязательно!

Скачать иконку которая вышла в фотошопе, в видеоуроке вы можете, нажав сюда

Как сделать иконку из картинки в фотошопе самым простым методом?

Автор Дмитрий Костин На чтение 4 мин Опубликовано Обновлено

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

Многие ошибочно предполагают, что достаточно поменять расширение картинки на ICO, и сразу изображение преобразуется в эту самую иконку. Ну-ну. Попробуйте сами и вам выдастся ощибка, когда вы попытаетесь заменить изображение ярлыка. В общем давайте лучше делать, чем трындеть) Погнали!

Сейчас я хочу сменить иконку для моего браузера гугл хром. Как лучше всего поступить в данной ситуации? Давайте по порядку.

  1. Если не знаете чтобы такого придумать, то лучше идите в Яндекс или Гугл и набирайте «Гугл хром png» (естественно без кавычек).
  2. Лучше всего, чтобы изображение было реально в формате PNG, и не просто PNG, а именно с прозрачным фоном. Проверить это легко: нажмите на понравившеюся картинку и посмотрите какой будет задний фон. Прозрачный фон всегда изображается бледно-серыми и белыми квадратиками.
  3. Ну а когда нужный файл нашелся, сохраняем его (если кто не знает, то для сохранения изображения на него нужно правой кнопкой мыши и выбрать пункт «сохранить картинку»). После этого естественно открываем его в фотошопе.
  4. Теперь измените размер изображения до 256 пикселей по ширине и высоте, а лучше еще меньше (где-нибудь 64*64). Очень желательно, чтобы стороны были одинакового размера.
  5. После этого вы можете слегка подредактировать картинку, снабдить его каким-нибудь эффектом, трансформировать его и т.д.
  6. А теперь, всё, что вам остается это сохранить изображение в формате ICO. Да, в своей статье про форматы файлов изображений я не рассказывал, но он особо-то и нужен на самом деле. Только есть одна проблема. Если начнете сохранять документ, то формата ICO вы там не увидите. Что за фигня? Дело в том, что по умолчанию его тупо нет.

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

  1. Скачиваем плагин ICO. Можете скачать у меня здесь. Как загрузите его — распакуйте.
  2. Видите там находятся 2 файла? Воооот. Выделяйте их, копируйте и идите в директорию, где у вас установлен ваш фотошоп, например C:\Program Files\Adobe\Adobe Photoshop CC 2015\Required\Plug-Ins\File Formats. У вас программа может быть установлена на другом диске (просто я на диск F у себя поставил). 

Что мы только что сделали? Мы скачали файлы плагинов (для разных разрядностей), которые дополнительно устанавливают новый формат в фотошоп. Папка File Formats как раз служит для подключения новых форматов. Надеюсь, я понятно объясняю? А то мало ли)

Ну а теперь заходите снова в фотошоп, открывайте картинку из которой хотите сделать иконку. Теперь вы сможете сохранять файл с расширением ICO. Просто как обычно сохраните картиночку и теперь выберите нужное расширение из списка.

ВАЖНО! Если у вас большое изображение, то при сохранении вы не увидите формата ico в списке допустимых. Дело в том, что эта возможность недоступна, если ваша картинка превышает размер 256*256. Если это так, то просто уменьшите размер изображения до 64*64. Думаю, что больше вам не потребуется. После замены расширение будет доступно.

Ну а теперь дело за малым, осталось лишь заменить полученную штуку на ярлыке. Для этого нажмите правой кнопкой мышки на нужном ярлыке и выберите «Свойства». После этого выберите «Сменить значок» и теперь ищите свежесохраненную иконку там, куда вы ее положили, нажав предварительно кнопку обзор.

Ну как? Не появилось у вас желания обновить ваши ярлычки? Можете поэкспериментировать и слегка преобразить ваш рабочий стол.

Ну а вообще, если вы хотите хорошо освоить фотошоп, то я очень рекомендую вам посмотреть [urlspan]прекрасные видеоуроки[/urlspan], благодаря которым вы научитесь владеть этим замечательным фоторедактором. Все уроки построены просто великолепны. Я сам его смотрел и узнал много новенького.

Ну вот пора и честь знать. На сегодня я заканчиваю. Надеюсь, что вам моя статья понравилась и я увижу вас и в других своих постах. И конечно же я рекомендую вам подписаться на обновления блога, дабы не пропустить чего-то интересного. Успехов вам! Пока-пока.

С уважением, Дмитрий Костин.

Как сделать иконку в фотошопе – процесс отрисовки (видеоурок)

Друзья, я уверен, что у многих возникнет вопрос. Зачем делать иконки в фотошопе? Ведь удобнее и лучше создавать их в любом редакторе для векторной графики, будь то иллюстратор или какой-то другой. Да никто и не собирался доказывать обратное.

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

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

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

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

Мы отрисуем такие иконки как:

  • Часы;
  • Маркер указатель места на карте;
  • Бирку;
  • Иконку закрыть;
  • Стрелки;
  • Иконку для меню бургер;
  • Лупу;
  • Папку для файлов;
  • Облако;
  • Диаграмма;
  • Иконка сообщения;
  • Монитор.

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

На заметку: иконки создавались для примера, у меня не стояла цель сделать их идеальными, поэтому при их создание были кое-где допущены мелкие неточности с толщиной линий, надеюсь, к этому вы отнесетесь с пониманием.

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

Как создать плоские иконки в Photoshop

Плоский дизайн — это относительно новое веяние. Но с учетом того, что на сегодняшний день 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, так как он поддерживает прозрачные пиксели.

Далее мы создадим векторную иконку «Записи»:

  1. Откройте Photoshop и повторите первый и второй шаги предыдущего раздела;
  2. Нарисуйте прямоугольник с закругленными углами с размером 929 на 929 пикселей и радиусом 38 пикселей. Я использовал цвет #f5ea74, чтобы иконка была похожа на стикер;
  3. Нарисуйте линию шириной в 1 пиксель с цветом #5d5608 в верхней части стикера;
  4. Нарисуйте линии шириной в 15 пикселей. Обратите внимание на отступы. Я сделал их немного шире, чтобы векторная иконка предмета воспринималась минималистично. Компактность является отличительной чертой плоского дизайна;
  5. Нарисуйте прямоугольник, который будет символизировать изображение на стикере;
  6. Нарисуйте тень, как мы это делали для иконки «Домашняя страница»;
  7. Сохраните изображение!

А это векторные иконки «О себе» и «Связаться со мной»:

Скачать весь пакет

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

Я хотел бы напомнить вам, что это всего лишь общее руководство. Вы можете поэкспериментировать, отталкиваясь от него.

Вадим Дворниковавтор-переводчик статьи «How to Create Flat Icons in Photoshop»

Рисуем набор иконок в Фотошоп / Creativo.one

что получится в итоге

В этом уроке мы создадим набор иконок в Фотошопе. Набор иконок должен иметь одинаковый фон и одну тему. Для тренировки мы создадим иконки с солнцем, снежинкой и значком RSS. Давайте начнём.

1. Подготовка рабочей области

Шаг 1

Начнём с создания нового документа размером 350 px на 350 px. Кликните в белом квадрате возле настройки

Содержимое фона (Background Contents), чтобы выбрать новый цвет фона рабочей области.

Шаг 2

В диалоговом окне Цветовая палитра (Color Picker) выберите серый цвет фона рабочей области (#e0e0e2).

Шаг 3

Всегда хорошо, когда работа с самого начала структурирована. Создайте группу слоёв и назовите её «Солнце» (Sun). Там будут размещаться все слои, относящиеся к созданию иконки с солнцем.

2. Создаём основу

Шаг 1

С помощью инструмента «Прямоугольник со скруглёнными углами» (Rounded Rectangle Tool ) нарисуйте прямоугольник с размерами 83 px × 64 px и установите радиус 8 px. Для получения более точного результата воспользуйтесь панелью Свойства (Properties). Здесь вы сможете просто ввести точные размеры.

Шаг 2

Удерживайте Shift, а затем нарисуйте ещё один прямоугольник со скруглёнными углами. Эта новая фигура будет добавлена к предыдущей. Установите её размер 36 px × 36 px с радиусом 3 px.

Шаг 3

Нажмите сочетание ctrl+T для трансформирования фигуры, а затем нажмите и перетащите за пределы ограничительной рамки, чтобы повернуть ее на 45 °.

Шаг 4

Убедитесь, что фигура находится в центре предыдущего прямоугольника. В CC 2014 вы можете проверить положение фигуры, перетащив её и привязав к направляющей в центре предыдущей фигуры.

Шаг 5

Нажмите Enter, чтобы сохранить результат. Вы можете обнаружить, что в диалоговом окне подтверждения вас информируют о том, что фигура превратится в обычный контур. Это означает, что вы больше не сможете редактировать её с помощью панели «Свойства». Просто нажмите

«Да» (Yes).

Шаг 6

Расположите фигуру как показано на рисунке ниже.

Вот результат в масштабе 100%.

Шаг 7

Нарисуйте аналогичную фигуру поверх предыдущей, которая на 1 px меньше. Вы можете сделать это, дублируя фигуру, а затем изменяя её точки или просто создав новую фигуру.

Шаг 8

Задайте цвет #57adf8.

Шаг 9

Дважды щелкните по фигуре, а затем примените

Обводку (Stroke) и Наложение градиента (Gradient Overlay), используя следующие настройки.

Для градиента используйте следующее расположение цветов. Чтобы открыть редактор градиента и изменить настройки градиента, щелкните окно предварительного просмотра градиента.

Шаг 10

Уменьшите уровень заливки (Fill) до 11%. Содержимое слоя будет прозрачным и останется неизменным.

Вот результат.

3. Тень

Шаг 1

Создайте новый слой под основой. Активируйте инструмент

«Кисть» (Brush Tool) (В) и затем под иконкой нарисуйте тень.

Шаг 2

По-прежнему используя инструмент «Кисть» (Brush Tool) (В), добавьте более сильную тень прямо под кончиком иконки.

Шаг 3

Зажав CTRL, кликните меньшую по размеру пиктограмму, чтобы выделить меньшую фигуру. Создайте новый слой и используйте белый цвет поверх выделенной области. Убедитесь, что вы используете мягкую кисть Жёсткость (Hardness)-0%.

Шаг 4

Когда закончите, снимите выделение (Ctrl+D) и уменьшите

непрозрачность (Opacity) слоя.

Шаг 5

Создайте новый слой и снова выделите меньшую основу иконки. Заполните выделение градиентом от белого к черному. Измените режим наложения (Blend Mode) слоя на Перекрытие (Overlay), а затем уменьшите его непрозрачность (Opacity).

Шаг 6

Добавьте ещё один слой. Создайте большое эллиптическое выделение в нижней части иконки, а затем нажмите Ctrl на слое основы, чтобы пересечь его. Заполните выделение градиентом от белого к черному. Измените режим смешивания (Blend Mode) слоя на «Экран» Screen и уменьшите его непрозрачность (Opacity).

Так выглядит результат в масштабе 100%.

Шаг 7

Зажав Ctrl, кликните по миниатюре слоя-основы. Создайте сверху новый слой, затем выберите Редактирование > Обводка (Edit > Stroke). Установите светло-голубой цвет и ширину (Width) 1 px.

Ниже вы можете видеть разницу до и после добавления обводки внутри иконки.

Шаг 8

Добавьте маску к слою с обводкой. Залейте её чёрным цветом, чтобы спрятать все контуры. Проведите по некоторым участкам линии белым цветом, чтобы показать их. Таким образом, теперь у нас выделен край иконки.

На изображении ниже можно детально рассмотреть выделение края.

Шаг 9

Добавьте корректирующий слой Цветовой баланс (Color Balance) выше иконки. Мы используем его, чтобы изменить цвет фона.

Чтобы упростить управление слоями, давайте изменим имя слоя на Изменение цвета (color changer).

Шаг 10

Залейте маску корректирующего слоя чёрным. Выделите основу иконки, а затем заполните её белым. Таким образом, корректирующий слой влияет только на значок. Перетащите ползунки, чтобы изменить цвет.

Шаг 11

Дублируйте все слои основы иконки и поменяйте параметры в корректирующем слое Цветовой баланс (Color Balance) по отдельности.

4. Добавляем значки к иконкам

Шаг 1

Для нашей первой иконки мы добавим значок солнца. Начните с рисования желтого круга.

Шаг 2

Примените стили слоя Внутренняя тень (Inner Shadow) и Внутреннее свечение (Inner Glow), используя следующие настройки. Используйте цвет #7b6708 и установите оба режима наложения Умножение (Multiply).

Шаг 3

Используйте более светлый жёлтый цвет в центре солнца.

Шаг 4

Добавьте эллипс более яркого жёлтого цвета в верхнюю часть солнца.

Шаг 5

Нарисуйте тонкую, светлую фигуру на верхней правой стороне солнца, чтобы выделить её. Удалите лишнее с помощью мягкого ластика, чтобы придать естественности.

Шаг 6

Дальше нужно добавить солнцу сияние. Начните с рисования двух желтых треугольников, как показано ниже. Поместите их за солнцем.

Шаг 7

Выделите обе векторные фигуры и затем продублируйте их: Ctrl+C, а затем Ctrl+V. Поверните новые фигуры на 45 °.

Шаг 8

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

Шаг 9

Примените Внутреннюю тень (Inner Shadow) с цветом # b48f0b и Внешнее свечение (Outer Glow) с цветом # f9dc7e.

Шаг 10

Скройте солнце, нажав значок глаза возле слоя. Нарисуйте больше жёлтых треугольников, как показано ниже.

Добавьте круговую фигуру в центр треугольников и установите режим траектории Вычесть переднюю фигуру (Subtract).

Мы закончили, поэтому давайте вернём вспышку и формы солнца.

Шаг 12

Чтобы получить реалистичное солнце, нам нужно нарисовать размытую жёлтую круглую форму за солнцем. Вы можете сделать это вручную, используя мягкую кисть, или сначала нарисуйте круг, а затем смягчите его, используя фильтр Размытие по Гауссу (Gaussian Blur).

Шаг 13

Дважды щёлкните слой группы значков, чтобы добавить стиль слоя. Добавьте Внутреннее свечение (Inner Glow) с черным цветом и установите режим смешивания — Умножение (Multiply).

Таким образом мы добавили к иконке тёмный силуэт.

Шаг 14

Далее мы создадим символ RSS в иконке. Начните с рисования круглой фигуры поверх основы.

Шаг 15

Продублируйте и вставьте контур (Ctrl+C и Ctrl+V). Нажмите Ctrl+T и уменьшите фигуру. Установите в операциях с контуром Вычесть переднюю фигуру (Subtract Front Shape).

Шаг 16

Дублируйте контур и уменьшите его. Установите режим «Объединить фигуры» (Combine Shapes).

Шаг 17

Повторяйте предыдущие шаги, пока не получите следующую фигуру.

Шаг 18

Добавьте два прямоугольника и установите их режим «Вычесть переднюю фигуру» (Subtract Front Shape). Чтобы правильно их расположить, смотрите изображение ниже.

Шаг 19

Дважды кликните на слое «Символ RSS» и настройте Внутреннее свечение (Inner Glow), Наложение градиента (Gradient Overlay), и Тень (Drop Shadow).

Вот результат в масштабе 100%.

Шаг 20

Затем мы добавим символ снежинки в третий значок. Активируйте инструмент «Произвольная фигура» (Custom Shape Tool) и загрузите набор векторных фигур природы из панели параметров.

Появится диалоговое окно с предупреждением о замене или добавлении темы «Природа» в уже существующие фигуры. Вы можете нажать OK.

Шаг 21

Выберите фигуру снежинки (Snowflake) в выпадающем списке.

Шаг 22

Кликните и нарисуйте фигуру снежинки поверх иконки.

Это результат в масштабе 100%.

Заключение

Как видно из урока, в создании набора иконок нет ничего трудного. Прежде чем приступить к рисованию символа, вам нужно подготовить общую тему. В данном случае значок помещается в прямоугольник с закругленными углами и треугольник. Надеюсь, вам понравился урок, и вы узнали что-то новое.

Автор урока: Mohammad Jeprie

Источник: design.tutsplus.com

Рисуем иконку в Фотошоп / Creativo.one

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

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

Автор использовал: Adobe Photoshop CS4

Шаг 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 (Фильтр – Размытие — Размытие в движении). Уменьшите непрозрачность по своему вкусу.

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

Автор: Cucu Tudor-Ionel

Источник: design.tutsplus.com

Рисуем иконку компаса в Photoshop

Автор Дмитрий Евсеенков На чтение 4 мин Просмотров 62 Обновлено

Из этого урока мы узнаем, как в Adobe Photoshop нарисовать с нуля иконку компаса, используя такие инструменты, как «Перо» (Pen Tool), «Прямоугольник со скруглёнными углами» (Rounded Rectangle Tool) и «Прямоугольник» (Rectangle Tool).

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

Для лучшего понимания, Вы можете скачать готовый файл PSD, выполненный по результатам урока, по ссылкам внизу страницы.

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

Давайте начнём. Открываем Photoshop и создаём документ размером 500 на 500 пикселей. Заливаем документ розовым цветом #db687b. Результат:

Чтобы фон не был таким скучным, предлагаю украсить его стилем слоя «Карбон», бесплатно скачать его Вы можете на этой странице, там же есть ссылка на руководство по установке стиля слоя в Photoshop.

Дублируем фоновый слой и добавляем к нему стиль слоя, непрозрачность нового слоя уменьшаем примерно до 45%. Вот как теперь выглядит документ:

Рекомендую фоновый слой преобразовать в обычный и сгруппировать оба слоя, а группу переименовать в «Фон», чтобы не захламлять панель слоёв.

Создание основы иконки

Установите цвет переднего плана на #3ab2cb. Возьмите инструмент «Прямоугольник со скруглёнными углами» (Rounded Rectangle Tool), установите длину и ширину 190 и радиус скругления 30 пикселей и создайте фигуру:

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

Выберите один из инструментов выделения, например, «Прямоугольная область» (Rectangular Marquee Tool), кликните правой клавишей мыши внутри выделения, откроется контекстное меню, где кликните по строке «Выполнить обводку» (Stroke). Откроется диалоговое окно, где задайте толщину обводки 2 пикселя, цвет #1d6b80 и положение «Внутри» (Inside):

Т.к новый пустой слой был активным в момент создания обводки выделения, то обводка появилась именно на нём. Я хочу плавно скрыть верхнюю часть обводки. Для этого будем использовать обычную слой-маску. Добавляем слой-маску к слою с обводкой, берём чёрную кисть с нулевой жёсткостью и диаметром около 200 пикселей и плавно проводим кистью наискосок, как показано на рисунке:

Думаю, надо сделать прямоугольник со скруглёнными углами поинтереснее. Добавим на него градиент.
Перейдите на слой с прямоугольником и добавьте к нему стиль слоя «Наложение градиента» со следующими параметрами, режим наложения — Перекрытие (Overlay):

Сгруппируйте эти два слоя и назовите группу «основа».

Результат:

На этом создание основы иконки закончено, переходим к рисованию самого компаса.

Создание формы изображения компаса на иконке

Для начала, нам необходимо поставить направляющие точно в центре основы. Для удобства, следует увеличить масштаб отображения документа, переместить ноль линеек на угол левого верхнего угла основы и поставить направляющие на расстояние 95 пикселей:

Установите основной цвет в цветовой палитре на белый (#FFFFFF). Возьмите инструмент «Эллипс» (Ellipse Tool), установите режим «Фигура» (Shape). Наведите курсор мыши точно в перекрестье направляющих, зажмите клавиши Alt+Shift, нажмите на левую клавишу мыши и протащите курсор от центра в любом направлении. А результате, у Вас должен получиться примерно такой геометрически правильный круг:

Затем, таким же образом, создайте второй круг, поменьше. Затем, в панели параметров, нажмите на кнопку опции «Операции с контуром» (Path Operations) и выберите «Вычесть переднюю фигуру» (Subtract Front Shape). У Вас должна получиться такая окружность:

Создайте новый слой, возьмите инструмент «Перо» (Pen Tool) и нарисуйте вот такой треугольник:

Клонируйте слой, нажав Ctrl+J. Нажмите Ctrl+T для активации инструмента «Свободная трансформация«. Зажмите Alt и перетащите центр трансформации точно на перекрестье направляющих:

Поверните треугольник на 90°:

Нажмите Enter для применения трансформирования.
Повторите процедуру ещё два раза. Можно просто два раза нажать комбинацию Ctrl+Shift+Alt+T. Результат:

В панели слоёв выделите все слои с фигурами, нажмите на любой из выделенных слоёв правой клавишей мыши и кликните по строке «Объединить фигуры»:

Создайте новый слой и нарисуйте треугольник поменьше:

С помощью «Свободного трансформирования» поверните треугольник на 45°, перед поворотом не забудьте переместить центр трансформирования на перекрестье направляющих. Затем клонируйте и поверните треугольник на 90°, повторите это ещё два раза. Объедините контура в один. Вот что должно получиться, я нажал Ctrl+H, чтобы скрыть отображение направляющих и контуров:

Итак, мы создали стилизованный циферблат компаса. В следующем уроке мы придадим циферблату объём и нарисуем стрелку компаса с севером и югом.

Продолжение урока

Скачать материалы к уроку:

Скачать с Depositfiles.com

Создайте значок приложения с помощью Photoshop за 20 простых шагов

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

В этом уроке я буду использовать Photoshop, чтобы объяснить, как сделать крутую иконку приложения для игры в бильярд. И самое приятное: я покажу вам, как добиться впечатляющих результатов за КОРОТКИЙ период времени.

Поехали!

1.Создать новый документ

Мы создадим нашу иконку в разрешении 1024×1024 пикселей, но вы можете создать свою в разрешении 256×256 или 512×512 пикселей.

Так как это будет использоваться на экране, мы должны установить цветовой режим на RGB (не CMYK) и разрешение на 72 пикселя (не 300).

2. Нарисуйте 1-ю фигуру на 1-м слое

Возьмите Инструмент «Прямоугольник со скругленными углами» (U), нарисуйте фигуру и залейте её цветом (#b67032).

3. Создайте эффект дерева

Создайте эффект дерева, используя «волокна» из меню фильтра («Фильтр» > «Рендеринг» > «Волокна»), убедитесь, что вы установили цвет переднего плана с помощью #b67032, а цвет фона — с #72319b.

4. Нарисуйте вторую фигуру

Снова, Инструментом «Прямоугольник со скругленными углами» (U) нарисуйте ту же фигуру, но сделайте её короче, чем первая фигура дерева (около 6 пикселей снизу).

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

5. Скопируйте 1-й слой на 2-ю фигуру

Выберите фигуру (alt + enter), затем скопируйте первый слой на вторую фигуру (ctrl+c, затем ctrl+v). Итак, теперь у нас есть два слоя с текстурой дерева, но разной высоты.

6. Сделайте слой 1 темнее

Используйте параметр «Кривые» (ctrl+m), чтобы сделать слой 1 темнее другого.

7. Добавьте глубину с помощью настроек стиля слоя

Дважды щелкните слой 1 в палитре слоев, затем установите параметры стиля слоя, как показано ниже.

Я выбрал только настройки «Внутренняя тень» и «Внутреннее свечение».

8. Добавьте больше глубины с помощью инструмента «Кисть»

Добавьте глубины слою 1, затеняя более темные цвета с помощью инструмента «Кисть» (b).

9.Добавьте эффект внутреннего свечения для слоя 2

.

Переходя к Слою 2, мы включим Inner Glow. Снова дважды щелкните слой 2 в палитре слоев, чтобы перейти к настройкам стиля слоя.

10. Нарисуйте 3-ю фигуру

Создайте новый слой и с помощью инструментов «Прямоугольник со скругленными углами» и «Эллипс» создайте две новые фигуры (см. ниже).

11. Скопируйте 2-й слой на 3-й слой

Выберите фигуру (alt + enter), затем скопируйте слой 2 (ctrl+c, затем ctrl+v) на слой 3. Этот шаг аналогичен шагу 5 и шагу 6.

Не забудьте затемнить слой 3, отрегулировав параметр Кривые (ctrl+m).

12. Дублировать слой 3

Дублируйте слой 3 (ctrl+j), залейте его (alt+delete) зеленым цветом (#005e20), затем переместите его немного вниз. Мы назовем этот слой Green Shape Layer.

13. Вырежьте слой с зеленой фигурой, чтобы он вписался в слой 3

Теперь мы хотим удалить зеленую область, которая касается за пределами слоя 3. Для этого выберите слой 3, удерживая кнопку Ctrl и щелкнув этот слой в палитре слоев.Вы увидите выделение — пунктирные линии вокруг элементов — создано.

Нажмите еще раз на слой с зеленой фигурой в палитре слоев, но убедитесь, что вы выбрали слой 3. Затем вырежьте (нажмите удалить) слой с зеленой фигурой.

Зеленая фигура должна быть выровнена со слоем 3.

14. Создание отверстия для бильярдного стола

Теперь создайте новую фигуру (и слой) с помощью инструмента «Эллипс» — залейте ее черным цветом.

15. Придайте слою 3 эффект внешнего свечения

Вернитесь к слою 3 и примените к нему эффект внешнего свечения (см. ниже).

16. Добавьте глубины зеленой фигуре

Как и в ШАГЕ 8, добавьте глубины зеленой фигуре, добавив более темный цвет с помощью инструмента «Кисть» (b).

17. Добавьте шумоподавляющий фильтр

Затем добавьте «Шум» на слой с зеленой фигурой (Фильтр > Шум > Добавить шум).

Я поставил около 5% шума.

18. Добавьте блики и детали

Поместите еще один черный круг поверх формы отверстия бильярдного стола, затем выделите отверстие заднего бильярдного стола с помощью инструмента «Кисть» (b).Добавьте шумовой фильтр.

19. Нарисуй простой шар

  1. Создайте круглую форму с помощью Elliptical Marquee Tool (m) и залейте ее белым цветом.
  2. Возьмите более темный цвет (#9d956e) и прокрасьте кистью (b) края изображения, чтобы создать мягкий градиент.
  3. Используйте кисть меньшего диаметра и более светлый цвет для второго градиентного блика.
  4. Создайте блик с помощью Pen Tool (p).
  5. Затем почистите (b) эту фигуру, чтобы придать шару глянцевый оттенок.

20.Создаем тень для мяча

Последний шаг! Создайте черный круг под шаром и примените к нему эффект размытия (Фильтр > Размытие > Размытие по Гауссу).

И вот окончательный результат!

Надеюсь, вам понравилось — спасибо за подписку и удачи в ваших собственных проектах! 🙂

Нужна иконка, разработанная для вашего приложения?
Наше глобальное сообщество профессиональных графических дизайнеров может сделать это!

Как создать набор иконок с помощью Adobe Photoshop

В этом уроке мы создадим набор иконок в Adobe Photoshop.Набор иконок должен иметь одинаковый фон и тему. В учебных целях мы создадим иконку солнца, иконку ледяной чешуи и иконку RSS. Давайте начнем.

1. Подготовка холста

Шаг 1

Начните с создания нового файла размером 350 px × 350 px . Щелкните маленькое поле рядом с параметром Содержимое фона , чтобы изменить новый цвет холста.

Шаг 2

В диалоговом окне Color Picker выберите серый ( #e0e0e2 ) цвет фона холста.

Шаг 3

Всегда полезно с самого начала структурировать свою работу. Создайте новую группу слоев и назовите ее sun . Здесь мы разместим все слои, используемые для значка солнца.

2. Проектирование основания для иконок

Шаг 1

Используйте инструмент Rounded Rectangle Tool , чтобы нарисовать прямоугольник размером 83 пикселя × 64 пикселя и радиусом 8 пикселей . Чтобы получить точные результаты, используйте панель Properties . На этой панели вы можете просто ввести точный размер в поле ввода.

Шаг 2

Удерживая Shift , нарисуйте еще один прямоугольник со скругленными углами. Эта новая форма будет добавлена ​​к предыдущей форме. Установите его размер 36 пикселей × 36 пикселей с радиусом 3 пикселя .

Шаг 3

Нажмите Control-T , чтобы выполнить трансформацию, а затем щелкните и перетащите за пределы ограничивающей рамки, чтобы повернуть ее 45° .

Шаг 4

Убедитесь, что фигура находится в середине предыдущей фигуры. В CC 2014 вы можете проверить его положение, перетащив его и защелкнув на направляющей в центре предыдущей фигуры.

Шаг 5

Нажмите Введите , чтобы подтвердить результат преобразования. Вы можете найти диалоговое окно подтверждения от Photoshop, информирующее вас о том, что фигура превратится в обычный путь. Это означает, что вы больше не можете редактировать его с помощью панели «Свойства». Просто нажмите Да .

Шаг 6

Поместите фигуру, как показано на рисунке ниже.

Вот результат при 100% увеличении.

Шаг 7

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

Шаг 8

Установите его цвет на  #57adf8 .

Шаг 9

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

Для градиента используйте следующее расположение цветов. Чтобы открыть редактор градиента и изменить настройку градиента, щелкните поле предварительного просмотра градиента.

Шаг 10

Уменьшите уровень заливки до 11%. Содержимое слоя будет прозрачным, а стили слоя останутся нетронутыми.

Это результат.

3. Иконка Тень

Шаг 1

Создайте новый слой под основой иконки. Активируйте инструмент Кисть , а затем нарисуйте тень под значком.

Шаг 2

Продолжая использовать инструмент «Кисть», добавьте более яркую тень прямо под кончиком значка.

Шаг 3

Элемент управления — нажмите  меньшее основание значка, чтобы сделать новый выбор на основе его формы.Создайте новый слой, а затем закрасьте белым цветом поверх выделения. Убедитесь, что вы используете мягкую кисть (0% Hardness )

Шаг 4

По завершении удалите выделение с помощью Control -D  и затем уменьшите непрозрачность слоя .

Шаг 5

Создайте еще один новый слой и выберите выделение из маленькой базы значков. Залейте выделение градиентом от белого к черному. Измените режим наложения слоя на Overlay , а затем уменьшите его непрозрачность .

Шаг 6

Добавьте еще один новый слой. Сделайте большое эллиптическое выделение в нижней части значка, а затем Control щелкните небольшой базовый слой, чтобы пересечь его. Залейте выделение градиентом от белого к черному. Измените режим наложения слоя на Экран и уменьшите его непрозрачность .

Это результат при 100% увеличении.

Шаг 7

Control — нажмите  базовый слой значка.Создайте новый слой сверху и нажмите Edit > Stroke . Установите светло-синий цвет и ширину : 1 пиксель .

Ниже вы можете увидеть разницу до и после добавления контура штриха к значку.

Шаг 8

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

Вы можете увидеть детали блика на следующем рисунке.

Шаг 9

Добавьте корректирующий слой Color Balance над значком. Мы собираемся использовать его для изменения цвета фона.

Чтобы упростить управление слоями, давайте изменим его имя на  средство смены цвета .

Шаг 10

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

Шаг 11

Дублируйте основу значка и измените параметр Цветовой баланс индивидуально.

4. Добавьте значки

Шаг 1

Для нашей первой иконки мы добавим иконку солнца. Начните с рисования желтого круга.

Шаг 2

Примените стили слоя Внутренняя тень и Внутреннее свечение , используя следующие настройки. Используйте #7b6708 для их цвета и установите оба режима наложения на Multiply .

Шаг 3

Закрасьте более светлым желтым цветом нижнюю часть центра солнца.

Шаг 4

Добавьте эллиптическую форму на верхнюю половину солнца с более ярким желтым цветом.

Шаг 5

Нарисуйте тонкую фигуру светлого цвета в верхней правой части солнца для его блика. Удалите некоторые из них с помощью мягкого ластика, чтобы сохранить естественность.

Шаг 6

Следующий процесс — добавление пламени солнца. Начните с рисования двух желтых треугольников, как показано ниже.Поместите их за солнцем.

Шаг 7

Выберите обе векторные фигуры и продублируйте их: Control -C  и затем Control -V . Поверните новые фигуры на 45°.

Шаг 8

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

Шаг 9

Нанесите Inner Shadow с цветом #b48f0b и Outer Glow с цветом #f9dc7e .

Шаг 10

Чтобы помочь нам, солнце теперь скрыто от глаз.Нарисуйте больше желтых треугольников, как показано ниже.

Шаг 11

Добавьте круглую фигуру в центр треугольников и установите режим ее контура на Вычтите .

Мы закончили, давайте вернем блик и формы солнца.

Шаг 12

Чтобы получить реалистичное солнце, нам нужно нарисовать размытую желтую круглую форму за солнцем. Вы можете нарисовать его вручную, используя мягкую кисть, или сначала нарисовать круг, а затем смягчить его, используя фильтр Gaussian Blur.

Шаг 13

Дважды щелкните слой группы значков, чтобы добавить стиль слоя.Добавьте Inner Glow с черным цветом и режимом наложения Multiply .

С помощью этого стиля слоя мы добавили темный силуэт к значку.

Шаг 14

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

Шаг 15

Дублируйте и вставьте путь ( Control- C , Control -V ). Нажмите Control -T , а затем превратите его в меньшую форму.Установите его режим на Subtract Front Shape .

Шаг 16

Дублируйте путь и уменьшите его. Установите его режим на Combine Shapes .

Шаг 17

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

Шаг 18

Добавьте два прямоугольника и установите для них режим Subtract Front Shape . См. рисунок ниже, чтобы узнать их положение.

Шаг 19

Дважды щелкните символы RSS, а затем примените Внутреннее свечение , Наложение градиента и Тень .

Вот результат при 100% увеличении.

Ступень 20


Теперь мы добавим символ снежинки в третью иконку. Активируйте инструмент Custom Shape и загрузите набор векторных фигур Nature из панели параметров .

Появится диалоговое окно с предупреждением, в котором вас попросят заменить или добавить тему векторных фигур «Природа» к уже существующим фигурам. Вы можете нажать OK .

Шаг 21

Выберите фигуру Snowflake из выпадающего списка.

Шаг 22

Нажмите и перетащите, чтобы нарисовать символ снежинки поверх значка.

Это результат при 100% увеличении.

Заключение

Как видно из этого урока, создать набор иконок не так уж и сложно. Прежде чем приступить к рисованию символа, вам нужно подготовиться к общей теме. В этом случае значок размещается на форме прямоугольника со скругленными углами и треугольника. Надеюсь, вам понравился урок, и вы узнали что-то новое из его шагов.

30 подробных руководств по созданию иконок для Adobe Photoshop

Мы визуальные существа.Как бы нам ни хотелось думать, что мы ценим внутреннее качество вещей, реальность такова, что мы начинаем судить о каждой книге по ее обложке.

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

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

Более 80 000 PSD-шаблонов для Photoshop

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

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

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

В этом уроке вы пройдёте процесс создания кофейной чашки на вынос от начала до конца.

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

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

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

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

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

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

В этом уроке вы узнаете, как создать свой собственный светящийся значок/иллюстрацию Google.

В этом уроке вы создадите иконку кисти с деревянной палитрой и шариками краски.

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

В этом уроке они покажут, как создать совершенно уникальную иконку для социальных сетей, вдохновленную НЛО, на основе темы.

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

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

В этом уроке вы выполните простые шаги по созданию этого красивого значка конверта.

В этом уроке они покажут, как создать катушку фотопленки с помощью Photoshop.

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

В этом учебном пособии вы создадите значок графического планшета с нуля, в частности, для планшета Wacom 12″ Cintiq.

Узнайте, как нарисовать трехмерную иконку книги с нуля с помощью Photoshop, используя Pen, Polygonal Lasso и Gradient Tool.

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

В этом туториале для среднего уровня они покажут вам, как сделать эту потрясающую иконку с нуля с помощью Photoshop.

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

В этом уроке вам будет показано, как создать значок радара в стиле Mac в Photoshop. Это также может быть легко достигнуто в Fireworks или Illustrator.

В этом уроке они покажут, как создать симпатичную иконку птицы Twitter в Photoshop.

В этом уроке вы научитесь рисовать коммуникатор в стиле ретро Star Trek, комбинируя стили слоя и много рисуя вручную.

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

PixelTango

Вы когда-нибудь задумывались, как создаются значки на рабочем столе или как сделать значок из графики? В этом уроке вы выполните простой процесс проектирования и создадите значок в высоком разрешении, а также узнаете, как экспортировать его в формат ICO, чтобы вы могли использовать его на рабочем столе или в файловой системе.

Результат

Дизайн иконок в Photoshop

  1. Откройте новый документ ( CTRL+N ).Я назвал его « Photoshop_Icon » и дал ему 10 сантиметров в ширину и высоту. Не забудьте установить разрешение 300 пикселей на дюйм. Если у вашего компьютера проблемы с большими изображениями, просто измените его размер до нужного размера, но сохраните пропорции.
  2. Создайте прямоугольник со скругленными углами с помощью инструмента «Прямоугольник со скругленными углами» ( U ). У меня 7 сантиметров в ширину и высоту с радиусом 30 пикселей.
  3. Преобразуйте его ( CTRL+T ) и поместите в центр, изменив X и Y на половину ширины и высоты документа.В данном случае 5 см.
  4. Создайте новый слой « Цвет ». Теперь нажмите CTRL+ALT+G , чтобы создать обтравочную маску на слое ниже. После этого выберите градиент и сделайте градиент следующим образом. Из верхнего правого в нижний левый угол.
  5. Создайте новый слой « Граница ». Теперь CTRL+CLICK на маленькую иконку слоя « Box ». Go Выберите > Modify > Contract и сократите выделение на 25 пикселей.Залейте это выделение белым цветом. Установите режим наложения « Soft Light » с непрозрачностью 25%. Дублируйте слой « Граница » с Щелкните правой кнопкой мыши > Дублировать слой или ярлык ( CTRL+J ). Теперь нам нужно немного размыть его, Filter> Blur> Gaussian Blur около 15 пикселей. Поместите этот слой в « Overlay » с непрозрачностью 25%.
  6. Введите текст с помощью инструмента «Текст» ( T ).
  7. Дублируйте этот слой, затем переместите его вниз на 5-10 пикселей и установите непрозрачность 40%.
  8. Создайте новый слой « Ps_Fill ». CTRL+Щелкните по значку текстового слоя, чтобы сделать новый выбор. Теперь сожмите его на 10 пикселей. Если вы забыли, Выберите > Изменить > Контракт .
  9. Залейте градиентом по вашему выбору. Я залил его мягким градиентом от серого к белому.
  10. Создайте новый слой « Highlight ». CTRL+Нажмите на значке слоя « Box », чтобы сделать выбор. Теперь, используя белый радиальный градиент, залейте его, как я.
  11. С помощью Elliptical Marquee Tool ( M ) сделайте выделение, подобное этому, затем нажмите «Удалить».
  12. Установите режим наложения « Мягкий свет » с непрозрачностью около 75%. Дублируйте тот же слой, трансформируйте его ( CTRL+T ), чтобы сделать его больше, и уменьшите непрозрачность до 50%. Снова продублируйте его, снова увеличьте и уменьшите непрозрачность до 25%.
  13. Создайте новый слой « Noise ». Залейте его черным цветом. Теперь перейдите Фильтр > Шум > Добавить шум и добавьте немного шума. Опции не имеют значения. Установите непрозрачность 3%.
  14. Новый слой « Результат ».
  15. Установите режим наложения « Color Burn » с непрозрачностью 75%.
  16. Создайте новый слой ниже слоя « Box ». Назовите его « Тень ».С помощью Elliptical Marquee Tool ( M ) сделайте выделение, как это сделал я, и залейте его черным цветом. Фильтр > Размытие > Размытие по Гауссу , около 15 пикселей.
  17. Дублируйте этот слой с тенью и поместите его поверх документа.
  18. CTRL+Нажмите на значке слоя « Box ». Щелкните правой кнопкой мыши по вашему выбору > Выберите инверсию . Нажмите УДАЛИТЬ .
  19. Вот и все.Теперь вы можете поиграть с цветами или чем угодно.
Скачать .PSD

Это графика в высоком разрешении. Сохрани это. Следующим шагом будет загрузка плагина, его установка, изменение размера и экспорт в рабочий файл .ico . Затем вы можете назначить его любому файлу или папке на рабочем столе Windows. Загрузите «плагин формата файла ICO (значок Windows) для Photoshop от Toby Thain » с официальной веб-страницы http://www.telegraphics.com.au. Если у вас возникли проблемы с поиском ресурса, то просто перейдите по этой ссылке.

Узнайте, как установить подключаемый модуль в нашем учебном пособии «Пользовательские ресурсы в Photoshop».

Сделать значок из изображения

  1. Установить плагин.
  2. Откройте документ со значком.
  3. Удалить фон.
  4. Измените размер до 32×32 пикселей. Изображение > Размер изображения. Установите « Разрешение » на 72 пикселя на дюйм.
  5. Изображение > Режим >Индексированный цвет .Установите цвета на 256.
  6. Файл > Сохранить как . Подойдите творчески к имени файла и поместите Сохранить как в ICO (значок Windows) (*.ICO).
  7. Щелкните правой кнопкой мыши файл или папку > Свойства. Перейдите на вкладку « Настроить » и нажмите « Изменить значок… ». Нажмите « Browse… » и укажите на только что созданный значок.
  8. Нажмите « OK ».

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

Спасибо за чтение наших руководств и обязательно ознакомьтесь с другими!

Вам понравилось?

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

Об авторе

Формат файла ICO Photoshop и как создавать фавиконы

Фавиконы — это, казалось бы (и буквально!) маленький, но важный способ продвижения вашего бренда на вашем сайте.Мы визуалы по своей природе, а это означает, что мы с большей вероятностью узнаем эту маленькую синюю иконку птицы для Twitter или этот конверт с красной линией для Gmail быстрее, чем мы их имена при просмотре нашей панели закладок. Вы можете сами создавать фавиконы, создавая файлы ICO в Photoshop. Такой курс, как «Краткое руководство по Photoshop CC», расскажет вам о фавиконах и множестве других вещей, о которых вы даже не знали, что Photoshop может делать.

Наличие уникального значка для вашего веб-сайта облегчит потребителям поиск вашего сайта на занятой панели закладок или среди ряда вкладок, а также убедит их, когда они перейдут на вашу страницу, что они находятся в нужном месте. место.

Несомненно, фавикон необходим всем, у кого есть веб-сайт. Вопрос только в том, как его сделать? Ну, это начинается с формата файла Photoshop ICO.

Что такое фавикон?

Во-первых, что такое фавикон? Сокращенный от любимый значок , а также описываемый как значок ярлыка, значок вкладки или значок закладки, среди прочего, фавикон — это небольшой мини-логотип, обычно 16 × 16, который вы можете использовать на своем веб-сайте. Если браузер поддерживает это, он будет отображать фавикон в таких местах, как адресная строка, панель закладок, вкладки, история страниц, данные просмотра и т. д.

Фавикон Udemy.com — это маленький зеленый квадрат с заглавной буквой U, как показано выше на вкладке.

Фавиконы сохраняются как файлы ICO, формат файлов, который сохраняет несколько изображений разных размеров для целей масштабирования. Все значки в Windows, от исполняемых файлов рабочего стола до приложений меню «Пуск», сохраняются в виде файлов с расширением .ico.

Создание файлов ICO в Photoshop

Photoshop — отличная и гибкая программа редактирования графики для создания пользовательских фавиконов.Однако для сохранения файлов с расширением .ico в Photoshop необходимо загрузить отдельный подключаемый модуль. К счастью, это действительно легко сделать.

Шаг 1. Установите подключаемый модуль

Вы можете найти подключаемый модуль на веб-сайте Telegraphics. Вы ищете загрузку с пометкой ICO (Windows Icon) Format, которая доступна как для Mac, так и для Windows.

Чтобы установить подключаемый модуль, сначала убедитесь, что Photoshop закрыт. Извлеките загруженные файлы и поместите их в подпапку «Плагины» > «Форматы файлов» в указанном месте Adobe Photoshop.

Теперь, когда вы открываете Photoshop, создаете новый документ, нажимаете «Сохранить как» и раскрываете раскрывающееся меню, тип файла ICO должен быть вариантом.

Шаг 2. Создайте свой значок в документе размером 64×64

Если вы абсолютный профи и можете работать в пределах 16×16 пикселей, во что бы то ни стало, дерзайте! Но если вам нужно немного больше места для работы, вы можете начать с документа размером 64×64 пикселя, а затем уменьшить его масштаб.

Если вы знаете, как работают все функции графического дизайна и редактирования в Photoshop, у вас не должно возникнуть проблем с созданием базовой иконки.Если вы не знаете, как работает какой-либо из инструментов палитры, вам следует сначала прочитать об этом! Попробуйте этот курс Photoshop Essentials, а затем вернитесь к этому руководству, когда станете мастером графического дизайна!

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

Шаг 3. Уменьшите масштаб до 16×16

Теперь пришло время изменить размер значка, чтобы он был совместим с веб-браузерами.Перейдите в «Изображение» > «Размер изображения» в меню вверху или нажмите Alt+Ctrl+I и измените размер на 16×16. Убедитесь, что это пиксели, а не дюймы.

Также хорошо открыть раскрывающееся меню, где написано «Пересэмплировать», и выбрать параметр «Бикубическая резкость». Это гарантирует, что изображение не слишком сильно размывается при изменении размера, но если оно все еще теряет слишком большую резкость, вы всегда можете настроить эти свойства с помощью параметров фильтра.

Если все сделано правильно, вы должны увидеть, как ваша иконка 64×64 превращается в фавиконку 16×16!

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

В этом кратком руководстве по Photoshop CC показано, как легко это сделать с помощью новых функций Photoshop CC. Для более старых версий рассмотрите этот учебный курс Photoshop по освоению основ.

Шаг 4. Сохраните свою фавиконку как ICO или тип файла .ico

Этот шаг прост. Если вы правильно установили плагин, теперь пришло время перейти к «Файл»> «Сохранить как», открыть раскрывающееся меню и выбрать файл ICO (значок Windows) (*.ICO) вариант . Нажмите кнопку «Сохранить», и вам будет предложено указать формат значка.

Рекомендуется сохранить файл как стандартный ICO, поскольку формат PNG (Vista) не очень совместим.

После того, как вы нажмете OK, вы можете запутаться. Почему приложение Photoshop по-прежнему ссылается на наш значок как на .psd, хотя мы только что сохранили его как ICO? Это потому, что файл ICO нельзя редактировать в Photoshop. Просто попробуй открыть его и увидишь. Как только вы сохраните свой значок как ICO, этот файл ICO станет окончательным.Если вы хотите внести в него изменения, вам придется продолжать редактировать файл .psd, пока вы не будете удовлетворены конечным продуктом, и снова сохранить его как ICO.

Использование вашего файла ICO на вашем веб-сайте

Итак, у вас есть новый красивый значок, сохраненный в виде ICO-файла, но как сделать так, чтобы он отображался на панелях закладок и вкладках вашего веб-сайта?

Важно знать это первое правило: ваш ICO-файл должен быть сохранен (или перемещен) в каталог, где находится ваша домашняя страница, обычно это корневая папка.Если вы сохраните его в отдельном каталоге изображений или в другом месте, браузер не сможет его найти.

Затем убедитесь, что между тегом в HTML-документе вашей домашней страницы вставлено следующее:

 <голова>
<ССЫЛКА REL="icon" HREF="FaviconNameHere.ico">
 

FaviconNameHere следует заменить на имя вашего файла фавиконки .ico. По умолчанию браузеры будут искать «favicon.ico», поэтому лучше сохранить его как таковой.


И ты это сделал! Вы создали уникальный фавикон для своего сайта и научились им пользоваться. Дополнительные советы по веб-дизайну и графическому дизайну можно найти на следующих курсах Udemy:

.

Последнее обновление страницы: январь 2014 г.

Как создать значок Favicon (.ICO) в Photoshop

Чтобы поддерживать этот бесплатный сервис, мы получаем партнерские комиссионные через некоторые из наших ссылок. Это не влияет на ранжирование. Наш процесс проверки.

Что такое фавикон?

Фавикон (также называемый веб-сайтом, URL-адресом, ярлыком или значком закладки) — это небольшой значок, который отображается слева от URL-адреса страницы, которую вы просматриваете, в адресной строке браузера, а также в углу текущая вкладка браузера или окно браузера просматриваемой веб-страницы. Если у вас открыто несколько вкладок, он служит удобной визуальной очередью, которая поможет вам быстро распознать подлинность веб-страницы.

Как должен выглядеть фавикон?

Как правило, вам нужно создать фавикон, отражающий индивидуальность вашего веб-сайта. Это можно сделать, создав небольшую иконку вашего логотипа, или часть вашего веб-сайта или названия компании, а также используя цветовую схему вашего веб-сайта. Вы хотите, чтобы фавикон застрял в головах людей как небольшое напоминание о том, кто вы есть.

Характеристики значка Favicon (файл .ICO)

Фавикон:

  • Квадратный рисунок
  • 16 x 16 пикселей (хотя вы можете начать с 64 x 64, чтобы дать вашему дизайну больше свободы)
  • Заканчивается расширением .ico .

Фавикон изначально был представлен в более ранней версии Internet Explorer и поддерживал только формат .ico. Сегодня большинство современных браузеров поддерживают другие графические форматы фавикона, помимо .ico (PNG, GIF (включая анимированные GIF-файлы)), но .ico чаще всего используется во всех браузерах и, следовательно, является стандартом, который вы должны использовать для своего веб-сайта.

Создайте свой файл Favicon (.ICO) в Photoshop

Создайте новый файл в Photoshop. Хотя вы хотите получить квадрат 16×16 пикселей, вы можете начать с 32×32 или 64×64, чтобы у вас было больше места для работы. Импортируйте квадратную версию вашего логотипа или значка для представления вашего бренда в Photoshop. Затем скопируйте и вставьте его в новый файл.Используйте инструмент преобразования (удерживая клавишу Shift, чтобы сохранить пропорции), чтобы изменить размер и убедиться, что измененный размер 16 × 16 по-прежнему выглядит хорошо. Когда вы закончите, перейдите к «Сохранить для Интернета» и сохраните в формате .png с разрешением 72 DPI (точек на дюйм).

Скрытый файл в .ICO с помощью Converter Tool

Зайдите на ICO Converter — бесплатный веб-сайт, который преобразует ваш файл .png в .ico. Нажмите «Обзор» и импортируйте созданный файл .png. Выберите размер и разрядность и сохраните на свой компьютер.

Добавьте значок Favicon на свою веб-страницу

После того, как вы получите свою фавиконку.ico сохранен и готов к работе, вы можете добавить его на свой веб-сайт следующим образом. В заголовок каждой веб-страницы вам нужно добавить следующий код (замените example.com/favicon.ico каталогом, в который вы загрузили свой значок):

.

Мы не рекомендуем вам использовать относительный путь (href=»favicon.ico»), поскольку это может привести к потере путей при перемещении вашего веб-сайта, а также к краже ссылок.Вместо этого используйте абсолютный путь (включая доменное имя), как в примере выше. Вы должны иметь возможность скопировать и вставить этот URL-адрес в свой веб-браузер и увидеть значок значка.

Загрузите Favicon на свой веб-сервер

После того, как вы добавите URL-адрес файла favicon на свою веб-страницу, вам нужно убедиться, что favicon.ico действительно находится там, где вы его указали (в приведенном выше примере, в корне вашего документа (корневая папка вашего веб-сайт — например, /public_html или /www на серверах Linux)).

См. Favicon в действии!

После того, как вы это сделаете, перезапустите веб-браузер, и вы должны увидеть свой значок — как слева от строки URL-адреса, так и в верхнем левом углу вкладки веб-страницы, которую вы посещаете. Вы можете увидеть наш новый блестящий значок на скриншоте рядом с значком для Google Analytics.

Photoshop по-прежнему лучший?

Adobe Photoshop по-прежнему является стандартным программным обеспечением для редактирования фотографий, но является ли он лучшим? Наши эксперты углубляются и узнают в нашем обзоре Photoshop.Узнайте, на что способна последняя версия Photoshop, а также чем она отличается от конкурентов!

Удалось ли вам создать и отобразить свой новый значок?

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

6 комментариев

Как сделать узор в фотошопе

Ранее мы писали о том, как создать шаблон со значками Noun Project с помощью Adobe Illustrator, который позволяет мгновенно переставлять и перекрашивать векторные фигуры в различных конфигурациях.Для тех, кто более привык к Adobe Photoshop, вы можете найти инструмент более простым в использовании для создания повторяющегося шаблона с использованием значков PNG  — идеально подходит для персонализированных и привлекательных обложек, плиток социальных сетей, фонов Zoom и многого другого.

Лучше всего то, что при использовании надстройки Noun Project для Adobe вы можете наслаждаться поиском и мгновенной вставкой любого значка из нашей обширной библиотеки, не выходя из рабочего процесса.

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

Шаги по созданию повторяющегося шаблона с помощью надстройки Noun Project

Надстройка Adobe Noun Project — ваш новый лучший друг, который позволяет использовать обширную библиотеку Noun Project, содержащую более 3 миллионов значков, прямо в вашем рабочем процессе. Как и наше приложение для Mac, это расширение позволяет вам выполнять поиск в нашей безграничной базе данных и мгновенно перетаскивать значки прямо на монтажную область. Загрузите надстройку и запустите ее в Photoshop при следующем открытии приложения.

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

Шаг 1. Создайте новый документ

Загрузите надстройку Adobe, откройте Photoshop и нажмите « Create New », чтобы создать новый документ. Создание шаблона в Photoshop работает немного иначе, чем в Illustrator, и вы будете использовать в качестве основы простую прямоугольную или квадратную плитку, поэтому проще всего начать с квадратного документа размером 1000 x 1000 пикселей. Убедитесь, что документ Цветовой режим настроен на RGB для Интернета, или выберите CMYK, если вы в конечном итоге будете печатать свою иллюстрацию.

В разделе « Фоновое содержимое » выберите « Прозрачный ». Хотя вы можете создать повторяющийся шаблон со сплошным цветом фона, лучше всего отделить основные элементы (значки) от фона на случай, если вы захотите настроить каждый по отдельности. Нажмите « Создать ».

Начните с документа размером 1000 x 1000 пикселей, чтобы ваша основная «плитка узора» была квадратной. Установите для содержимого фона значение «Прозрачный», чтобы позже можно было настроить цвет фона отдельно.

Я начну с шаблона, в котором используются 4 значка в квадрате, поэтому я разделю свой холст на квадранты с помощью направляющих. В разделе « View » выберите « Rulers » (или Command-R на Mac), чтобы отобразить линейки. Затем, наведя указатель мыши на верхнюю и боковую линейки, щелкните и перетащите курсор, чтобы создать направляющую. Перетащите каждую направляющую на свой холст, и она должна автоматически привязаться к центральной точке (500 пикселей в ширину, затем 500 вниз). Это делит ваш холст на 4 четных квадранта.

Показать линейки в разделе «Просмотр» > «Линейки». Щелкая внутри линейки сверху и слева, перетащите курсор, чтобы создать направляющие, и привяжите каждую из них к середине документа (на отметке 500 пикселей), чтобы разделить монтажную область на четыре четных квадранта.

Шаг 2. Найдите расширение проекта существительного

Вы можете найти расширение Noun Project в разделе Window > Extensions > Noun Project .

Шаг 3. Войдите в свою учетную запись NounPro

Если вы являетесь подписчиком NounPro, войдите в свою учетную запись, чтобы разблокировать неограниченную бесплатную загрузку значков и параметры настройки.Если вы еще не являетесь подписчиком, вы также можете использовать любой из 100 значков, включенных в бесплатный стартовый пакет.

Шаг 4. Поиск значков

Найдите нужный значок и нажмите «Ввод». В этом примере я использую коллекцию иконок Awesome 80-х от Кристин Пончек Джонс. Наведя указатель мыши на значок, нажмите черную стрелку «скачать» в правом верхнем углу, чтобы мгновенно вставить его на холст, или вы можете щелкнуть значок, чтобы открыть параметры настройки, включая ваши размеры.PNG установлен. Для этого холста размером 1000×1000 я выбираю значок шириной 1000 пикселей, зная, что позже смогу изменить его размер.

Найдите значки в дополнении Noun Project и щелкните любой из них. Аккаунт Noun Pro позволяет вставлять неограниченное количество значков, а также дает возможность изменять цвет и размер каждого из них.

Шаг 5. Выберите цвет

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

Шаг 6. Добавьте дополнительные значки на монтажную область

Вы можете вставить столько дополнительных значков на монтажную область, сколько захотите. Рекомендуется просто просмотреть «Другие значки от этого создателя» под каждым из них, чтобы вы могли использовать значки из одной коллекции и поддерживать визуальную согласованность (при создании темы).

Вы можете мгновенно менять цвет значков при их вставке.Просмотрите «Другие значки этого создателя», чтобы выбрать несколько значков из коллекции  — это обеспечивает визуальное и тематическое соответствие.

Шаг 7. Расположение и изменение размера значков

С помощью инструмента «Перемещение» (« V ») щелкните и перетащите значки на новые позиции. Вы также можете масштабировать их вверх и вниз, захватив угол их ограничивающей рамки, щелкнув и перетащив внутрь или наружу. По умолчанию Photoshop будет масштабироваться пропорционально, чтобы обеспечить равномерное изменение размера (если нет, удерживайте нажатой клавишу Shift при перетаскивании).Наведя курсор сразу за углы ограничительной рамки, вы увидите, как курсор превращается в вращающуюся стрелку — нажмите и перетащите ее, чтобы повернуть значок по часовой стрелке или против часовой стрелки, если хотите.

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

Совет. В интересах визуальной согласованности масштабируйте все значки вверх и вниз одновременно.Если вы используете несколько значков из коллекции, у них может быть одинаковая толщина линий, которая может казаться несоответствующей, когда они увеличены до разных размеров. Нажмите и перетащите курсор, чтобы выбрать все значки, которые вы добавили на монтажную область, прежде чем прикасаться к любому отдельному, затем выберите углы ограничивающей рамки, окружающей весь кластер, чтобы масштабировать их вместе.

Шаг 8. «Определите» шаблон, когда он будет готов

После того, как все элементы расположены именно так, как вы хотите, выберите каждый значок (либо щелкнув и перетащив их на монтажной области, либо выбрав их все на панели «Слои»).

Затем перейдите к Правка > Определить шаблон . Это превратит ваш выбор в повторяющийся узор, который ведет себя аналогично сплошной заливке из ваших образцов. Дайте шаблон и имя и нажмите OK.

Выберите «Правка» > «Определить узор», чтобы превратить содержимое монтажной области в узор. Дайте ему имя, и оно будет сохранено как образец узора.

Где же он?

Перейдите к Patterns (либо в правом средстве просмотра по умолчанию, либо щелкните Window > Patterns ).Вы увидите, что плитка образца вашего узора создана.

Шаг 9. Используйте узор в качестве заливки, чтобы увидеть его в действии

На этом этапе вы можете использовать тот же холст или создать новый документ, чтобы поиграть с вашим рисунком. Если, например, вы хотите, чтобы ваш окончательный рисунок был обоями для iOS, создайте новый документ Photoshop размером 1920 пикселей в высоту и 1080 пикселей в ширину или используйте обратные размеры для широкоэкранного баннера, подходящего в качестве обложки.

В новом документе начните с создания цветного фона. Перейдите в Слой > Новый слой-заливка > Сплошной цвет (или Градиент) и выберите цвет для начала (в этом примере я хочу проверить свой узор на черном). Это создает новый слой, который автоматически охватывает всю ширину монтажной области.

Затем создайте слой для вашего узора, выбрав Layer > New Fill Layer > Pattern . Нажмите «ОК». В этом случае мой пользовательский шаблон является первым в списке в моем окне «Шаблоны», поэтому он уже заполняет монтажную область.Если у вас по умолчанию используется другой предустановленный шаблон, просто выберите свой собственный шаблон в окне «Шаблоны». Убедитесь, что слой узора расположен над фоновым слоем.

Сначала создайте сплошной фоновый слой (Слой > Новый слой-заливка > Сплошной цвет), который в данном случае я сделал черным. Затем создайте слой-заливку узором (Слой > Новый слой-заливка > Узор) и выберите узор! Теперь я вижу свой повторяющийся шаблон в действии.

Параметры шаблона и форматирование

Появится всплывающее диалоговое окно «Заливка узором» (если вы его не видите, найдите окно «Слои» и дважды щелкните значок кирпичного узора, связанный со слоем заливки).Здесь вы можете выбрать масштаб вашего шаблона (уменьшите процент, чтобы уменьшить масштаб и увидеть больше вашего повторяющегося шаблона; увеличьте его, чтобы увидеть меньше и больше значков). Вы также можете отрегулировать угол для более динамичного эффекта.

Здесь я уменьшил масштаб рисунка до 50% и увеличил угол до 30%, чтобы добавить немного визуального интереса.

Нажмите «ОК», когда все будет так, как вам нравится.

В диалоговом окне «Заливка узором» можно настроить масштаб (или уровень «масштабирования» повторяющегося узора или его уменьшения) и угол.Я изменил каждый из них, чтобы сделать свой узор более динамичным.

Попробуйте несколько вариантов

Вы всегда можете вернуться к сплошному фоновому слою и поиграть с цветами — или создать новый слой-заливку, чтобы сделать градиентный фон вместо сплошного цвета. Вы можете выбрать из библиотеки готовых градиентов или использовать ползунки, чтобы создать свой собственный.

Здесь я нашла красивый градиент цвета заката, который мне нравится — за исключением того, что цвета не всегда хорошо сочетаются с моим узором.Что, если я вместо этого перекрасил сам узор?

Я превратил свой фон в градиент и начал играть с редактором градиентов — но теперь вместо этого я хочу перекрасить значки моего узора.

Перекрашивание рисунка

Хотя у вас может быть рисунок с разноцветными значками, Photoshop распознает растровые фигуры, составляющие узор, и может мгновенно перекрасить их.

Вместо того, чтобы использовать мой градиентный слой в качестве фона, я собираюсь перетащить градиентный слой поверх слоя с узором, затем щелкнуть его правой кнопкой мыши и выбрать «Создать обтравочную маску».«Это говорит Photoshop применить цвета (заливку) моего градиента заката только к пикселям моего слоя с узором» — это означает, что мой узор значка 80-х теперь имеет гладкий градиент поверх них.

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

Хотите отредактировать собственный градиент вместо использования пресета?

Дважды щелкните только что созданный градиентный слой на панели слоев (или выберите Окно > Градиент ).Затем дважды щелкните цветную полосу градиента, чтобы открыть редактор градиента.

В этом окне вы можете создать собственный градиент с нуля или использовать предустановку в качестве отправной точки. Вы увидите, что полоса градиента дает вам «Остановки непрозрачности» вверху и «Остановки цвета» внизу. Двойной щелчок по остановке цвета позволяет вручную выбрать нужный цвет или ввести его шестнадцатеричное значение. Затем вы можете настроить свой градиент следующими способами:

  • Сдвиньте каждую цветовую точку вперед и назад, чтобы указать, какая часть этого цвета будет преобладать в вашем градиенте.
  • Вставьте меньший ромб «Цветовая середина» между упорами, чтобы контролировать плавность перехода цветов друг в друга.
  • Щелкните любую точку в нижней части полосы, чтобы добавить новую точку цвета. Если вы хотите удалить точку цвета, просто щелкните и перетащите ее от полосы, пока она не исчезнет.

В редакторе градиентов нажмите в нижней части полосы градиента, чтобы добавить новую цветовую точку (или нажмите и перетащите ее от полосы, чтобы удалить ее).

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

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

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

Хотите отредактировать сам шаблон (например, расположение значков в основной плитке шаблона)? Здесь Illustrator дает вам немного больше гибкости; как только шаблон был создан как предустановка в Photoshop, он «устанавливается» как есть, и вы можете добавлять к нему только эффекты (т.например, перекрашивание или добавление градиентной обтравочной маски). Вот почему хорошо держать исходный файл шаблона под рукой, и вы можете сохранять новые варианты исходного шаблона, чтобы увидеть, что работает лучше всего.

БОНУС:

Хотите поиграть с еще большим количеством эффектов узора? Сначала растрируйте свой слой ( Layer > Rasterize > Fill Contents ). Затем перейдите в Слой > Стиль слоя и выберите желаемый эффект. Чтобы придать моему рисунку 80-х хорошее свечение в стиле ретро «неоновая вывеска», я выбираю «Внешнее свечение» и играю с параметрами непрозрачности и распространения, чтобы настроить его по своему вкусу.

Растрируйте шаблон (Слой > Растрировать > Заполнить содержимое), чтобы добавить больше эффектов. Перейдите в меню «Слой» > «Стиль слоя» и выберите эффекты из галереи  — здесь я придаю своему рисунку эффект «неонового свечения», используя Outer Glow.

Создайте свой следующий шаблон с помощью значков проектов Noun

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

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

Leave a Reply