Логотипы ico. Обзор сервисов с платными иконками. Почему поиск иконок на сторонних сервисах – не всегда лучшая идея
Иногда нужно загрузить изображение, содержащее прозрачные элементы, сквозь которые будет проглядывать первоначальный фон. В этих случаях, было бы удобно загрузить PNG изображения, поскольку они способны сохранять прозрачность.
В этой статье мы расскажем, как сделать прозрачность в Фотошопе .
Создание файла
Первый шаг – это создание файла. Для этого откройте Adobe Photoshop и в меню «Файл » (File ) вверху страницы выберите «Создать » (New ).
Затем в появившемся окне «Новый документ » (New Document ) создайте файл нужного размера, и убедитесь, что разрешение документа составляет 72 пикселя на дюйм (поскольку файл предназначен для использования в веб ). А также, что вы выбрали значение «Прозрачный » (Transparent ) в выпадающем списке «Содержимое фона » (Background Contents ).
*Перед тем, как сделать PNG с прозрачностью в Фотошопе , нужно уточнить, что в этом примере мы создаем изображение для загрузки в качестве фона для сайта, поэтому размер документа задан следующим образом: ширина 3000 пикселей, высота 1730 пикселей, что является рекомендуемыми размерами для загрузки HD изображений:
После того, как вы задали значения параметров, нажмите «OK », чтобы открыть новый документ.
Затем в панели «Слои » (Layers ) убедитесь, что работаете на прозрачном слое, а не на фоновом:
После того, как вы завершили создание и готовы сохранить прозрачное изображение, в зависимости от используемой версии Photoshop , в меню «Файл » (File ) вы можете использовать один из возможных вариантов:
Photoshop версии ранее, чем CC 2015:
Сейчас мы расскажем, как сделать прозрачность картинки в Фотошопе , который вышел раньше CC 2015 . В этих версиях используют метод «Сохранить для Web » (Save for Web & Devices ), чтобы сохранить и оптимизировать PNG изображения для использования в вебе. Чтобы воспользоваться этим методом, просто зайдите в меню «Файл » (File ), и далее – «Сохранить для Web » (Save for Web & Devices ):
Затем в появившемся окне выберите PNG-24 из выпадающего меню возможных значений, а потом убедитесь, чтобы выбраны опции «Прозрачность » (Transparency ) и «Преобразовать в sRGB » (Convert to sRGB ). Это подтверждает, что изображение будет содержать прозрачный фон и его цветовой режим будет преобразован в sRGB , рекомендованное цветовое пространство для веб.
Поля «Размер изображения » (Image Size ) автоматически заполняются значениями, которые вы задали, когда создавали файл. Но если вы хотите изменить размер файла перед сохранением, то можно сделать это сейчас.
Photoshop версии CC 2015:
Перед тем, как сделать прозрачность фото в Фотошопе , нужно знать, что с версии CC 2015 опция «Сохранить для Web » (Save for Web & Devices ) в меню «Файл » (File ) помечена как Legacy (устаревшая ). И замещена на новую опцию «Экспорт » (Export ), которая предлагает идентичную функциональность с более быстрым сохранением в файле меньшего размера и в лучшем качестве. Чтобы воспользоваться опцией «Экспорт », нажмите меню «Файл » (File ), а затем — «Экспортировать как » (Export As ).
Примечание: Adobe по-прежнему предлагает опцию «Сохранить для Web » (Save for Web & Devices ) в Photoshop CC 2015 , и она доступна через меню Файл > Экспорт (File > Export ) или при использовании комбинации клавиш Command+Option+Shift+S (для Mac ) или Ctrl+Alt+Shift+S (для ПК ):
Затем в появившемся окне выберите PNG из выпадающего меню «Формат » (Format ) и убедитесь, что выбраны опции «Прозрачность » (Transparency ) и «Преобразовать в sRGB » (Convert to sRGB ).
Поля «Размер изображения » (Image Size ) и «Размер холста » (Canvas Size ) должны автоматически заполниться значениями, которые вы задали, когда создавали файл. Но при желании можно изменить эти параметры перед тем, как сделать эффект прозрачности в Фотошопе .
Здравствуйте уважаемые посетители. В этом уроке я покажу, как используя программу Фотошоп можно убрать фон и сделать фотографию прозрачной. Особых знаний этого Фото-монстра вам не понадобится, так как здесь всё очень просто. Главное, чтобы у вас был установлен Photoshop, и вы повторяли за мной все действия.
Итак, как сделать прозрачный фон в Фотошопе?
Запускаем Фотошоп и открываем подопытную фотографию. Жмем меню Файл – Открыть и указываем расположение изображения.
Отлично, фотография открыта и давайте приступать к обрезке фона. Первым делом нам нужно разблокировать слой. Обратите внимание на правый нижний угол программы. Там вы увидите главный слой нашей фотки и маленький замочек .
Нужно, чтобы этот замочек исчез, то есть слой разблокировался. Для этого прямо по замочку делаем один клик левой кнопкой мыши . И замочка больше нет!
Теперь нам нужно удалить фон. Для этого берем какой-нибудь инструмент выделения, например, Волшебная палочка .
Жмём инструментом по фону на фотографии, таким образом выделив ненужный нам объект.
Появилась пунктирная линия (бегающие муравьи). Остается нажать на клавиатуре клавишу DELETE и фон будет удален. Смотрите как получилось:
Супер! Теперь снимите выделение нажав на клавиатуре сочетание клавиш CTR+D .
Ну, в общем-то, как сделать прозрачный фон в Фотошопе мы разобрались и теперь остаётся эту фотографию правильно сохранить.
Для этого нажмите меню Файл – Сохранить для Web . Или же просто воспользуйтесь ALT+SHIFT+CTR+S .
Вы увидите окно, в котором нам обязательно нужно выбрать формат PNG-24 и только после этого нажимать кнопку Сохранить .
А теперь смотрите что было и что стало:
Напоследок стоит сказать, что в некоторых случаях когда Вы решите сделать прозрачный фон в Фотошопе на какой-то картинке, то Вам возможно придётся применять другие инструменты выделения, например, Перо или Магнитное лассо . Я использовал инструмент Волшебная палочка , так как у меня на фотографии человека было легко отделить от фона. Если вы будете удалять фон со сложных изображений, то придется немного попотеть.
На этом сегодня всё, желаю удачи!
Довольно часто можно найти в Интернете подходящее изображение, например, чтобы вставить его на веб-сайт. А возможно, Вы делаете коллаж, и нужно на один рисунок добавить другие. Вот только нужные изображения обычно имеют какой-либо фон.
Давайте разберемся, как можно сделать прозрачный фон для картинки с помощью редактора Adobe Photoshop . У меня установлена англоязычная версия Adobe Photoshop CS5, поэтому показывать буду на нем. Постараюсь приводить различные сочетания горячих клавиш.
Если у Вас еще не установлен фотошоп, Вы им очень редко пользуетесь или он на английском, можете сделать прозрачный фон в Paint.net . Это простой русскоязычный редактор изображений, который займет не много места на жестком диске. Перейдя по ссылке, Вы можете прочесть подробную статью. Скачать программу Paint.net можно с нашего сайта.
Для начала рассмотрим простой пример. Предположим, у Вас есть изображение на однотонном фоне, это может быть логотип или название чего-либо. Сделаем этот логотип или надпись на прозрачном фоне в фотошоп .
Открываем нужное изображение в редакторе. Теперь сделаем прозрачный фон для слоя. В окне «Слои» кликаем два раза мышкой по добавленному слою – напротив него будет стоять замочек. Откроется окно «Новый слой» , нажмите в нем «ОК» . После этого замочек исчезнет.
Выбираем инструмент «Волшебная палочка» . В строке свойств укажите уровень чувствительности, позадавайте разные значения, чтобы понять, как он работает, например 20 и 100. Чтобы снять выделение с рисунка нажмите «Ctrl+D» .
Задаем чувствительность и нажимаем волшебной палочкой на область фона. Чтобы добавить к выделенному фону, те части, которые не выделились, зажмите «Shift» и продолжайте выделение. Для удаления выделенных областей нажмите «Delete» .
Теперь вместо фона шахматная доска – это значит, что у нас получилось сделать белый фон прозрачным. Снимаем выделение – «Ctrl+D» .
Если у Вас изображение или фотография, на которой много различных цветов и объектов, рассмотрим, как сделать прозрачный фон для изображения в фотошопе .
В этом случае, воспользуемся инструментом «Быстрое выделение» . Кликаем по волшебной палочке левой кнопкой мыши с небольшой задержкой и выбираем из меню нужный инструмент.
Теперь нужно выделить объект, который мы хотим оставить на прозрачном фоне. В строке свойств устанавливайте различные размеры и кликайте на объект, добавляя к нему области. Если ошибочно выделится ненужный фон, нажмите «Alt» и уберите его.
Для просмотра результата нажмите «Q» . Розовым будут выделены те части изображения, которые станут прозрачными.
Копируем выделенные области, нажав «Ctrl+C» . Дальше создаем новый файл, «Ctrl+N» , с прозрачным фоном.
Вставляем в него скопированные фрагменты, «Ctrl+V» . Если на них остались ненужные части фона, уберите их, используя инструмент «Ластик» . Сохраняем сделанные на прозрачном фоне картинки в формате PNG или GIF.
Делайте белый фон рисунка прозрачным, или делайте прозрачный фон для отдельных фрагментов цветного изображения или фотографии в фотошопе. После этого, можно их использовать там, где это необходимо: вставлять на сайт, добавлять на другой рисунок или делать интересные коллажи.
Оценить статью:Когда работаешь над дизайном сайтов, часто приходится сталкиваться с тем, что найденное изображение, которое идеально бы подходило к твоему сайту, имеет другой фон, который желательно бы убрать.
И так, открываем нашу картинку в фотошопе.
1.
Первое, что нужно сделать — создать у картинки рабочую область с прозрачным фоном. Для этого:
— в окошке слоёв кликаем два раза на наш слой (с замочком)
— В повившемся окошке нажимаем ОК
Замочек должен исчезнуть
Если фон однотонный:
Выбираем инструмент «Волшебная палочка
» — это очень гибкий инструмент для выделения нужной области. Наша задача выделить весь фон, кроме рисунка. Для этого подгоняем настройки волшебной палочки (параметр допуск
), пока не получим нужный результат. Так-же пользуемся клавишей Shift, чтобы выделить область помимо уже выделенной. Нажимаем Del и выделенная облась удаляется.
Если фон разноцветный:
Используем инструмент «Быстрое выделение
«. Тут наша задача выделить не фон, а сам объект, который должен остаться. Нажимаем до тех пор, пока не выделится нужная область. Если выделилось лишнее, зажимаем Alt и минусуем облась. Посмотреть результат можно клавишей Q.
Когда выделение готово, копируем его Ctrl+C. Создаем новый документ с прозрачным фоном (Ctrl+N) и вставляем туда объект Ctrl+V.
3 . Если на рисунке осталось что-то лишнее, используем инструмент «Ластик «, просто затираем лишний фон.
4 . Сохраняем изображение для Web (Alt+Shift+Ctrl+S) выбираем формат GIF либо PNG (в других наш прозрачный фон превратится в белый).
Полезное видео в тему:
Создаете новый логотип для своей компании или личного бренда, и ищете свежие оригинальные иконки, которые могли бы стать его основой? Тогда позвольте нам облегчить ваши поиски, ведь в этой статье мы представляем подборку наиболее известных и востребованных сервисов для поиска иконок – как бесплатных, так и платных. Однако стоит помнить, что…
Почему поиск иконок на сторонних сервисах – не всегда лучшая идея?
Использование готовых иконок для оформления своего лого зачастую приводит к рискам, вот наиболее значимые из них, на которые стоит обратить внимание:
Как правило, иконки на таких сервисах (включая платные) могут быть скачаны всеми желающими неограниченное количество раз. Взяв такую символику за основу, вы получите неуникальный логотип и не сможете использовать его для своей торговой марки;
Это лишь часть возможных неприятностей, нередко подстерегающих тех, кто решает воспользоваться иконками со сторонних сайтов при разработке логотипа для своего бизнеса. Однако вы всегда можете подыскать оригинальную иконку в каталоге и затем создать на ее основе свою уникальную символику. Сервис передает пользователям авторские права на все части логотипа, что избавит вас от любых возможных рисков.
Сервисы с бесплатными иконками
В данном разделе мы рассмотрим популярные сервисы, позволяющие бесплатно скачать разнообразные иконки для своего логотипа, или приложения. Итак, к ним относятся:
1. Streamlineicons
Обширный каталог из 5000 разнообразных для сайтов, iOS и Android приложений. Они распределены по 97 тематическим категориям, пакет на 100 иконок можно скачать бесплатно, а за 2000 и 5000 иконок придется заплатить 67$ и 97$. StreamLine позволяет в один клик импортировать все доступные вам объекты в популярный органайзер IconJar для более удобного применения. Иконки предлагаются в двух стилях: со стандартным и жирным шрифтом, также вам удастся самостоятельно регулировать толщину их линий.
2. Iconstore
На сайте опубликовано более 220 паков цветных, контурных и символических иконок, скачать которые бесплатно и без регистрации может любой желающий. Каждый из них посвящен определенной тематике, возможно выбрать интересующую тему из списка категорий. Также паки снабжаются данными о количестве иконок и доступных форматах – большинство в SVG, но также встречаются EPS, AI, PSD, PNG. Система поиска позволит найти иконки по ключевым словам, а подписка поможет не пропустить свежие обновления.
3. Pixelicons
Доступно свыше 6500 иконок в трех стилях: цветном, контурном и выделенном жирным шрифтом. Все иконки можно скачать в самых разнообразных форматах, включая SVG, PNG, PSD, CSH, EPS, AI, PDF, WEB, SKETCH, а также мгновенно импортировать их в популярное тематическое приложение IconJar. 300 иконок предлагаются бесплатно, а за расширенный доступ придется заплатить 67$ или 97$. Все изображения разработаны с применением 16-пиксельной сеточной системы, еще пользователь может изменять их цвета, размеры, ориентацию, тени и штрихи.
4. Flaticon
Сервис предлагает клиентам обширную базу из 865 500 иконок, сгруппированных по 16 722 пакам. Здесь можно найти как бесплатные, так и премиум паки, все изображения загружены на сайт в наиболее актуальных форматах: SVG, PNG, PSD, Iconfont, EPS и BASE64. На главной странице FlatIcon размещаются популярные иконочные паки, например, за последний месяц или же за всё время. Есть возможность скачать иконки в векторном или растровом формате, в размере от 16px до 512px, а также придавать им разные цвета.
5. Iconfinder
Почти 2.5 миллиона иконок в формате SVG, как бесплатные, так и платные паки с определенным количеством изображений – каждый из них имеет свою цену, назначаемую разработчиком. Все объекты распределены по десяткам тематических категорий (всего их более 50), а также 12 стилям (от пиксельного и нарисованного от руки до мультипликационного и фотореалистичного). Платная подписка (за 19$ или 49$) дает доступ ко всем иконкам в разных форматах (SVG, IconJar, PNG) и позволяет использовать их в коммерческих целях.
6. Freepik
На этом сайте вы сможете бесплатно скачать не только иконки, но также векторы, иллюстрации, PSD файлы и стоковые фотографии, выбирая их среди десятков тематических разделов. Сейчас FreePik предлагает посетителям почти 100 000 бесплатных иконок, подходящих для личного или коммерческого применения и рассортированных более чем по 30 категориям. Их можно загружать в актуальных форматах PNG, SVG и EPS. Есть возможность отсортировать как самые популярные, так и только новые иконки.
7. Icons8
В каталоге вас ждет 69 900 иконок, доступных во всех популярных форматах (PNG, SVG, EPS, PDF) и различных размерах (48px, 96px, 480px и т.д.). Бесплатно предлагаются только иконки в PNG с предельным размером в 100х100px, за полный доступ к функционалу сайта придется платить 19.90$ в месяц. Все объекты тщательно распределены по тематикам, они соответствуют стандартам iOS, Android и Windows. Есть возможность перекрасить иконку в необходимый вам цвет, а также регулировать толщину ее линий.
8. Glyphish
Более 1600 иконок, разработанных в стиле Glyphish (версии 3, 4, 5, 6, 7, 8) и оптимально подходящих для любых iOS приложений. Пользователи могут скачать их в PNG (готовых к перемещению в Xcode), SVG, PDF, AI и PSD. 50 тестовых иконок доступны каждому желающему абсолютно бесплатно, а полный комплект изображений удастся приобрести за 99$. Иконки имеют широкие возможности для редактирования, полностью соответствуют официальным стандартам Apple и прекрасно отображаются на новейших дисплеях Retina.
9. Thenounproject
Администрация проекта обещает, что здесь вы найдете более миллиона оригинальных иконок, созданных дизайнерами со всего мира. Используя бесплатный аккаунт, вы будете вынуждены платить комиссию разработчику скачанной вами иконки. Платный аккаунт дает возможность использовать всю базу сайта за 9.99$ в месяц неограниченно без дополнительных расходов. Иконки доступны в форматах PNG и SVG, они подходят для целого ряда приложений от Apple, Google, Adobe, Microsoft, есть широкий выбор цветовых настроек.
10. Iconmonstr
В базе сервиса размещено свыше 4200 бесплатных иконок, рассортированных по 296 коллекциям. Пользователям доступны иконки в различных стилях: с жирными или тонкими линиями, пустыми или заполненными окружностями и рядом других дизайнерских вариаций. На сайте представлены различные форматы изображений, включая SVG, PNG, PSD и EPS, все они имеют небольшой вес, оптимально подходят для веб-сайтов и мобильных приложений. А встроенный генератор поможет вам с легкостью редактировать размеры, цвет и фон каждой иконки.
11. Futuramo
Здесь вы получите доступ к более чем 3000 векторных иконок, разработанных в 16 различных стилях. Каждый объект можно скачать в том или ином формате, включая PNG, SVG, SVG Icon Sheets для AI, SVG Sprites и Icon Webfonts. Все иконки идеально соответствуют 16-пиксельной сеточной системе, есть множество функций для изменения их расцветки, толщины линий и степени закругления углов. Также вы можете выбрать наиболее подходящую рамку из 24 доступных для каждого изображения.
Итак, мы рассмотрели наиболее популярные из бесплатных иконочных сервисов, теперь пора перейти к обзору их платных аналогов.
Обзор сервисов с платными иконками
В данном разделе мы представляем вам несколько сайтов, на которых вы сможете найти более качественные иконки, скачать их за определенную плату и свободно использовать для своих коммерческих проектов.
1. Creativemarket
Пользователям предлагается свыше 58 000 иконок в форматах SVG, PNG, JPG, PDF, PSD, EPS и AI, оптимально подходящих для , инфографики и логотипов. На сайте можно найти иконки в различных стилях, (векторные, плоские, нарисованные от руки и т.д.) на те или иные тематики – от технологий до образования. Имеется удобная система поиска по ключевым словам, формату, цене и другим параметрам (самые свежие или популярные иконки и т.д.).
2. Iconsmind
На сайте размещено 2080 уникальных иконок, распределенных по 53 тематическим категориям в целом ряде форматов: SVG, EPS, AI, PSD, CSH, PNG и т.д. Объекты обладают высочайшим качеством, версия для iOS разработана с применением 30-пиксельной сеточной системы, а для Android – с 24-пиксельной. Полный доступ к базе со всеми возможными форматами обойдется в 79$, а за 59$ вы сможете скачивать иконки в EPS и AI. Есть широкие возможности для редактирования объектов, а лицензия IM позволяет без ограничений применять их в коммерческих целях.
3. Graphicriver
Посетителям этого онлайн супермаркета графики предлагается 17 500 иконок по цене от 2$ до 75$ за пак определенного объема. Например, за 75 долларов удастся приобрести комплект с 6150 объектами в 38 категориях. Вы сможете искать необходимые иконки по ряду критериев: тематике, цене, ключевым словам, рейтингу, новизне, количеству продаж и т.д. Каждый пак снабжен подробным описанием, превью иконок и перечнем доступных форматов (PSD, PNG, EPS, AI и т.д.), также можно выбрать тип лицензии.
4. Smashicons
На страницах сервиса доступно свыше 122 тысяч платных и бесплатных иконок, ежемесячно пополняемых новыми наименованиями. Вы легко сможете найти интересующий вас пак с иконками определенного стиля или тематики и скачать его за 19$ или же отдельную иконку всего за 1$. Выбрав платную подписку (за 50$/год или 149$ навсегда), вы получите полный доступ к возможностям сайта, включая все существующие форматы (JAR, SVG, AI, Sketch).
5. Pixellove
5000 высококачественных векторных иконок, идеально подходящих для различных iOS приложений. Объекты предлагаются в различных форматах: PDF, PNG, EOT, TTF, WOFF, а также AI, PSD и SKETCH (последние три, вместе с расширенной лицензией, доступны только для пакета iOS Infinity за 79$). Стандартный пакет, включающий все размещенные иконки, обойдется вам в 59$. Также есть возможность оплатить демо-доступ (1058 иконок) за 19 долларов.
Cегодня мы рассказали о самых популярных сайтах, предлагающих скачать бесплатно или за определенную плату. Надеемся, что данная информация поможет вам с легкостью найти оптимальную заготовку для своего будущего логотипа. Также напоминаем о широких возможностях , где вы сможете легко и быстро создать уникальный и подходящий для вашего бизнеса логотип, а затем получить его со всеми правами всего за $9.99.