Как пользоваться приложением color
Библиотеки цветов Pantone, предварительно загруженные в Adobe Photoshop, Illustrator, InDesign, Adobe Color и Adobe Capture, будут удалены из будущих обновлений программного обеспечения в марте 2022 г. Мы работаем над альтернативным решением по затронутым продуктам, чтобы свести к минимуму влияние этого изменения на пользователей. Следите за обновлениями.
Используя сервис Adobe Color, вы получаете доступ к мощным механизмам гармонизации для создания красивых цветовых тем, применяемых в продуктах Adobe. Начните свое путешествие в мир цветов, изучая темы из сообщества Color. Вдохновляйтесь работами других авторов творческих проектов в курируемых галереях трендов Behance и Adobe Stock. Импортируйте фотографии и изображения для создания целостных цветовых палитр из ваших работ. Сохраненные цветовые темы автоматически синхронизируются с Creative Cloud и сразу становятся доступными на панели библиотеки вашего настольного ПК и в мобильных приложениях. Используйте цветовые инструменты на настольном ПК, мобильном устройстве или установите Adobe Capture на устройство под управлением Android или iOS.
Для создания цветовой темы выполните следующие действия.
Откройте вкладку Создать.
Выберите в меню правило для цветовой гармонии.
Чтобы изменить цвета образца, переместите маркеры на цветовом колесе путем перетаскивания.
Выберите любую текущую библиотеку для сохранения цветовой темы или создайте новую библиотеку, используя раскрывающийся список.
Назовите цветовую тему и выберите для нее теги.
Чтобы поделиться своей цветовой темой с сообществом, переключите параметр Публиковать в Color.
Нажмите Сохранить. Цветовая тема будет доступна в выбранной вами библиотеке.
Цветовое колесо разработано, чтобы помочь с выбором цветовой палитры в интуитивно понятной манере использования стилей, основанной на правилах теории цветности. Вы также можете создать «пользовательскую» цветовую палитру из колеса без каких-либо правил, управляющих ею. Цветовые правила применяются в соответствии с основным выбранным цветом.
Основной цвет (центральный образец в цветовой теме) является основным цветом, который управляет положением других цветов образца в цветовой теме, определяемой применяемым вами правилом цветовой гармонии.
Установите основной цвет, введя шестизначный код, используя ползунки цветового режима или перетащив ползунок основного цвета на колесе. Обратите внимание, что при изменении основного цвета другие ползунки также перемещаются, чтобы сохранить свое положение на колесе в соответствии с выбранным вами цветовым правилом.
На вкладке «Создать» выберите «Извлечь» из изображения.
Перетащите файл или нажмите Выбрать файл, чтобы загрузить файл с вашего компьютера.
Выберите цветовое настроение, чтобы применить его к извлечению цвета. Цвета также можно выбирать вручную, перетаскивая маркеры на изображении.
Чтобы сохранить, выберите любую текущую библиотеку или создайте новую библиотеку, используя раскрывающийся список меню.
Назовите цветовую тему и выберите для нее теги.
Чтобы поделиться своей цветовой темой с сообществом, переключите параметр «Публиковать в Color».
Нажмите Сохранить. Цветовая тема будет доступна в выбранной вами библиотеке.
Под цветовым настроением понимается способ выбора оттенков при извлечении гармонизированной темы из изображения. Выбранное настроение определяет следующие две переменные:
- сколько цвета содержится в каждом оттенке (насыщенность);
- сколько черного цвета содержится в каждом оттенке (яркость).
Яркий имеет высокую насыщенность с низкой яркостью.
Темный имеет низкую насыщенность и низкую яркость.
Глубокий обладает высокой насыщенностью и низкой яркостью.
Приглушенный имеет низкую насыщенность и высокую яркость.
Общедоступными цветовыми темами можно поделиться с помощью URL-ссылки Adobe Color. Чтобы поделиться личной цветовой темой, перейдите в Creative Cloud Libraries в Интернете и выберите библиотеку темы. Пригласите в библиотеку человека, с которым вы хотите поделиться, в качестве соавтора. Вы также можете поделиться цветовыми темами из мобильного приложения Creative Cloud.
Свои цветовые темы можно редактировать на вкладке Мои темы. Выберите библиотеку, затем тему, а затем нажмите Изменить. Тема откроется в технологическом процессе создания, где вы можете отредактировать тему. После подтверждения нажмите кнопку Обновить и сохраните изменения.
Чтобы удалить любую из своих цветовых тем на вкладке Мои темы, разверните библиотеку и нажмите значок «Удалить» . Вы также можете удалить цветовую тему страницы отдельной темы, выбрав Удалить в меню.
Примечание. Удаление цветовой темы влияет только на копию темы в вашей библиотеке. Если вы также хотите отменить публикацию темы, см. раздел Как отменить публикацию цветовой темы?
Чтобы поделиться своей цветовой темой с сообществом, переключите параметр «Опубликовать в Color» перед сохранением темы в разделе «Создать технологический процесс».
Когда вы решаете опубликовать тему, создается вторая общедоступная копия темы, которая находится на главной странице в результатах поиска, а также индексируется поисковыми системами. Ее также можно скопировать и сохранить в коллекциях других пользователей. Если вы удалите тему из вашей библиотеки, она также должна быть удалена отдельно. Отмена публикации общедоступной темы не удаляет копию в вашей библиотеке.
Чтобы отменить публикацию общедоступной темы, перейдите на страницу «Обзор» и выберите Мои опубликованные темы в раскрывающемся меню фильтрации. Найдите тему, которую вы хотите отменить, и нажмите значок удаления, чтобы навсегда удалить общедоступную копию темы. Личная копия останется в вашей библиотеке.
Отмена публикации цветовой темы влияет только на общедоступную копию темы в сообществе Adobe Color. Если вы также хотите удалить тему из библиотеки, см. раздел Как удалить цветовую тему?.
Все ваши цветовые темы автоматически сохраняются в библиотеках. Вы можете выбрать другую библиотеку для сохранения в раскрывающемся меню Сохранить в в разделе «Создать технологический процесс» или создать новую библиотеку.
Приложение
Панель тем Color
CC Libraries
Руководство
В приложениях для настольного ПК ваши цветовые темы доступны на панели библиотеки. Вы также можете найти ваши темы наряду с другими исследованиями и инструментами для создания на панели тем Adobe Color. Чтобы узнать больше о панели тем Adobe Color в различных приложениях для настольного ПК, см. руководства в таблице выше.
Ваши цветовые темы доступны на цветовой панели ваших мобильных приложений на последней вкладке с именем текущей папки библиотеки. Вы можете выбрать другую библиотеку, щелкнув Изменить библиотеку.
В раскрывающемся списке Сохранить в из раздела Создать технологический процесс выберите другую библиотеку или создайте новую.
Цветовые темы можно загрузить как в формате ASE, так и в форматах LESS, CSS, SASS и XML.
Загрузите цветовые темы в формате ASE из галереи, коснувшись значка загрузки () на миниатюре темы. Вы можете загрузить их в различных форматах, перейдя на страницу темы и выбрав «Загрузить», а затем выбрав формат в раскрывающемся меню.
На панели «Цветовые образцы» в Illustrator используйте всплывающее меню, чтобы выбрать Открыть библиотеку цветовых образцов > Другая библиотека и перейти к выбранному файлу .ase. Нажав на отдельную строку «Цветовые образцы», вы добавите их на свою панель образцов и установите активный цвет. Для получения дополнительной информации о работе с цветовыми образцами в Illustrator нажмите здесь.
На панели «Цветовые образцы» в Photoshop откройте всплывающее меню и выберите Загрузить цветовые образцы. Найдите нужный файл .ase и выберите его. Нажав на отдельную строку «Цветовые образцы», вы зададите активный цвет. Для получения дополнительной информации о работе с цветовыми образцами в Photoshop нажмите здесь.
На панели «Цветовые образцы» в InDesign откройте всплывающее меню и выберите Загрузить цветовые образцы. Найдите нужный файл .ase и выберите его. Ваши цвета Pantone будут загружены в отдельную папку, названную по имени файла образца. Нажав на отдельную строку «Цветовые образцы», вы зададите активный цвет. Для получения дополнительной информации о работе с цветовыми образцами в InDesign нажмите здесь.
Выберите вкладку Мои темы и выберите библиотеку цветовых тем, которую вы хотите посмотреть.
Выберите вкладку Обзор и посмотрите рекомендованный канал тем сообщества, цветовые темы Behance и Adobe Stock или настройте свой поиск, выполнив поиск по заголовкам, тегам, цветам или шестнадцатеричным кодам.
У Adobe Color есть три источника цветовых тем: изображения Adobe Stock, проекты Behance и сообщество Adobe Color. Когда вы сохраняете тему из публичной темы, ее копия будет сохранена в вашей библиотеке. При сохранении темы из Adobe Stock или Behance в вашей библиотеке будет сохранена только копия цветовой темы без изображения.
Если вы также хотите лицензировать изображение Adobe Stock, нажмите значок Adobe Stock на странице темы, чтобы перейти на веб-сайт Adobe Stock.
Если вы хотите увидеть больше проектов автора Behance, который создал определенную тему, нажмите на нее, чтобы открыть страницу темы, а затем выберите его имя, чтобы посмотреть профиль Behance.
Вы можете оценить цветовые темы, которые вдохновляют вас, нажав на значок сердца .
Могут быть оценены только темы Adobe Color. Цветовые темы Behance и Adobe Stock не могут быть оценены.
Вы можете добавить цветовую тему в свою библиотеку, нажав на значок «Добавить в библиотеку» в разделе Галереи или выбрав Добавить в библиотеку на странице темы. Библиотеку, в которую вы сохраняете, можно заменить на одну библиотеку из раскрывающегося списка в верхней части страницы.
Галереи трендов — это собранные вручную коллекции от кураторов Behance и Adobe Stock. Эти галереи отражают текущие тенденции и вдохновляющий контент от лучших из этих сообществ.
Темный режим может помочь вам визуализировать цвета на темном фоне. Вы можете включить его, нажав на значок луны в верхней строке меню. Вы можете отключить темный режим, нажав на значок солнца в верхнем меню.
Цветовые темы на Adobe Color теперь можно мгновенно преобразовать в цвета Pantone®, которые используются в печати, на тканях и в производстве. Используйте эти цвета в приложениях Adobe при создании собственных проектов.
Откройте тему и прокрутите страницу вниз до раздела Цветовые совпадения Pantone. Откройте меню «Цветовые совпадения Pantone» и выберите книгу Pantone, которую хотите использовать. Ваши цветовые образцы будут автоматически преобразованы в цвета Pantone. Вы можете загрузить изображение с цветовой информацией или файл ASE, который можно использовать для добавления цветов Pantone на панель образцов в приложениях Adobe.
Ваши цветовые темы Pantone доступны на панели библиотек. В Photoshop дважды щелкните образец в своей теме, чтобы добавить его к активному цвету. В Illustrator и InDesign щелкните правой кнопкой мыши тему и выберите Добавить тему в образцы.
Для получения дополнительной информации о работе с цветовыми образцами в Illustrator нажмите здесь.
Для получения дополнительной информации о работе с цветовыми образцами в InDesign нажмите здесь.
Как художнику облегчить себе жизнь с помощью мобильных и настольных приложений? Где систематизировать референсы и готовить свои собственные, как подбирать цвета и позы, изучать анатомию и чем заменить Photoshop на планшете — всё тут.
Все цифровые художники слышали про Adobe Photoshop. Это гибкий и многоцелевой инструмент, который изначально разрабатывался для фотоманипуляций. Его создатели, братья Нолл, даже не предполагали, что кто-то будет в нём рисовать. Однако помимо «Фотошопа» есть и другие программы, созданные чисто для рисования. Многие из них доступны для мобильных устройств. Расскажем о парочке таких.
Растровый графический редактор Autodesk Sketchbook имитирует реальные материалы для рисования. У него есть более 190 настраиваемых кистей, маркеры, аэрограф, карандаш, шариковая ручка и так далее. Краски смешиваются и растушевываются, а инструменты реагируют на силу нажатия и угол поворота стилуса. Благодаря этому можно делать плавные переходы между цветами.
В Sketchbook используется палитра цветов популярных маркеров Copic. Однако пользователь всегда может настроить нужный оттенок самостоятельно с помощью цветового кругаИнтерфейс достаточно прост в освоении — всё в нем заточено в первую очередь для рисования. Мобильная версия не сильно отличается от десктопной. К планшету можно подключить стилус (Apple Pencil, Wacom Stylus и ещё четыре вида) или рисовать пальцем. Доступны жестовые команды, чтобы повернуть холст или масштабировать изображение.
Sketchbook также поддерживает слои. Их можно менять местами, скрывать, объединять и настраивать прозрачность, что облегчает работу над рисунком. Помимо традиционных растровых форматов, доступен импорт изображения в psd.
Держите видеообзор, который подробно ознакомит с возможностями программы и со списком поддерживаемых стилусов:
Цена: бесплатно.
Еще один растровый редактор. Доступен только владельцам iPad. ProCreate также имитирует поведение реальных материалов для рисунка в «цифре».
В приложении большая библиотека встроенных кистей — более 200 штук, все отсортированы по группам. Для настройки каждой доступно много параметров — движение штриха, гладкость, форма, настройка краёв и так далее. Конечно же, инструменты реагируют на силу нажатия, скорость движения и наклон стилуса. Подключить можно не только Apple Pencil, но и другие стилусы.
Во время настройки кисть всегда можно проверить на специальном поле справаВ Procreate встроена поддержка слоёв, а также доступно более 25 режимов наложения. Есть 11 фильтров, с их помощью имитируют иллюзию глубины, движения или добавляют спецэффекты. Рисунок автоматически сохраняется после каждого касания (в Sketchbook — после каждых десяти), чтобы внезапный сбой или севшая батарейка не уничтожили прогресс.
Чтобы было удобнее работать с приложением, не помешает запомнить таблицу жестовых командГотовую работу можно экспортировать в разных форматах, включая psd. Procreate также позволяет записывать таймлапсы в разрешении 4К. Затем их можно разместить в социальных сетях целиком или в короткой версии длительностью 30 секунд.
Возможность записать основные этапы работы пригодится для тех, кто ведет личный арт-блог JingsketchПриложением пользуются как обычные художники, так и арт-директоры AAA компаний, авторы комиксов, профессиональные иллюстраторы и концепт-художники.
В ProCreate можно работать где угодно — на диване, в дороге или в кафе. Нужно только не забыть планшет и стилус James JeanФункций и возможностей в ProCreate много, поэтому держите еще один обзор:
Цена: 899 рублей.
На волне успеха разработчики выпустили мобильную версию приложения под названием Procreate Pocket. Она мало отличается от старшего собрата — все основные функции сохранены, но так как экран мобильного телефона гораздо меньше, чем у планшета, рисовать будет не очень удобно. Его основная цель — быть всегда под рукой, чтобы можно было сделать быстрый набросок на ходу.
Цена: 449 рублей.
Поиск референсов — один из важнейших этапов подготовки к работе. Художник подбирает изображения, которые помогают ему создать нужное настроение, выбрать позу персонажа, сделать её выразительной и, конечно же, не нарушить анатомию. Порой эта задача превращается в целый квест и приходится много часов шерстить Pinterest и фотостоки, чтобы найти что-то подходящее. Вот несколько приложений, которые могут облегчить процесс поиска.
Когда нужно показать настроение или эмоцию, важно не только лицо — язык тела тоже играет большую роль. Несмотря на развитие устной речи, человеческий мозг все ещё «смотрит» на руки, чтобы лучше понимать мысли и чувства собеседника. На них обращают больше внимания, чем на многие другие части тела (кроме лица, конечно). У артистов театра даже существуют специальные упражнения, чтобы сделать движения рук более выразительными.
Так как картина — это застывшая история без слов, художникам нужно использовать все доступные средства для невербальной передачи эмоций. Профессионалы уделяют большое внимание проработке рук и закладывают смысл в каждый жест. В то же время, руки — это головная боль многих новичков. Их трудно рисовать из-за сложной геометрии кистей и пальцев.
Проблемы с рисованием рук — популярный мем среди художниковHandy Art Reference Tool от Belief Engine пытается решить эту проблему. В приложении можно выбрать один из множества предложенных жестов. Кисть и части предплечья можно покрутить в поисках подходящего ракурса.
Если готовые варианты не устраивают, то можно сделать свой собственный референс. В специальном режиме на модели появляются «кости». Двигая их, пользователь сгибает и разгибает фаланги пальцев и вращает кисть модели. Следует помнить, что приложение не учитывает ограничения, накладываемые анатомией. Поэтому пальцы можно легко «сломать» и вывернуть под неестественным углом.
Приложение позволяет создать референс руки в нужном положенииКроме рук, в Handy Art Reference Tool есть модели мужских и женских голов, обрубовки и череп. За отдельную плату предлагаются модели стоп и черепов животных.
Если вам нужно осветить модель, то в сцену можно добавить до трех источников освещения. Они перемещаются в любом направлении. Этого достаточно, чтобы установить стандартную трёхточечную схему освещения: основной, контровой и отраженный источники света.
Пользователь может регулировать яркость свечения и настраивать цвет для каждого источникаПриложение позволяет сохранить модель со всеми настройками, чтобы можно было вернуться к ней позже. Для удобства работы в графическом редакторе доступен экспорт снимка модели отдельным файлом.
Цена: от 199 рублей для Android до 5 долларов для Mac. Некоторые пакеты моделей покупаются отдельно.
Автор следующего приложения — Стивен Сильвер, британский художник и карикатурист, специалист по дизайну персонажей. В списке его клиентов — Disney, Nickelodeon, Warner Brosers. Он работал над популярными американскими мультсериалами для детей и взрослых, типа «Ким Пять-с-плюсом», «Дэнни-призрак» и «Клерки». Еще Сильвер учит, как создавать персонажей для мультиков.
В помощь новичкам он создал библиотеку референсов с уроками по рисованию, и продает её в виде мобильных приложений Posebooks by Silver. Есть версии с мужскими и женскими персонажами. Оба приложения содержат почти три с половиной тысячи фотографий натурщиков в разных костюмах и позах, соответствующих характеру персонажа, будь то пират, мафиози или домохозяйка. Приложения задумывались как практическое пособие для изучения поз, силуэтов, выражения эмоций.
Как лучше рисовать? Ответ прост: рисовать!
В Posebook доступны 6 мужских и 4 женских персонажей, снятых в разных позах и ракурсах. Каждый снимок сделан в большом разрешении, чтобы можно было потренироваться в изображении не только всей фигуры, но и её отдельных частей — лица или рук.
Кроме фигур в полный рост, в приложении есть портреты для изучения мимики и эмоций, силуэты и фотографии кистей рукПомимо фотографий, в Posebook есть еще 6 видеоуроков от Сильвера и 25 примеров того, как популярные художники решали задачи по его урокам.
Пример того, как Keith Rowsell попробовала творчески переосмыслить одну из фотографийТакже есть небольшое демо от Стивена:
Цена: 10 долларов за мужскую или женскую версию.
Задача художника — зацепить внимание зрителя. Если персонаж нарисован в динамичной позе и под интересным ракурсом, картинка сразу цепляет. Конечно, легче сказать «Рисуй это», чем сделать: как понять, насколько изогнётся тело в прыжке, будет ли видна рука за корпусом и что делать со второй ногой? А если на позу посмотреть снизу или сверху? А ведь ещё нужно помнить о перспективе!
Решить эту проблему можно с помощью ArtPose. Приложение позволяет выбрать позу 3D-персонажа и осмотреть её со всех сторон. Вы можете настраивать 3D-модель одного или двух людей путем вращения по опорным точкам, которые расположены в подвижных частях тела. Всего таких точек двадцать на модель.
Ограничители движения предусмотрены только для локтей и коленей. Остальные суставы легко вывернуть под неестественным угломДля экономии времени доступны предустановленные позы, которые можно отредактировать под собственные нужды. Для самого манекена настроек не так уж много — размер мышечной массы и несколько причесок. После всех манипуляций можно проверить, насколько хорошо читается силуэт.
В режиме экорше на модели показаны мышцы — пригодится в изучении анатомииПерсонажа также можно осветить. Доступно два источника освещения разного цвета, их расположение можно менять. Подробнее о возможностях программы.
Цена: от 259 рублей.
P.S. На PC можно сделать аналогичные вещи с помощью программы Daz3D.
Руки и ноги моделей в большинстве приложений типа ArtPose можно выкручивать под невообразимыми углами, поэтому установить реалистичную позу бывает непросто. Создатель Skelly: Poseable Anatomy Model, Станислав Прокопенко aka Proko, постарался учесть возможности человеческих суставов.
В приложении есть две модели для практики: самого Skelly или его упрощенного братца — Robo SkellyПро это приложение у нас есть отдельная статья. Вкратце — скелет можно использовать для постановки поз и изучения анатомии, а также освещать с разных сторон.
Цена: 7 долларов.
Когда на рабочем месте всё разложено по своим местам, то и работается намного легче. Приложение PureRef помогает навести порядок в визуальной библиотеке и удобно разложить нужные референсы.
Сортировать рефы просто: просто перетаскиваем нужные изображения из папки с неразобранными картинками или прямо из окна браузера в программу. Столь же просто выхватить кадр из фильма, который вы смотрите на компьютере. Достаточно сделать скриншот и вставить его в PureRef. Готовую библиотеку можно сохранить. Так кадр с крутой композицией или интересным цветовым решением не потеряется.
Сортировка и хранения референсов с PureRef идут проще — не нужно сохранять, вырезать, копировать и вставлять картинки. Достаточно их просто перетащитьМожно настраивать размеры элементов библиотеки: делать самые важные референсы крупнее, а вспомогательные — меньше. Их можно крутить, переворачивать, обрезать, изменять прозрачность и делать чёрно-белыми. При этом сохраненные изображения не теряют в качестве.
Каждое изображение можно приблизить и рассмотреть в деталяхЧтобы закрепить окно с программой поверх всех остальных, нужно воспользоваться сочетанием клавиш Ctrl+Shift+A. Интерфейс PureRef очень минималистичен — при его запуске вы увидите только серое окно. Чтобы эффективно пользоваться органайзером, желательно запомнить основные горячие клавиши. Полный список — здесь.
Цена: устанавливается самим пользователем. Можно и бесплатно.
Чтобы объекты на картине смотрелись гармонично и естественно, их нужно суметь вписать в окружение. Для этого художник должен многое держать в уме, например: цвет источника освещения (который, кстати, может быть не один) и окружения, то, как они взаимодействуют и влияют на цвет объекта.
Приложение Colour Constructor создано для того, чтобы помочь начинающим художникам и ускорить работу профи. Как оно работает?
Сперва пользователь формирует палитру и создает нужное количество геометрических фигур с базовыми цветами. Затем устанавливается цвет и интенсивность источников освещения, выбирает цвет окружения — будь то небо или густая листва в лесу.
Объектов можно добавлять гораздо больше, чем может уместиться на экранеВведя все параметры, мы увидим на примере примитива, как изменится цвет кожи в свете неоновых ламп, каким станет красное платье под синей лампой и так далее. У нас появится готовая тоновая разбивка, с которой можно брать цвета.
Если цвета на предметах будут слишком насыщенными и неестественными, то на них появится предупреждающий знакПример того, как можно использовать программу для создания иллюстрации от Ахмеда Альдури.
Цена: 7 долларов.
P.S. Приложения — это здорово, но опытный художник должен уметь подбирать цвета самостоятельно. Почитайте, как поместить объект в окружение и что влияет на цвет теней, света и рефлексов.
Артур Гимальдинов — художник, который работает в игровой индустрии 12 лет. За это время он сотрудничал с Blizzard, Paizo Publishing, Towards Mars и Acute Games. Артур поделился с подписчиками палитрой, в которой собраны цвета для изображения металлов, кожи и работы в ч/б. А мы делимся с вами!
Палитру можно использовать отдельно, или для покраски чб рисунка с помощью карт градиентов, как в этом видео.P.S. Важно помнить, что наличие палитры не гарантирует, что материалы будут выглядеть реалистично. Для этого нужно знать их свойства. В этой статье мы подробно рассказали, как рисовать металлы, древесину, камни, кристаллы и т.д.
Текст написал Богдан Дудниченко для Smirnov School. Мы — онлайн-школа, где готовят концепт-художников, левел-артистов и 3D-моделлеров для игр и анимации. Если придете к нам на курс, не забудьте спросить о скидке для читателей DTF.
ооо что-то действительно годное на ДеТеФё
ни слова про артстудию, медибэнг, пэинтсторм и визреф 👌🏿
Расскажи подробнее или хотя бы названия полные на английском
Простите, но мы не можем вместить все годные приложения в одну статью — она превратится в многотомный справочник. Попробовали сделать соблюсти баланс между тем, что нельзя не упомянуть и тем, что не все знают, поэтому, например, приложения для рисования включили в количестве двух штук.
Если тема покажется читателям интересной, мы просто выпустим продолжение.
А вам спасибо, что дополняете список для тех, кому это нужно прямо сейчас)
Ну просто делать список рисовальных штук из автодеска и прокриэйта, это как рассказать что на компе для рисования есть фотошоп. Про них и так все знают и про них пишут в каждой статье.
Ну и плюс в статье намешаны приложения исключительно для планшетов, исключительно для иос и исключительно для компа. Хотя название статьи никак не подводит к этим ограничениям.
Ну почему же, в заголовке говорится о том, что в подборку вошли «приложения и программы для художников». Программы — стандартное слово для быстрого обозначения компьютерного ПО, приложения — для мобильного. Конечно, это все софт по большому счету, но даже если считывать заголовок так, то все равно получится «Разный софт для художников».
Про приложения для рисования вообще можно отдельный материал выпускать, их очень много разных. Как раз поэтому мы перечислили два базовых варианта, для самых новичков, и переключились на менее известные штуки.
Ну а что касается про исключительно для iOS, то тут вы не правы. Posebook Сильвера, Sketchbook, Skelly, Handy art reference и др. все есть и для Adnroid, и для iOS. Если же какого-то приложения для Android/iOS нет, его что, исключать из подборки? Плохая идея, так как очень многие рисуют на айпаде.
Основной критерий подборки — не универсальные приложения на любой платформе, а приложения для художников, которые помогут в обучении/работе. Что, в общем-то, и отражается в заголовке/саммари. Дальше уже каждый смотрит, что ему подходит. У кого-то вообще Linux, что ж теперь, не включать настольные программы? ред.
Перевод полезной статьи от Buninux о создании цветовой палитры для веб-сайта или приложения. 8 советов по созданию качественных цветовых схем.
Как создать качественную цветовую палитру для UI komarov.designПривет VC, с вами Егор Комаров и сегодня я хочу поделиться интересным материалом и подходом о создании цветовой палитры.
Цвет повсюду. Работа с цветом — это неотъемлемая часть любого дизайн бренда и современный интерфейс стремится к его узнаваемости. Поэтому выбор и использование цветов для достижения бизнес-целей может оказаться тяжелой задачей для любого дизайнера.
Выбор, который делается влияет на внешний вид и на то, как пользователь думает о продукте и бизнесе. Практические советы по созданию качественной качественной цветовой схемы , которые помогут сделать правильный выбор:
Первичный цвет — это первое с чем стоит определиться.
Основной цвет чаще всего отображается на экранах и используется, чтобы указать пользователям на основные действия пользовательского интерфейса (UI). В идеале должно быть от 1 до 3 основных цветов, которые легко ассоциируются с конкретным брендом или продуктом.
Единственное правило здесь — это не использовать абсолютно белый или черный цвет.
Избегайте использование чисто черного ли белого цвета, особенно на больших площадях. Лучше всего использовать ограниченую палитру оттенков серого, которая состоит из нейтральных черных цветов с добавлением белых оттенков, например:
Последовательность — это ключ к успеху. Используйте один и тот же цвет для ссылок и кнопок. Таким образом это помогает пользователям замечать интерактивные элементы и беспрепятственно выполнять действия.
Использование семантических цветов, для выделения важной информации.Семантические цвета — это цвета, используемые для понимания пользователя информации об успехе, ошибке, предупреждении.
Семантические цвета используют:
Этот метод исходит из основного дизайна, но он идеально подходит для цифровых продуктов. Правило 60% + 30% + 10% работает, потому что оно приносит ощущение баланса и помогает глазу плавно перемещаться от одной области CTA (call to action) к другой, направляя пользователя через интерфейс.
60% — пространства предназначено для основного цвета / цвета области;30% — это вторичный / поддерживающий цвет;10% — акцент и сопровождающий цвет.
Можно использовать эти пропорции, чтобы найти правильный баланс при подборе и сочетании цветов, не превращая пользовательский интерфейс в красочную смесь.
Считается, что эти пропорции приятны человеческому глазу, потому что они позволяют легко воспринимать дизайн UI и общую композицию экрана.
Пример, для лучшего помимания правила «60–30–10»:
Также можно применять цвета в другом порядке, и это все равно будет работать.
Ключ к хорошему UX — понимание своей аудитории.
Цвет играет здесь важную роль, так как выбор влияет на чувства и эмоции пользователя при взаимодействии с продуктом.
Поэтому при выборе цвета важно задать следующие вопросы и ответить на них:
- Кто ваша целевая аудитория?
- Сколько им лет?
- Какая специализация у вашего продукта?
- Какие эмоции вы хотите, чтобы ваш бренд вызвал?
Эти вопросы могут и должны повлиять на выбор, поэтому не стоит терять их, выбирая палитру UI и обсуждая свой выбор с командой.
Использование фотографии, чтобы создать цветовую палитруОдин из очень классных трюков — использовать природу или архитектуру, чтобы вдохновиться и создать уникальную цветовую схему.
В интернете есть множество инструментов, которые помогут в создать цветовую палитру из изображения.
Примеры для использования:
Получайте удовольствие и черпайте вдохновение в вещах, которые вам нравятся.
Используйте контраст в зависимости от целей.
Если хочется сосредоточить внимание пользователя на конкретном действии, рекомендуется использовать высококонтрастные цвета, чтобы помочь ему найти фокус.
Такие цвета, как синий, зеленый и красный, быстро расскажут о контексте еще до того, как пользователь прочитает текст кнопок.
Контраст помогает пользователям различать различные текстовые и нетекстовые элементы. Более высокий контраст делает изображения удобными для просмотра, а уменьшение контрастности может придать изображениям более ровный оттенок.
Однако при проектировании UI высокий уровень контрастности также может быть вредным, если его применять неосторожно. Если текст слишком сильно контрастирует с фоном, то UI будет труднее просмотреть.
Вот почему всегда полезно провести проверку контрастности с обесцвечиванием, оценить успех контраста или просто протестировать свой дизайн на разных экранах.
Дизайнеру, важно заботиться о своих пользователях, особенно при работе с цветом, поскольку не все люди воспринимают его одинаково. Согласно последним исследованиям, около 285 миллионов человек во всем мире страдают нарушениями зрения: слепы или страдают другими нарушениями.
Несколько советов, которые следует учитывать при разработке цифровых продуктов:
- Не полагайтесь исключительно на цвета. Используйте вспомогательный текст и иконки для всех необходимых команд;
- Важно сделать так, чтобы элементы переднего плана выделялись на фоне, так же известно как, Неоморфизм не для всех;
- Противоречивые команды должны быть четко различимы, например (Синий против Красного);
- Всегда предоставляйте допустимый краткое описание для изображений;
- Внедрите навигацию с клавиатуры в продукт.
При использовании цветов в системе дизайна всегда указывайте точное название для каждого цвета. Каждый член вашей команды должен понимать именования без лишней суеты и легко найти к определенный цвет в продукте.
Избегайте использования градации цвета в названиях, таких как Голубой или Темно-синий. Вместо этого используйте функциональные слова, которые лучше всего описывают цвет в пользовательском интерфейсе, например, «Положительный», «Предупреждение», «Активный», «Основной синий».
Color Theory For Designers — узнайте больше о теории цвета и различных типах цветовых схем.
The Psychology Of Color — узнайте значение каждого цвета.
Подводя итог всему сказанному о цветах UI, можно прийти к трем основными принципами с Material design, которые можно использовать в своей работе
Цвет должен применяться во всем пользовательском интерфейсе последовательно и соответствовать бренду, который он представляет.
Цвет должен создавать различие между элементами, с достаточным контрастом между ними.
Цвета следует применять целенаправленно, чтобы передать смысл разными способами, например отношениями между элементами и степенями иерархии.
От себя бы я еще добавил пару советов при создании палитры.
1. Тестируйте сразу альтернативную версию темной темы. Вам необязательно ее создавать для всего проекта. Возьмите пару экранов, сделайте темную версию и убедитесь в том, что ваша палитра сбалансирована и отлично работает как в светлом так и в темном варианте.
2. Пытайтесь, по возможности, минимизировать количество оттенков. Чем меньше цветов - тем проще будет при разработке.
3. Используйте OPACITY для оттенков. Вам не обязательно на каждый оттенок создавать отдельный цвет. Если эту функцию может выполнить "прозрачность" - используйте ее. Кроме этого, если правильно использовать прозрачность, вам и вовсе не надо будет менять цвет в светлой и темной теме. Он и там и там, будет смотреться хорошо. Добавляйте альтернативные варианты цвета с OPACITY в UI Kit, для общего понимания и удобства.
4. Дайте цвету созреть. Иногда, при создании палитры я пару дней даю ей созреть. Я создаю и сохраняю макеты и пару дней подряд открываю их с периодичностью на телефоне. Делаю это в разных сценариях: сразу после пробуждения, на солнце, ночью перед сном. Подобные действия позволяют мне определить, не является ли цвет слишком разрежающим, ярким или наоборот блеклым. Когда, я убеждаюсь в том, что мне цвет нравится во всех сценариях, то продолжаю с ним работать.
Перевод на русский: Komarov.Design / Алина Остапенко
⚡ Если тебе понравился этот материал, ты можешь подписаться на мой Telegram / Instagram / Facebook / Medium/ Linkedin. Там ты найдешь больше интересных материалов о дизайне.
Автор выдаёт интересные материалы, плюсую.
Считаю, что прозрачность лучше всего работает с текстом в монохроме и в hover state - в противном случае элементы, которые идут внахлест, будут иметь совсем иной цвет в разных контекстах (цветная шапка с вторичной СТА и тот же элемент на нейтральном фоне). Поэтому лучше иметь плотную заливку на каждый цвет.
+++
А ещё не поддерживаю комментарий автора по поводу использования одного значения прозрачности в светлой и тёмной теме. «Он и там и там, будет смотреться хорошо» – я ни разу на практике не видел, чтобы такое случалось :) В тёмной теме цвет должен быть в принципе другого оттенка, менее «яркого» (речь идёт не о характеристике Brightness, а о визуальном восприятии), чтобы снизить нагрузку на зрение.
Опять же, кмк, лучше захардкодить плотную заливку, подобранную вручную.
Ну вот один и тот же цвет. Читается и там и там текст. Контраст по алгоритму, допустимый. АА.
То, что я на практике не встречал, это конечно же не значит, что такого не бывает :) Другое дело, что по моему мнению данный подход менее универсален. Речь идёт больше о "брендовых" цветах, условно – ярко синий цвет, ярко красный и прочие.
конечно, но в любом случае, в дизайн системах, чем меньше всего - тем лучше.
Оттенки всё равно же надо записывать, и неважно, используют ли они прозрачность или имеют плотную заливку. Для фронта это так и так +1 переменная. Мы как-то пытались на одном проекте уменьшить количество цветовых токенов, но так и не смогли прийти к идеальному решению.
Про opacity не совсем понятно. Почему это она предпочтительнее непосредственных оттенков?
Ну как, у тебя один цвет, белый например. Тебе надо три оттенка для него. Есть разница дополнительных отдельных три цвета менять или один белый? opacity к тому же менять не надо, если грамотно сделано, для темной и светлой темы. ред.
Не проще ли прописать просто несколько номеров палитры, а не один номер и несколько значений opacity? Так удобнее лично мне и людям.
Без визуализации не совсем полимаю о чем речь. Оpacity как угодно можно прописывать в гайде. Главное чтобы было понятно и удобно. Главное то, что на фронте, когда ты меняешь один цвет, остальные параметры opacity подтягиваются автоматически.
Вот на счёт опасити, пробовал сам на разных проектах. Дизайнерам действительно проще, а вот разрабы ворчали, у них мол и так переменные и им погоду не меняет сколько оттенков. К опасити лично отношусь приемлемо.
Я вот думал на тему юзать HSL для палетты. Тогда оттенки легко можно извлечь параметром L сохраняя одинаковые H и S.
Так мне кажется могут получиться общие кодированные параметры оттенков типо Primary-70, Primary-90 и Secondary-70.
(И да я согласен что hex читается легче чем hsl)
Не люблю цитаты с медиума но этот чувак наглядно осветил идею с примером стилевых переменных:
Не в коем случае не спор за лучший подход, интересен был твой опыт на тему HSL, буду иметь ввиду! Спасибо!
Спасибо за статью. Интересный материал
вот же вы ленивые ))) поправил ред.
Нет :) Как минимум в разделах 4 и 8 остались битые ссылки, ведущие на komarov.design.
Совет про "нечёрный" чёрный с точки зрения пользователя считаю экстремально вредным. С каждым годом OLED-экранов становится всё больше, а абсолютный чёрный в их случае означает выключенный экран и уменьшенное энергопотребление. Игра в "очень тёмный серый" вместо чёрного превращает "тёмные темы" в фикцию, потому что экран продолжает работать по всей площади.
хорошее наблюдение. Ну это только если мы говорим с точки зрения экономии аккумулятора да и потребление энергии думаю не сильно скажется если будет на сайте фон полностью черный и цвет мокрого асфальта, ну сколько это реально сэкономит? Есть исследования на эту тему, интересно.
Насчёт названий цветов в дизайн-системах. Замечал несколько разных подходов:
1. Прямое название - в честь оттенка (Black, White, etc)
2. Название по назначению (Comment, Stroke, etc)
3. Название для состояния (Warning, Danger, etc)
4. Градация по частоте (Primary, Secondary, etc)
5. Цвета в зависимости от палитры (Accent, Brand, etc)
Самое страшное – подходы перемешиваются между собой, что приводит к путанице как при использовании, так и при составлении цветовой палитры. Например, когда у тебя есть несколько цветов обводки, которые разнятся в зависимости от типа объекта, а так же некоторые из типов имеют разное по степени важности выделение, а могут ещё и состояния.
Последний апдейт фигмы позволяет вкладывать все уровни друг в друга, что немного снимает боль (ведь ещё есть группировка по теме: Dark, Light, etc), но принципиально проблема однозначного именования цветов не решена.
Когда смотришь чужие дизайн-системы, понимаешь, что подходы налеплены друг на друга в случайном порядке. Часть цветов названы оттенками, часть – состояниями, часть – в зависимости от палитры и так далее. Использовать это с удобством может только автор самой палитры :)
Скажу честно, я не часто пользуюсь программами для подбора цвета, больше ориентируюсь на свою интуицию и природные цветовые решения.
Но на днях нашла для себя одну прекрасную программу, в которой работать одно удовольствие. Причем она пригодится не только для составления цветов украшений, но и для интерьера дома и декора.
Хочу познакомить Вас с программой, которая поможет Вам без особых усилий увидеть сочетания цветов.
Программа называется Color Wheel. Переводится это как цветовой круг или цветовое колесо.
Как установить программу Color Wheel.
Для того чтобы начать пользоваться программой по подбору цвета, Вам не нужно нигде регистрироваться, не нужно скачивать файлы и устанавливать их.
Достаточно набрать в поисковой строке Color Wheel. Самая первая ссылка, которая будет Вам выдана – это именно та, которая нам нужна.
Программа работает онлайн.
Как пользоваться программой Color Wheel.
Покажу несколько основных положений по работе с программой Color Wheell.
Положение 1.
Когда Вы перейдете по ссылке, перед Вами откроется уже та самая программа, в которой можно работать.
Она выглядит вот так: по центра цветной круг со стрелочками, внизу пять секций с цветом (один из них основной).
Положение 2.
Слева от цветного круга располагается колонка, в которой Вы можете выбрать тип цветовой системы (последовательный, треугольный и т.д.).
Попробуйте повыбирать разные положения и Вы увидите как это работает.
Положение 3.
Цветной круг расположен ровно по центру, над третьим квадратом с цветом. По умолчанию именно средний квадрат – это основной цвет, к которому идут сочетания.
Но Вы при желании можете поменять и сделать основным, например, первый квадрат, второй или последний (любой из имеющихся).
Для этого просто необходимо нажать на тот иной квадратик (на галочку в нем) и он станет активным.
Мне привычней работать так, когда основной цвет по центру.
Положение 4.
Теперь непосредственно о работе с программой. Выбрали основной цвет (квадратик), выбрали цветовую систему, теперь комбинируем цвета.
На цветовом круге Вы видите лучи, которые отвечают за каждый из квадратов или их комбинацию.
Один из лучей длинней остальных, именно он отвечает за основной выбранный Вами цвет.
Положение 5.
Далее ничего сложного нет. Вы просто крутите большую стрелку по кругу и перед Вами появляется комбинация цветовых сочетаний.
Если Вы не можете найти нужный Вам цвет на круге, то можно использовать бегунки под квадратами.
Отрегулируйте цвет там и снова получите комбинацию цветов.
Положение 6.
Для того чтобы посмотреть основные оттенки основного цвета, выберите в колонке «Цветовая система» оттенки. На картинке ниже я подобрала оттенки горчично-желтого цвета.
Положение 7.
Если Вы, например, хотите посмотреть как будет сочетаться красный с желтым и синим, то сделать это легко.
Вы вручную настраиваете цвета, передвигая стрелками на круге и смотрите.
Возможно, один оттенков желтого или синего будет сочетаться с красным, а другой оттенок нет.
Положение 8.
Еще одна интересная вещь, которую предлагает программа. Внизу страницы Вы увидите строку «Создать из изображения».
Это, наверное, не поможет Вам перед изготовлением украшения, но после, для создания коллажей или цветовых подборок да.
Нажимаем, загружаем фотографию своей работы и получаем сочетание цветов именно по нашему украшению. Это интересно.
Покажу на своем украшении. Я намеренно взяла колье с многочисленными цветами.
Пожалуй, это основные моменты, которые необходимо знать при работ с программой Color Wheel.
Программа не сложная и очень удобная. Используйте разные методы для достижения идеального сочетания цвета. Программа Color Wheel – один из очень хороших методов.
С помощью программы Color Wheel мне удалось найти идеальное решение для моей одной из крайних работ – броши «Paradise».
А вот так выглядела цветовая подборка для украшения. Очень удобная программа, я думаю, что буду практиковать и дальнейшее ее использование.
Читайте также: