Forwarded from Оди
«Что за шрифт» для смартфонов
WhatTheFont Mobile App — приложение для распознавания шрифтов по фото от магазина MyFonts — уже давно было доступно на iOS, а недавно получило и версию для Андроида.
Приложение позволяет сфотографировать любую надпись и распознать, какие шрифты в ней используются.
iOS: https://itunes.apple.com/us/app/whatthefont/id304304134?mt=8
Android: https://play.google.com/store/apps/details?id=com.monotype.whatthefont
#awd_tool #awd_font
WhatTheFont Mobile App — приложение для распознавания шрифтов по фото от магазина MyFonts — уже давно было доступно на iOS, а недавно получило и версию для Андроида.
Приложение позволяет сфотографировать любую надпись и распознать, какие шрифты в ней используются.
iOS: https://itunes.apple.com/us/app/whatthefont/id304304134?mt=8
Android: https://play.google.com/store/apps/details?id=com.monotype.whatthefont
#awd_tool #awd_font
20 июня mail.ru презентовали новый лого и интерфейс почты. подробнее: ego.mail.ru
UPD: tjournal.ru/72568-pochta-mail-ru-pomenyala-logotip-vpervye-za-10-let-i-do-kuchi-obnovila-ves-servis
UPD: tjournal.ru/72568-pochta-mail-ru-pomenyala-logotip-vpervye-za-10-let-i-do-kuchi-obnovila-ves-servis
Команда Скетча теперь есть на Дрибле
dribbble.com/sketchapp
В принципе, Эмануэль был там с 2010 и его дрибл — такое. (мой ещё хуже)
dribbble.com/Emanuel
Гораздо любопытнее дрибл Тристана, иллюстратора Скетча, который делает клёвые геометричные плоские иллюстрации. Ты мог их видеть в Медиуме Скетча.
dribbble.com/Triskro_Studio
dribbble.com/sketchapp
В принципе, Эмануэль был там с 2010 и его дрибл — такое. (мой ещё хуже)
dribbble.com/Emanuel
Гораздо любопытнее дрибл Тристана, иллюстратора Скетча, который делает клёвые геометричные плоские иллюстрации. Ты мог их видеть в Медиуме Скетча.
dribbble.com/Triskro_Studio
Как организовать символы в скетч-проекте
Я довольно далеко отошёл от темы, с которой начинался канал: от практики работы в Скетче. Возвращаюсь к истокам.
Большинство дизайнеров пересаживается в Скетч из Фотошопа и Иллюстратора. Там действуют другие клавиши и концепции того, что такое макет и как с ним нужно работать. Макет в продуктах Адоби — это нечто единое и неделимое, как картина, которую ты пишешь как художник.
Дизайнеры применяют старые навыки в новых инструментах: создают сложное древо групп и при помощи них выстраивают структуру интерфейса. Ваяют макет как набросок, в котором нет деления на блоки. Получается эскиз в рамках одного артборда, едва ли использующий символы.
Скетч и Фигма позволяют применять другой подход: макет это не картина, а коллаж или пазл, который можно собирать из символов-компонентов. Это не хуже и не лучше, а просто другой стиль работы, который позволяет добиться жёсткого контроля над отступами и сеткой, но может сковывать буйство креатива. Мне он экономит время и позволяет легко поддерживать макеты в аккуратном виде.
В Скетче я для себя открыл свой способ организовывать символы. Он может показаться тебе странным, но я делюсь своим личным опытом, который работает для меня.
Я практически не использую группы Cmd + G, кроме ситуаций, когда группа нужна для контроля над масками. И точно никогда не переименовываю группы, потому что порядок в названиях я поддерживаю в символах. Если мне нужно, чтобы несколько объектов были связаны, скорее всего я символизирую их клавишей Cmd + Y. Символами могут становиться заголовки с отступами, блоки и даже целые формы.
Десятки слоёв в одном макете расфокусируют внимание и бесят. Их структуру постоянно приходится держать в голове. Мне легче сровнять её с землёй, разгруппировав все группы артборда: Shift + Cmd + G, а затем заново выделить нужные символы. Это даст ощущение контроля над происходящим.
Все символы ложатся в сетку. Раньше я использовал 8px, теперь перешёл на 4, поскольку 8 слишком крупная.
Преимущества компонентного подхода: внутри символа я могу центрировать слои горячими клавишами. Cmd + [ по горизонтали, Cmd + ] — по вертикали. Группы такого не позволяют. Каждый элемент состоит из нескольких простых слоёв и с ними значительно легче работать.
Изначально Скетч отправляет символы в страницу Symbols, где они теряются и превращаются в свалку. Но если в момент создания символа снять неприметную галочку Send to Symbols Page, символ будет создан на той же странице, на которой ты работаешь. Скетч выберет для него непредсказуемое место, поэтому нужно подвинуть его к тому макету, к которому он относится.
Мой любимый лайфхак: drag + Cmd +1
1. Когда символ создан, в него можно зайти — расположить область просмотра над артбордом символа. Чтобы сделать это, выдели его экземпляр и нажми Cmd + Enter.
2. Когда зашёл — схвати артборд мышью за левый верхний край и нажми Cmd + 1. Скетч перейдёт в самый общий масштаб, а артборд символа так и останется висеть на мышке. Событие перетаскивания от нажатия клавиши не прерывается.
3. Теперь можно дотащить его до того макета, на котором был создан символ. Удобно работать над макетом и видеть его символы перед глазами, прямо над ним. Их можно дублировать плагином Duplicator и таким образом быстро выращивать им модификации.
4. Когда редактируешь символ, всё-ещё можно вернуться к экземпляру, с которого вошёл в артборд. Клавиша Cmd + Esc.
Я многократно проделывал этот трюк в своём старом видео.
Если есть вопросы по этой теме, заходи в @sketchchat и спрашивай.
#идеология_символов #горячие_клавиши
—
#первые_шаги — рубрика для начинающих
Я довольно далеко отошёл от темы, с которой начинался канал: от практики работы в Скетче. Возвращаюсь к истокам.
Большинство дизайнеров пересаживается в Скетч из Фотошопа и Иллюстратора. Там действуют другие клавиши и концепции того, что такое макет и как с ним нужно работать. Макет в продуктах Адоби — это нечто единое и неделимое, как картина, которую ты пишешь как художник.
Дизайнеры применяют старые навыки в новых инструментах: создают сложное древо групп и при помощи них выстраивают структуру интерфейса. Ваяют макет как набросок, в котором нет деления на блоки. Получается эскиз в рамках одного артборда, едва ли использующий символы.
Скетч и Фигма позволяют применять другой подход: макет это не картина, а коллаж или пазл, который можно собирать из символов-компонентов. Это не хуже и не лучше, а просто другой стиль работы, который позволяет добиться жёсткого контроля над отступами и сеткой, но может сковывать буйство креатива. Мне он экономит время и позволяет легко поддерживать макеты в аккуратном виде.
В Скетче я для себя открыл свой способ организовывать символы. Он может показаться тебе странным, но я делюсь своим личным опытом, который работает для меня.
Я практически не использую группы Cmd + G, кроме ситуаций, когда группа нужна для контроля над масками. И точно никогда не переименовываю группы, потому что порядок в названиях я поддерживаю в символах. Если мне нужно, чтобы несколько объектов были связаны, скорее всего я символизирую их клавишей Cmd + Y. Символами могут становиться заголовки с отступами, блоки и даже целые формы.
Десятки слоёв в одном макете расфокусируют внимание и бесят. Их структуру постоянно приходится держать в голове. Мне легче сровнять её с землёй, разгруппировав все группы артборда: Shift + Cmd + G, а затем заново выделить нужные символы. Это даст ощущение контроля над происходящим.
Все символы ложатся в сетку. Раньше я использовал 8px, теперь перешёл на 4, поскольку 8 слишком крупная.
Преимущества компонентного подхода: внутри символа я могу центрировать слои горячими клавишами. Cmd + [ по горизонтали, Cmd + ] — по вертикали. Группы такого не позволяют. Каждый элемент состоит из нескольких простых слоёв и с ними значительно легче работать.
Изначально Скетч отправляет символы в страницу Symbols, где они теряются и превращаются в свалку. Но если в момент создания символа снять неприметную галочку Send to Symbols Page, символ будет создан на той же странице, на которой ты работаешь. Скетч выберет для него непредсказуемое место, поэтому нужно подвинуть его к тому макету, к которому он относится.
Мой любимый лайфхак: drag + Cmd +1
1. Когда символ создан, в него можно зайти — расположить область просмотра над артбордом символа. Чтобы сделать это, выдели его экземпляр и нажми Cmd + Enter.
2. Когда зашёл — схвати артборд мышью за левый верхний край и нажми Cmd + 1. Скетч перейдёт в самый общий масштаб, а артборд символа так и останется висеть на мышке. Событие перетаскивания от нажатия клавиши не прерывается.
3. Теперь можно дотащить его до того макета, на котором был создан символ. Удобно работать над макетом и видеть его символы перед глазами, прямо над ним. Их можно дублировать плагином Duplicator и таким образом быстро выращивать им модификации.
4. Когда редактируешь символ, всё-ещё можно вернуться к экземпляру, с которого вошёл в артборд. Клавиша Cmd + Esc.
Я многократно проделывал этот трюк в своём старом видео.
Если есть вопросы по этой теме, заходи в @sketchchat и спрашивай.
#идеология_символов #горячие_клавиши
—
#первые_шаги — рубрика для начинающих
Бонус-трек: Когда появляется определённая группа однотипных символов (например, иконки или поля ввода), их можно вынести на отдельную страницу, Shift + Cmd + N.
Страницы — удобный способ сортировать символы в рамках одного файла или библиотеки.
Важно: Артборды символов в списке слоёв можно перетаскивать в другие страницы, и связи не разорвутся. Вырезать артборды символов и вставлять как шейпы нежелательно, потому что будут возникать дубликаты и разрывы связей.
Страницы — удобный способ сортировать символы в рамках одного файла или библиотеки.
Важно: Артборды символов в списке слоёв можно перетаскивать в другие страницы, и связи не разорвутся. Вырезать артборды символов и вставлять как шейпы нежелательно, потому что будут возникать дубликаты и разрывы связей.
Канал @figmatips
Оставим холивары между фанатами Скетча и Фигмы. Хороший дизайнер держит нос по ветру и с любопытством относится к любому софту, который хоть как-то может облегчить нашу работу. Я воспринимаю преданность определённому инструменту как мешающий фактор в профессии дизайнера.
Кому-то важна синхронизация в облаке, кому-то кастомные горячие клавиши и плагины. Кто-то просто привык. Нужно пробовать всё и выбирать то, что лучше всего подходит. И если ты к 2018 не пробовал Фигму, ты рискуешь стать олдфагом. Ландшафт меняется на наших глазах и это происходит очень быстро.
Сегодня я хочу рассказать о канале дизайнера Антона Лапко, который пишет о Фигме. Стиль канала очень напоминает Скетч-дизайнер, потому что Антон — давний мой читатель. Антон тоже любит рассказывать о инструменте, топит за инфостиль, пользу, заголовки в постах, внятность и краткость. Получается хорошо.
t.me/figmatips
Я рассказываю о тех темах и каналах, которые считаю интересными для читателей. Пост не оплачен.
#каналы
Оставим холивары между фанатами Скетча и Фигмы. Хороший дизайнер держит нос по ветру и с любопытством относится к любому софту, который хоть как-то может облегчить нашу работу. Я воспринимаю преданность определённому инструменту как мешающий фактор в профессии дизайнера.
Кому-то важна синхронизация в облаке, кому-то кастомные горячие клавиши и плагины. Кто-то просто привык. Нужно пробовать всё и выбирать то, что лучше всего подходит. И если ты к 2018 не пробовал Фигму, ты рискуешь стать олдфагом. Ландшафт меняется на наших глазах и это происходит очень быстро.
Сегодня я хочу рассказать о канале дизайнера Антона Лапко, который пишет о Фигме. Стиль канала очень напоминает Скетч-дизайнер, потому что Антон — давний мой читатель. Антон тоже любит рассказывать о инструменте, топит за инфостиль, пользу, заголовки в постах, внятность и краткость. Получается хорошо.
t.me/figmatips
Я рассказываю о тех темах и каналах, которые считаю интересными для читателей. Пост не оплачен.
#каналы
Скетч + SVG для Андроида: ну его нафиг
Я задумал рассказать о том, как готовить SVG-графику для Андроида, но настройка автоматизации через сборщик пакетов оказалась неадекватно сложной и капризной, поэтому на данный момент я выгружаю иконки в PNG.
Оптимизировать дизайн-процесс нужно до того момента, пока на оптимизированное решение не тратится больше времени, чем на старое. Например, вместо кучи растровых картинок в PNG хочется отдавать разработчикам один вектор в SVG, чтобы он на всех устройствах смотрелся чётко и вкусно. Но если его дольше и сложнее делать, эта оптимизация только вредит.
Если ты делаешь сайт, почти любой SVG из Скетча ведёт себя адекватно. Но когда дело доходит до экспорта SVG из Скетча в Андроид-приложение, открываются врата в ад, потому что на старых версиях (Android 5, api v.22) иконка может потерять форму на непредсказуемую. Похоже, будто иконку разрывает. Это происходит из-за того, что в ней используются обводки, незамкнутые шейпы и маски. Иконка может терять цвет, заданный через маску или наоборот выглядеть как сплошной залитый цветом квадрат.
Стандарт SVG для Андроида не предполагает, что в файле могут использоваться маски и обводки (borders) и показывает правильно только Filled Shapes. Как назло, дизайнеры любят менять цвета иконок через маски, либо контролировать толщину линий через обводки.
Готовить контуры иконок для того, чтобы их можно было испольовать с масками — отдельная боль, в этом Иллюстратор далеко впереди. Но держать иконки в дизайн-системе гораздо удобнее в Скетче. Перетаскивать иконки из Иллюстратора в Скетч очень неэффективно. Поэтому, мы материмся, но рисуем иконки в Скетче.
Есть гики, которые экспортируют SVG из Скетча и через сборщик пакетов Gulp и специальный самописный скрипт модифицируют SVG так, чтобы его хавал Андроид. Это используют в Акронисе, но, к сожалению, пока договориться о публикации скрипта не удаётся из-за NDA. Спасибо @sergey_nikishkin за советы. Другой аналогичный скрипт подогнал Денис @d_egaluev. Я попробовал его настроить, но при всём большом желании, это пока оказалось мне не по силам.
Поэтому, я вернулся к старой и проверенной схеме: для нативной разработки андроид-разработчики получают PNG во всех желаемых размерах в Зеплине. Не гламурно, зато не надо париться по поводу несоответствия того, что видишь в Скетче и в боевом приложении. Иконки выгружаю отдельным экраном, так всем удобнее их искать.
Напишу, если появятся более удобные способы. Кстати, даже PNG желательно дополнительно ужимать через сервис Tiny PNG. Ну а для веба и вебвью-решений SVG вполне надёжен.
—
#SVG #автоматизация
#для_профи — рубрика для тех, кто хочет automate and chill
Я задумал рассказать о том, как готовить SVG-графику для Андроида, но настройка автоматизации через сборщик пакетов оказалась неадекватно сложной и капризной, поэтому на данный момент я выгружаю иконки в PNG.
Оптимизировать дизайн-процесс нужно до того момента, пока на оптимизированное решение не тратится больше времени, чем на старое. Например, вместо кучи растровых картинок в PNG хочется отдавать разработчикам один вектор в SVG, чтобы он на всех устройствах смотрелся чётко и вкусно. Но если его дольше и сложнее делать, эта оптимизация только вредит.
Если ты делаешь сайт, почти любой SVG из Скетча ведёт себя адекватно. Но когда дело доходит до экспорта SVG из Скетча в Андроид-приложение, открываются врата в ад, потому что на старых версиях (Android 5, api v.22) иконка может потерять форму на непредсказуемую. Похоже, будто иконку разрывает. Это происходит из-за того, что в ней используются обводки, незамкнутые шейпы и маски. Иконка может терять цвет, заданный через маску или наоборот выглядеть как сплошной залитый цветом квадрат.
Стандарт SVG для Андроида не предполагает, что в файле могут использоваться маски и обводки (borders) и показывает правильно только Filled Shapes. Как назло, дизайнеры любят менять цвета иконок через маски, либо контролировать толщину линий через обводки.
Готовить контуры иконок для того, чтобы их можно было испольовать с масками — отдельная боль, в этом Иллюстратор далеко впереди. Но держать иконки в дизайн-системе гораздо удобнее в Скетче. Перетаскивать иконки из Иллюстратора в Скетч очень неэффективно. Поэтому, мы материмся, но рисуем иконки в Скетче.
Есть гики, которые экспортируют SVG из Скетча и через сборщик пакетов Gulp и специальный самописный скрипт модифицируют SVG так, чтобы его хавал Андроид. Это используют в Акронисе, но, к сожалению, пока договориться о публикации скрипта не удаётся из-за NDA. Спасибо @sergey_nikishkin за советы. Другой аналогичный скрипт подогнал Денис @d_egaluev. Я попробовал его настроить, но при всём большом желании, это пока оказалось мне не по силам.
Поэтому, я вернулся к старой и проверенной схеме: для нативной разработки андроид-разработчики получают PNG во всех желаемых размерах в Зеплине. Не гламурно, зато не надо париться по поводу несоответствия того, что видишь в Скетче и в боевом приложении. Иконки выгружаю отдельным экраном, так всем удобнее их искать.
Напишу, если появятся более удобные способы. Кстати, даже PNG желательно дополнительно ужимать через сервис Tiny PNG. Ну а для веба и вебвью-решений SVG вполне надёжен.
—
#SVG #автоматизация
#для_профи — рубрика для тех, кто хочет automate and chill
Facebook Devices: я собрал векторные гаджеты в виде скетч-библиотеки
Внутри 53 устройства в символах.
Подключить: sketch.cloud/s/0pEVV
Когда делаешь дизайн мобильного приложения, логично демонстрировать его другим в рамке устройства — мокапе. Существует множество коллекций мокапов, как платных, так и бесплатных.
Одна из лучших бесплатных собрана дизайнерами Фейсбука на сайте facebook.design/devices. В ней можно найти множество популярных устройств во фронтальном ракурсе. Она крута тем, что все изображения в ней векторные и нарисованы в Скетче.
Я пошёл дальше и собрал большую часть этой коллекции в облачную скетч-библиотеку, которую можно подключить в пару кликов, либо скачать и использовать локально.
Всего в него вошли 53 устройства: все актуальные модели айфонов во всех доступных расцветках, моноблоки, ноутбуки и дисплеи Apple. Не вошли планшеты, Андроиды и часы. Их планирую добавить вторым этапом.
Все устройства обёрнуты в символы и их можно вставлять через Runner, если назначить клавишу Ctrl + Y на команду Insert.
Все экраны на устройствах имеют тот размер, в котором для них удобно проектировать. Например, для iPhone SE это 320 х 568. Чтобы заменить содержимое экрана мокапа, нужно вставить растровое изображение в оверрайд с названием:
🖼 Paste your design here
В случае с ретина-экранами желательно, чтобы вставляемые макеты были в двойном размере (@2x). Для iPhone SE это 640 x 1136.
Когда мокап вставлен в проект, при необходимости его можно отвязать от библиотеки горячей клавишей, назначенной на команду Detach From Symbol. Я назначил на неё Shift + Cmd + Y, по аналогии с Shift + Cmd + G (разгруппировка).
#мокапы #горячие_клавиши
—
#первые_шаги – рубрика для юных падаванов
Внутри 53 устройства в символах.
Подключить: sketch.cloud/s/0pEVV
Когда делаешь дизайн мобильного приложения, логично демонстрировать его другим в рамке устройства — мокапе. Существует множество коллекций мокапов, как платных, так и бесплатных.
Одна из лучших бесплатных собрана дизайнерами Фейсбука на сайте facebook.design/devices. В ней можно найти множество популярных устройств во фронтальном ракурсе. Она крута тем, что все изображения в ней векторные и нарисованы в Скетче.
Я пошёл дальше и собрал большую часть этой коллекции в облачную скетч-библиотеку, которую можно подключить в пару кликов, либо скачать и использовать локально.
Всего в него вошли 53 устройства: все актуальные модели айфонов во всех доступных расцветках, моноблоки, ноутбуки и дисплеи Apple. Не вошли планшеты, Андроиды и часы. Их планирую добавить вторым этапом.
Все устройства обёрнуты в символы и их можно вставлять через Runner, если назначить клавишу Ctrl + Y на команду Insert.
Все экраны на устройствах имеют тот размер, в котором для них удобно проектировать. Например, для iPhone SE это 320 х 568. Чтобы заменить содержимое экрана мокапа, нужно вставить растровое изображение в оверрайд с названием:
🖼 Paste your design here
В случае с ретина-экранами желательно, чтобы вставляемые макеты были в двойном размере (@2x). Для iPhone SE это 640 x 1136.
Когда мокап вставлен в проект, при необходимости его можно отвязать от библиотеки горячей клавишей, назначенной на команду Detach From Symbol. Я назначил на неё Shift + Cmd + Y, по аналогии с Shift + Cmd + G (разгруппировка).
#мокапы #горячие_клавиши
—
#первые_шаги – рубрика для юных падаванов
#новая_функция №5: Человеческий скроллинг в прототипе
Обновлено: Скетч с февраля 2018 умеет скроллить длинные макеты в режиме прототипа, но работает это очень неочевидно: чтобы прототип скроллился, нужно назначить артборду пресет.
Приношу извинения читателям за неверную информацию.
Обновлено: Скетч с февраля 2018 умеет скроллить длинные макеты в режиме прототипа, но работает это очень неочевидно: чтобы прототип скроллился, нужно назначить артборду пресет.
Приношу извинения читателям за неверную информацию.
This media is not supported in your browser
VIEW IN TELEGRAM
Скроллинг в прототипе
#новая_функция №6: фиксированные слои
Появилась возможность указывать слои, которые в скролле не участвуют.
Достаточно поставить новую галочку Fix position when scrolling.
Появилась возможность указывать слои, которые в скролле не участвуют.
Достаточно поставить новую галочку Fix position when scrolling.