Редизайн иконок файлов для всей линейки продуктов Adobe — Дизайн на vc.ru
Сайт Sketchapp перевёл описание кейса от дизайнера Adobe Design Brand Энни Чен.
4418 просмотров
В команде Adobe Design Brand мы создаём брендинг для всех наших настольных, мобильных и веб-продуктов. Фирменный элемент может быть любым: от двубуквенного логотипа до заставки и иконок в интерфейсе самого продукта.
Часто незаметный, но весьма наглядный элемент — иконка типа файла. Тип файла — это имя, заданное конкретному виду файла, который может создавать приложение, например, DOC для файла Word. Иконка типа файла — это значок, присвоенный типу и отображающийся на экране при сохранении или открытии.
С выходом новейшей версии Creative Cloud этой осенью пользователи увидят обновлённые иконки типа файла. В этом материале я углублюсь в размышления и процесс, связанный с нашим последним редизайном системы иконок типа файла Adobe, и расскажу о проблемах, с которыми мы сталкиваемся в процессе развития системы брендов в огромном семействе продуктов.
Определение проблемы
Многие клиенты могут не понимать, что Adobe имеет более 100 продуктов и сервисов в трёх облаках: Creative Cloud, Document Cloud и Experience Cloud
Это значит, что одно небольшое изменение в системе дизайна может создать сотни изменений по всем направлениям.
Когда дело доходит до иконок типа файла, пользователи часто рассматривают только основные типы файлов приложения, например:
- PSD для Photoshop;
- AI для Illustrator;
- INDD для InDesign.
Однако большинство наших продуктов могут импортировать и экспортировать различные типы дополнительных файлов (например, только в реестре Photoshop отображаются более 120 различных иконок типов файлов).
Чтобы оптимизировать требования различных операционных систем, наши иконки типов файлов должны быть вручную попиксельно подогнаны под десять различных размеров, а затем выпущены как набор растрированных PNG-файлов, которые упаковываются в ICNS (macOS) и ICO (Windows) файлы.
Когда мы учитываем количество размеров и форматов для каждой иконки типа файла, мы рассматриваем более 7000 ресурсов для изменения и управления с каждым циклом релиза.
То, с какой скоростью росла продуктовая линейка Creative Cloud в последние четыре года, значит, что объём усилий, необходимых для создания и поддержки этих иконок типов файлов, в существующем рабочем потоке больше не масштабируется.
Шаг первый: аудит и исследование
Прежде чем мы смогли начать редизайн системы, нам пришлось исследовать, что мы сейчас используем в наших продуктах. Мы обратились к команде каждого продукта, чтобы они помогли нам провести аудит всех их иконок типа файла.
Отсутствие системности было повсюду, и оно, вероятно, стало результатом двух факторов:
- Разные команды владеют семейством продуктов и больше не согласовывают дизайн.
- При появлении в онлайне новых продуктов и типов файлов отдельные иконки создаются как одноразовые.
С информацией, собранной в ходе нашего аудита, мы создали приблизительное представление о существующей архитектуре типа файла.
Во-первых, мы организовали иконки типа файла по семейству продуктов и перекрестно привязали их, чтобы посмотреть, какие дополнительные типы файлов были разделены между несколькими приложениями. Так мы могли устранить повторяющиеся иконки. Сделав это, мы смогли сократить количество дополнительных типов файлов до 65%.
Фрагмент нашей старой архитектуры типа файла, упорядоченной по семействам продуктов
Затем мы классифицировали типы файлов по функциям, таким как «изображение», «аудио», «код» и «3D». Обычно иконка типа файла содержит метафору, которая говорит о её основной функциональности (например, иконка файла HTML будет использовать метафору скобок </>, чтобы сообщить, что её функциональность связана с кодом или кодировкой).
Фрагмент нашей старой архитектуры типа файлов, упорядоченной по функциональности
Мы заметили, что некоторые типы файлов использовали несколько версий одной и той же метафоры, в то время как другие имели индивидуальные метафоры, которые можно было заменить более общим значком.
Мы начали создавать широкие группы типов файлов, чтобы назначить единую метафору для всей семьи. При этом нам удалось сократить число метафор типа файла в нашей библиотеке более чем наполовину.
Некоторые старые метафоры дополнительных типов файлов
Шаг второй: эскиз и дизайн
Получив полное представление о старой системе, мы начали устанавливать основные принципы организации для новой:
- Только основные типы файлов получат ассоциацию цветов логотипа продукта. Например, PSD будет синим и AI будет оранжевым.
- Создаём нейтральную палитру для дополнительных типов файлов, которые поддерживаются несколькими приложениями. Например, Photoshop и Illustrator будут использовать одну и ту же иконку типа файла PNG, вместо того, чтобы каждый из них имел свою собственную уникальную версию иконки по ассоциации с цветами бренда.
- Создаем основную библиотеку метафор типов файлов, чтобы иконки были согласованными и не пришлось настраивать ресурсы для отдельных случаев.
Разбивка компонентов старой иконки типа файла
Мы начали делать эскизы с учётом новой структуры.
Ранние эскизы процесса
Одним из основных факторов, лежащих в основе редизайна, было упрощение и удаление как можно большего количества элементов на иконке типа файла без потери её смысла. Мы опустили тег и переместили тип файла в нижнюю часть иконки. Мы также убрали загиб страницы, чтобы сгладить дизайн и создать более современный визуальный язык.
Эволюция иконки типа файла Adobe
Еще одним важным фактором было соответствие по спектру новому языку дизайна интерфейса Adobe, который в настоящее время распространяется во всех наших продуктах. К тому же мы закруглили углы наших иконок типа файла и начали создавать библиотеку, которая либо использовала существующие метафоры из базы данных Spectrum, либо создавала новые, которые соответствовали их стилю иллюстрации.
База данных иконок Spectrum от Adobe
Наконец, мы добавили яркую цветовую схему в иконку типа файла, чтобы связать существующий брендинг логотипов наших продуктов. Это изменение создало более сплочённую визуальную систему, а новые иконки стали отображаться лучше в тёмных интерфейсах, тогда как наши старые иконки исчезли на темном фоне.
Исследование цветового контраста в темном интерфейсе
Шаг третий: итерация и утверждение
После того, как мы определились с направлением проектирования, мы протестировали новые иконки типа файла в контексте. Во время первоначальной проверки мы исследовали все области, где иконки типа файла отображаются в разных операционных системах и в наших собственных продуктах. Мы также рассмотрели каждый контекст, в котором иконки отображались в разных размерах и разрешениях.
На экранах рабочего стола macOS и Windows нам приходилось учитывать иконки, отображаемые в разных представлениях (список и сетка) с различными коэффициентами масштаба (от минимального размера 16 пикселей до 512 пикселей).
Также была проблема со светлым и тёмным интерфейсами, например, в разделах «Недавние элементы» или «Поиск в Spotlight» на рабочем столе Mac. Затем мы рассмотрели, в каких из наших собственных продуктов представлены наши же иконки типов файлов. Например, в панели «Активы», «Диалог медиа-браузера» и «Экран приветствия» при первом запуске приложения.
Как можно себе представить, мы быстро углублялись в неясные и забытые уголки нашей системы, где живут иконки типа файла. Тем не менее, это было ценное упражнение. Нам нужно было осознать масштаб задачи.
Фрагмент различных контекстов, в которых отображаются наши иконки типа файла
Последний шаг состоял в том, чтобы посмотреть иконки типа файла, добавленные в пользовательском интерфейсе наших веб- и мобильных сервисов, таких как Adobe Acrobat и Creative Cloud Libraries. Поскольку эти службы тоже были под контролем разных команд дизайнеров, нам приходилось координировать работу множества людей в соответствии с нашими планами по модернизации системы дизайна типов файлов.
Мы гордимся конечным результатом, потому что новый язык дизайна яснее и последовательнее. Это следующая ступень эволюции системы визуального бренда Adobe.
Новая система дизайна иконок типа файла Adobe
Шаг четвёртый: создание нового рабочего процесса
Мы создали новый рабочий процесс для производства, который использовал скриптовые функции в Illustrator для компиляции и экспорта PNG-файлов одним нажатием кнопки. Новый шаблон сэкономил нам десятки часов мучительно медленной ручной работы.
Ещё нам нужен был лучший способ компиляции этих растрированных PNG-файлов в ICNS (macOS) и ICO (Windows). Раньше мы использовали плагин IconBuilder от IconFactory с нашими шаблонами Fireworks.
Однако при новом рабочем процессе нам требовалось более гибкое решение, которое отвечало бы нашим потребностям: в первую очередь способность перетаскивать любой набор PNG-файлов и наличие приложения автоматически сохраняющего файлы в форматах ICO и ICNS в правильных размерах.
После поиска стороннего компилятора мы решили, что лучше работать с нашими инженерами, чтобы создать внутреннее приложение, настроенное под наши нужды.
Они создали удивительный инструмент, который мы с любовью называем Captain Icon — компилятор, который мы использовали для группирования всех наших новых иконок типа файла. Хотя Captain Icon — по-прежнему программа на стадии внутреннего бета-тестирования, наши инженеры надеются в ближайшем будущем поделиться им в GitHub, чтобы он стал доступен для нашего сообщества разработчиков.
Внутренний ICO и ICNS компилятор Adobe
Шаг пятый: внедрение изменений
Мы всё ещё находимся на этом этапе и, вероятно, задержимся на нём надолго. Каждый раз, когда мы выпускаем новую версию Creative Cloud, мы привлекаем менеджеров продуктов и инженеров из многих команд, следя за тем, чтобы дизайн был согласован повсюду.
Внедрение изменений — это чаще всего утомительный процесс общения с командами по электронной почте (сотни писем), установка нескольких версий тестовых сборок для проверки ресурсов, ведение журнала и устранение неизбежных багов, управление несколькими дедлайнами релиза.
Наши продукты также построены на базе разных кодов, и это значит, что команды могут реализовывать одни и те же ресурсы по-разному и находить уникальные для каждой платформы проблемы. Обеспечение качества и соблюдение руководящих принципов бренда, вероятно, является одной из наименее интересных задач для нашей команды, но это важная часть поддержания развитой системы дизайна.
Новые иконки типа файла в операционной системе
Небольшие изменения могут создать большие отличия
В нашей команде мы часто повторяем метафору дерева Бонсай, чтобы описать нашу работу.
Разработка системы дизайна бренда, который содержит сотни продуктов, на этом пути опирается на миллион небольших поэтапных изменений. Мы обрезаем ветку тут и там и направляем рост дерева в желаемом направлении.
Хотя в деталях легко заблудиться, всё, что мы узнаём в процессе, переносит нас на следующую итерацию, а затем на следующую.
Создаем иконку сайта в строке URL (favicon.ico), WordPress
Чем, блин, отличается моя статья от сотни других, написанных на эту тему? Двумя моментами – я предлагаю для конвертации в ICO-формат использовать плагин для фотошопа и я напишу, как прикрутить иконку к WordPress.
Итак (мое любимое слово, хехе 🙂 ). Иконка сама по себе незначительный элемент сайта. Но, задумайтесь, Вы часто обращаете на нее внимание? Например, она показывается в закладках браузера, в строке браузера – хочешь, не хочешь, но обратишь. Больше того! Если иконка смотрится красиво, она запоминается (а на таком маленьком квадратике пикселей не каждый намалюет шедевр). Сайт начинает ассоциироваться с иконкой и так далее. Например, у фриланс.ру я считаю эту иконку гениальной (как и логотип). Просто, со вкусом и запоминается. Короче, лучше ее сделать, чем не сделать.
Я предлагаю рисовать иконку в фотошопе, там можно нарисовать куда больше, чем в паинте 😉
Качаем плагин для возможности сохранения изображения в формате ICO.
Там надо нажать на Free download: Windows (вот прямая ссылка), а на новой странице – нажать кнопку Download.
Скачали, кладем его в папку Plug-Ins в каталоге Фотошопа.
Запускаем фотошоп и рисуем иконку. 😉 Размер «холста» должен быть 16×16 пикселей (это стандартный размер иконки, другие не рекомендуются). Что рисовать – дело Ваше. Я вот нарисовал на красном градиенте букву D. Наверняка, таких иконок по всему миру – сотни тысяч. Но мне плевать, мне нравится 😀 😆
Дальше понятное дело – File -> Save As, выбираем формат ICO и сохраняем.
Заливаем ее в какой-нибудь каталог сайта, например, через FTP.
Об установке иконки на WordPress. Для этого нужно зайти в каталог Вашей текуще темы и отредактировать файл header.php. Нужно добавить в блоге <head></head> следующее:
<link rel="shortcut icon" href="/favicon.ico" /> <link href="/favicon.ico" rel="icon" type="image/x-icon" />
Такая чудо-конструкция позволит браузеру понять, что нужно установить иконку.
Соответственно /favicon.ico нужно заменить на адрес и имя иконки от корня сайта (как обычное изображение).
Девид Блейн, почему моя иконка не показывается? Покажи мою иконку, Девид Блейн!
Иконка – дело тонкое. Чтобы она начала показываться в FireFox, нужно удалить весь кеш (Инструменты -> Удалить личные данные), вырубить FireFox, зайти снова и открыть сайт. Нашел в сети совет, что в Internet Explorer нужно вообще добавить сайт в избранное 😯 , иконка появится только после этого (даже не думайте спрашивать меня – почему). Ну и еще можно удалить Кеш, нажав Ctrl + F5. У меня эта тварь пока что не нашла иконку 🙁
Да, и вообще, расстраивайтесь, о други – не сразу иконка будет заметна в браузерах пользователей. Опять же по причине кеша.
Так-то так. Делайте иконки и заваевывайте популярность в сердцах и умах 😉
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Как сохранить файл .ICO в Photoshop?
Последнее обновление: 22 ноября 2022 г.
, 16:54
Если вы хотите сохранить файл .ico в Photoshop, вам нужно знать несколько вещей. Во-первых, файлы ICO в настоящее время недоступны в форматах файлов, существующих в Photoshop. Если вы планируете сохранить изображение или дизайн в виде файла .ico, потребуется подключаемый модуль.
Во-вторых, файлы ICO поддерживаются как в Windows, так и в Mac, поэтому не забывайте выбирать правильную операционную систему при загрузке подключаемого модуля файла .ico. Наконец, файлы ICO поддерживаются только в 8-битном и 32-битном цветовом режиме.
Если у вас есть какая-либо версия Photoshop и вы используете Windows, вы можете сохранить файлы .ico, выполнив следующие действия.
Сначала перейдите в папку «Загрузки» или в расположение файла, в котором вы сохранили загруженный подключаемый модуль файла .ico.
Откройте заархивированный файл, выберите файл плагина формата ICO, щелкните его правой кнопкой мыши, затем выберите «Копировать».
Затем перейдите в папку с приложением Adobe Photoshop, выбрав «Этот компьютер» > «Program Files» > «Adobe».
Затем выберите папку Adobe Photoshop.
В папке Adobe Photoshop перейдите к строке поиска в правом верхнем углу и введите «формат файла», затем щелкните стрелку поиска. В результатах поиска выберите и откройте папку «Форматы файлов».
Оттуда вы можете увидеть существующие плагины форматов файлов в Photoshop. Щелкните правой кнопкой мыши пустое место в папке и выберите «Вставить».
Вы можете столкнуться с всплывающим окном с разрешением администратора, если это так, просто нажмите «Продолжить».
Теперь вы можете видеть, что формат ICO уже есть в доступных форматах файлов в Photoshop.
Затем перейдите в Photoshop, чтобы сохранить дизайн или изображение в виде файла .ico. В верхнем меню нажмите «Изображение» и выберите размер изображения.
Как видите, исходные размеры изображения составляют 480×480 пикселей, что не соответствует требованиям к размеру файлов ICO.
ПРИМЕЧАНИЕ: Размер может быть любым от 16×16 пикселей до 256×256 пикселей.
Измените размеры изображения с 480×480 пикселей на 256×256 пикселей, затем нажмите «ОК».
Теперь вы можете видеть, что размер изображения стал меньше.
Чтобы сохранить изображение в виде файла .ico, нажмите «Файл» в верхнем меню, затем выберите «Сохранить как…».
ПРИМЕЧАНИЕ. Вы также можете выбрать опцию «Сохранить копию…» в зависимости от ваших предпочтений.
Появится окно, в котором вы можете отредактировать имя файла изображения, а также выбрать расположение папки для сохраненных файлов и предпочитаемый тип файла. Для предпочтительного типа файла установите флажок рядом с «Сохранить как тип:».
Выберите формат файла .ico в раскрывающемся меню.
Убедитесь, что выбранный формат файла уже отражен, затем нажмите «Сохранить».
При сохранении появится всплывающее окно о формате ICO. Выберите «Стандартный ICO», затем нажмите «ОК».
Проверьте расположение папки, в которой вы сохранили изображение, для подтверждения. Найдите имя файла изображения. Здесь вы можете видеть, что существуют два файла с одинаковыми именами. Файл PNG — это исходный тип файла изображения, а файл ICO — это файл, сохраненный ранее в Photoshop.
СОВЕТ ПРОФЕССИОНАЛА: Если вы пытаетесь сохранить файл .ICO в Photoshop, вы можете потерять некоторые данные изображения в процессе. Обязательно сделайте резервную копию исходного изображения перед сохранением в виде файла .ICO.
После того, как вы сохранили файл ICO, вы можете использовать его в качестве значка для ярлыка на рабочем столе. Если вы хотите использовать файл ICO в качестве значка для ярлыка на рабочем столе, щелкните правой кнопкой мыши ярлык и выберите «Свойства».
На вкладке «Ярлык» нажмите кнопку «Изменить значок».
Найдите файл ICO.
Выбрав его, нажмите кнопку «Открыть».
После отображения выбранного файла выберите «ОК».
Проверьте правильность целевого ярлыка, затем выберите «Применить».
Теперь вы можете видеть, что значок был применен к папке быстрого доступа!
В заключение, если вы хотите сохранить файл .ico в Photoshop, убедитесь, что на вашем компьютере с Windows или Mac установлен подключаемый модуль. Убедитесь, что ваша глубина цвета находится в 8-битном или 32-битном цветовом режиме и что размеры вашего изображения находятся в диапазоне 16 × 16 пикселей и 256 × 256 пикселей. Наконец, перейдите в «Файл»> «Сохранить как», выберите формат ICO в качестве типа файла и нажмите «Сохранить».
Девопс женщина в торговле, технический исследователь и навигатор проблем.
Плагин формата файла ICO для Photoshop [GameBanana] [Инструменты для моддинга]
Реклама держит нас в сети. Без них нас бы не было. у нас нет
платный доступ или продажа модов — мы никогда не будем.
Но каждый месяц у нас большие счета
и размещение рекламы — наш единственный способ прикрыть их. Пожалуйста, разблокируйте нас. Спасибо от GameBanana
Плагин Photoshop .ico для Windows
Плагин дает Photoshop возможность напрямую открывать и сохранять файлы значков Windows (.ICO) и курсора (.CUR) (сохранение файлов .CUR поддерживается версией 2.1 или более поздней). Этот загружаемый файл содержит подключаемый модуль .ico для 32-разрядной и 64-разрядной версии Windows. Версия 2.1b для обоих. Все версии Photoshop для 32-разрядной версии Windows. Для файлов ICO, фавиконов, значков PNG (Vista/W7) и файлов CUR. Все версии Photoshop до CS6 для 64-разрядной версии. Установка:
Поместите плагин в папку C:\Program Files\Adobe\Photoshop\Plug-Ins\File Formats.
Если вы работаете в 64-разрядной системе Windows и запускаете 64-разрядную версию Photoshop CS4 или CS5, используйте 64-разрядную версию подключаемого модуля и поместите ее в папку подключаемых модулей, соответствующую 64-разрядной версии Photoshop.
(т. е. тот, что находится в «Program Files», а не в «Program Files (x86)»).Переместите подключаемый модуль в папку «Форматы файлов» внутри папки подключаемых модулей Photoshop:
Для Windows (32-разрядная версия), ICOFormat.8bi Для Windows (64-разрядная версия) ICOFormat64.8bi
Закройте и перезапустите Photoshop, если он уже запущен.
- Практичный, простой в загрузке и установке. И это работает так, как должно, для загрузки. Отличное дополнение к этому сайту. Спасибо за загрузку.
- Спасибо х 1
Мантра
ранее sargeantwelsh
URL для публикации:
- **Ноты:** — Круто красиво
Мантра
HL2DM Source Mapper с 2007 года
URL для публикации:
- > ** Автор: Kosai106** > Тоби Тейн является первоначальным создателем, поэтому напишите это вместо URL-адреса веб-сайта.
