Такова особенность всех продуктов Adobe – можно работать в них годами и десятилетиями, обновлять, изучать новые возможности и все равно полностью не знать возможностей того или иного приложения. В данном случае, Photoshop – не исключение. Кто-то из читателей нашего блога хорошо знаком с ним, кто-то только начинает познавать и раздумывать об удобстве работы именно в нем, об отличиях от других аналогичных программ и прочее, и прочее.
Но, тем не менее, в этом материале мы хотим рассказать о некоторых интересных возможностях Photoshop. Их можно назвать и лайфхаками, и секретами, даже просто интересными «фишками». Они несложны, но заметно упрощают работу с веб-дизайном и созданием макета сайта. Кроме того, каждый веб-дизайнер всегда еще чуть-чуть и просто художник, поскольку необходимо придумать и графические оформление, подобрать и отредактировать фоточки для фона, возможно, нарисовать полосочки или украшательства какие-нибудь самостоятельно. А значит, общие советы и для веб-мастеров, и для художников будут в некоторой степени интересны сразу и всем.
Мы не говорим о том, что вы на 100% узнаете нечто новое и суперсекретное. Вероятно, кто-то что-то уже знает. Но обновить такие знания, собрать их в одном месте – удобно и практично.
И ещё один момент в начале. В наших статьях по Photoshop мы частенько упоминали некоторые лайфхаки. Мы не будем здесь их повторять, поэтому, если вы еще не читали прошлые материалы, то, как раз есть повод это сделать.
Названия лайфхакам мы давать не будем, просто пронумеруем :)
Лайфхак №1
В веб-дизайне работа с фигурами – одна из основных. Создаете ли вы черно-белый макет или расставляете готовые кнопочки, карточки и прочие элементы. Но копировать фигуры нужно, так как не пять же раз подряд вручную создавать одно и то же. Представьте себе, что из фигур приходится создать геометрический рисунок или коллаж. Причем создать правильные рисунки, а может даже и схемы.
Обычно такое создают в Adobe Illustrator, но и в Photoshop тоже можно, чем он и универсален.
Создаем обычный Эллипс. Теперь зажимаем Ctrl+Alt+T, кликаем мышкой по эллипсу (не отжимая кнопки) и у нас создается копия данной фигуры на новом слое. Нажимаем Enter или галочку на верхней панели для завершения. Ничего особенного, просто копия.
Но теперь, если нажать Ctrl+Shift+Alt+T, то наш эллипс автоматически будет копироваться на новый слой, и при этом расстояние между каждыми из них будет то самое, что мы и задали сами изначально между первыми двумя фигурами. То есть все будет автоматически происходить на экране.
Это удобно, если создаются карточки для интернет-магазина или макетируется какое-то портфолио работ, ссылок, кнопок и прочее, и прочее.
Другой инверсный момент в том, что расстояние между фигурами может быть разным. Например, под углом.
Важно: Обязательно кликните мышкой по новой фигуре, не отжимая клавиши, чтобы образовался новый слой (если отпустили клавиши, слой не образуется). Пока вы не настроите первую копию фигуры (расстояние, размер, наклон и прочее), не нужно подтверждать завершение модификации.
И вот наш цветочек готов.
Всего-то два набора клавиш, а возможности поистине безграничны. Создаем прямоугольник. Зажимаем Ctrl+Alt+T, не отпуская кликаем по фигуре, и создаем слой. Отпускаем и модифицируем. Нажимаем Enter. Затем начинаем прожимать Ctrl+Shift+Alt+T и видим автоматическую трансформацию.
С учетом того, что каждая фигура у нас на отдельном слое, то и изменить её можно без каких-либо проблем. Вот и создали «зебру».
Лайфхак №2
Выделение объектов на слоях или части слоя всегда несет в себе некоторые проблемы. То копируется только часть слоя, то изображение не с того слоя или не все, что было выделено и прочее, и прочее. Проблем может быть много, тем более, если слоев много, если слои не были переименованы или сгруппированы по папкам. Ситуаций много и разных, но в любом случае в веб-дизайне или художественной иллюстрации – секреты выделения пригодятся всегда.
Итак, обратимся к нашему старинному макету Tajam. Слои уже рассортированы по папкам, но предположим, что как веб-дизайнеры мы получили уже чей-то макет, который требуется довести «до ума». Вот с ним и будем оперировать.
Выбираем инструмент выделение и выделяем некоторую часть контента. Нажимаем Ctrl+C. Обычно, если не выбран слой выделения, то появится системное уведомление об ошибке, что слой пуст и копировать нечего. Но, если нажать Ctrl+Shift+C, а затем обычное ctrl+V, то все, что мы выделили, будет автоматически объединено и скопировано на новый слой.
Затем выделенный фрагмент можно модифицировать при желании, но факт в том, что выделять сразу все то, что изображено на экране становится легче. Да, все, что есть на слое (изображения, текст, фигуры) будут растрированы и объединены на одном слое автоматически, а значит, по отдельности редактировать их уже не получится. Но, тем не менее, в некоторых случаях, данный механизм выделения и копирования может быть очень кстати.
Вообще, у выделения есть много техник работы, но об этом поговорим в следующий раз, дабы сейчас не получилась «каша в голове» и материал не был бы перегружен однотипностью.
Лайфхак №3
Совсем небольшой секрет того, как поработать со слоями. Хорошо, если слои все рассортированы, подписаны. С ними работать удобнее. А если слоев просто много и все имеют стандартное название Копия 3, Копия 45 и так далее... Разобраться, что и где – сложно.
В нашем примере есть много слоев с названиями брендов. Сами слои подписаны. Теперь на секунду представим, что мы хотим увидеть один слой. Один! Слой! Из множества!
Зажимаем Alt и кликаем мышкой по иконке глазика на панели слоев напротив нужного слоя. Все прочие слои скроются (отключатся, но не удаляются), а этот один – останется.
Аналогично кликает Alt+клик по слою и видимость слоев возвращается.
Лайфхак №4
Использование масок обычно считается делом художественным, но иногда и в веб-дизайне без них не обойтись. Более того, подсознательно пользователь Photoshop понимает, что маска является слоем, но что с ней делать, кроме как редактировать оригинальное изображение – мыслей мало.
Выберем слой с оверлеем сиреневым, добавим маску, перейдем на нее и мягкой кисточкой с черным цветом нарисуем что-то непонятное (сейчас неважно, что именно). Тонировка у нас удалится и останется подлежащий слой с деревьями. Все обычно.
Но теперь давайте зажмем Alt + клик по маске, и вуа-ля. Наш слой-маска стал активным, и мы можем делать с ним всё, что захотим. Нарисовать новые контуры, изображения, стереть что-то ластиком, выделить и трансформировать что-то, и прочая, и прочая. Иными словами, рисовать на маске точно так же, как на обычном слое.
Затем снова зажимаем Alt и кликаем по маске, и у нас возвращается видимость оригинала, но с изменениями маски. Можно применять также фильтры на слое-маски и добиться того, например, чтобы фигура была в оригинальном варианте размыта немного.
Лайфхак №5
Об инструменте Перо мы много разного уже рассказывали в нашем блоге и нужно теперь помнить, что в Photoshop СС 2018 появился очень крутой инструмент Перо кривизны, что облегчает работу с выделением или созданием контуров и объектов. НО!
Как всегда ситуации разные и версии самого Photoshop у многих читателей тоже разные, поэтому представим, что кроме стандартного инструмента Перо у нас в арсенале ничего нет. Но есть скриншот с интересным рисунком, часть которого хочется использовать. Ясное дело, что при увеличении, качество будет хуже некуда, а выделять Лассо тоже не у всех получится.
Увеличиваем изображение для удобства, выбираем Перо и начинаем расставлять точки и вести контур так, как требуется. Если точки расставить далеко друг от друга – они соединяться прямой, что в данном случае неуместно. Если на этой прямой поставить точку, то будет создаваться кривая между двумя соседними и тоже нужного контура не получится.
Смотрим на верхнюю панельку и видим небольшую шестеренку. Кликаем по ней и ставим галочку Просмотр. Теперь, если двигать Пером по холсту за курсором будет тянуться линия, показывающая, как и где пройдет линия контура. Таким образом, расставлять точки выделения можно реже и видеть, где они нужнее.
Кроме того, не забываем про сочетание ctrl+клик по точке, и можно будет её переместить на новое место.
Таким нехитрым способом мы обретаем больше контроля над кривыми Безье и получаем возможность более простой и легкой работы с векторным Пером в Photoshop.
Лайфхак №6
Цветность, подбор палитры, определение цветов – тем много, мыслей еще больше, а практики, во многих случаях, не хватает. И можно читать много статей, смотреть как работают веб-дизайнеры и художники, но когда мы решаемся сами что-то создать, появляется в мыслях некая пространственность, пустота… а с чего начать?
Так вот, представим снова, что мы увидели на изображении или сайте интересный цвет. Как обычно поступаем? Делаем скриншот, открываем в Photoshop и получаем нужный цвет. Это если профиль цвета нужный и цвет на скриншоте не изменится. Более того, приложения для скриншотов могут сжимать изображения, и цветность может измениться. Чуть-чуть, но измениться.
Можно получить доступ к цветам проще. Есть у нас запущенный Photoshop и, например, видео в МPC. Красочные витражи и орнаменты всегда прекрасны, где бы они не находились… Располагаем на экране рядом два окна, выбираем инструмент Пипетка. Кликаем пипеткой по холсту и, не отпуская кнопку мышки, тянем инструмент на другое окно, выбирая нужный цвет.
Внизу панели инструментов, там, где показаны цвета, можно будет увидеть, как происходит смена выбранных вами цветов. Затем остается найти нужный, отпустить кнопку мышки, выбрать Кисточку и нарисовать этим цветом требуемое. Цвет впоследствии можно сохранить в библиотеке. Аналогично с рабочего стола можно брать пипеткой цвета.
Лайфхак №7
Еще один на сегодня большой лайфхак или просто метод обработки изображений – называйте, как вам понравится, но факт в том, что пригодиться он может в любой момент. Речь идет о простом тонировании и выравнивании цвета. Представьте, вам заказчик дает набор фотографий, а они все разные, а на сайте, что у него есть, фотки затонированы или «отфильтрованы чем-то», и надо все это привести к единому виду. Ручная и тонкая работа с каждой фоткой – это отлично и это нужно, какой кропотливой она не казалось бы. Но иногда можно немножко схитрить.
Итак, у нас есть две разные фотографии с разными фильтрами. И мы хотим, чтобы фотография с чокобо выглядела почти как фотография с воином.
Делаем активной нашу птичку и переходим в Изображение -> Коррекция -> Подобрать цвет. Появляется необычное окошко, в котором нас интересует Статистика. Казалось бы, что здесь может быть особенного? Но попробуем в качестве Источника указать наше изображение с воином.
И вот что получается. Фильтр пересвета наложился на птичку. Поскольку изначально был выбран такой тип фильтра, то и птичка получилась засвеченной. Но это решается через маску и метод осветления и затемнения. Или выделением птички-оригинала и применением фильтра только к фону. Также и работой с режимами наложения, а мы подробно уже рассказывали, как убрать пересветы.
Таким способом можно менять фильтрацию и цветность любых изображений, фотографий. Важно: любые изображения – это хорошо, но только если композиции в целом одинаковые. То есть, если на фотографии-источнике есть четкое разделение неба, земли, объектов, то и фотография для тонировки тоже должна иметь ярко выраженное разделение. Иначе ничего толкового не получится. Например, мы подобрали пару леса и чокобо в лесу, и оба изображения приняли почти одинаковый вид, как и с воином.
Завершение
У нас в копилке припасено еще некоторое количество лайфхаков и секретов, некоторых техник по работе в Photoshop, которым посвящать отдельный большой материал попросту неуместно. Они небольшие, но практичные, а используют их веб-дизайнеры и художники непосредственно в процессе своей рутинной работы. Это мы с вами на экране мониторов видим красивые фотографии, завораживающие изображения, четкие графические рисунки и схемы. Но то, как это создавалось, какими способами, какие клавиши нажимались или фильтры применялись – мы не знаем. И знать, по факту, не можем, ибо способов создания «красивости» очень много.
Именно о таких моментах мы и рассказывали в этом материале. Что-то вы, может, и знаете, что-то нет, но как мы говорили выше, иметь под рукой копилку, записочку, промокашку – всегда удобно и не лишне.