Дмитрий Марков MagiC

От переводчика

Привет, %юзернейм%!

Этот перевод как бы дополняет мою предыдущую публикацию про Pixel Perfect, без которого она была бы неполной, тем более что оригинальная статья про Pixel Perfect ссылается на оригинальную статью этого перевода.

Материал расчитан на новичков, и немного рассказывает о двух вещах:

1. Как избежать той проблемы, из-за которой у вас в макетах расстояние между элементами или гайдами начинает включать в себя дробные части пикселей;
2. Как использовать сетки для прототипирования в Adobe Photoshop и Adobe Illustrator.

Мне этот материал интересен с той точки зрения, что я был бы очень благодарен, если бы в самом начале моей работы дизайнером интерфейсов мне кто-нибудь рассказал о пиксельной сетке. Поэтому, я надеюсь, что облегчу кому-то жизнь, публикуя этот перевод.

Как и в прошлый раз, одна из целей, почему я пишу эту статью на Хабр (а не ограничиваюсь, к примеру, переводом на Tuts+) — это составление после перевода полезных ссылок по теме. Призываю хабражителей так же делиться своими соображениями и инструментами, которыми вы пользуетесь при создании сеток, может быть какими-то другими редакторами. Один мой знакомый товарищ прокомментировал предыдущую статью таким образом, что, конечно, материал прикольный, но сам он пользуется Sketch'ем, а там это всё из коробки. Расскажите, чем пользуетесь вы?

Кстати, хотя в статье речь идёт об Adobe Illustrator, в Adobe Photoshop можно так же использовать и пиксельную сетку, и привязку к пикселям, и свою собственную настраиваемую сетку.

Краткое содержание

• Чтобы включить/выключить сетку в Adobe Illustrator/Photoshop, нажмите Ctrl + '
• Чтобы включить/выключить гайды в Adobe Illustrator/Photoshop, нажмите Ctrl + ;

Ну, поехали.

Разбираемся с сеткой в Adobe Illustrator

От переводчика

Рад приветствовать тебя, %юзернейм%!

Я новичок в профессии дизайнера интерфейсов, и как-то давно, листая вакансии, меня заинтересовали требования к одной из них. Среди таких, как знание пакета Adobe, средств прототипирования и навыков в области ux/ui я прочитал, что соискателю именно на эту вакансию неплохо было бы уметь держать порядок в слоях, структуре и названиях файлов и папок, а так же знать и уметь применять на практике то, что называется pixel perfect. Меня это заинтересовало, так как на моей работе ни от меня, ни от других сотрудников этого не требуют, но я всегда старался этого придерживаться и даже пытался убедить в этом других, но мне почему-то не хватало аргументов, чтобы объяснить, для чего это нужно.

С понятием pixel perfect я вообще на тот момент не был знаком, только слышал где-то пару раз, и так как этот пункт стоял в конце списка требований «аккуратности», я понял, что это что-то вроде апогея, вершины айсберга в организации работы над макетами.

Я стал искать, но ничего, кроме статьи на Хабре из пары абзацев про Pixel perfect от программиста не нашёл. Потом я как-то услышал о Monument Valley, и даже наткнулся на справочник Pixel Perfect Precision, но времени изучать так много информации на английском как-то не было, и первый раз он меня не зацепил. Стало появляться время и вышли некоторые статьи, одна из которых, наполненная практическими советами по Pixel Perfect зацепила меня, и я решил не просто прочитать и понять, а ещё и перевести по возможности литературно, чтобы дать вопросу широкую известность, и распространить тему на Хабре.

Небольшой технический момент. Оригинальная статья с Tuts+ называется «How to Create Pixel Perfect Artwork Using Adobe Illustrator», при этом я могу вас уверить, что большая часть из предложенных в статье настроек присутствует и в Adobe Photoshop CS6, а уж в Adobe Photoshop CC вообще можно повторить всё это полностью.

В заключение вступительной части хочу попросить не обращать внимания на то, что я новичок в дизайне, и этой мой первый в жизни перевод. Отнеситесь критично, тема серьёзная. Призываю делиться своими соображениями и опытом в комментариях.

Краткое содержание

Эта часть для тех, кому лень вникать в аспекты, но хочется побыстрее получить инструкции.
Либо для тех, кто уже читал полную статью, но теперь хочет быстро без лишних абзацев, на другом рабочем месте применить все необходимые настройки.

Настройки Abobe Illustrator

1. Edit > Preferences > Units > General → Pixels
   Edit > Preferences > Units > Stroke → Pixels
2. Edit > Preferences > Guides & Grid > Gridline every → 1px
   Edit > Preferences > Guides & Grid > Subdivisions → 1px
3. Edit > Preferences > General > Keyboard Increment → 1px
4. View > Snap to Grid
   View > Snap to Point
5. View > Pixel Preview

Не благодарите.
Всех заинтересовавшихся прошу пройти под кат.

Как создавать pixel perfect изображения в Adobe Illustrator

Тема накроватных столиков для завтраков в постель ноутбуков достаточно популярна в Интернете, в том числе и на Хабре. Но я, всё-таки, решился на свою статью. Честно признаться, это моя первая более-менее серьёзная работа с деревом за всю жизнь. Я постараюсь рассказать всё в подробностях для таких же новичков (как и я), поэтому искушённому читателю многие вещи могут показаться лишними, либо чересчур подробными. Но, читая разные статьи на эту тему, а, вернее, комментарии к ним, вроде: «Да, стол у вас, конечно, не очень, но вы такой молодец, что сделали его своими руками», — я понял, что тема актуальна. Люди, сидящие за компьютером, инструменты по дереву берут в свои руки довольно редко.

На самом деле, идея сделать какую-то подставку для ноутбука, с которой бы было удобно валяться в кровати, появилась у меня достаточно давно, первый раз, наверное, года три назад. Но для себя разве что-то сделаешь? А тут, две недели назад, любимая как-то призналась, что очень уж не хватает ей для счастья столика, на котором бы вечером, засыпая, можно было кино на ноутбуке посмотреть. В общем, желание долго себя ждать не заставило.

Здрасте. На днях, после очередной долгой ретуши и подготовки фотографий для вёба родилась прикольная идея:



Было бы круто, если бы можно было заливать фотки во все соц.сети из одной вёб-папки. С фтп, например.
Вот допустим, есть у меня на винте готовый отретушированный фоторепортаж. И хочу я его залить на Вконтакте, Пикасу и нижегородскую соц.сеть (для местных жителей). Беру я все свои фотки и заливаю их на свой ftp (который тоже в кольце, т.е. скорость заливки на него будет большая, несравнимая со скоростью заливки на внешние соц.сети). Потом в каждой соц.сети по очереди я нажимаю «добавить фотографии», выбираю пункт «из вёб-папки» и указываю адрес к папочке, которая лежит у меня на ftp. В итоге я файлы отдал только один раз, потом уже не мои заботы — занимаюсь своим делом, а фотографии льются в вёб-альбомы.

Как донести эту мысль до разработчиков соц.сетей?

P.S. прошу сильно не пинать — этой мой первый пост на Хабре.