Повторение — мать учения: еще раз о четких пикселах и мыльных изображениях

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

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

Итак, всё с самого начала и по-порядку.

1. Пиксельная сетка

Открываем Photoshop и сразу же настраиваем пиксельную сетку, она поможет контролировать попадание в пиксель, например, на этапе корректировки формы или в использовании инструмента «Перо», но об этом чуть  позже. В меню «Установки» (Редактировать > Установки), переходим в «Направляющие, сетка и фрагменты» и ставим такие настройки: Важно! В поле «Линия через каждые:» введите вручную цифру 1, даже если она уже там стоит.

Теперь у нас есть сетка с делением в 1 пиксель, которая включается/выключается клавишами Ctrl+Э.

2. Привязать к пикселам

Сравните эти два прямоугольника. Слева — мыльные края, справа — четкие.    Чтобы получить четкие края у прямоугольника нужно воспользоваться функцией привязка к пикселам. Берем инструмент «Прямоугольник» и ставим заветную галочку «Привязать к пикселам».  Теперь, пикселы от сетки никуда не денутся.   Такая же функция есть и у прямоугольника со скругленными углами, обязательно ее используйте. Чтобы пикселы встали точно по сетке, можно использовать «Заданный размер» (в параметрах инструмента) — эта функция есть у всех векторных форм кроме Многоугольника и Линии.

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

3. Ручками, ручками!

Возьмем, например, инструмент «Линия». Если вы нарисуете линию в один пиксель, то по толщине пикселы попадут в сетку, а вот по длине — вряд ли, еще хуже обстоят дела с толщиной в 2 и более пиксела. Итак, рисуем линию в 2 пиксела при масштабе изображения 100%. Получилось мыльное нечто. Поэтому мы максимально увеличиваем масштаб изображения — 3200%, включаем сетку (Ctrl+Э), берем инструмент «Выделение контура», жмем этим инструментом на линию и просто на клавиатуре стрелочками двигаем ее, пока она не попадет в пиксельную сетку.

4. Корректируем правильно

Теперь вы знаете как подгонять пикселы по сетке. Далее мы рассмотрим, как правильно корректировать размеры у векторных форм. Начнем с прямоугольника со скругленными углами. Например, мы решили, что он великоват и его нужно уменьшить. Мы берем инструмент «Перемещение» и обычной трансформацией уменьшаем его и получаем вот такое безобразие.Чтобы такого не происходило лучше производить манипуляции с подобной формой инструментом «Стрелка». Мы сейчас уменьшим прямоугольник на 7 пикселей по ширине и по высоте. Делать это удобнее при масштабе 100%, если форма крупная как наш прямоугольник, либо – 3200%, если форма мелкая, например, как в пиксельной иконке. Сначала выбираем нужные нам точки по вертикали с любой стороны, и клавишей на клавиатуре сдвигаем точки вправо на 7 пикселей. Затем, то же самое проделываем с точками по горизонтали.

Таким способом удобно корректировать размер и у простого прямоугольника. А, например, круг или любую другую векторную фигуру лучше сначала трансформировать обычным способом при масштабе 3200%, чтобы было сразу видно пиксельную сетку, либо при масштабе 100%, а потом просто подогнать пикселы по сетке с помощью инструмента «Стрелка» при масштабе 3200%. Это уже нужно исходить из каждого конкретного случая.

При работе инструментом «Перо» пиксельная сетка так же является незаменимым помощником.

Итак, теперь вы знаете что нужно для того чтобы ваше изображение было четким и качественным. Вывод: любите пиксель и он ответит вам взаимностью:)

Надеюсь объяснила понято и подробно. А в следующем посте я расскажу, как правильно рисовать пиксельные иконки пользуясь всё той же сеткой, инструментом «Перо» и векторными формами.

 

Поделиться в соц. сетях

Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

7 Ответы to “Повторение — мать учения: еще раз о четких пикселах и мыльных изображениях”

  1. Vlad 23.10.2011 at 11:48 #

    Полезная информация, спасибо!

    • Анжела Хомутова 23.10.2011 at 11:55 #

      Пожалуйста! Рада помочь:)

      • Федор 29.03.2012 at 07:29 #

        Анжела, здравствуйте! Спасибо за урок. Вы можете еще поделиться знаниями по «мат. части» фотошопа.
        Интересует использование dodge tool & burn tool и color balance.
        Спасибо!

        • Анжела Хомутова 31.03.2012 at 21:49 #

          Здравствуйте, Фёдор! Может быть есть какие-то конкретные вопросы по этим инструментам? Задавайте! Чем смогу помогу:)

  2. Игорь 23.10.2011 at 16:16 #

    Хорошая тема
    Для самого стало настоящим открытием галочка «привязать к пикселам»

  3. Анна 01.11.2011 at 19:04 #

    Спасибо за пост, взяла на заметку и сегодня очень пригодилось!!! Анжел пиши, с нетерпением жду новых уроков!

    • Анжела Хомутова 01.11.2011 at 19:38 #

      Отлично, очень хорошо:) Пожалуйста!

Ответить на Игорь