Идеальные пиксели при повороте, вставке и смещении в Photoshop

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

Идеальные пиксели при вращении

Если вы не будете осторожны, вращение слоев в Photoshop’е может привести к смазыванию всех пикселей.
При вращении слоя с помощью Free Transform (и некоторых других инструментов) ровно на 90 или 270 ° качество результата определяется размер слоя. Если слой имеет четную ширину и четную высоту, то все будет в порядке. Если он имеет нечетную ширину и нечетную высоту, то все также будет в порядке. Но если он имеет нечетную ширину и четную высоту или четную ширину и нечетную высоту, то вы увидите нечто похожее на результат ниже:

В этом случае, произведение на 20 × 9 пикселей: четное на нечетное. Результаты для растровых слоев и векторных слоев разные, но оба они представляют собой непригодные результаты, потому что вращение не совпадает с точными границами пикселей.

Как исправить?

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

Если размеры слоя или слоев будут четными на четное или нечетными на нечетное, то все будет в порядке.

Легкий способ

Изменение начала вращения на верхний левый (или любой другой угол) будет означать, что оно находится на границе пикселей, гарантируя превосходные результаты. Для этого нажмите на начальный угол после выбора инструмента Free Transform, но перед поворотом. Работает блестяще, и к тому же это самое простое решение.

Растровые и векторные маски тоже страдают от этой проблемы, и поэтому о них тоже следует позаботиться. Но проблема затрагивает только вращающиеся слои, либо через инструмент » Free Transform » или «Transform» в меню Edit. Со вращением всего холста через Image → Image Rotation нет никаких проблем.

Чтобы еще больше упростить процесс, существуют несколько Photoshop-экшны, которые обо всем позаботятся за вас.

Идеальные пиксели при векторной вставке

Если вы нарисовали пиксельный рисунок в Illustrator и вставили его в Photoshop как shape layer, вы могли заметить, что результат не совсем тот, что вы ожидали, то есть не совершенно четкое изображение, а скорее размытое пятно. Вот как это исправить.

Ниже приведен рисунок в Illustrator: идеальной формы, привязанный к пиксельной сетке, и в том размере, в котором мы намерены использовать его в Photoshop.

Ниже приведен тот же рисунок, вставленный в Photoshop несколько раз. Обратите внимание, что только верхний левый рисунок резкий, а у других не хватает половины пикселей либо по оси х, либо по оси у, либо по двум сразу.

Что пошло не так?

Вставка в Photoshop работает одним из двух способов. Если вы сделали выбор, то содержимое буфера обмена будет вставлено так, чтобы центр буфера обмена был подогнан к центру выбранного объекта. Если выбор не сделан, то содержимое вставляется так, что центр в буфер обмена совпадет с центром текущего просмотра. Результат определяют масштаб и часть документа, который вы просматриваете.

Как исправить?

Наш тестовый рисунок 32 пикселя в ширину и 12 пикселей в высоту. Выделив область 32 × 12, мы сделаем так, что рисунок вставится именно в это место. Это срабатывает каждый раз.

Легкий способ

Размер выделения не обязательно должен совпадать с размером рисунка. В нашем случае выделение области 2 × 2-пикселя сработает так же, потому что центр области выделения с четной высотой и шириной и центр содержимого буфера обмена с четной высотой и шириной совпадут, чего мы и добиваемся. Если рисунок будет нечетным в ширину и высоту, то нужно выделить область 1 × 1.

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

Смарт-объекты

Вставка элементов как смарт-объекты не тут может не подойти(по крайней мере, не в Photoshop CS5). Можно использовать Shape layers: этот способ позволяет лучше контролировать и редактировать.

Идеальные пиксели при смещении

При смещении векторных точек, Photoshop ведет себя очень странно, в зависимости от масштаба. При 100% масштабе, если смещени просиходит при помощи стрелок клавиатуры, векторные точки перемещаются ровно на 1 пиксель. При 200% — половину пикселя. При 300% — на треть пикселя.
Такое поведение выглядит как специальная функция, но это не всегда удобно. Обычно я хочу сместить на пиксель. Вот как можно смещать всегда на 1px без работы с масштабом изображения 100%.
Откройте документ, а затем создать второе окно, выбрав Window → Arrange → New Window. Затем вы можете изменить размер нового окна и сместить его в сторону.

Изменяйте изображение в другом окне, как обычно, насколько вы хотите. Теперь вы можете нажать Ctrl + `, чтобы переключиться обратно в окно с масштабом 100%, сместить изображение, используя стрелки, и нажать Ctrl +`, чтобы вернуться обратно. В другом окне с масштабом 100%, смещение будет двигать выбранные точки ровно на 1 пиксель.

Обратите внимание, что зажимая Shift при использовании клавиш со стрелками для смещения, вы получите сдвиг на 10 пикселей, независимо от масштаба. Кроме того, перетаскивание точки с помощью мышки будет привязано к пикселям в большинстве случаев — большинстве, но не всех.
Хотя эта техника не является идеальной, она помогает избежать проблем при редактировании векторных контуров в Photoshop. Или, может быть, это просто еще одна причина для того, чтобы сначала рисовать сложные формы в Illustrator, а затем вставлять их как shape layers?

Позаботьтесь о пикселях

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

Хотите узнать больше о какой-то конкретной технике или функции Photoshop? Напишите об этом в комментариях.


via

Читателям также нравится:

Обратите внимание!

Запущена новая версия сообщества для творческих людей — TopCreator, которое мой блог всячески поддерживает. Мы верим, что проект нужен российским дизайнерам, иллюстраторам и фотографам — мы хотимы быть вам полезны! Очень интересный проект, будьте среди первых. Заходите сюда

Комментарии

  1. 05 Сен
    Игорь

    спасибо за статью
    постояно были проблемы с поворотом

  2. 09 Июл
    Дмитрий

    Здравствуйте! Спасибо за отличную статью.
    Сейчас, стараюсь все свои макеты подводить к четкой не полупиксельной форме).
    В связи с этим, у меня возникло несколько вопросов:
    1. Можно ли выставить по умолчанию масштабирование к левой верхней точке?
    2. Можно ли в настройках проставить привязку к целому пикселю. Если я создаю векторный элемент, мне нужно, чтоб при растягивании он сам прыгал точно через пиксель. (правильно 12px а не 12,3 ли 12,5px) Также, первоая точка по оси координат тоже должна быть целым числом.

    Заранее благодарен за помощь!

  3. 09 Июл
    naikom

    1) Можно. Там в режиме трансформации в центре фигуры есть некий прицел — вот его нужно поместить в нужное место.
    2) Можно, но только в Photoshop CS6

  4. 09 Июл
    Дмитрий

    Спасибо за быстрый ответ.
    «Прицелом я пользуюсь» , вот только не знаю, как сделать чтоб она сам автоматом (по умолчанию) выбирал левую верхнюю точку.

    На свой второй вопрос, я уже сам нашёл ответ. Т.с. альтернативній вариант — оказывается чтоб не было «полупикселей» нужно зажимать кнопку «shift»
    Также, при создании векторных элементов, в настройках есть кнопка привязки к сетке.

    Спасибо за помощь!

Оставить комментарий:

Anti-Spam Protection by WP-SpamFree


  • Kevin Durant Shoes
  • Lebron Shoes
  • Lebron James Shoes
  • Nike Lebron James Shoes
  • Derrick Rose Shoes
  • D Rose Shoes
  • KD 7 Shoes
  • Kobe X Shoes
  • Kobe 10 Shoes
  • KD 7
  • Kevin Durant Shoes
  • KD Shoes
  • Nike KD Shoes
  • Kobe 10 Shoes
  • Discount Kobe Shoes
  • Kobe Shoes
  • Kobe Bryant Shoes
  • KD 7 Shoes
  • Kyrie Irving Shoes
  • Lebron 12
  • Lebron James Shoes
  • Lebron Shoes
  • Nike Free
  • Nike Free Run
  • Air Max Shoes
  • Cheap Air Max Shoes
  • Lebron James Jersey
  • Kobe Bryant Jersey
  • Kevin Durant Jersey
  • Air Jordan Shoes
  • Michael Jordan Jersey
  • Blake Griffin Shoes
  • Russell Westbrook Shoes
  • Rose Shoes
  • Kobe Bryant Jerseys
  • Lebron James Jerseys
  • Kobe Bryant Jersey
  • Lebron James Jersey
  • Supra Shoes
  • Kyrie 1 Shoes
  • Nike Free 5.0
  • Nike Free 5
  • kevin durant shoes
  • kd 7
  • kd new shoes
  • KD Shoes
  • Kyrie 1
  • Jeremy Scott shoes
  • Jeremy Scott Adidas
  • Tenis Adidas Springblade
  • Kevin Durant Shoes
  • Kobe Bryant Shoes
  • KD Shoes Store
  • KD Sneakers
  • Lebron Basketball Shoes
  • Adidas Porsche Design
  • kd shoes
  • Cheap Herve Leger Dress
  • Cheap Lebron Shoes
  • Adidas Porsche Design
  • Lebron James Shoes
  • Coach Retail Store
  • nba jerseys
  • louis vuitton handbags
  • Cheap Lebron 11
  • Kobe Bryant Shoes
  • Kevin Durant Shoes
  • louis vuitton belts
  • kobe shoes
  • Lebron James Shoes
  • Kevin Durant Shoes
  • Los Angeles Clippers Jerseys
  • Toronto Raptors Jerseys
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • KD Shoes
  • Lebron James Shoes
  • KD 7
  • Westbrook Shoes
  • Lebron Shoes
  • Lebron James Shoes
  • Air Max Shoes
  • kobe bryant shoes
  • Derrick Rose Shoes
  • Rose Shoes
  • KD 7
  • Kobe X
  • Kobe 10
  • Lebron Shoes 12
  • kyrie irving shoes
  • Nike KD Shoes
  • Cheap Nike Free
  • Nike Free
  • Lebron 12 Shoes
  • Cheap Air Max
  • Cheap Lebron Jerseys
  • Kobe Bryant Jerseys
  • Kevin Durant Jersey
  • Kobe Shoes
  • Griffin Shoes
  • Michael Jordan Jerseys
  • Kobe Jerseys
  • Lebron Jerseys
  • Kobe Bryant Jerseys
  • Lebron James Jerseys
  • Cheap Supra Shoes
  • Supra Shoes
  • Nike Kyrie 1
  • Nike Free Shoes
  • Nike Free Run
  • KD shoes
  • Kyrie 1 Shoes
  • Kevin Durant Shoes
  • Jeremy Scott Wings
  • Jeremy Scott Shoes
  • Lebron James Shoes
  • Adidas Porsche Design
  • Kobe Shoes
  • Cheap Kevin Durant Shoes
  • Kevin Durant Shoes
  • Lebron 11
  • Porsche Design Adidas
  • Cheap KD Shoes
  • Lerbon James Sneakers
  • Cheap KD Shoes
  • Herve Leger Dress
  • Lebron Shoes
  • Porsche Design Shoes
  • Lebron Shoes
  • Nike Shoes
  • Cheap Coach Bags
  • louis vuitton purses
  • cheap nba jerseys
  • Lebron James Shoes
  • Cheap Kobe Shoes
  • Kobe Shoes
  • KD Shoes
  • KD Shoes
  • Sacramento Kings Jerseys
  • Washington Wizards Jerseys
  • Air Jordan Shoes
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Lebron James Shoes
  • Lebron 12
  • Lebron 11
  • Kobe Shoes
  • cheap kobe shoes
  • lebron 12 shoes
  • James Shoes
  • Lebron Shoes
  • Rose Shoes
  • Derrick Rose Shoes
  • Kobe 9
  • NIke KD
  • KD VII
  • KD Shoes 2015
  • kyrie shoes
  • Air Max 90
  • Air Max Shoes Sale
  • Nike Free Shoes
  • Nike Free Run 2
  • Lebron 12
  • Lebron Jerseys For Sale
  • Cheap Kobe Jerseys
  • KD Jersey
  • Jordan Jersey
  • Jordan Griffin Shoes
  • Kobe Bryant Jersey
  • Lebron James Jersey
  • Supra Footwear
  • Supra Shoes
  • KD Shoes
  • Kyrie irving Shoes
  • Nike Free Run Shoes
  • nike free run 5.0 women
  • KD Shoes
  • Kyrie Irving Shoes
  • Kevin Durant Shoes
  • KD Shoes
  • Kobe Shoes
  • Kobe Shoes
  • Adidas Wings
  • Kobe Bryant Shoes
  • Porsche Design Adidas
  • Cheap Kobe Shoes
  • KD 6
  • Cheap Westbrook Shoes
  • Kevin Durant Shoes
  • Adidas Porsche Shoes
  • Cheap Lebron James Shoes
  • Kevin Durant Shoes
  • Herve Leger Outlet
  • Lebron James Shoes
  • Adidas Porsche Design Bounce
  • Nike Lebron Shoes
  • Coach Outlet
  • nba jerseys for sale
  • louis vuitton bags
  • Air Jordan 29
  • Nike Lebron Shoes
  • Nike Kobe Shoes
  • Cheap Kobe Shoes
  • Cheap KD Shoes
  • KD 6
  • Utah Jazz Jerseys
  • Philadelphia 76ers Jerseys
  • Air Jordan Shoes
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Cheap Lebron Shoes
  • Lebron New Shoes
  • James Shoes
  • Cheap Lebron 11
  • Lebron James Shoes
  • KD 7
  • Adidas Rose Shoes
  • Rose 5
  • NIke KD 7
  • irving shoes
  • KD Shoes
  • Kobe 9
  • Air Max 95
  • Air Max 2014
  • Nike Free 3.0
  • Nike Free Run 3
  • lebron shoes for sale
  • kobe 2014
  • Cheap Lebron James Shoes
  • Kobe Jerseys
  • Kevin Durant Jerseys
  • Jordan Jerseys
  • Cheap Griffin Shoes
  • Jordan Westbrook Shoes
  • Kobe Jersey
  • Lebron Jersey
  • Supra Online
  • Supra Shoes
  • Kyrie 1
  • Irving Shoes
  • Kyrie Shoes
  • Nike Kyrie 1
  • KD Shoes 2015
  • Kobe Shoes 2015
  • Kobe Shoes 2015
  • Kevin Durant Shoes
  • Nike KD Shoes
  • Nike Kobe Shoes
  • Nike Kobe Shoes
  • Adidas Jeremy Scott
  • Adidas Jeremy Scott
  • KD Shoes
  • Adidas Springblade Shoes
  • Kevin Durant Shoes
  • nba jerseys 2015
  • Porsche Design Shoes
  • KD 6
  • KD Shoes Sale
  • Lebron James Shoes
  • Lebron James Shoes
  • Cheap KD Basketball Shoes
  • Herve Leger Bandage Dress
  • Adidas Porsche Bounce Shoes
  • Cheap Lebron Shoes
  • Cheap Coach Handbags
  • Louis Vuitton Bags Women
  • louis vuitton outlet
  • Kobe Shoes
  • Cheap Jordan Shoes
  • Lebron Shoes
  • Lebron Shoes Sale
  • Kobe Shoes Sale
  • Kobe Bryant Shoes
  • Lebron James Shoes
  • KD 6 Shoes
  • Boston Celtics Jerseys
  • New Orleans Pelicans Jerseys
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Lebron James Shoes
  • Lebron 12
  • Cheap Lebron Shoes
  • Lebron Basketball Shoes
  • Cheap Lebron Shoes
  • D Rose Shoes
  • Rose 5.0
  • KD Shoes
  • kyrie irving shoes
  • Nike Air Max Shoes
  • Nike Air Max
  • Nike Free 5.0
  • Nike Free Womens
  • nike lebron 12
  • kobe shoes 2014
  • Cheap Lebron Shoes
  • KD 7 EP
  • KD 2014
  • Kevin Durant Shoes
  • Lebron Jerseys
  • Lebron James Jerseys
  • Kobe Bryant Jersey
  • Kobe Jerseys For Sale
  • Kobe Jerseys Sale
  • KD Jerseys
  • Cheap Jordan Jerseys
  • Hyperdunk Griffin Shoes
  • Westbrook Shoes 2015
  • Nike Kobe Jersey
  • Lebron Jersey For Sale
  • Nike Supra
  • Supra Shoes
  • Kyrie 1
  • nike free run 5.0 women
  • nike free run women
  • Cheap Kyrie 1
  • Cheap Kyrie Shoes
  • Kyrie Shoes 2015
  • Adidas Shoes
  • Lebron Shoes
  • Porsche Design Shoes
  • Kobe 8
  • KD Shoes
  • Cheap Kevin Durant Shoes
  • Lebron Shoes
  • nba jerseys 2014
  • kd Shoes nba
  • Herve Leger Bandage Dress
  • Nike Lebron 11
  • louis vuitton sale
  • Kobe Bryant Shoes
  • Air Jordan Shoes
  • Cheap Lebron James Shoes
  • Kobe Shoes Sale
  • Lebron Shoes
  • Miami Heat Jerseys
  • Los Angeles Lakers Jerseys
  • kd 6
  • kd 7
  • kobe 9
  • Westbrook Shoes Sale
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Cheap Lebron Shoes
  • Lebron James Shoes
  • Lebron James Shoes Sale
  • Lebron James Jerseys
  • Cheap Rose Shoes
  • Rose 5 Shoes
  • Nike Free 6.0
  • Nike Free Sale
  • Kyrie Shoes Sale
  • KD Shoes
  • Air Max 2014
  • Air Max 90
  • cheap lebron shoes
  • lebron shoes
  • Lebron James Jersey
  • Lebron Shoes
  • Cheap KD Jerseys
  • Kevin Durant Jersey For Sale
  • Kobe Shoes
  • Jordan Jersey sale
  • Jordan Blake Griffin Shoes
  • Russell Westbrook Shoes Sale
  • official supra shoes
  • Porsche Design Shoes
  • Cheap Jeremy Scott Wings
  • Kobe Shoes sale
  • Lebron Shoes
  • Herve Leger Sale
  • nba jerseys sale
  • Coach Wallets
  • cheap louis vuitton handbags
  • Air Jordan
  • Nike Lebron Shoes Sale
  • Kobe 9
  • Kyrie 1
  • Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving Shoes
  • Irving Shoes
  • nike free run 5.0 men
  • nike free shoes on sale
  • Supra Shoes
  • LV Handbags Men
  • Kevin Durant Shoes
  • KD VI
  • Adidas Shoes
  • San Antonio Spurs Jerseys
  • Chicago Bulls Jerseys
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Kevin Durant Shoes
  • Lebron Shoes Sale
  • Lebron Shoes 2015
  • Lebron 12
  • Lebron James Shoes
  • Rose New Shoes
  • Rose Shoes 2015
  • Lebron Shoes 2015
  • Lebron 12
  • Lebron Jerseys sale
  • Nike kyrie shoes
  • Adidas Derrick Rose
  • Adidas Store
  • Adidas Shoes
  • Adidas Derrick Rose
  • lebron james shoes
  • Nike Kyrie Shoes
  • Kyrie irving Shoes For Sale
  • Lebron James Jersey
  • Kobe Bryant Jerseys
  • Kobe Jerseys For Sale
  • Kobe Jerseys Sale
  • Supra Shoes
  • Russell Westbrook Shoes
  • Kobe Jersey Sale
  • Cleveland Cavaliers Lebron Jersey
  • OKC Jersey
  • Nike Lebron Shoes
  • Lebron James Basketball Shoes
  • Kevin Durant Shoes
  • Herve Leger Bandage
  • Griffin Shoes Sale
  • nba jerseys store
  • Lebron Shoes 2014
  • cheap louis vuitton bags
  • Cheap Kobe Jersey
  • Lebron Jersey 23
  • Jordan Shoes
  • official nba jerseys
  • NBA Stars Basketball Shoes
  • KD Shoes
  • Air Max Shoes 90
  • Air Max 95
  • KD 2014 Shoes
  • KD For Sale
  • Nike Shoes
  • Nike Free
  • Kyrie 1
  • Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving Shoes
  • Irving Shoes
  • Phoenix Suns Jerseys
  • Customized NBA Jerseys
  • Jordan Shoes
  • kd 6
  • kd 7
  • kobe 9
  • Bulls Jordan Jersey
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1