Глассморфизм — новый тренд в дизайне
Относительно свежий тренд в дизайне интерфейсов—глассморфизм, о котором мы писали в статье о визуальных трендах 2021 года. Сегодня разберем его подробно.
Особенности глассморфизма:
Эффект прозрачного матового стекла
Вариации размытия и непрозрачности, создающие многослойный эффект
Тонкая светлая граница по краям в 1-2 px, имитирующая края стекла
Яркий фон или яркие элементы фона, подчеркивающие эффект размытия
Как и с любым другим трендом, важно не злоупотреблять глассморфизмом, используйте его аккуратно, чтобы он хорошо вписывался визуально. Избегайте переизбытка и следите, чтобы глассморфизм не вызывал затруднение и недопонимание у пользователя
При умеренном использовании этот эффект становится ярким акцентом, притягивающим внимание
Не применяйте эффект к кнопкам и переключателям, их предпочтительно делать контрастными.
Используйте глассморфизм, например, как фон карточек или уведомлений
При этом важно убедиться, что контент в карточке хорошо читается на таком фоне
Плашки, имитирующие стекло
Чтобы добиться реалистичности, обратите внимание, как это работает в реальном мире
Чем ближе плашка в стиле глассморфизма к фону, тем меньше размытие фона.
Удаленность стекла от фона влияет не только на силу размытия, но и на прозрачность. Чем ближе плашка к фону, тем больше цвета она пропускает и плашка достаточно прозрачна. Если же плашка далеко от фона, прозрачность уменьшается.
Для максимальной реалистичности можно добавить эффект шума
Все, как с обычным матовым стеклом.
Выбор фона играет важную роль в создании глассморфизма. Фон не может быть слишком простым, не контрастным или со множеством мелких деталей.
Для этой задачи выбирайте яркий контрастный фон без мелких деталей, на котором стеклянные плашки будут хорошо выделяться.
С точки зрения дизайна сделать эффект глассморфизма достаточно просто.
Вот два видео урока для Фигмы и Фотошопа
Как сделать разработчику
Раньше единственным способом реализации глассморфизма было размещение размытой копии фона между нужным блоком и оригинальным фоном. Такой способ нес за собой много проблем с позиционированием размытого фона при адаптивной верстке или при динамичном положении элемента.
С появлением свойства backdrop-filter реализация стала намного проще.
Backdrop-filter (blur) позволяет размывать только изображение, находящиеся ниже нужного блока. Если фон блока будет непрозрачен, эффект не будет заметен, поэтому чаще всего backdrop-filter используется в совокупности с полупрозрачным фоном и тенями.
Но нельзя полностью отказаться от старой реализации, новое свойство поддерживается еще не всеми браузерами. Пользователи FireFox, IE и некоторых мобильных браузеров не смогут увидеть эффекта размытости.
Выводы
Глассморфизм можно узнать по эффекту прозрачного матового стекла с тонкой границей по краям. Он максимально похож на настоящее матовое стекло
Используйте этот эффект аккуратно, он должен хорошо вписываться
Чтобы эффект выглядел реалистично, создавайте эффект глассморфизма с учетом того, как это работает в реальной жизни
Выбирайте яркий контрастный фон, избегайте простого не контрастного фона или фона с мелкими деталями
Дизайнеру создать эффект глассморфизма достаточно просто с помощью любого привычного инструмента
Разработчик с появлением нового свойства backdrop-filter может реализовать глассморфизм в пару кликов. Но не все браузеры поддерживают этот эффект.
1. С чего начать
Вопреки распространенному мнению, вам не нужна студия или какое-то особенное место для того, чтобы работать с предметной фотографией. Вы можете начинать с использования пространства дома, например, на столе у окна, вкупе с простым фоном и парой лампочек.
Данное направление сильно отличается от пейзажной или портретной фотографии, где у вас есть некий объект, например, модель или потрясающий вид на горы, что предполагает множество переменных, зато творческое содержание тут прямо перед вами.
В случае с предметной съемкой, переменных куда меньше, и вы как фотограф полностью контролируете ситуацию, и в том числе объект, но вам нужно мыслить исключительно творчески, чтобы запечатлеть его интересным и привлекательным способом.
Делаем фотоколлажи реалистичными
Один источник естественного света
Чтобы придать снимку реалистичности, следите за источником света и пропорциями всех элементов входящих в композицию. Если деревья освещены солнечными лучами слева, значит, облака также должны иметь подсветку слева. Иначе мы получим два источника света, чего в живой природе пока не наблюдается.
Перспектива в пейзаже
Не забывайте о перспективе, она очень важна при создании пейзажо-коллажей. Если в композиции присутствует большая область неба, значит, облака должны иметь естественную, линейную перспективу, см. первое фото в статье. Кроме линейной перспективы, следует использовать и тональную (воздушную) перспективу, которая подчеркнет глубину композиции, придавая снимку реалистичности и художественности.
Отражения на водной поверхности
Если вы решили заменить небо в морском пейзаже, очень важно следить за отражениями новых облаков или других объектов, которые находятся вблизи водной поверхности. Они обязательно должны быть отражены в воде в той или иной степени, в зависимости от яркости этих элементов
Также следует обращать внимание на линию горизонта, которую создает водная гладь. Она не должна быть черезчур четкой
Вода, в большинстве случаев, должна быть немного темнее облаков.
Еще по данной теме:
Важное дополнение:
Если вы хотите передать макет вашему заказчику, то нет необходимости сохранять всё на компьютер и отправлять (это прошлый век). Проще поделиться ссылкой на ваш проект. Это можно сделать нажав на кнопку сверху, справа «Share» (1) и скопировав ссылку (2).
Также можно поделиться вашим проектом в режиме презентации. Для этого нажмите на иконку «Play», сверху, справа. Затем нажмите на кнопку «Share prototype» и скопируйте ссылку нажав на «Copy link»
P.S. В этой статье вы узнали о том, как сохранять файлы в Figma в различных форматах.
Хотите получить бонусный урок быстрому созданию дизайн макетов Landing Page в Figma? Жмите на эту ссылку и получите 24 раздела для прототипирования и дизайна Landing Page в Figma.
Автор статьи: Владимир Чернышов
Замена фона в фотошопе
Первым делом необходимо задействовать режим быстрой маски. Делается это при помощи нажатия клавиши Q. Теперь выберите жесткую кисть не очень большого, но и не очень маленького размера. Закрасьте ей всю птицу или тот объект, который выбрали вы.
Отдельно обратите внимание на параметры «Непрозрачность» и «Нажим». Около них должны стоять значения 100%. В противном случае в птичке могут образоваться своеобразные проплешины.
В процессе закрашивания выбранного объекта вы можете заехать за его края
Это можно легко исправить путем нажатия кнопки X. Основным цветом станет белый, в этот момент нужно убрать кистью маску за пределами контура объекта. Затем вернитесь к черному цвету нажатием клавиши X.
После закрашивания вновь нажмите клавишу Q. Ваша быстрая маска применится к объекту. В результате у вас получится выделение всего изображения, за исключением закрашенной части. Его необходимо инвертировать при помощи нажатия сочетания клавиш Shift+Ctrl+I. Или же выберите соответствующий пункт в меню «Выделение».
Как вы можете заметить, выделение далеко до совершенства. Поэтому в вышеупомянутом меню следует выбрать пункт «Уточнить край» или нажать сочетание клавиш Alt+Ctrl+R. Выскочит новое окошко, как на скриншоте ниже.
Теперь нужно добиться правильного выделения. Иначе изменить фон не получится, картинка не будет выглядеть привлекательно. Именно от работы с выскочившим окошком зависит дальнейшая судьба изображения. Поэтому давайте разберем все параметры поподробнее
В противном случае в птичке могут образоваться своеобразные проплешины.
В процессе закрашивания выбранного объекта вы можете заехать за его края. Это можно легко исправить путем нажатия кнопки X. Основным цветом станет белый, в этот момент нужно убрать кистью маску за пределами контура объекта. Затем вернитесь к черному цвету нажатием клавиши X.
После закрашивания вновь нажмите клавишу Q. Ваша быстрая маска применится к объекту. В результате у вас получится выделение всего изображения, за исключением закрашенной части. Его необходимо инвертировать при помощи нажатия сочетания клавиш Shift+Ctrl+I. Или же выберите соответствующий пункт в меню «Выделение».
Как вы можете заметить, выделение далеко до совершенства. Поэтому в вышеупомянутом меню следует выбрать пункт «Уточнить край» или нажать сочетание клавиш Alt+Ctrl+R. Выскочит новое окошко, как на скриншоте ниже.
Теперь нужно добиться правильного выделения. Иначе изменить фон не получится, картинка не будет выглядеть привлекательно. Именно от работы с выскочившим окошком зависит дальнейшая судьба изображения. Поэтому давайте разберем все параметры поподробнее.
В графе «Вид» выбирается фон, на котором просматривается выделение. По умолчанию это белый цвет. Но удобнее разглядывать выделенный объект на черном фоне. Выберите именно его.
Самым важным параметром является «Обнаружение краев». Он позволяет графическому редактору автоматически определять края объекта. Нельзя назвать работу этой настройки идеальной, но чаще всего она справляется со своей задачей вполне достойно. Для применения параметра установите галочку около пункта «Умный радиус». Что касается величины радиуса, то тут всё зависит от размеров изображения. Экспериментируйте.
Ещё вы можете поработать с настройками края. Изменить размер растушевки, увеличить сглаживание и произвести прочие действия. Обязательно увеличьте контрастность. Не до предела, а примерно на 50%.
Также включите параметр «Очистить цвета». Он позволит избавиться от артефактов на стыке объекта и фона. Также эта настройка позволит вывести объект на новый слой со слоем-маской, что очень удобно.
После применения настроек выделенный ранее объект помещается на новый слой с прозрачным фоном. Прежний фоновый слой остается, но в выключенном состоянии.
Теперь остается лишь скопировать вторую открытую картинку и вставить её в виде нового слоя, размещенного ниже основного. Или наоборот, скопировать нашу птичку и поместить её на вторую фотографию. Результат будет один, если забыть о разных разрешениях.
2. Выбор объекта
Выбор объекта для съемки полностью зависит от вас. Посмотрите дома, может, вы сможете для начала найти что-нибудь простое, но интересное. Пожалуйста, не думайте, что вам обязательно нужно снимать фрукты или цветочки просто потому, что все так делают, мыслите нестандартно, не будучи при этом чрезмерно амбициозны.
Если, пока вы гуляете, что-то привлекло ваш взгляд, заберите эту вещь домой (не крадите!), или просто сделайте себе заметку, что стоит попытаться сфотографировать это в контексте натюрморта. Постарайтесь поначалу избегать отражающих поверхностей типа стекла или металла, поскольку с ними крайне сложно работать в отношении освещения. Когда вы освоите кадры с одним объектом, попробуйте совместить его с чем-то, скомбинировать объекты контрастирующих форм, цветов, текстур, и посмотрите, что из этого получится.
Экспорт в формате SVG
Получить бесплатно 24 раздела landing page для figma
SVG — это векторный формат изображений. Векторный формат отличается от растрового, тем, что в нем нет пикселей. Если вы увеличите JPG или PNG, то будет появляться зернистость в виде пикселей. С форматом SVG этого не происходит.
В дальнейшем вы сможете редактировать эти изображения в других графических редакторах, таких как Adobe Illustrator, Inkscape, Affinity Designer, Inscape и других.
Формат SVG подходит, если нужно сохранить:
- Иконки.
- Простые фигуры созданные в Figma с помощью инструментов «Shape tools» (прямоугольники, круги, линии, многоугольники)
- Иллюстрации.
- Элементы созданные с помощью пера или карандаша в фигме.
Как сохранять в фигме в SVG:
Чтобы сохранить элементы из фигмы в формате SVG, выберите элемент. В правой панели нажмите + напротив «Export» и нажмите на кнопку экспорта. Выберите место для сохранения на рабочем столе или компьютере.
4. Штативы и углы
В зависимости от условий освещения, вам могут потребоваться или не потребоваться штатив и тросик. Я рекомендовал бы пользоваться ими, т.к. они позволят наблюдать и работать с сюжетом. Также благодаря этому набору вы сможете выбирать немного более длинную выдержку, чем обычно, чтобы установить узкую диафрагму – так ваше изображение будет в фокусе от переднего плана до фона, если вы того захотите.
Однако не позволяйте статичной камере задушить ваше творчество, то, что ваш фотоаппарат расположен в одинаковом положении всю съемку, быстро забывается. Меняйте углы и высоту, с которой снимаете. Иначе еще до того как вы это поймете, у вас будет целая коллекция кадров, снятых с одной точки с небольшими вариациями. Попробуйте снимать с уровня объекта или «с высоты птичьего полета», глядя на объект сверху вниз, но если вы двигаетесь вокруг – следите, чтобы ваша тень не попала на объект!
Меняем цвет
Далее необходимо будет осуществить еще одну довольно непростую операцию. Обе фотографии, составляющие теперь одну композицию, делались, само собой, при разном освещении, на разную аппаратуру и так далее, следовательно, и цвет у них тоже будет разным. Одно изображение может быть разительно темнее или светлее другого, фотографии могут сильно различаться по цветовым оттенкам – одно может быть, к примеру, синее, другое – желтее. Все это будет обязательно бросаться в глаза зрителям, и если вы не добиваетесь эффекта неестественности коллажей специально, то придется потрудиться. По этой причине считаем необходимым рассказать о том, как заменить цвет фона в «Фотошопе». Для этого нужно будет последовательно создавать корректирующий слой, полностью или частично изменять цвет и яркость каждого изображения, спустя некоторое время вы сумеете добиться их правильного соотношения. Кстати говоря, на степень неестественности совмещения очень часто оказывает влияние небрежно созданная маска прозрачности главного слоя. По его контурам может «светиться» остаток старого фона, а мелкие и тонкие детали, к примеру, складки одежды или волосы, напротив, грубо обрезаются, создавая ощущение «ампутации». Все это можно исправить – маску прозрачности в любой момент вполсе реально дорисовать и изменить.
Изоляция
Под изоляцией я подразумеваю в первую очередь отбеливание фона. Очевидно, что в настоящий момент фон не белый, а скорее светло-серый. Качественный же изолят требует радикально белого фона.
Существует множество эффективных способов осветлить фон, разнящихся в основном степенью трудоёмкости. Предлагаемый мною подход отличается сравнительно невысокой сложностью при весьма достойном качестве изоляции.
Для начала следует дважды продублировать рабочий слой, получив в итоге три слоя – «Background», «Layer 1» и «Layer 1 copy». Затем создайте корректирующий слой Threshold (порог).
В окне настроек корректирующего слоя найдите ползунок, регулирующий уровень порога (значение по умолчанию 128), и сдвиньте его до упора вправо (255). Изображение почернело – теперь все области, не являющиеся абсолютно белыми, будут отображаться как чёрные.
Разумеется, это временная мера, призванная всего лишь сделать процесс изоляции более наглядным.
Теперь сделайте слой «Layer 1 copy» невидимым, кликнув на глазок слева от иконки слоя. Активируйте слой «Layer 1» и вызовите команду Levels (уровни), нажав Ctrl/Cmd+L. В окне настройки уровней имеется чёрно-белая гистограмма, а непосредственно под ней – три ползунка: чёрный, серый и белый. Нас интересует правый (белый) ползунок, который определяет уровень точки белого цвета. Нажмите на правый ползунок и начинайте аккуратно перемещать его влево, наблюдая, как тьма отступает и уже на настоящем белом фоне вырисовывается чёрный силуэт изолята. Не переусердствуйте в осветлении фона. Добейтесь лишь того, чтобы большая чёрная клякса нигде не соприкасалась с границами изображения. В моём примере я остановился на значении уровня белого в 225.
Кстати, вместо уровней можно было использовать кривые (Ctrl/Cmd+M) примерно с тем же результатом.
Если в отдельных областях фона остались посторонние чёрные точки и пятна, не имеющие отношения к основному объекту, закрасьте их белым цветом при помощи кисти. Теперь вы видите, что каждая не сдутая вовремя пылинка норовит обернуться жирной чёрной точкой. Кроме того, паразитные кляксы, требующие закрашивания, часто ютятся по углам изображения.
После очистки фона можно удалить корректирующий слой Threshold и полюбоваться на результаты своего труда (наведите курсор для сравнения).
Действительно, фон стал белоснежным, но, к сожалению, осветление затронуло не только фон, но и объект. Палочки корицы стали чересчур светлыми, а их цвет неестественным образом исказился в результате клиппинга (в первую очередь по красному каналу).
Для того чтобы восстановить пересвеченные области, воспользуемся нетронутым до сих пор слоем «Layer 1 copy». Сделайте слой видимым, и изображение вернётся к своему первоначальному неосветлённому виду. Затем добавьте к слою маску (Add Layer Mask), выберите её и инвертируйте, нажав Ctrl/Cmd+I. Слой снова сделался невидимым, будучи скрыт чёрной маской.
Если пересветы незначительны, можно просто пройтись по ним (а точнее по маске слоя) мягкой белой кистью, проявляя соответствующие участки слоя «Layer 1 copy». Однако если области, пострадавшие от клиппинга, велики, а предмет имеет сложную форму, придётся приложить чуть больше усилий.
Сперва нам необходимо выделить участки фотографии, требующие восстановления. Обычно я наскоро выделяю объект с помощью Quick Selection Tool (клавиша W), смягчаю границы выделения (Shift+F6), затем перехожу в режим быстрой маски (Q) и с помощью мягкой кисти аккуратно поправляю область выделения. Теперь можно отключить быструю маску, выбрать маску слоя и, убедившись, что цветом заднего плана является белый, нажать Del. С пересветами покончено и вы можете слить все слои воедино (Ctrl/Cmd+Shift+E).
Предвижу вопрос: а зачем, собственно, понадобился слой «Layer 1 copy», если можно было просто создать для слоя «Layer 1» белую маску и уже на ней чёрным цветом вытравить пересвеченные области, так, чтобы сквозь дырки в маске стал виден исходный слой «Background»? Пожалуйста. Это вполне допустимо. Но мне удобнее иметь восстанавливающий слой именно поверх осветлённого слоя, чтобы в случае необходимости я мог вставлять между ними различные дополнительные корректирующие слои, которые действуют сверху вниз, а не наоборот.
Конвертация RAW-файла
RAW-файлы с изолятами я редактирую в Adobe Camera Raw точно так же, как и любые другие фотографии. Для данного конкретного примера я использовал следующие параметры:
Вкладка Basic
Temperature: 7000.
Tint: -14.
Баланс белого я обычно устанавливаю вручную ещё во время съёмки, используя в качестве образца белую бумагу. Однако вы всегда можете поправить баланс белого в ACR с помощью White Balance Tool (I), указав на нейтральный участок фона.
Exposure: +0,30.
Contrast: +25.
Shadows: +33.
Whites: -25.
Clarity: +25.
Vibrance: +50.
Вкладка Detail
Sharpening: Amount 0.
Noise Reduction: Luminance 25; Luminance Detail 100; Luminance Contrast 100; Color 50; Color Detail 100.
Вкладка HSL / Grayscale
Hue: Oranges -10, Yellows -5.
Saturation: Oranges +25.
Luminance: Oranges -15.
Столь пристальное внимание именно оранжевому цвету я уделил, чтобы добиться естественного оттенка палочек корицы
Вкладка Lens Corrections
Profile: Enable Lens Profile Corrections; Distortion 0; Vignetting 100; Remove Chromatic Aberrations.
***
Сравните результат конвертации в Adobe Camera Raw с исходным изображением (наведите курсор для сравнения).
Теперь можно нажать «Open», чтобы открыть свежесконвертированную фотографию в Adobe Photoshop.
Правило третей
Это один из самых эффективных и популярных приемов в фотографии. Вы можете сделать свои работы значительно интереснее, просто используя эту технику
Смысл этого правила очень простой: наибольшее внимание привлекают объекты, расположенные на пересечении линий или на линиях, разделяющих кадр на три части в горизонтальной и вертикальной плоскости
Простое изображение становится более интересным, если объект расположен по правилу третей.
При съемке портретов правило третей используется, чтобы привлечь внимание к глазам. Для этого любой глаз или область между глазами должна располагаться по правилу третей
Как сохранить в Фигме в формате PDF
СКАЧАТЬ 24 раздела landing page для figma
PDF подходит для экспорта различных документов или презентаций.
Чтобы сохранить элементы из фигмы в формате PDF есть 2 варианта — экспортировать каждый элемент отдельно, либо создать 1 файл с множеством страниц. Рассмотрим каждый из этих вариантов по отдельности.
Экспорт из фигмы в PDF с множеством страниц.
Формат PDF подходит если вы хотите создать:
- Презентацию.
- Какой-либо документ в формате A4.
- Книгу.
- Брошюру.
- Маркетинг кит.
- Коммерческое предложение.
Пошаговая инструкция по созданию PDF файлов:
Для примера экспортируем несколько моих работ и создадим небольшое портфолио (подойдет для отправки заказчику).
- Чтобы сделать экспорт в PDF с множеством страниц нажмите на меню «гамбургер» слева, сверху.
- Выберите «File» —> «Export Frames to PDF» и сохраните на рабочий стол.
Важное примечание: в этом случае ничего не нужно выделять. Экспортируются все созданные вами ранее фреймы в вашем из вашего проекта
Пример созданного PDF файла в Figma
Экспорт в PDF выбранных элементов:
Если вы выберите какие-либо элементы и нажмете справа на иконку плюсика, то можете сохранить несколько файлов в PDF по отдельности. В этом случае не будет создан единый файл в виде книги или брошюры.
