У меня есть небольшая команда, с которой мы частенько участвуем в различных хакатонах. Чтобы не тратить каждый раз время на разворот скриншотов для стора, я сделал гибкий шаблон в Figma на Auto Layout и оптимизировал этот процесс.
В нём можно отредактировать цвет фона, размеры шрифтов и их цвета. Остальное тоже можно изменить, но лучше потрать время на создание крутого приложения, чем на это.
Шаблон был собран по примеру крупных приложений. Если посмотреть, то сейчас все используют большие заголовки с количеством слов от трёх до пяти и описание до десяти слов. Это всего лишь рекомендации, прислушиваться к ним или нет – решать вам.
Как его использовать
Далее просто экспортируете в нужном вам размере (х2 или х3) и закидываете в стор. А чтобы оптимизировать скриншоты под iPhone 8 и ниже, нужно сделать три небольших шага:
- Вставь адаптированные под восьмёрку макеты, отцентрируй их внутри заготовленной области
- Поменять через instance маску в компоненте «Мокап телефона» с iPhone X на iPhone 8
- Уменьшить шаблоны по высоте до 667px
P.S.
Заготовленный пресет скриншотов просто для примера, вы можете сменить шаблон для отдельного скриншота, если хотите.
Если у кого остались вопросы, как использовать шаблон, пишите в комментах или мне в Telegram.
Ну а если хочется ещё полезных материалов, то буду рад видеть тебя в моём Telegram-канале, там я пишу об оптимизации дизайн-процессов, системах и крутом софте
Комментарий недоступен
Многогранный образец картин для показа на ярмарке чудес заморских *читать со старославянской интонацией*
Ultimate не значит многогранный на английском языке. В первую очередь это значит - самый лучший.
Самый лучший - не очень ёмкое описание)) Я закладывал смысл гибкости шаблона, что его можно применять и так и так (много всего в одном), поэтому «многогранный».
Ну а так, думаю, что нет смысла так внимательно вчитываться в мой саркастический комментарий))
Комментарий недоступен
Интересно, сколько ещё вариантов ему накидают? :D
Полный набор шаблонов иллюстраций для магазина приложений
Комментарий недоступен
Комментарий недоступен
Комментарий недоступен
Большое спасибо! Даже не думал, что напишу когда-нибудь подобное на VC
На vc же много полезных материалов, не?)
Да, но атмосфера не та, чтобы благодарить)
Комментарий недоступен
Большое спасибо за отличный материал !!!
Автор сам загружал в стор превьюхи с помощью этого шаблона? Ваша идея не прошла тест на практике
Да, загружал. Поэтому и говорю, что сообщество может допилить что-то для себя, мой шаблон - не панацея)
Отличный материал! Спасибо!
Спасибо, что поделились!
Лонг рид был боринг. Ю не следует райтинг артиклс. Андерстенд? Стюпид
Я андестуд, тенкс, море такого не репит
Комментарий недоступен
Zhosko, man... zhosko
Все красиво, но не учтен такой фактор как размер скриншотов при экспорте.
По дефолту экспортируется в 375х812, в то время как по правилам, скриншоты должны быть в бОльших размеров (https://help.apple.com/app-store-connect/#/dev4e413fcb8).
Для профессиональных фигма-дизайнеров наверное не сложно поменять размеры, а вот разработчикам, привыкшим кнопки тыкать - сложно что-то модифицировать)
Кстати да, я собрал для стора комплект превьюх на этом шаблоне вот час назад и он абсолютно не юзабелен. Красиво - да, юзабельно - нет. Вроде бы шаблон должен экономить время, а мне сейчас переделывать все в нужном формате.
В чем собственно проблема сделать картинки как надо, и раскидать пресеты с экспортом?) Это занимает 10 минут, а шаблон и статья распухли бы от этих манипуляций, поэтому я оставил их на вас. Все же я ещё раз хочу донести что можно делать, а что нельзя делать в фигме с компонентами, поэтому и даю свободу и возможность тыкаться, вместо строгого флоу: закинул, экспортнул. Как говорится: «Дай человеку рыбу - будет сыт день, дай удочку - будет сыт год»
проблема вот в чем, я раскидал картинки как мне надо, экспортнул, но размер их не соответствует размеру AppStore. Я взял другой подобный полуфабрикат :-) и сделал то же самое, только теперь в нужном размере.
https://www.figma.com/file/BsEcXEEsvssXuOUtZ5Nfac/App-Store-Screenshots-iPhone-Copy-Copy-Copy?node-id=33%3A78
Сделал также в итоге
Там у вас даже соотношение сторон не то, требуемый размер 886x1920, у вас экспортируется 886х1918
Зашёл посмотреть, а для чего тебе такое разрешение экрана?
При загрузке в AppStore требуется приложить скриншоты устройства, они могут быть в строго определенной пропорции, вот тут можно почитать https://help.apple.com/app-store-connect/#/dev4e413fcb8
Минимально каждый разработчик должен предоставить
1. Промо для 6.5 дюймовых девайсов 886 x 1920 pixels (portrait)
2. Промо для 5.5 дюймовых девайсов 1080 x 1920 pixels (portrait)
3. iPad если версия совместима с iPad 1200 x 1600 pixels (portrait)
Если просто взять экспортированные скриншоты и просто изменить их размер (дотянуть с 1918 до 1920) то эффекта не будет.
Поэтому я воспользовался другим шаблоном (см комментарий выше)
Он довольно удобный, я уже второе приложение за месяц с ним оформляю.
Странно, так-то всё проверял по таблице, но возможно, где-то упустил. На такие несостыковки, я оставил возможность менять высоту, а у тебя как раз высота и не совпадает, пару пикселей можно было дотянуть вручную, «откалибровать»)
Согласен, я там описал про экспорт в х2/х3. Если есть желание, можешь доделать проект и накидать сразу готовые экраны для айфонов 6/7/8 и 10/11 с готовыми пресетами экспорта, чтобы разрабы просто нажимали “export”. Закидывай потом в комменты ссылку на проект, заплюсуем и поднимем вверх)
Уникальная отрисовка всех возможных вариантов для создания скриншотов в Figma.
Сообщение удалено.
Можно на «ты». Я, к сожалению, далёк от этой темы, но напиши мне в личку телеги, обсудим, может сделаем🤟