Комментарии 25
Ваша схема хорошо работает, если дизайн после отдачи разработчикам не меняется. Но чаще всего во время разработки он меняется.
Для ускорения этого процесса лучше обучить разработчиков пользоваться sketch и плюс автоматизировать многие процессы: создание палитры цветов, экспорт картинок, нарезка, создание imageassets. Для сложных или динамических элементов использовать PaintCode или QuartzCode с автоматизацией экспорта.
Для ускорения этого процесса лучше обучить разработчиков пользоваться sketch и плюс автоматизировать многие процессы: создание палитры цветов, экспорт картинок, нарезка, создание imageassets. Для сложных или динамических элементов использовать PaintCode или QuartzCode с автоматизацией экспорта.
Скорей всего речь идет о процессе, когда над дизайном работают программисты или специалисты из области программирования, не начиная писать код. Промежуточные версии дизайна на вряд ли собирают в законченный пакет для передачи программистам. Пусть автор меня поправит, если это не так.
И очень хорошее предложение полностью автоматизировать экспорт графики.
И очень хорошее предложение полностью автоматизировать экспорт графики.
Из скетча брать данные действительно очень просто, но ведь его не все дизайнеры используют, а нужно единообразие.
А я вот стараюсь дизайны резать сам и прошу от дизайнеров только PSD. Если не справляюсь, потому что не знаю Photoshop так хорошо, то уже прошу мне там пару картинок дорезать.
Мне так нравится куда больше, чем объяснять дизайнеру что именно и как мне нужно нарезать. Да и не отвлекаю его лишний раз.
Мне так нравится куда больше, чем объяснять дизайнеру что именно и как мне нужно нарезать. Да и не отвлекаю его лишний раз.
Это классно, когда компания маленькая. Но когда масштаб большой, должен быть четкий и понятный процесс. Это улучшает взаимодействие отделов.
Такой подход означает что разработчик делает работу за дизайнера. Что не есть хорошо.
Задача дизайнера — дизайнить. А это уже верстка.
Версткой может заниматься как разработчик, так и дизайнер. Обычно занимаются дизайнеры, потому что фотошоп это их инструмент.
Но почему бы не делать это программистам? Это чисто технический скилл. Не нужно бояться фотошопа.
Версткой может заниматься как разработчик, так и дизайнер. Обычно занимаются дизайнеры, потому что фотошоп это их инструмент.
Но почему бы не делать это программистам? Это чисто технический скилл. Не нужно бояться фотошопа.
Потому что программисты будут делать это явно дольше дизайнера. Ну и время программиста обычно стоит дороже чем время дизайнера.
Я не согласен. Большинство графики я нарезаю чем-то вроде:
1. Duplicate Layer/Group
2. В меню выбрать New document
3. Потом выбрать Image Trim
4. Save To PNG
Дизайнер потратит на это не сильно меньше времени чем я. В сложном случае я сам к нему пойду. Зато не тратится время на вот эти коммуникации.
Может быть конечно если дизайнер уже заранее натренирован и сразу знает в каком именно виде графику нужно отдать, то это действительно проще сделать дизайнеру.
При этом я приветствую структурированный подход конечно вроде выдачи таблицы цветов или шрифтов. Это очень помогает. У меня были случаи, когда я подходил к дизайнеру и говорил «А у тебя вот на этом экране шрифт 56 пикселей, а вот тут 60. Это ты специально так задумал или скосячил?». Таблички должны эти проблемы убирать в корне.
1. Duplicate Layer/Group
2. В меню выбрать New document
3. Потом выбрать Image Trim
4. Save To PNG
Дизайнер потратит на это не сильно меньше времени чем я. В сложном случае я сам к нему пойду. Зато не тратится время на вот эти коммуникации.
Может быть конечно если дизайнер уже заранее натренирован и сразу знает в каком именно виде графику нужно отдать, то это действительно проще сделать дизайнеру.
При этом я приветствую структурированный подход конечно вроде выдачи таблицы цветов или шрифтов. Это очень помогает. У меня были случаи, когда я подходил к дизайнеру и говорил «А у тебя вот на этом экране шрифт 56 пикселей, а вот тут 60. Это ты специально так задумал или скосячил?». Таблички должны эти проблемы убирать в корне.
В Pixelmator это очень просто делается: нужный слой/группа просто drag'n'drop'ом в папку и все. Практически всегда это легче самому это сделать, чем объяснить в каком виде тебе нужно нарезать картинки
Где-то в параллельной вселенной… «А я вот стараюсь править мелочи сам, мне проще залезть в исходники проекта и поменять там расположение элементов или те же шрифты, цвета. Мне так нравится куда больше, чем объяснять программисту какой именно шрифт тут должен стоять. Да и не отвлекаю его лишний раз. »
Спасибо вам за статью! Мы по очень похожей схеме работаем, тоже делаем макеты, разметку, нарезаем графику и отдаём всё это разработчикам. Возьмём что-нибудь из ваших приёмов на вооружение.
Можно пару вопросов?
В чём рисуете макеты? Photoshop, Illustrator? Какие версии?
А разметку страницы делаете через плагин? Мы, например, используем Ink дя Photoshop, Specctr для Illustrator.
Используете ли в макетах ссылки? Например, вы нарисовали большую карту экранов, отдали уже разработчикам, а потом оказалось, что в меню надо пункт переправить. Не приходится править во всех макетах отдельно, а потом ещё и во всех макетах на карте?
Можно пару вопросов?
В чём рисуете макеты? Photoshop, Illustrator? Какие версии?
А разметку страницы делаете через плагин? Мы, например, используем Ink дя Photoshop, Specctr для Illustrator.
Используете ли в макетах ссылки? Например, вы нарисовали большую карту экранов, отдали уже разработчикам, а потом оказалось, что в меню надо пункт переправить. Не приходится править во всех макетах отдельно, а потом ещё и во всех макетах на карте?
Не за что :) Вообще большая часть дизайнеров используют Photoshop+Illustrator, на Sketch еще не перешли. Насчет версий сходу не скажу, но завтра постараюсь уточнить. С названием плагина для разметки то же самое — узнаю.
На самом деле мы не слишком сильно участвуем в процессе именно дизайна, так что тонкостей вроде использования ссылок не знаю — но уверен, что что-то в этом роде используется.
На самом деле мы не слишком сильно участвуем в процессе именно дизайна, так что тонкостей вроде использования ссылок не знаю — но уверен, что что-то в этом роде используется.
Я для «нарезки» использую плагин для PS resonator.cc
Принцип работы: все иконки из исходных файлов помещаются столбцами в промежуточный файл Res-Project.psd, перед этим отресайзившись под нужные вам плотности. Фишка в том, что при полной автонарезке силами PNG Express, например, у иконок часто получаются мыльные края или случаются ещё какие-нибудь глюки. Поэтому RESONATOR сначала собирает все иконки в один файл, который называется Res-Project.psd. В нём вы поправите мыльную графику, а уже потом сохраняете пиксель перфектные иконки. Так же плюс в том, что вся «нарезка» хранится в одном файле, и её не надо искать по разным папкам, когда нужно переделать какую-нибудь иконку.
Принцип работы: все иконки из исходных файлов помещаются столбцами в промежуточный файл Res-Project.psd, перед этим отресайзившись под нужные вам плотности. Фишка в том, что при полной автонарезке силами PNG Express, например, у иконок часто получаются мыльные края или случаются ещё какие-нибудь глюки. Поэтому RESONATOR сначала собирает все иконки в один файл, который называется Res-Project.psd. В нём вы поправите мыльную графику, а уже потом сохраняете пиксель перфектные иконки. Так же плюс в том, что вся «нарезка» хранится в одном файле, и её не надо искать по разным папкам, когда нужно переделать какую-нибудь иконку.
Если бы у вас еще и Sketch был бы мастхэв в процессах, то это был бы отличный гайд )
Раньше тоже весьма плевался когда просили нарезать дизайн самостоятельно. Однако в последнее время перестал делать из этого трагедию и нормально сам в фотошопе меряю и нарезаю с помощью бесплатного плагина Cut&Slice me www.cutandslice.me
p.s. Sketch ещё не освоил, но в активном процессе.
p.s. Sketch ещё не освоил, но в активном процессе.
Похожие гайдлайны в настоящий момент формируются и командой Android-разработчиков, так что, если читатели будут заинтересованы — обязательно опубликуем в недалеком будущем.
Заинтересованы. Весьма.
Дизайнеру — Sketch, разработчку можно даже не скетч, а zeplin.io. И все будет проще.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Передача проекта от дизайнеров iOS разработчикам