Технические требования по дизайну сайта

И все-таки как правильно делать по Ретину?

Была ситуация пришлось переделывать (векторизировать иконки) чтобы было нормально на некоторых устройствах. Делал под ширину 1920 - разрешение 150 dpi. Но внутренний голос мне подсказывает, что это не совсем верно. Или все-таки правильно так и делать?

Иконки (если плоские) сразу рассчитывать что надо давать svg?

Относительно папочек - таки да ссылка - вероятно прав. Нужно все элементы графики давать отдельно и по папкам - хотя бы по максимальному размеру. Как страшный сон вспоминаю по тому проекту 7 размеров и в каждом около 150 иконок... Но с другой стороны я понимаю, что у верстальщика такая ситуация каждый раз.

Вероятно есть подходы, которые позволят сделать работу не таким страшным сном? И сколько размеров правильно делать? Какие считать как базовые?

Цитата (vertikal-nik):

Иконки (если плоские) сразу рассчитывать что надо давать svg?

..Или собирать их в иконочный шрифт. Какой вариант лучше - вопрос пока среди верстальщиков холиварный. Но, если вы будет делать хоть как-то, вам, как дизайнеру цены не будет)
Кстати, это решит вашу проблему
Цитата:

Как страшный сон вспоминаю по тому проекту 7 размеров и в каждом около 150 иконок...

Цитата (vertikal-nik):

Нужно все элементы графики давать отдельно и по папкам - хотя бы по максимальному размеру. Как страшный сон вспоминаю по тому проекту 7 размеров и в каждом около 150 иконок...

Есть как минимум три простых и приятных решения, которые даже самую сложную нарезку превратят в нажатие нескольких кнопок и привычку правильно именовать слои: 
1) PNG Express (ссылка)
2) Avocode со стороны верстальщика (умеет вектор сразу генерить в svg)
3) Если у вас Mас OS, то Sketch + Zeplin (ссылка) Там просто задаете множитель как параметр экспорта (1х, 2х, mdpi и т.д.  и нажимаете кнопку экспорт) По сути этот тот же PNG Express, который работает только под Мак и на Скетче.
Цитата:

И все-таки как правильно делать по Ретину?

Начинаете с 3X графики (берете номинальное web-разрешение и умножаете на 3). Дальше от неё танцуете.  Это для растра.
Если делаете простой вектор, то все иконки переводите в svg и в том же icomoon создаете иконочный шрифт. Быстро и удобно.
Сложный либо переводите в растр и дальше как в п.1, либо, если делаете для мобильных приложений, то в PDF в масштабе 2x

Многие кстати предпочитают делать сразу в 2х, потому что тогда меньше муара и битых пикселей при переводе в 3 и в 1 (меньше нецелочисленных значений), но я давно работаю в Sketch  - там таких артефактов отродясь нету.

Тут упомянули "mobile first". Господа, это для прототипа, чтобы лучше понимать чего в дизайн совать не стоит.
А вообще после многих проектов  удобнее всего делается в таком порядке:
1) Прототип
2) UI Kit с основными элементами (который потом сделает счастливым верстальщика) + иконки (и шрифт из них)
3) Собираем полный интерфейс из нашего UI kit, который заодно и дорабатываем (web, mobile, tablet)
4) Красивости (обрабатываем фото, делаем иллюстрации и т.д.) Это уже в расчете на 3Х.

Минимум правок, доработок и переделок 

А вообще есть старый, но годный гайд:ссылка
Вроде как переводили его даже на русский.

Цитата (Mariya_web):

PNG Express

С ним удобнее чем сразу генерить ассеты в фотошопе? Какие преимущества? СС2014-15 прекрасно справляется с генерацией графики, и вектора в svg в том числе.  Плюс при правильном именовании артбордов и композиций слоев делает еще и "раскадровку" всех состояний страницы, если отдельно лень это все оформлять в invision или marvel

Чувствую себя неандертальцем каким-то  
Цитата:

СС2014-15 прекрасно справляется с генерацией графики, и вектора в svg в том числе.  Плюс при правильном именовании артбордов и композиций слоев делает еще и "раскадровку" всех состояний страницы

Можно подробнее? Или где можно почитать/посмотреть? Я до сих по старинке тыкаю по слоям и по хоткею(экшен) сохраняю.

Цитата (AlexLosev):

С ним удобнее чем сразу генерить ассеты в фотошопе? Какие преимущества? СС2014-15 прекрасно справляется с генерацией графики, и вектора в svg в том числе.  Плюс при правильном именовании артбордов и композиций слоев делает еще и "раскадровку" всех состояний страницы, если отдельно лень это все оформлять в invision или marvel

Намного удобнее. Это если вы про File-Generate Assets в Photoshop  (ссылка)
Вы просто именуете слои и группы с определенными приставками (чуть проще чем для Photoshop) и в самом PNG Express нажимаете Export Assets предварительно выбрав какие размеры вам генерить и какой исходный. Я беру исходный как и говорила 3X если преобладает растр и 2Х если вектор и у вас на выходе через минуту 10 папок нужного именования, как например game_assets@2x со всей графикой внутри и можно отдавать разработчикам. То есть диз делаете 1, а ассеты сколько нужно и в каких угодно разрешениях.
Также можно в пару кликов накидать им сложные спеки и редлайны, например при адаптиве что и как ресайзится и какие части тех же кнопок остаются статичными, а какие нет.
Посмотрите ролик внизу на их сайте. Два года назад купила и горя не знаю, когда с Photoshop работаю.
В Generate assets  вы просто последовательно экспортируете в PNG (JPG , GIF)или в SVG в одном размере, потом ресайзите макет, делаете новую папку и т.д.  Дольше раз в 10. А если вы еще и приспособите плагин Clear PSD для именования файлов правильным образом - вообще возобладает светлая сторона силы. По сути Generate Assets это сильно урезанный PNG Express.

Цитата:

Можно подробнее? Или где можно почитать/посмотреть? Я до сих по старинке тыкаю по слоям и по хоткею(экшен) сохраняю.

Да ладно.
Про Generate Assets показала выше.
Более простой вариант:
Правой кнопкой по слою или папке и Quick Export as PNG (можно сразу несколько обхектов выделаить) или в настройках любой другой формат выберите по умолчанию
Для SVG: СС2015 File - Export as - SVG
Для более ранних было Generate Assets - SVG
 

Mariya_web, ясно. Неее, "правой кнопкой по слою" нам не надо )) Я сейчас делаю быстрее. Слишком вдохновился словами "сразу генерит ассеты", подумал, есть какая-то хитрая автоматизация процесса. А PNG Express - клевая штука, спасибо.

vovka-morkovka,
Так сразу генерит ассеты File -Generate Assets. Просто для одного разрешения.
А PNG Express делает автоматом разные разрешения (больше скажу : на разные платформы).

Так и фотошоп генерит сразу под несколько разрешений и по папкам раскидывает. Через запятую даете имена ресурсам с указанием папок, размеров и качества:
120% Delicious.jpg, 42% Delicious.png24, retina/100x100 Delicious_2.jpg90%, 250% Delicious.gif. Может разве именовать не слишком удобно...
Я про png express давно слышал, но не покупал, т.к. все функции и так вроде доступны в фотошопе. Но прислушаюсь к вашему мнению и посмотрю подробнее.

Цитата (Mariya_web):

Так сразу генерит ассеты File -Generate Assets.

Да, уже разобрался. Как-то мимо меня эта фича прошла. Нужно все-таки иногда читать chengelog Фотошопа ))