В декабре почти каждую статью хочется начать со слов: «под занавес уходящего года…» или «за прошедший год…». Но, немного поразмыслив, приходит осознание того, что завершающийся год совершенно ни в чем не виноват в данном случае. Многое из того, о чем мы будем сегодня вам рассказывать, появилось и в 2015 году, и в 2014 году, и в году текущем. Вот только популярность пришлась именно на этот, уходящий, год.
В веб-дизайне стили и тренды развиваются стремительно: летом появились, в конце осени почти стали устаревшими. Некоторые же визуальные эффекты остаются востребованными в течение не одного года. Если пройтись по страницам порталов с номинациями в веб-дизайне или по творческим копилкам и отфильтровать в поиске работы только за 2017 год, то можно увидеть очень огромное количество графических спецэффектов, что применялись к изображениям и фотографиям. И это несмотря на общий стиль дизайна, цветовую палитру, тематику. О некоторых интересных фотоэффектах мы рассказывали в течение года в нашем блоге. Но о некоторых из них подробно рассказать очень сложно. Сложно, потому как и работать с ними непросто. Именно поэтому умельцы создают готовые Action (действия), с которыми гораздо проще творить, которые удобнее настроить дополнительно и изменить изображение так, как необходимо веб-мастеру.
Вот сегодня мы и подобрали лучшие Photoshop Actions, которые стали популярными в 2017 году, и эффекты, которые не устареют даже в будущем 2018 году.
Установка Actions
Начнем с того, что все Actions требуют для работы английскую версию Photoshop. Поэтому, если у вас русская версия, то перейдите в Редактирование -> Настройки -> Интерфейс и выберите язык текста – English. Перезагрузить приложение.
Второй момент – сами actions. Практически все они платные. Но, как мы знаем, интернет полон сюрпризов, поэтому найти можно и в бесплатном варианте. Для этого достаточно «погуглить» и на первой станице поиска появится необходимое. Подберите удобный для вас вариант и можно использовать. Размышлять на тему, «хорошо или плохо» такое поведение – мы не станем. Каждый решит сам – покупать или искать в интернете.
Следующий момент – каждый action представляет собой папочку с файлами. Среди них вы найдете файл с расширением .ATN, кисточки .ABR, узоры (текстуры) .PAT. Перед работой с Действием, сначала установите в Photoshop все эти файлы, а затем уже приступайте к творению.
И разумеется, что преобразовывать в Actions можно и фотографии, и графические изображения, надписи, логотипы и многое иное.
Graphic River Dust (Пыль)
Наверное, это самый популярный фотоэффект в текущем году, который применяется в любом виде маркетинга и дизайна. Найти сферу творчества, где бы этот эффект Пыли не использовался – сложно. Отличительной особенностью данного Action является простота и быстрота, а также возможность из одного варианта Пыли создать еще и эффект Двойной экспозиции. Да, вот так вот, даже сразу два эффекта в одном действии.
Мы взяли самого обычного совенка, вырезали его на новый слой и залили красным цветом. Новому слою обязательно даем название «brush». Открываем панель Actions, загружаем из папочки и видим, что их два вида. Первый – упрощенный. Он работает по одному фокус-центру. Второй более – сложный и насыщенный. Какой выбирать вам? Попробуйте оба.
Выбираем активный слой Background, выбираем action Dust Emitters и нажимаем Play. Рано или поздно вас попросят выбрать место первого фокуса для расположения источника брызгов и мазков. Переместите кружочек в нужное вам месте и нажмите Enter.
Теперь предстоит выбрать пять разных цветовых оттенков для созданных мазков. Цвета, в принципе, можно выбрать любые, так как затем все можно будет изменить.. Если вы уже знаете, что хотите увидеть на выходе, то выбираете ожидаемые цвета сразу. Отметим, что когда вы выбираете любой по счету цвет, вы увидите на изображении, где он будет применен.
Затем ждете, ждете, ждете и выбираете второй фокус и еще пять цветов. В завершении вам необходимо будет на маске прорисовать кисточкой (она будет активна) детали вашего объекта.
На панели слоев все этапы и части эффекты сгруппированы в папки, поэтому вкл/выкл глазик, можно увидеть, что за что отвечает. Мы немного уже поколдовали и вот что получилось в итоге.
Верхние облака мы наложили поверх мазков категории Dust Set 1. Выделите слой с цветом, перейдите File -> Place Embedded и выберите подходящую картинку. Таким образом, она появится в виде смарт-объекта и еще можно расширять, уменьшать. Стиль наложения – Luminosity (яркость). Можете поиграться и с другими режимами, эффект везде будет разный. Выделите этот слой и выберите Create clipping Mask (Создание обтравочной маски).
В случае необходимости какие-то мазки Пыли (папки) можно и вообще отключить…
Затем аналогично можно добавить внизу облака и лес в папках Dust Sets 3 и Dust Set 1. Если появляется граница этих изображений, то создайте маску к данному изображению и мягкой кисточкой подотрите немного.
Двойная экспозиция настраивается непосредственно в папке Dust аналогичным образом, добавляя картинку и превращая её в обтравочную маску.
Можно дополнительно поиграться с кривыми, цвето-тоном, контрастом в целом. Отключить эффекты или настроить частички пыли в папке Dust Particles по цвету или светимости.
Важно: многие Action в сегодняшнем материале будут требовать выделения объекта и отделения его он фона. Поэтому не исключено, что когда тот или иной эффект будет готов, картинка будет выглядеть грубоватой, а четкий край выделенного объекта будет виден сквозь пятна, мазки, текстуры. Для того чтобы смягчить края, возьмите мягкий ластик или мягкую кисточку, выберите нажим меньше 50% (подберите по ситуации) и пройдитесь ими по краю объекта. Сделать это можно либо по слою с самим объектом, либо по маске противоположным цветом (закрашивая тем самым грубый край).
Glitch x10
Данный Action позволяет превратить фотографию в изображение в стиле футуристического «глюка». Это когда при передаче изображений на телевизор или проектор происходят сбои в изображении, разрывы. Таких эффектов много и в веб-дизайне они тоже находят себе применение.
Мы нашли подборку из десяти разных эффектов, для которых не требуется изменять изображение или пользоваться кисточками. Единственное «НО». Если вам нужен эффект только на объекте, придется его выделить, перенести на новый слой и с ним поработать отдельно от фона.
Glitch 9 Adrenaline
VHS Glitch
Glitch Style 7
Glitch Style 4
Glitch 8 Channels
Этот эффект особо интересный, поскольку вам придется вручную настраивать фильтры кристаллизации, размытия, волн, сдвигов, яркости, насыщенности, цветности и прочее. Мы использовали настройки по умолчанию.
Graphic River Geometry and Low Poly Art
Еще один невероятно красивый графический эффект. Мы уже рассказывали в нашем блоге об использовании полигонов и фигур в веб-дизайне. Мы показывали, как веб-мастера оформляют фотографии в виде полигонов. Но чтобы создать такое вручную потребуется много времени и не одна статья. Action может решить данную проблему в разы быстрее. Как обычно все этапы эффекта можно настроить отдельно.
Открываем нашего лисенка. Изображение должно быть от 2500 до 3000 px по ширине, поэтому при необходимости редактируем размер. Выделяем его и создаем на новом слое заливку объекта. Слой называем «brush».
В комплекте с action находится файл с кисточкой и узором, поэтому сначала устанавливаем их и затем выбираем активным слой Brush, нажимая Play для Действия.
По ходу выполнения вам предстоит выбрать размер кристаллизации. Выбирайте не очень крупные, чтобы детали объекта были лучше видны. После завершения появится возможность отредактировать цвета, градиенты, подсветки, линии и точки. Сложного ничего нет, поэтому подробно останавливаться не будем.
Особенность работы action в том, что объект должен быть выбран вами четким. То есть, например, у нас лис спрятал голову перед лапками, а потому, если не прорисовать глаза – непонятно, что за зверь вообще. На изображениях ниже показаны разные варианты прорисовки деталей.
Realistic Embroidery – Вышивка
Возможно, кто-то скажет, что изображения с вышивкой редко применяются в веб-дизайне. Отчасти это верно, но если создается тематический сайт или используется «ручной» дизайн, то небольшие изображения, созданные с помощью стежков или вышивки, не будут лишними. Разумеется, речь не идет о целых полотнах произведений искусства. Вышиваются обычно орнаменты, узоры, незатейливые витиеватые элементы.
Вот и данный Action позволяет создавать в два клика такое изображение. В наборе найдутся кисточки, стили и сам actions с готовым файлом PSD.
Отрываем входящий в состав PSD файл и заменяем текст на нужный нам или на чистом новом слоем создаем некий объект, орнамент, узор.
Устанавливаем action, кисти, стили и запускаем один из шести вариантов. Толстые стежки гладью, тонкие серебряные, золотые. Когда будет готово, достаточно кликнуть два раза по слою со смарт-объектом и в новом окне отредактировать само готовое «вышитое» изображение.
Сохраните и перейдите на оригинальный документ. Затем можно поместить свой фон или отключить его вообще, изменить цвет, яркость, уровни и прочее, и прочее. Иными словами, настроить вышивку на свой цвет и вкус.
Graphic River Christmas 2
И в завершении, разумеется, нельзя обойти стороной и еще один тематический action. Новогодний. Использовать обработанные фотографии также можно и для оформления лэндингов, промо-страниц, акций, фона страниц или секций для общего праздничного дизайна. И всего-то будет необходимо сделать несколько кликов.
Выбираем изображение рыжего песика и откроем его в Photoshop. По высоте оно должно быть 3000px, поэтому изменим его через меню Image -> Image Size. Установим сам action и кисточку из набора.
Теперь создаем новый слой, делаем выделение нашего песика и заливаем красным цветом. Слой называем «area».
После этого делаем активным слой-выделение и выбираем инструмент Crop Tool (Кадрирование). Зажимаем Alt и равномерно увеличиваем холст. Выберите кисточку и убедитесь что настройки установлены на 100% и для Opacity и для Flow.
Запускаем Action. После ожидания можно дополнительно отредактировать, увеличить пыльцу и снежинки, нажав трансформацию слоя Ctrl+T, изменить цвета и добавить самостоятельно фоновый градиент. В общем, творить и творить.
Завершение
Все представленные actions для Photoshop предлагают веб-дизайнерам и художникам легкий и быстрый способ наложить на готовые изображения или фотографии самые разные фотоэффекты. И да, все их можно было увидеть на самых разных сайтах и у нас в блоге в качестве примеров в течение всего года. Некоторые actions можно настраивать дополнительно, некоторые нет. Но эффекты все равно остаются самыми красивыми и необычными.
Сначала может показаться, что всего-то достаточно взять разные кисточки и набросать много пылинок, звездочек, снежинок на холст, затем сделать дымку и картинка готова. Но так ли легко это фантазировать и придумывать? Да и нужно ли тратить время самому, когда существуют готовые дополнения для Photoshop? Совсем другое дело, когда существует возможность готовое изображение дополнительно преобразить. В одном варианте что-то отключить, в другом – наложить дополнительно текстуры, в третьем – изменить цвета и размеры слоев. И мало кто из посетителей заметит или задумается: «а однотипно ли создавались базовые картинки».
Сказать, что все это ново – нельзя, но то, что в будущем году эффекты будут использоваться веб-дизайнерами и художниками – безусловно. А потому, творите, создавайте и встречайте рыжего песика! Впрочем, кое что есть еще, что просто нужно знать и уметь рисовать к Новому году и Рождеству (не важно какому). Но об этом мы еще расскажем…