В апреле 2020 в качестве площадки для проведения различных дизайнерских тестов я выбрал Яндекс.Толоку, хотя она больше заточена для разметки больших объемов данных и разных бизнес-задач. Набор готовых шаблонов для теста дизайна там скудный, но можно сделать свои, зная HTML и JS. В течение года подготовил для себя и опробовал шаблоны для популярных методов: First click, Five second, Side by side. Хочу поделиться одним из кейсов, для которого я использовал Толоку и самописный прототип.
Почему Толока и свой прототип
Есть несколько сервисов, в которых можно тестировать прототипы: Яндекс.Взгляд, Useberry, Preely, Maze. Обычно в этих сервисах тест создаётся в конструкторе или импортируется из Figma, Invision, собираются…
Должен ли дизайнер уметь программировать? На этот вопрос вываливается куча статей в поисковиках, где у авторов приводятся похожие аргументы «за» и «против». Иногда в комментариях появляются разработчики, которые критикуют дизайнеров, лезущих не в своё дело.
В этой статье хочу поделиться одним примером рабочего инструмента, который появился благодаря коду. Это поможет вам определиться, нужно изучать азы программирования дизайнеру, или нет.
Немного обо мне и коде
Я графический дизайнер и иллюстратор, который знаком с программированием. Я немного разбираюсь в HTML, CSS, JavaScript, знаком с PHP и работой с Xcode.
Знания не раз помогали в коммерческих проектах, связанных с веб-дизайном. В свободное время создаю скрипты для Иллюстратора и…
Фотошоп в далёком 2013 году научился сам сохранять в реальном времени графику в файлы. Это ускоряло у веб-дизайнеров подготовку графических ассетов для вёрстки.
Максим Калякин в конце мая запустил в Инстаграме творческий челлендж #InsideTheShape. Задача: вписать в произвольную форму объект или сюжет, что хорошо помогает встряхнуться, заставить извилины покрутиться в мозгу. Данное упражнение встречалось на курсе Ильи Митрошина «Идеи в иллюстрации» от Bang Bang Education. Также иллюстраторы практикуют разновидность упражнения — вписать в форму различные головы персонажей.
Как дизайнеру избавиться от однотипных действий при подготовке макетов с Фотошопа к печати и не пропустить ничего?
Когда я часто работал с растровой полиграфией, сохранение под печать готовых макетов было самым скучным моментом, когда приходилось ряд типовых действий из раза в раз повторять.
Собрал в единую подборку свои скрипты или в написании которых принимал участие. Большинство из них автоматизирует различные операции с объектами. Все скрипты бесплатны для скачивания.
Новость: все мои новые скрипты и обновления теперь будут появляться на отдельном сайте ais.sergosokin.ru. Эта статья останется, но не будет обновляться.
Список
- ArtboardsRotateWithObjects 1.2
- ConvertToGradient
- DuplicateArtboards (upd, 14.11.2020)
- Export selection as AI
- ExtUngroup (upd, 25.11.2019)
- FileVersionInformer
- InlineSVGToAI
- Points Move Random (new, 08.05.2020)
- RenameItems (upd, 24.06.2020)
- Rescale (upd, 25.03.2020)
- ResizeToSize (upd, 17.04.2020)
- SelectOnlyPoints (upd, 14.11.2020)
- SelectPointsByType (upd, 05.08.2020)
- SplitPath (upd, 30.08.2020)
- StrokeColorFromFill (new, 14.08.2020)
- TrimMasks (upd, 14.10.2020)
- Zoom And Center (upd, 23.01.2021)
Ссылки для скачивания в конце…
Часто моушн-дизайнеры при создании анимационных роликов отрисовывают графику в Adobe Illustrator с последующим импортом файла в After Effects. Но перед этим необходимо подготовить векторный файл. Как это сделать?
Обычный процесс подготовки
After Effects при импорте векторного файла работает только со слоями верхнего уровня, а все их внутреннее содержимое склеивается в один объект. Если для анимации в проекте нужна многослойная композиция, то приходится в Ai объекты разделять на отдельные слои.
Для выбранного слоя в Иллюстраторе применим команду «Release to Layers (Sequence)» в меню панели Layers.
В iOS 10 в 2016 году одним из визуальных новшеств стала размытая тень под обложками альбомов в приложении «Музыка», генерируемая из этих обложек. Такие тени сейчас повсеместно встречаются не только в интерфейсах, но и в дизайне сайтов.
Воспроизвести такой эффект в ФШ просто:
- создать дубликат слоя;
- на свой вкус применить фильтр размытия;
- уменьшить масштаб;
- слегка сдвинуть по вертикали;
- в конце изменить режим смешивания слоя для наложения на фон.
В свое время в блоге Инвижн был опубликован видеоурок для Скетча и год спустя продуктовый дизайнер Олег Фролов создал бесплатный плагин, автоматизирующий создание таких теней. …
How to transfer an illustration, site or UI design made with Illustrator to Photoshop, without copying it piece by piece as smart objects, and end up with juicy vector objects?
There’s a native command to do this, “Export to PSD”, right?
Unfortunately, no. After exporting a document using File → Export → PSD (with the option Write Layers → Maximum Editability) we usually get randomly flattened raster layers instead.
Как перенести по слоям иллюстрацию, макет сайта или интерфейса из Иллюстратора в Фотошоп, не используя копирование в виде смарт-объекта? При этом хочется сохранить объекты векторными после переноса.
В этом должна помочь стандартная функция экспорта в PSD, но так ли это?
Экспортируя в Иллюстраторе через меню File → Export → PSD с опцией «Write Layers» → «Maximum Editability», мы получим случайным образом слитые растровые слои.
Сергей Осокин
Пишу, когда не лень, о практичных вещах. Иллюстратор в Модульбанке.
