Как создать стильную иконку или логотип

Как создать стильную иконку, или логотип используя шаблон фотошоп

Вы узнаете как легко создать стильную, объемную иконку, или логотип.

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

Шаблон я прикреплю в конце статьи, просто скачивайте и используйте в своих целях.

В отдельном посте, я буду дополнительно выкладывать новые шаблоны: “Премиум иконки. Шаблоны PSD“. А чтобы пост стал открытым, вы можете поддержать автора;), и вступить в сообщество, в котором я буду делиться своими наработками! Подробнее пишу об этом ТУТ

Где можно использовать иконку / логотип

Иконку можно использовать везде где есть “кружочки”. Практически во всех популярных соцсетях. Как для кружочков “Актуальное”, они же “Хайлайтс”, так и для аватарок. С логотипами, в принципе, то же самое + можно вставить на сайт, или подготовить к печати.

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

Что нужно для работы

Картинка иконки или логотипа. Формат и размеры

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

Фон

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

Фотошоп

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

Использование для себя

Если вы будете использовать иконку / логотип в не коммерческих целях, скажем для своей соцсети, то можно скачать изображение из открытых источников. Например, готовые иконки в PNG со стоков, либо картинки с иконкой на которых вы самостоятельно удалите фон. Но всегда читайте условия использования, даже где скачиваете бесплатно!

Использование в коммерческих целях

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

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

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

Инструкция

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

Подбираем иконку. Способ поиска и подбора бесплатного изображения на стоках

Вначале я вбиваю название иконки в гугл переводчике (потому что владею английским в совершенстве), в зависимости от задачи. Пишу например “абстракция иконка” (вместо “абстракция” ваше название), копирую перевод, либо жму “Искать в Google”.

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

На странице данного стока, есть панель с фильтрами где вы можете выбрать настройки под нужды. Но, как правило, открывается вкладка с бесплатными иконками (/free-icons/ – текст в ссылке страницы), где можно сразу скачать понравившийся вариант. Также есть своя строка поиска, где сейчас наш пример “abstraction”, можно сменить на другой запрос при необходимости.

Листаете по списку иконок, находите нужную, кликаете на стрелочку “Скачать” и выбираете PNG. Далее “Free download”, выбираете место и скачиваете. Обратите внимание, на описание при скачивании и указании авторства, об этом писал выше.

Как преобразовать растровую картинку в векторную

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

Как преобразовать растровую картинку в векторную, я отдельно сделаю статью. Но если сильно нужно, то самый простой способ ввести в поисковике “из пнг в свг”, или “из джипег в свг” (PNG, JPG, SVG), в зависимости от изначального формата вашей картинки. И методом проб и ошибок попробовать каждый из сервисов. Просто есть как платные, так и бесплатные варианты. Далее, формат SVG можно открыть Figma или Illustrator, и там уже отредактировать, подогнать под нужный размер. После сохранить в PNG на прозрачном фоне. Есть нюансы, по этому тема для отдельной статьи.

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

Работа с шаблоном в фотошоп

Загрузка и редактирование своего изображения

Открываем шаблон фотошоп и два раза кликаем по слою, в область квадратика, под названием “Разместите свою  иконку / логотип здесь”. Это место, куда нужно закинуть своё изображение.

В раскрывшееся окно, нужно закинуть своё изображение, установить выше остальных слоёв и подогнать под размер. Установите изображение в центр. После, нажимайте на крестик, чтобы закрыть вкладку и в выпадающем окне нажмите “Yes”, чтобы сохранить изменения. Либо не закрывая вкладку, нажмите сочетание клавиш “Ctrl+S”, это сохранит изменения и можно переходить на первую вкладку.

Основная магия произошла). Если картинка вас не устраивает по размеру, как в моем случае, то нужно перейти обратно в окно с изображением, как показывал выше. Но можно и по другому туда попасть. Если выделить область и пролистать немного вниз, во вкладке: “Properties”, нажмите кнопку: “Edit Contents”. Если у вас нет вкладки “Properties”, зайдите во вкладку “Window”, в верхней панели, и найдите нужное окно.

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

Папка “Эффекты”. В ней расположены слои нашего изображения, которые под средством настроек и наложений и создают такой цвет, объемный эффект и тень. Они автоматически принимают наше изображение. Вы также можете поэкспериментировать например с тенью (Shadows), выключая по очереди слои, нажав на глазик.

Редактирование фона в фотошопе

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

Также я добавил эффект структуры, что-то вроде “зернистости”. Включить его можно на глазик ниже слоя – “Effects”, “Bevel & Emboss”.

Сами настройки этого, и других эффектов, можно открыть двойным кликом по области слоя (либо правой кнопкой мыши по слою и выберите “Blending Options”). Там где стоит галочка – такой эффект и применён. Можете менять, двигать ползунки и прочее, если что, просто откатите назад (сочетание клавиш “Ctrl+Z”).

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

Немного выше, в слоях, добавлен “Gradient” и “Gradient 2“. Первый можно изменять при двойном клике на квадратик, так же как и “Color Fill” что выше. В открывшейся панели, можно поиграть с настройками. Но чтобы поменять цвета градиента, кликните на линию с градиентом двойным кликом мыши. Кстати у слоёв с градиентом, также добавлен “эффект структуры”, как и у “Color Fill”.

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

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

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

Ну и Gradient 2, я добавил для разнообразия выбора. Сами настройки градиента практически ничем не отличаются от предыдущего, но всё сделано в одной панели стилей и можно добавлять другие эффекты. Также добавлена текстура там где галочка стоит.

Чтобы попасть в настройки кликните два раза по слою в пустом месте рядом с надписью (либо там же правой кнопкой мыши и выберите “Blending Options”), выберите слева вкладку “Gradient Overlay”. По аналогии с предыдущим меняйте настройки под себя и сохраняйте.

Загрузка и редактирование своего фона

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

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

Вначале закиньте картинку выше своего фона (градиента), но ниже самой иконки. Поместите в папку “Фон”.

Далее кликните на вкладку с наложениями, где по умолчанию стоит режим “Normal”. Переключайте мышью по вкладкам и смотрите результат.

Кстати черный цвет обычно удаляют режимом “Screen”.

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

Еще вы можете сделать немного прозрачным фон картинки, чтобы уменьшить эффект, с помощью вкладки “Opacity”. При этом, фон должен быть выделен.

Эффект наложения

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

Свой вариант, при необходимости, закидывайте в папку “Наложение”. Тень от листьев будет падать и на иконку и на фон.

Итоговое редактирование

Иконка готова. Включите эллипс, чтобы посмотреть итог, как будет выглядеть иконка в круге. И кстати если вы видите что она не ровно расположена, выделите слой с исходной картинкой и все слои в папке “Эффекты”. Это можно сделать через Shift или Ctrl. Затем перемещайте иконку мышью или стрелками в нужное положение.

Также можно её уменьшить или увеличить цепляясь мышью за уголки и перемещая. Если при изменении размера, зажать Shift, то оно будет выполняться пропорционально, а если зажать Shift+Alt, тогда это будет происходить относительно центра.

(Если в папке “Наложение” есть какой-то объект, то уберите с неё выделение зажатой кнопкой Ctrl, либо перетащите её на время ниже слоя “Эффекты”).

Сохранение готового результата

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

В верхней панели нажимаем File – Export – Quick Export as PNG (ниже вкладки, где стрелочки, также отвечают за сохранение). И выбираете место для сохранения. Также, в конце сохраните свой исходник фотошопа, можно сочетанием клавиш: Ctrl+S

Рекомендации

• Прежде чем использовать шаблон, сделайте копию и используйте её, чтобы вы всегда смогли вернуться к исходным настройкам.
• После каждых изменений, сохраняйтесь пространство (сочетание клавиш “Ctrl+S”)
• Если сделали что-то не то, откатите назад (сочетание клавиш “Ctrl+Z”)

Скачать шаблон фотошоп

Файлами буду делиться через Облако Mail по умолчанию, так как у меня подписка на большой объем, чтобы файлы там находились как можно дольше по времени. Я постараюсь чтобы они там были пожизненно, но бывает всякое, по этому, по возможности скачивайте материал. При проблеме со скачиванием напишите мне об этом удобным способом, либо в комментариях к статье.

Скачать шаблон можно ПО ЭТОЙ ССЫЛКЕ

Скачать новые шаблоны фотошоп

Новые шаблоны я буду добавлять в этом посте: “Премиум иконки. Шаблоны PSD“. Чтобы получить к нему доступ, вы можете поддержать меня и присоединиться к сообществу, где я буду делиться своими наработками! Более подробная информация доступна ТУТ.

Видео: “Как сделать премиум иконку или логотип за 5 минут, используя готовый шаблон PSD”

P.S.

Если материал был для вас полезным, оставляйте отзывы в комментариях к статье! Обязательно напишите если столкнётесь с трудностями, или по возникшим вопросам, я обновлю информацию и сделаю её ещё удобнее!